HOME  /WordPress(応用)
 /子テーマの設定方法
2017年10月30日

子テーマの設定方法

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

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

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

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

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

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

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

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

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

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

/*
Template:twentytwelve
Theme Name:twentytwelve_child
*/

※1.Template:twentytwelveは、テンプレートはtwentytwelveを表している。

※2.Theme Name:twentytwelve_childは、テーマ名はtwentytwelve_childを表している。

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.上記で親テーマにある「style.css」を読み込んでいます。

※2.項番1の読み込みで「get_template_directory_uri()」を利用している点に注意してください。

 メモ

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

やりたい事 説明

親テーマのファイル

 

get_template_directory_uri()

例えば、
get_template_directory_uri().’/style.css’は、twentytwelveフォルダにある’/style.css’を指します。

子テーマのファイル

 

get_stylesheet_directory_uri()
例えば、
get_stylesheet_directory_uri().’/style.css’twentytwelve_childフォルダに’/style.css’を指します。

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

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

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

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

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

 メモ

※重要 プログラム開発で気を付ける事。

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

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

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

icon-pencil-square-o