当サイトはアフィリエイト広告を利用しています。
WordPressテーマをカスタマイズするときは「子テーマ」を使うのが基本です。
今回はそのWordPressの子テーマについて、作成方法や使い方などを解説します。
子テーマを知らずにカスタマイズすると後々苦労するので、WordPressを使うなら早い段階で子テーマについて知っておきましょう。
WordPressの子テーマとは
WordPressの子テーマとは、大元のテーマ（親テーマ）をカスタマイズするためのテーマのことです。
親テーマと子テーマの両方をインストールしたうえで子テーマを有効化すると、基本は親テーマのデザインのまま、子テーマに書いた部分だけデザインを変更できます。
たとえば、親テーマのデザインはヘッダーメニューの背景色が「ブルー」で、これを「グリーン」に変更したいとします。このとき子テーマを使えば、親テーマのstyle.cssから該当するコードを探して書き換えなくても、子テーマのstyle.cssに変更用のコードを追加するだけでやりたいことが実現できます。
WordPressの子テーマが必要な理由
テーマを一切カスタマイズしない場合は子テーマは不要ですが、少しでもカスタマイズする場合は子テーマが必要です。
それには以下のような理由があります。
- 親テーマをカスタマイズすると更新のたびにリセットされる
- エラーが発生したときに対処しやすい
親テーマをカスタマイズすると更新のたびにリセットされる
テーマを更新すると、今まで使っていた古い親テーマが削除されて新しい親テーマに置き換わるため、親テーマをカスタマイズしていた場合はその内容がリセットされます。
つまり、カスタマイズする前の状態に戻ってしまうということです。
私は最初子テーマを知らなくて、一生懸命親テーマをカスタマイズしていました。おかげでテーマの更新時にとんでもない絶望感を味わいました…。
一方子テーマは更新の影響を受けず、カスタマイズ内容はそのまま維持されます。
テーマをカスタマイズする場合に子テーマが必要な一番の理由は、このような問題があるからです。
エラーが発生したときに対処しやすい
テーマをカスタマイズするとエラーが発生することがあります。そんなとき子テーマを使っていれば、子テーマに書いた内容を削除するだけで問題を解決できます。
親テーマをカスタマイズすると、カスタマイズした箇所以外にもコードがたくさんあって、どこをどう直せば良いのかわからなくなったりします。やはりカスタマイズするときは子テーマを使うのがベストです。
主要テーマの子テーマダウンロードページ一覧
お使いのテーマによっては公式サイトで子テーマをダウンロードできます。
以下に主要テーマの子テーマダウンロードページをまとめましたので、該当するテーマをお使いの方はリンク先から子テーマをダウンロードしましょう。
WordPressの子テーマの作成方法
公式サイトで子テーマをダウンロードできない場合は、以下のいずれかの方法で作成します。
- プラグインで作成する
- 自分で作成する
方法1：プラグインで作成する
子テーマを作成できるプラグインはいくつかありますが、今回は使い方が簡単な「Child Theme Configurator」での子テーマの作成方法をご紹介します。
Child Theme Configuratorをインストール・有効化したら、「ツール」⇒「Child Themes」に移動し、「Select a Parent Theme」から親テーマを選択して「Analyze」ボタンをクリックします。
しばらくして「This theme appears OK to use as a Child theme.」というメッセージが表示されたら、子テーマを作成できます。表示されない場合は子テーマを作成できないので、中断して自分で作成する方法に切り替えましょう。
初期設定のまま「Create New Child Theme」ボタンをクリックします。
「外観」⇒「テーマ」に移動し、画面に「親テーマ名 Child」が追加されていれば、子テーマの作成は成功です。子テーマでカスタマイズしたい場合は、子テーマの「有効化」ボタンをクリックしましょう。
方法2：自分で作成する
子テーマを自分で作成する場合は、最終的に以下のようなファイルを作成します。
まずローカル環境に「親テーマのディレクトリ名-child」のような名前でフォルダを作成します。
「親テーマのディレクトリ名」とは、「外観」⇒「テーマ」から確認できるテーマ名ではなく、テーマファイルが保管されている場所の名前のことで、/ドメイン名/public_html/wp-content/themesディレクトリ直下で確認できるすべて小文字の文字列です。FTPソフトを使って確認してみてください。
FTPソフトについては以下の記事で詳しく解説しています。
メモ帳などのテキストエディタを開き、以下のようなコードを書いて最初に作成したフォルダの中に「style.css」の名前で保存します。
/* Theme Name: 子テーマの名前 Template: 親テーマのディレクトリ名 */
同じくテキストエディタで以下のようなコードを書き、フォルダの中に「function.php」の名前で保存します。これで子テーマの作成は完了です。
<?php
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'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
子テーマでカスタマイズを行うには、まず子テーマのフォルダを右クリック⇒「ZIPファイルに圧縮する」を選択してZIPファイルに圧縮します。
これでZIPファイルが作成されます。
「外観」⇒「テーマ」⇒「新規追加」⇒「テーマのアップロード」と進み、「ファイルを選択」からZIPファイルを選択して「今すぐインストール」をクリックします。
最後に「有効化」をクリックします。
WordPressの子テーマの使い方（カスタマイズ例）
それでは、子テーマを使ったカスタマイズの例をいくつかご紹介します。カスタマイズに使用したテーマは「Cocoon（コクーン）」です。
テーマのカスタマイズは「外観」⇒「テーマファイルエディター」の画面で行います。
なお、基本的なカスタマイズはすべて「style.css」で行います。今回ご紹介しているカスタマイズ用のコードも、すべてstyle.cssに書いています。
「function.php」は編集をミスると画面が真っ白になるなどの重大なエラーが発生することがあるので、初心者のうちは極力触らないようにしましょう。
フォントを変更する
全体のフォントを変更したいときは、body要素のfont-familyを変更します。
body {
font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
記事エリアの余白を変更する
記事エリアの余白を変更したいときは、entry-contentクラスの中にあるすべての要素のmargin-bottomを変更します。
body .entry-content > * {
margin-bottom: 5em;
}
見出しのデザインを変更する
見出しH2のデザインを変更したいときは、articleクラスの中のh2要素のプロパティを変更します。
.article h2 {
background-color: #555;
color: #fff;
}
ボックスデザインを追加する
文字を囲むボックスデザインを追加したいときは、まず投稿画面で「カスタムHTML」ブロックを追加し、以下のようなコードを書きます。
<div class="box1"> <p> ボックスで囲みたい内容を入力 </p> </div>
style.cssにて、box1クラスを作って必要なプロパティを指定します。またボックス内のp要素の余白をなくすために、box1クラスの中のp要素に対してmargin: 0を指定します。
.entry-content .box1 {
border-radius: 3px;
background-color: #f4f4f4;
box-shadow: 0 3px 4px rgba(0, 0, 0, .32);
padding: 15px;
}
.entry-content .box1 p {
margin: 0;
}
まとめ
今回は、WordPressの子テーマについて解説しました。
子テーマとは、大元のテーマ（親テーマ）をカスタマイズするためのテーマのことです。親テーマをカスタマイズすると、テーマの更新時にカスタマイズ内容がリセットされるなどの問題があるので、テーマをカスタマイズする場合は子テーマを使うのが基本です。
テーマ選びで悩んでいる方は、以下の記事もあわせてご覧ください。テーマの選び方やおすすめのテーマをご紹介しています。
当サイト「わぷふれ！」では、WordPressブログの始め方を初心者向けに解説しています。
これからWordPressブログを始めたいと思っている方は、以下の記事をぜひご覧ください。WordPressブログを始めるのに必要な知識や実際の手順などを図解やスクショを交えてわかりやすくまとめています。
