メディアを運用するには、アクセス数の増加や成約率の向上は、目標の一つ。それらの為に、サイトのデザインをカスタマイズするというところについては、皆さんが取り組まれていることかと思います。
カスタマイズ事例を調べたり、phpやcssの参考となるコードを調べる際、検索結果でよく「子テーマ」という単語を目にするのではないでしょうか。
そこで今回は、子テーマを自作・導入する方法についてご紹介いたします。
目次
子テーマを作る理由
子テーマを作る理由は、テーマをアップデートしても、カスタマイズ内容を保持できるからです。
通常、テーマファイルを直接カスタマイズすると、テーマのアップデートによって変更内容が上書きされてしまいます。テーマをアップデートしないという選択肢もありますが、推奨できるものではありません。
アップデートには、致命的なエラーや、セキュリティ対策も含まれているため、基本的には最新版に更新した方がベターなんですよね。
そこで、テーマの「カスタマイズ」と「アップデート」を両立するために、子テーマを作るわけです。
子テーマを作るメリット・デメリット
メリット
子テーマを作るメリットは、（親）テーマファイルに干渉せず、独自のカスタマイズを行える点です。
具体的には、
- 親テーマをアップデートしてもカスタマイズ内容が保持される
- 親テーマのファイルを直接編集する必要がない
- 問題発生時も親テーマを適用すれば元に戻る
ということですので、親テーマとは完全に切り離して考えることができます。
子テーマは、親テーマの記述の一部を上書きするだけのファイルともいえるので、内容は比較的シンプルになる傾向があります。そのため、編集するハードルも比較的低くなります。
デメリット
子テーマを作るデメリットは、作成・管理コストがかかる点です。
子テーマの作成にはある程度の知識が必要で、基本的には後述する手順を踏んで自前で用意するものです。
また、親テーマのバージョンアップによって編集が必要になるケースもあります。親テーマの更新時に何かしらの不具合が出た際は、子テーマも検証対象になるわけです。親と子の2つのテーマを読み込むことになるので、サイトが重たくなる懸念もあります。
子テーマを作る必要性の有無については、こちらの記事も参考にしてみてください。
2021/2/12 情報を更新いたしました。 WordPressでホームページを作成しようとされている方は色々調べられていることと思います。最近は初心者向けとして書かれている内容でも「子テーマの作り方」というものを目にするのではないでしょうか。子テーマを作らないと、テーマのアップデートの際にテンプ...
子テーマ制作に必要なものとは？
子テーマを自前で用意する場合、子テーマの要素となるファイルを先に作る必要があります。そこで利用するファイルは主に2つ。
- functions.php：WordPressに機能を追加する役割（プラグインのような機能）をもつ。子テーマにおいては親テーマのfunctions.phpにある記述は上書きし、ない記述は追加します。
- style.css：テーマのデザインスタイルを追加します。子テーマにおいては親テーマのstyle.cssにある記述は上書きし、ない記述は追加します。
これ以外にもファイルごとに細かくカスタマイズしたい場合は、header.phpやindex.phpなど、親テーマにおいて変更したいファイルを子テーマに作って記述を変更、追記していきますが、便宜上、基本的なカスタマイズに絞ってご紹介していきます。
自前で子テーマを用意する方法
自前で子テーマを用意する際にやることとしては、functions.phpで親テーマと子テーマを連携させ、親テーマをベースとした子テーマのデザインカスタマイズをしていくだけです。そのためにもまずは子テーマのファイルを組み立てていきます。
子テーマディレクトリの作成
最初に子テーマを作っていくにあたって、子テーマのフォルダを作っていきます。
フォルダの作り方は簡単。エクスプローラー画面を開き、何もない空間で右クリック。すると「新規作成」>「フォルダー」と表示できるので、新しいフォルダを作りましょう。
ちなみにフォルダ名は、分かれば何でもOKですが、後でファイルを探しやすいように「テーマ名-child」と表記するといいでしょう。たとえば、TCDテーマのOpinionを利用しているならば「Opinion-child」という感じです。
フォルダを新規で作成できたら、functions.phpとstyle.cssのファイルをそのフォルダの中に作っていきます。
style.cssの設定
次に子テーマのstyle.cssを設定します。エディタツール（メモ帳やterapad、Bracketsなど）を開き、以下のコードをコピー＆ペーストしてください。
/*
Theme Name:Opinion child
Theme URI:
Description:WordPressテーマ「Opinion」の自作子テーマです。
Template:
Author:Takashi Yamada
Author URI:http://tcd-theme.com/
Version:0.0.8
*/コードをコピー＆ペーストできたら、このコードをもとにテーマ用の記述に変更していきましょう。
ちなみにコードの内容を簡単に解説すると…
- Theme Name：子テーマのテーマ名を入力します。「親テーマ名+child」といった感じで自分が後で読んでもわかりやすい名前にしておきましょう。
- Theme URI：子テーマのURLを記載します。基本的に空欄でもOKです。
- Description：子テーマの役割や説明の注釈書き欄です。「親テーマ「〇〇」の子テーマです。」といった形で親テーマ名称がわかるように書いておくと、後で見返す際にいいかもしれません。
- Template：親テーマのフォルダ名を入力します。親テーマとの連携の際に記入必須な項目です。
- Author：テーマの作成者名を記述します。
- Author URI：テーマ作成者のURLを記載します。
- Version：子テーマのバージョン情報を入力します。親テーマと同一のバージョンを記載しておきましょう。
書ける内容はたくさんありますが、最低これくらいの情報だけでも記載しておくといいかもしれませんね。
なお、この中で間違いやすいのが「Template」の項目です。テンプレートと表記されているため、親テーマのテンプレート名を記載してしまいがちですが、ここで記入するのは親テーマの「フォルダ名」です。
テンプレート名を入力してしまうと、子テーマがきちんと呼び出されなくなってしまうので、入力する際はくれぐれも記載を誤らないようにしましょう。
ここまで入力できたら、「名前を付けて保存」。ファイルの種類を「すべてのファイル」にして「style.css」という名称で保存しましょう。
これでstyle.cssの準備は完了です。
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' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>今回の作業上、functions.phpにおいて、基本的にコードを書き換える部分はありません。
一応コードの内容も解説しておくと…
- add_action：以下の記述を反映させるために必要な記述です。
- 4行目のwp_enqueue_style：親テーマの「style.css」を読み込みます。
- 5行目のwp_enqueue_style：子テーマの「style.css」を読み込みます。
ここでは、4行目のstyle.cssの後に子テーマが読み込むよう設定するのがポイントです。こうすることで、親テーマのスタイルの後から、追加した子テーマのスタイルを読み込みます。
ここまで入力できたら、「名前を付けて保存」。ファイルの種類を「すべてのファイル」にして「functions.php」という名称で保存しましょう。
これで子テーマの完成です。次は子テーマをオンライン上にアップロードしていきます。
TCDテーマにおける子テーマのCSS反映について
TCDテーマでは、テーマごとにCSSの読み込みタイミングが異なるため、一般的な記述方法では子テーマのCSSが正しく反映されない場合がございます。
たとえば SERUMなどの人気テーマでは、子テーマの style.css が親テーマよりも先に読み込まれてしまい、本来のデザインが崩れる・意図しない表示になるといったケースが確認されています
そのため、SERUMでは以下のような記述が必要となります。
<?php
function theme_enqueue_styles() {
// 親テーマのstyle.cssを登録解除
wp_dequeue_style('main-style');
wp_deregister_style('main-style');
// 親テーマのstyle.cssを「main-style」として再登録
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style.css' );
// 子テーマのstyle.cssを登録、依存関係として親テーマのスタイルを指定
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('main-style') );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 ); // 念のため優先度を設定このように、TCDテーマではテーマごとに適切な記述が異なるため、インターネット上で紹介されているコードをそのまま適用しても、意図した表示にならない可能性がございます。
作った子テーマをアップロードするには？
子テーマをオンライン上にアップロードする方法は大きく2つの方法があります。
- WordPress管理画面からZIP形式の子テーマをアップロードする方法
- FTPソフトを使用して子テーマをアップロードする方法
このページでは、その中から「WordPress管理画面からZIP形式の子テーマをアップロードする方法」を例に、子テーマをアップロードしていきます。
WordPress管理画面からZIP形式の子テーマをアップロードする方法
「WordPress管理画面上からZIP形式の子テーマをアップロードする方法」では、プラグインを使った方法やFTPソフトのやり方と異なり、特別なソフトやツール等はいっさい使いません。やり方は簡単で、先ほど作った子テーマのフォルダを圧縮してZIP形式にするだけ。
まずは、子テーマとなるフォルダを右クリックで選択し、「圧縮」>「.zip」コマンドで圧縮します。
するとデスクトップ上にZIPファイルが出来上がるので、そのZIP形式で圧縮された子テーマを親テーマがアップロードされているWordPressの「外観」>「テーマ」画面より、テーマをアップロードするときと同じ方法でアップロードします。
テーマを有効化して、子テーマの編集画面に「この子テーマは親テーマ「○○（テーマ名）」のテンプレートを引き継ぎます」と表記されていれば、親テーマの読み込みが成功しています。
詳しくは、下記記事もあわせてご参照ください。
WordPressテーマのアップデート方法を解説します。 アップデートは、旧テーマを削除し、新しいテーマに置き換える作業になりますので、更新前には念の為バックアップを取るようにしましょう。バックアップの方法は下記よりご確認ください。 テーマのアップデートは、同じテーマを新しいバージョンに...
まとめ
今回は、子テーマを自作する方法についてご紹介しました。
子テーマの運用は、難しい印象があるかもしれませんが、一度作ってしまえば、親テーマのコードを追加・変更するよりも運用が楽です。今のサイトを自分らしく仕上げたいという方は、ぜひ使ってみてください。
なお、今回は「WordPress管理画面からZIP形式の子テーマをアップロードする方法」で子テーマを用意したわけですが、他にもプラグインを使うことでもっと手早く作れたり、FTPソフトでファイルを管理・運用することも可能です。取り組みやすい方法で子テーマを運用してみましょう。
WordPressプラグイン「One-Click Child Theme」で子テーマを作成・導入する方法:
子テーマをワンクリックで作り出すプラグイン「One-Click Child Theme」
FTPソフトでファイルをアップロードする方法:
子テーマ化についてはコチラの記事も是非参考にしてみてください。
2021/2/12 情報を更新いたしました。 WordPressでホームページを作成しようとされている方は色々調べられていることと思います。最近は初心者向けとして書かれている内容でも「子テーマの作り方」というものを目にするのではないでしょうか。子テーマを作らないと、テーマのアップデートの際にテンプ...
