WordPress(ワードプレス)のテーマファイルを編集する場合、子テーマを利用することでメンテナンス性が向上します。
ここではWordPressで子テーマを作成する方法を説明していきます。
(※追記)WordPressバージョン4.7から追加CSSという機能が備わりました。簡単なCSSの編集のみでしたら、子テーマを使わず追加CSSから設定を行うことができます。
(※注)子テーマを利用しても、親テーマのテンプレート・仕様が大幅にアップデートされた場合は、子テーマの再メンテナンスが必要になる場合があります。
【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress子テーマとは親テーマの機能を引き継いだ差分テーマ
今適用している親テーマのデザインや機能をそのまま引き継いだテーマのことです。子テーマを自分流にカスタマイズすることでWordPressをカスタマイズすることができます。
WordPressの子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。
適用している既存のテーマのファイルをそのままカスタマイズした場合、そのテーマをアップデートすると自分でカスタマイズした内容が全てリセットされてしまいます。
既存のテーマと独立して子テーマを作成しておくことで、親テーマをバージョンアップしても子テーマは影響を受けなくなるので、既存のテーマをカスタマイズする場合は子テーマの利用が推奨されています。
(※)本番環境のワードプレスのテーマをバージョンアップ・更新する際は、万一のためにバックアップを取得して元に戻せるようにしておきましょう。
WordPressのバックアップ 有名プラグインbackWPupの使い方
(補足)WordPress 4.7からリリースされた追加CSS機能
WordPressバージョン4.7から追加CSSという機能が備わりました。簡単なCSSの編集のみでしたら、子テーマを使わず追加CSSから設定を行うことができます。
追加CSSを利用するには、ワードプレスにログインした状態でカスタマイズボタンを押下します。
追加CSSを押下します。
CSS編集画面で任意のCSS設定を行うことができます。
また、この追加CSSで編集した内容はテーマのテンプレートを直接編集していないため、テーマが更新されても内容がクリアされることはありません。
ただし、ここで設定したCSSはテーマごとに設定が保存されているため、テーマを変更するとCSS設定はクリアされますので注意してください。
テンプレート(functions.phpや各種phpファイル)を変更する場合や、大規模なCSSカスタマイズ、独自のCSSファイルやJavascriptの読み込みをする場合に子テーマを利用する
といったような使い分け方をすると良いと思います。
なお、親テーマの追加CSSでCSS設定したあとで子テーマを作成した場合は、親テーマの追加CSSは引き継がれないので注意してください。
この場合は子テーマを有効化する前に追加CSSの内容を控えておき、子テーマを有効化後に改めてCSSの設定をしてください。
| 子テーマ | 追加CSS | |
|---|---|---|
| 用途 | 本格的にテーマカスタマイズしたい場合に向いている | 数行〜数十行の小規模なCSS設定のみで済む場合に向いている |
| CSSの追加編集 | ◯ | ◯ |
| テンプレート(xxx.php)の追加・編集 | ◯ | × |
| 難易度 | やや難しい | 簡単 |
| 更新方法 | ファイルを修正してFTPでファイルアップロード | Web上の管理画面で更新 |
| 注意点 | 子テーマとはいえ、親テーマのPHPファイルの仕様やバージョンが大幅に変わった場合、再度子テーマのPHPファイルなどを再メンテナンスしなければならない場合があります。 | 追加CSSはテーマごとに設定保持されているので、追加CSSを設定した後で親テーマ→子テーマに切り替えると一旦リセットされます。（事前にコピーして再設定する必要があります。） |
WordPressの子テーマの作成方法
子テーマの必要最小ファイル
子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下の図が子テーマの最小構成図です。
wordpress 子テーマの構成図
必要なフォルダ・ファイルは以下の通りです。
必要なフォルダ・ファイル
- 下記2ファイルを格納した子テーマ用フォルダ(ディレクトリ)
- style.css
- functions.php(※)
(※)fuctions.phpを使わなくても子テーマとして動作するのですが、親テーマのCSSを正しく継承するためにはfunctions.php が必要であるため実質ほぼ必須になります。
公式サイトから子テーマサンプルをダウンロードする
有名なテーマの場合は、「テーマ名 子テーマ」で検索すると、配布元から子テーマのサンプルファイルが配布されていたり、手順が載っている場合があります（配布されていない場合もあります）
まずは、「テーマ名 子テーマ」で検索してみましょう。
例. Lightningの子テーマ
子テーマのサンプルファイルがダウンロードできます。こちらを利用すればOKです。
自分で作る場合の最低限の子テーマ作成方法
ここではhabakiriというテーマを利用して1から子テーマを作成する手順を記載します（前述のlightningのようにサンプルをダウンロードして使う場合は本手順は不要です。）
以下は本記事作成時の環境です。
まずWordPressのthemesディレクトリに子テーマ用ディレクトリ「habakiri-child」を作成します。
子テーマディレクトリを作成する
FTPソフトがない方は下記よりFileZillaをインストールしておきましょう。
無料FTPツール FileZilla の使い方 Mac・Windows対応
次にhabakiri-childディレクトリの直下にstyle.cssとfunctions.phpの２つのファイルを新規作成します。
style.cssとfunctions.phpの２つのファイルを作成する
※Windowsをご利用の方で文字コードuft-8以外になっている場合はutf-8で作成してください。
現時点で下記のようになっていることを確認してください。
wordpress 子テーマの構成図
次にstyle.cssにテーマ名 (Theme Name)や親テーマのディレクトリ名(Template)を記載します。
|
1 2 3 4 5 |
@charset "utf-8"; /* Theme Name: habakiri-child Template: habakiri */ |
Theme Name（子テーマの名前。なんでも良いがここでは「habakiri-child」とします）
Template(親テーマのディレクトリ名「ここでは habakiri になります」
を記載してください。
そのほか、下記のように必要に応じて項目を追加することもできます。省略しても構いません。
|
1 2 3 4 5 6 7 8 |
@charset "utf-8"; /* Theme Name: habakiri-child Template: habakiri Description: ★ テーマの説明（なくてもOK） ★ Author: ★ テーマ作成者の名前（なくてもOK） ★ Version: ★ 子テーマバージョン（なくてもOK） ★ */ |
続けてfunctions.phpに親テーマのCSSを明示的に読み込む設定を行います。
親テーマがhabakiriの場合は以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php function habakiri_child_theme_setup() { class Habakiri extends Habakiri_Base_Functions { public function wp_enqueue_scripts() { wp_enqueue_style( get_template(), get_template_directory_uri() . '/style.min.css' ); parent::wp_enqueue_scripts(); } } } add_action( 'after_setup_theme', 'habakiri_child_theme_setup' ); |
(※)Habakiri 2.3.0 以降は自動的に Habakiri のスタイルシートが適用されるようになり、上記コードは必須ではなくなったようです。
なお、一般的にはfunctions.phpには以下のように記載します。(通常は下記をコピー&ペーストで大丈夫ですが、親テーマがstyle.min.cssを使っているなど名称が違う・複数のCSSを利用している場合など、親テーマによっては必要に応じて読み替えて設定する必要があります。)
|
1 2 3 4 5 6 7 8 9 10 |
<?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') ); } ?> |
詳細が下記にありますのでご確認ください。
WordPress Codex 日本語版
wp_enqueue_script()
これで子テーマの最低限の内容ができあがりました。
子テーマを有効にする
WordPressの管理者画面＞外観＞テーマから子テーマを有効にします。
子テーマを有効にする
トップページを見て親テーマと初期画面が同じであることを確認します。
子テーマ有効時の初期画面
子テーマで色々なカスタマイズを行う
ここからは自分のカスタマイズしたい内容に応じて自由に子テーマをカスタマイズしていきます。
style.cssに自分がカスタマイズしたいプロパティを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@charset "utf-8"; /* Theme Name: habakiri child Template: habakiri Description: ★ テーマの説明（なくてもOK） ★ Author: ★ テーマ作成者の名前（なくてもOK） ★ Version: ★ 子テーマバージョン（なくてもOK） ★ */ /* 以下にカスタマイズしたいスタイルを記載します。 */ h1{font-size:50px;} ... |
CSSだけでなく、親テーマのphpファイルを参考に自分の好きなようにカスタマイズしていくこともできます。
たとえば、footer.phpをカスタマイズしたいときは親テーマのfooter.phpを子テーマにコピーして、子テーマ内のfooter.phpをカスタマイズできます。
親テーマのファイルをコピーしてカスタマイズ
親テーマのファイルをコピーしてカスタマイズすることで、元に戻したい場合に親テーマのファイルを比較したり、差し替えたりすることで元に戻すことができます。逆にファイルを移動すると親テーマに元のファイルがなくなるため、元に戻したくなった時に戻すのが困難になる可能性があります。
そのほか子テーマでファイルを増やして独自のカスタム投稿タイプを作成したり、親テーマの既存のファイルをカスタマイズしたり、など自分の好きなようにカスタマイズできるのでぜひいろいろ試してみてください。
子テーマ利用時の注意点
子テーマは便利な機能ですが、親テーマの主要PHPファイル(header.phpやfooter.php、single.phpやpage.phpなど)を子テーマにコピーしてカスタマイズしすぎるとメンテナンス性が悪くなることがあるので注意が必要です。
たとえば親テーマのバージョンが1.0時代のfooter.phpを子テーマにコピーして利用した後、時間が経ち親テーマのバージョンが4.0になったとします。
この場合、他のテンプレートファイルはバージョン4.0時代のものだが、footer.phpだけバージョン1.0時代がベースになったものを利用していることになり、不具合が発生する場合があります。
そのため、子テーマとはいえ、カスタマイズ内容によっては、親テーマのバージョンが上がれば子テーマのメンテナンスが必要になる場合もあるので、注意しましょう。
親テーマを直接変更するとバージョンアップで消えてしまうのでテンプレートファイルの改変は子テーマの方が良いのですが、「テンプレートファイルの改変 = バージョンアップで新しい機能についていけなくて不具合を引き起こす可能性がある」ので、できるだけテンプレートでの改変をせずにアクションフックやフィルターフックで改変できるものはそちらで対応する事をおすすめします。
参考記事)子テーマでのカスタマイズ | Lightning公式サイトより引用
メンテナンス性をできるだけよくしようとすると親テーマの主要PHPファイルのコピーしてのカスタマイズはできるだけしないようにして、functions.phpなどでフックというWordPressの仕組みを利用してカスタマイズする方法があります。ただし、少し難易度が上がるのでここでは割愛します。
(参考記事)WordPress初心者開発者向け フィルターフックとアクションフック入門
まとめ
今回はWordPress子テーマとはなにか、子テーマの作成方法について説明しました。
親テーマを継承した子テーマを作成しておくことで、親テーマをバージョンアップしても子テーマは影響を受けなくなるので、テーマをカスタマイズする際に推奨されているやり方です。
子テーマを自分流にカスタマイズすることでWordPressをカスタマイズすることができます。
下記のサイトにもWordPressの子テーマの作り方などが記載されていますのでご興味ある方はご確認ください。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
今回は以上になります。最後までご覧いただきありがとうございました。
『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室
