WordPressテーマをカスタマイズするなら子テーマを作っておく
子テーマの作り方
【目 次】
【子テーマの作り方】
WordPressをカスタマイズしてサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。
「子テーマ」とは、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。
子テーマの作り方
子テーマは単独で動作するのではなく、親テーマと連動して機能します。そのため子テーマはカスタマイズをするソース（ファイル）だけで構成します。ただし、functions.php と style.css は親テーマと連動させるために必須となっています。
- functions.php
- style.css
これらのソースの記述内容は決まっているので準じて記述しなければなりません。
子テーマはPC上で作成しアップロード
子テーマの作成作業はPC上で行います。作業は比較的簡単で、知識のある方なら数分で完了するのではないでしょうか。そして、完成した子テーマは、WordPress管理画面（ダッシュボード）のテーマからインストール（アップロード）すれば利用できるようになります。
子テーマ作成手順と作業内容
子テーマは以下の手順で作業します。
【1.】子テーマフォルダを作成
【2.】Style.css を記述する
【3.】functions.php を記述する
【4.】子テーマフォルダを圧縮する
【5.】WordPressにアップロードする
■作業内容
【1.】Windowsパソコンでディスクトップ等に、子テーマフォルダを作成します。フォルダ名は XXXX-child とわかりやすい名前にします。
【2.】Style.css を記述します。メモ帳などのテキストエディタを使います。テキストエディタを開いたら下記のコードを記述もしくはコピー＆ペーストしてください。
/*
Theme Name:xxxxx child
Theme URI:
Description:WordPressテーマ「xxxxx」の自作子テーマです。
Template:XXXX
Author:xxxx
Author URI:https://xxxxx.com/
Version:0.0.8
*/
xxxx の部分を変更します。Template: と Author URI: は子テーマを採用するサイトの内容にあわせます。完了したら先ほど作成した子テーマフォルダに保存します。
スタイルシートを追記したい場合は、子テーマの カスタマイズ → 追加css で記述できます。
【3.】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' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
内容は変更する必要がないので、完了したら先ほど作成した子テーマフォルダに保存します。
※カスタマイズコードは子テーマを有効化し 外観 → テーマファイルエディター を使って追記します。
【4.】子テーマフォルダを圧縮する
WordPressにアップロードするために、子テーマーフォルダーを圧縮します。フォルダを右クリックし、送る → 圧縮（zip形式）フォルダ でディストップに圧縮ファイルが生成されます。
【5.】WordPressにアップロードする
WordPressにログインし 外観 → テーマ → 新しいテーマ → テーマのアップロードと進みます。
「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールまたは更新できます。」と表示されるので、ディストップの圧縮フォルダをアップロードして子テーマをインストール、有効化すれば使用できるようになります。
最終作業として、子テーマで表示されるか確認をします。ブラウザの新規タブを開くか、他のブラウザを開いて目的のURLで開きましょう。このときWordPressの管理画面を開いておけば、万一表示されない場合にもテーマを親手テーマに戻せることが可能なことが多いです。
■トラブルが発生したら
表示されない原因の多くに Style.css の記述ミスが挙げられます。例えば2バイト文字で記述したり、Template: を間違って記述したりでしょうか。
管理画面から親テーマに戻せるようなら、一度戻して、作成した子テーマフォルダをPCで修正しましょう。
表示はされるが崩れてしまう場合もあるようです。テーマが有料テーマや無料で配布されているテーマの場合は配布元のサイトで確認をしてください。
