AndroidやiOS、PCやネットのちょっとした情報めも

WordPressの子テーマの作り方

公開日 2015年6月8日更新日 2019年9月22日カテゴリー WordPress




まずはwp-content/themes以下に子テーマ用のディレクトリを作る。

ディレクトリ名に決まりはないがtwentyfifteenの子テーマを作成するなら、twentyfifteen-childという風に-childという接尾辞を付けることが推奨されている。

style.cssの子テーマ

子テーマを作成するうえで必須ファイルとなる子テーマ用style.cssを、作成した子テーマ用ディレクトリ内に作成し、twentyfifteenの子テーマを作成するならまず以下を記述。
/*
Template:twentyfifteen
Theme Name:twentyfifteen-child
*/

Template:親テーマのディレクトリ名
Theme Name:子テーマの名前
親テーマのディレクトリ名は大文字・小文字を区別するので注意。
他にも
Theme URI:子テーマのURI
Description:子テーマの説明
Author:子テーマの製作者
Version:子テーマのバージョン
などあるが最低限Template:とTheme Name:の内容記述があれば他はなくても大丈夫。

通常親テーマを読み込んでから子テーマを読み込むのですが、子テーマは親テーマをすべて上書きするので、子テーマに親テーマのstyle.cssを読み込ませる必要がある。

@import url(../twentyfifteen/style.css);

を追記すれば親テーマを読み込みますが、@importを使用するとブラウザの読み込み速度低下につながるので、この方法は推奨しません。

代わりに親テーマを読み込ませるにはfunctions.phpの子テーマを利用します。単純にfunctions.phpに以下を記述。

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

あとはカスタマイズしたい内容を記述し、Wordpressの管理画面メニューから「外観」→「テーマ」でtwentyfifteen-childのテーマを有効化すれば読み込まれる。

header.phpやfooter.php、single.phpなどのテンプレートファイルの子テーマ

テンプレートファイルは子テーマ作成に必須ではないのでカスタマイズをする場合のみ使用。
header.phpをカスタマイズするのであれば親テーマからheader.phpをコピーして、作成したディレクトリ内に貼り付け。

あとはカスタマイズしたい内容を追記する。

functions.phpでの子テーマ

function.phpは子テーマから先に読み込まれるので親テーマの内容を上書きしません。
なので、使用する場合は作成したディレクトリ内にfunctions.phpを作成し、新たに追加したい内容のみ記述。

タグ:
こちらの記事もオススメです
« 前の記事
次の記事 »

TOPへ
戻る