WordPressのテーマはサイトの外観デザインを簡単に変更することができる着せ替えです。
WordPressのテーマを使用してると、テーマの細かい部分のデザインが気になりだして自分でカスタマイズしたくなる事も多くなります。
そんなときに使用中のWordPressテーマに対して子テーマ作成して、子テーマからテーマデザインの変更をするとWordPressテーマのカスタマイズの時間短縮やテーマアップデートの影響を受けることなく安全にカスタマイズができるようになります。
子テーマはWordPressに重要です。子テーマがないWordPressテーマを使用してる場合は、子テーマの作り方を是非、理解しておきましょう。
WordPressの子テーマに必要なディレクトリとファイル
WordPressの子テーマを作るときは、1つのディレクトリ(フォルダ)を作成してから2つのファイルを作成します。
- 子テーマのディレクトリ
- style.css
- functions.php
子テーマのファイルを格納する「フォルダ」WordPressテーマのデザインを変更するときに使用する「style.css」WordPressの機能を追加する役割をしてる「functions.php」ファイルが基本的に子テーマを動作させるのに必要になるので、子テーマセットをさっそく作成していきます。
子テーマのディレクトリを作る
WordPressの子テーマの作成に必要な、子テーマディレクトリの作り方から始めます。
Macで作成する場合ですがマウス右クリックで「新規フォルダ」をクリック
そして子テーマディレクトリの名前は「親テーマ名-child」のようにchildをつけて親テーマに対しての子テーマだと理解しやすいようにするのが望ましいです。
今回の子テーマ作成の例では、親テーマは「Twenty Seventeen」を使用してるので子テーマディレクトリ名は「twentyseventeen-child」と空白を入れないで入力してますが、親テーマ名の部分は自分の使用してる親テーマ名に変更して入力してください。
そして子テーマディレクトリを決める時の注意点は、子テーマディレクトリに決める名前に空白を入れない事です、空白をいれてしまうとエラーが発生します。
子テーマディレクトリの配置場所はwp-content/themesに配置します。
ディレクトリ作成で決めたディレクトリ名がWordPressのテーマエディターとサーバーFTP、FTPソフトで見るディレクトリ構造で確認するときに表示されることになります。
style.cssファイルの作り方
WordPressの子テーマディレクトリを作ったら、次は子テーマのファイル「style.css」を作成して子テーマディレクトリに格納します。
子テーマにstyle.cssを作成するとサイトのデザインの変更のときに、作った子テーマのstyle.cssにcssコードを書いていくと親テーマのstyle.cssを継承して編集することができます。
WordPressの親テーマのstyle.cssを直接使用しないことでWordPressや使用テーマのアップデートがあったときに子テーマのstyle.cssに書いたcssがアップデートの影響を受けることなくデザインを維持できます。
Macで「テキストエディット」を開いて「新規書類」を選択
テキストエディットの新規書類にスタイルシートヘッダを書きます。
子テーマのstyle.cssの中にはスタイルシートヘッダと言って子テーマの情報をファイルの一番上に書く必要があります。
/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/
- Theme Name⇒子テーマのテーマ名を入力です。
- Template⇒親テーマのディレクトリ名(フォルダ名)を入力。
Templateについては、親テーマと作成する子テーマを連携させるために重要なことなので必ず記入が必要です。
Theme NameとTemplateの「twentyseventeen」は使用してる親テーマ名に変更して下さい。
スタイルシートヘッダを書いたらファイルで「保存」をクリック。
ファイル名を「style.css」にして保存します。
保存のときに、もしファイル拡張子の選択が出る場合は「cssを使用」を選択して保存します。
そして必須の子テーマのファイルはstyle.cssのみですがスタイルを正しくキューに入れるためにfunctions.phpも子テーマとして作成する必要があります。
functions.phpファイルの作り方
次はWordPressの子テーマ「functions.php」を作成して子テーマディレクトリに格納します。
子テーマの「functions.php」はwp enqueue script()を使用して親テーマと子テーマのスタイルシートをキューに入れます。以前は@import:を使用して親テーマのスタイルシートをインポートしてたようですが、現在は@import:は使いません。
style.cssの作り方と同じくMacの「テキストエディット」で「新規書類」を開きます。
テキストエディットの「新規書類」に下記の記述を書きます。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
そしてファイルを保存しますがファイル名を「functions.php」にしてから保存します。
子テーマのfunctions.phpの中で最初の行はPHPの開始タグ<?phpで始まります。
そしてadd_actionはWordPressに機能を追加するための宣言をしていて、子テーマのcssとJavaScript の読み込みをしてます。
- 4行目wp_enqueue_styleでは親テーマのcssの読み込みをします。
- 5行目wp_enqueue_styleは子テーマのstyle.cssの読み込みを親テーマのstyle.cssの後に実行してます。
WordPressの子テーマfunctions.phpで理解が必要なことは、親テーマのstyle.cssの後に子テーマのstyle.cssを読み込む依存関係の理解です。
functions.phpで子テーマのstyle.cssを読み込むときwp_enqueue()で上から順に読み込むので指定順を間違えないようにします。そうすることで子テーマの後から親テーマが読み込まれてしまい子テーマのcssが上書きされてしまうことがなくなります。
「依存関係」って難しい言い方ですが、先に読み込むスタイルシートと後から読み込むスタイルシートの順序を指定することなので、子テーマのfunctions.phpの作成は依存関係(読み込み順序)をしてる子テーマ作りと理解してください。
これでWordPressの子テーマに必要な「子テーマディレクトリ」と「style.css」「functions.php」の2ファイルが完成したので、子テーマディレクトリに作成したstyle.cssとfunctions.phpを入れてWordPressにアップロードする準備をします。
WordPressに子テーマをzip形式でアップロード
作成した子テーマをWordPressにアップロードして使えるようにします。
WordPressの子テーマディレクトリをzip形式にしてから、WordPressの管理画面の「テーマ」から作成した子テーマをアップロードします。
先ほど作成したstyle.cssとfunctions.phpの2つのファイルが作成した子テーマディレクトリの中に入ってることを確認してから子テーマディレクトリを右クリックして圧縮します。
zip形式で圧縮されたのを確認したらWordPressの管理画面を開きます。
そしてテーマ⇒新規追加⇒テーマのアップロード⇒ファイルを選択と進み、先ほど圧縮した子テーマのzipファイルをインストールします。
インストールが完了したら子テーマを有効化すると上記の画像のように子テーマが有効になってるのが確認できます。
子テーマ作成は自作なのでWordPressに子テーマを有効化しても子テーマ画像が表示されてませんが、作成した子テーマの画像を設定したい場合はスクリーンショットした画像をファイルにします。
子テーマと親テーマの区別をつけるためには必要なので設定したい場合は下記を参考にしてみてください。
有効化した子テーマの確認は「テーマの詳細」をクリックしても子テーマのアップロードが成功してるのが分かります。
最後にWordPress管理画面から「テーマエディター」に進んで子テーマの確認をすると親テーマ名-childの中にstyle.cssとfunctions.phpが子テーマとして使用できるようになったのも確認できます。
WordPressの子テーマを使用してカスタマイズを楽しんでみてください。
