ワードプレスで子テーマを作成する

子テーマって知っているだろうか? テンプレートをカスタマイズする際にバージョンアップで影響されないように、子テーマというものを作成します。


child-theme_image

Initializing...

子テーマは、親となるテンプレートファイル群と同じように、ワードプレスのテーマフォルダ(“/wp/wp-content/themes”)に作成したフォルダを指します。通常子テーマには、style.css,functions.phpおよびその他のphpファイル(修正の必要なもののみ)の3種類で構成されます。それでは以下順を追って説明していきます。

子テーマフォルダを作成する

子テーマフォルダは、前述したとおりワードプレスのテーマフォルダに作成します。フォルダ名は何でもかまいませんが、わかりやすくなるように”●●●●●●-child”のように親テーマフォルダ名に”-child”を付加した形になります。フォルダを作成する場合は、親テーマと同じアクセス件を付与してください。

子テーマフォルダ内のファイル構成

子テーマには以下の3種類のファイルで構成されます。

  • style.css(必須
  • functions.php(必須ではありませんが、いづれ必要になると思いますでの空ファイルで作っておきます)
  • その他のphpファイル(必要な場合のみ)

style.css

style.cssには、子テーマであることを示すヘッダーが必要なります。

ヘッダー形式

style.cssのヘッダーは、以下のような物になります。コピーして必要な部分を書き換えてください

/*
Theme Name: 子テーマ名
Theme URI: 親テーマのサポートページ
Template: 親テーマのフォルダー名
Description: 説明
Author: あなたの名前
Tags:
Version: 子テーマのバージョン情報
*/

この中で、TempleteTheme Nameは非常に重要となりますので、大文字小文字を間違わずに入力してください。

Templeteに指定するのは親のテンプレート名ではなく、フォルダ名となりますのでご注意を!
style.cssに記述する内容

ここも重要ですのでしっかりと覚えてください。style.cssに記述する内容は、通常のテーマを作る場合と同様で必要なスタイルを全部書きます。とはいっても通常は親テーマの一部のみの書き換えとなるはずですので、先頭に以下の行を追加し、子テーマのstyle.cssで親テーマのstyle.cssをインポートしてください。

@import url("../●●●/style.css");

ここをチェック!
使っているテンプレートによっては、子テーマのstyle.cssが読み込まれない場合があります。これは親テンプレートのheader.phpに、どこのstyle.cssを指定しているか確認してください。もしかすると

<link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/style.css” type=”text/css” />
のような記述がありませんか?
正しくは、
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/style.css” type=”text/css” />

です。 子テーマにheader.phpをコピーして該当部分を修正しましょう。

functions.php

ワードプレスの場合、自分独自のカスタム関数を記述しますが特に必要のない場合は空ファイルで構いません。ただし、次に説明するその他のphpファイル群とはふるまいが異なります。それは、functions.phpはまず親テーマのfunctions.phpが読み込まれていますので、ワードプレスのアクションやフック関数は親テーマに記述済みの場合、リムーブもしくは実行するプライオリティを考慮しなければなりません。

その他のphpファイル群

その他のphpファイル群は、例えばheader.php,single.php等の親テーマのphpファイルになりますが、こちらは新規に定義することになりますので、親テーマファイルをコピーしてから必要な部分を修正したファイルになります。

以上の3種類のファイルを、子テーマフォルダへ配置すると完成となります。

ここをチェック!

組み込んだfunctions.phpが動かない!って悩んでいるあなた。ファイル名functions.phpなので注意しましょう。

ワードプレスで子テーマを選択

ワードプレスに認識されると下図のようにテーマ選択時に作成した子テーマが表示されます。私の場合、テンプレートとしてBizVectorという無料のテンプレートの子テーマを作成しています。

画像を拡大

子テーマを認識された場合のテーマ選択画面

子テーマを認識しないもしくは正しく動作しない場合、以下の点を確認してください

  • style.cssのヘッダー部のTempleteに書くのは、親テーマ名ではなくフォルダ名で、大文字、小文字を区別して正しく記入されていること。
  • ヘッダーの記述タグ(Templete等)の次の半角のコロン(:)で空白も半角になっていること。
  • ワードプレスのマルチサイトを採用している場合は、ネットワーク管理者>ダッシュボード>テーマと選択し、子テーマが”ネットワークで有効”となっていること。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る