WordPressは非常に便利なアプリケーションです。
好きなデザインのテーマを選択し、そのソースコードをカスタマイズすることで自分好みのサイトを作成することができます。
ですがソースコードをいじっている中で、もし間違えたコードを打ってしまったとします。もとのコードがわからない場合は、修復ができなくなりせっかく作ってきたものが台無しになってしまう可能性があります。
また、テーマというものはちょくちょくバージョンアップを行います。バージョンアップをインストールすることでソースコードはリセットされてしまう為、また一から作っていく必要があります。
そんな被害を防ぐために、「子テーマ」というものを作成することにしました。
スポンサーリンク
子テーマの必要性
子テーマをつくることで元のテーマのソースコードを守ることができると言っても、具体的にどういうことかわからないと思います。僕もそうでした。
例えば「A」というテーマを使用していたとします。
Aのソースコードを変更すれば、もちろんそのカスタマイズ後のソースコードが適用されます。
しかし、子テーマ「A_child」を設定しておくことで「A_child」のソースコードをいじることでサイトのレイアウトを変更することができます。この時、もちろん「A」のソースコードは一切いじっていません。
イメージは以下のような感じです。
つまり、いじるのは子テーマのみ。基本的には親テーマの内容で表示され、子テーマでいじったところのみが変更されてサイトに反映されます。
親テーマがバージョンアップしても、実際にいじっている子テーマについてはそのまま使用するため、頑張ってカスタマイズしてきたソースコードは生き残るということです。
子テーマの作り方
作り方は非常に簡単です。おおまかな流れとしては
- 子テーマのフォルダを作成
- style.css ファイルの作成
- functions.php ファイルの作成
- ファイルをフォルダに追加
- 子テーマを有効にする
以上です。では実際にやってみましょう。
1.子テーマのフォルダを作成
まずはフォルダを作成します。
作成する場所は、親テーマのあるところと同じ階層です。
まずはレンタルしているサーバのサーバコントロールパネルを開きます。
サーバーのコントロールパネルはここから入ります。
コントロールパネルを開いたら、図のように「themes」フォルダを選択した状態で、フォルダを作成します。フォルダ名はなんでも構いませんが、僕はstinger8を使用しているため分かりやすいように「stinger8_child」としました。
2.「style.css」ファイルの作成
以下のようにファイルを作成します。
/*
Theme Name:stinger8_child
Template:stinger8
*/
これを「style.css」として保存しておきます。
みなさんが子テーマを作成するときは、「Theme Name」のところを任意の子テーマ名に、「Template」を使用する親テーマ名にしてください。
つまり、
今回の子テーマの名前は「stinger8_child」ですよ〜
その子テーマは「stinger8」をもとにしますよ〜
という宣言です。
ちなみに僕はコードを書くときはCotEditorを使用しています。非常に見やすくて使いやすいです。
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.作成した２つのファイルをフォルダに追加
２つのファイルを最初に作成した「stinger8_child」フォルダに追加します。
追加したいフォルダを選択し、アップロードをクリック。指定のファイルを選択しアップロードします。
（ちなみに、上画像でheader.phpファイルが一緒にありますが、これは僕のサイトでヘッダーの配置等をいじっているためです。header.phpなどのファイルも同様に子テーマのフォルダに追加し、ソースコードをいじることで、サイトに反映されるようになります。）
5.子テーマを有効にする
ここまで出来れば、ダッシュボードのテーマを選択するところで「stinger8_child」が出てきていると思いますので、有効にします。
きちんともとのテーマが反映していれば成功です。
あとは、子テーマのstyle.cssにソースコードを書き足していくことによって自由にカスタマイズすることができます。
参考になれば幸いです。
スポンサーリンク
コメント