子テーマの設定方法 | ホームNW研究所ホームNW研究所

子テーマの設定方法

旧サイトの子テーマの作り方は、親テーマのstyle.cssをそのままコピーして修正する方法で作成しました。

しかしこのやり方は「親テーマ」と「子テーマ」の分離があまり綺麗でありません。

そこで親テーマを「twentytwelve」子テーマを「twentytwelve_child」とする、スマートなやり方を下記に解説します。

1.子テーマの基本構造を作成する

2.子テーマに親のCSSを指定する

3.子テーマのアクティブ化

1.子テーマの基本構造を作成する

①子テーマフォルダ「twentytwelve_child」を新規に作成する。

※ファイル名は何でも良いですが、親テーマフォルダ名の後ろに「_child」を付けるのが良いと思います。

②twentytwelve_childフォルダの直下に「style.css」を新規に作成する。

そのファイルの先頭に下記コードを入れる。

/*
Template:twentytwelve
Theme Name:twentytwelve_child
*/

※1.Template:親テーマのフォルダー名を指定します。テンプレート名ではありません。

※2.Theme Name:子テーマのフォルダー名を指定します。

2.子テーマに親のCSSを読み込む方法

子テーマに親テーマのCSSを取り込む方法には2つの方法があります。

①親テーマのCSSをコピーして修正する(以前の方法)

②functions.phpで親テーマのCSSを指定する。

そこでここでは②の方法を解説します。

2-1.functions.phpで親テーマのCSSを読み込む方法

子テーマ直下に「functions.php」ファイルを作成します。

上記の「functions.php」の先頭に下記を記述します。

//親テーマのスタイルシートを読み込む
function theme_enqueue_styles(){
  wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css' );
} 
add_action('wp_enqueue_scripts', 'theme_enqueue_styles' );

※1.関数名「theme_enqueue_styles」は任意名称です。

※2.wp_enqueue_style()は、スタイルシートを読み込む関数で、これで親テーマにある「style.css」を子テーマに読み込んでいます。

※3.上記の読み込みで「get_template_directory_uri()」を利用している点に注意してください。

　メモ

親テーマと子テーマのファイルの読み込み関数の違い

やりたい事

説明

親テーマのファイル

get_template_directory_uri()

例えば、
get_template_directory_uri().’/style.css’は、親テーマにある「’/style.css’」を指します。

子テーマのファイル

get_stylesheet_directory_uri()
例えば、
get_stylesheet_directory_uri().’/style.css’は子テーマ（有効化されたもの）にある「’/style.css’」を指します。

3.子テーマのアクティブ化

テーマフォルダに「screenshot.jpg」または「screenshot.png」の名前で画像を登録すると、この画像が子テーマの画像になります。

以上の結果、子テーマの中のファイルは下記になります。

管理画面の「外観→テーマ」で、子テーマをアクティブ化します。

以上で、子テーマの設定が完了しましたので、以降は子テーマをベースにしたプログラム開発がスタートします。

　プログラム作成で気を付ける事※重要

①CSSは、親テーマのCSS→子テーマのCSSの順番で呼ばれます。
よって子テーマのCSSが優先されます。

②一方ファンクションは、子テーマのファンクション→親テーマのファンクションの順番で呼ばれます。
よって親テーマのファンクションが優先されます。
子テーマと親テーマに同一名のファンクションがある場合は、親テーマのファンクションをリムーブする処理が必要になります。

③一般プログラムは、子テーマに該当プログラムが無い場合は、親テーマのプログラムが利用されます。

icon-pencil-square-o