WordPress子テーマの作り方とCSS等が反映されない原因を解説

WordPress子テーマの作り方

WordPressのテーマをアップデートした時にカスタマイズした内容が元に戻って大変な思いをしたことはありませんか?

サイト運営に慣れてくると他の人たちと違いを出すためにテンプレートファイルやCSSをカスタマイズする機会が出てくると思いますが、そのままテーマファイルを修正するとテーマのアップデートで修正内容が消えてしまうので危険です。

WordPressの子テーマの機能を使えば修正内容が消える心配は一切無いので、カスタマイズをする場合は子テーマを利用しましょう。

スポンサーリンク

WordPressの子テーマとは?

WordPressの子テーマとは、親テーマの機能とスタイルを引き継ぎながら安全にWordPressのカスタマイズが行えるテーマのことです。

例えば、デザインを調整するときにCSSファイルの「style.css」を編集することがありますが、次のような定義があったとします。

pタグの定義

<p>タグの文字サイズが18px、文字色が黒という定義ですが、親テーマだけで文字色を赤に変えたい場合は次のように修正することが多いと思います。

親テーマで修正する場合

あるいは

前者は直接該当部分を変更し、後者はスタイルの上書き機能を利用してオリジナルの部分を残しつつ修正を加えています。

これらの方法でも文字色は赤に変わるのですが、使用中のテーマがバージョンアップするとファイルが上書きされるので修正内容が消えてしまいます。

これを回避するには子テーマを利用しましょう。

子テーマを使う場合

子テーマを使えば親テーマのファイルは触らずに、子テーマに変更したい内容を書くだけで反映されます。

何故なら、親テーマのファイルを読み込んだ後で子テーマのファイルを読み込むようになっているからです。

そのため、親テーマで定義されている内容を変更したり、新しい定義を追加したい時は子テーマを利用することを推奨します。

CSSファイルを例に挙げましたが、テンプレートファイルも同様です。

親テーマのテンプレートファイルにGoogleアドセンスのコードを貼り付けているような場合はテーマのアップデートで消えてしまうので注意してください。

WordPressの子テーマの作り方

子テーマの作り方について解説していきます。

手順通りに進めればそんなに難しくないと思います。

子テーマに用意するファイル

style.css 必須
functions.php 必須
各テンプレートファイル 任意

子テーマを作るために必須なのは「style.css」と「functions.php」です。

以前は「style.css」だけが必須とされていましたが、現在のWordPressの公式では「style.css」と「functions.php」の2ファイルが推奨されています。

各テンプレートファイルは、例えばヘッダー部分をカスタマイズしたい時はヘッダーのテンプレートにあたる「header.php」を用意します。

子テーマの作成

それでは早速子テーマを作成していきましょう。

子テーマのフォルダ

フォルダ名は何でも構いませんがWordPressの公式で推奨されている「(親テーマのフォルダ名)-child」の形にします。

子テーマのフォルダ名に空白を含めるとエラーが発生します。

今回はWordPressのテーマ「Twenty Seventeen」の子テーマを作成してみようと思います。

親テーマのフォルダ名はFTPソフトなどで「themes」フォルダの中を見ると確認出来ます。

親テーマのフォルダ名をFTPソフトで確認

「Twenty Seventeen」のフォルダ名は、「twentyseventeen」となっています。

そのため、子テーマのフォルダ名を「twentyseventeen-child」としました。

twentyseventeenの子テーマのフォルダを作成

この中に子テーマのファイルを入れていきます。

style.css

「style.css」はWordPressの子テーマ作成に必須のファイルです。

何故必須なのかと言うと、このファイルに親テーマがどれなのかを記述するからです。

「style.css」というファイルを作成したら、ファイルを開いて以下のようにコードを入力してください。

style.cssの入力例

1行目は文字コードの指定で、これを書いておくことで日本語の文字化けを防いでくれます。

コメント部分(/* から */ の間)には次の項目を入力します。

Template 親テーマのフォルダ名(必須
Theme Name 子テーマの名前(必須
Theme URI 子テーマのURI
Description 子テーマの説明
Author 子テーマの作者
Author URI 子テーマの作者URI
Version 子テーマのバージョン
License 子テーマのライセンス
License URI 子テーマのライセンスURI

入力が必須なのは「Template」と「Theme Name」の2つだけです。

functions.php

「style.css」はこのままでは子テーマの「style.css」しか読み込まれず、「親テーマのCSSが適用されない!」ということが起こってしまいます。

親テーマのファイルを読み込んだ後で子テーマのファイルを読み込むためにはwp_enqueue_script()を使います。

「functions.php」というファイルを作成したら、ファイルを開いて次のコードを入力してください。

functions.phpの入力例

これで親テーマ、子テーマの順番で「style.css」が読み込まれるようになります。

上級者向けの内容

「functions.php」はちょっと特殊で、子テーマの後に親テーマが読み込まれる仕組みになっています。

そのため、親テーマの処理を変更したい場合は子テーマの「functions.php」に以下の2つの処理が必要になります。

親テーマの処理を変更する手順
  1. 親テーマの変更したい関数を削除(remove)する
  2. 変更内容を反映させた関数を追加(add)する

親テーマの処理を変更するケースはあまり無いと思いますが、必要に迫られた場合はこちらのサイトを参考にしてみてください。

各テンプレートファイル

各テンプレートファイルは必要に応じて用意します。

テンプレートファイルは親テーマの後に子テーマが読み込まれるので、子テーマにファイルが用意されているとそちらが優先されます。

例えば、子テーマにカスタマイズした「header.php」を入れておくと親テーマの「header.php」ではなく、子テーマの「header.php」が読み込まれるようになります。

子テーマのテンプレートファイルは親テーマをコピーしてから内容を修正したものでOKです。

WordPressの子テーマをインストールする手順

ここまでの手順で必要なファイルが用意できました。

ワードプレスの子テーマ

子テーマフォルダをZIP形式で圧縮しましょう。

ワードプレスの子テーマを圧縮

私は圧縮ソフト「7-Zip」を使っていますがZIPファイルが作成できれば何でも構いません。

WordPressの子テーマをZIP圧縮

圧縮されたWordPressの子テーマが作成できました。

ZIP圧縮されたWordPressの子テーマ

作成したテーマを反映させるため、WordPressの管理画面に入って「外観 → 新規追加」とクリックします。

WordPressの子テーマを反映させる

「テーマを追加」画面が表示されるので「テーマのアップロード → ファイルを選択 → 今すぐインストール」とクリックして、作成したWordPressの子テーマをインストールしてください。

WordPress子テーマをアップロード

子テーマ作成にミスが無ければテーマのインストールが完了するので「有効化」をクリックします。

WordPress子テーマのインストールが完了

「テーマ」画面を開くと、作成したWordPressの子テーマが有効になっていることを確認できました。

いつでもここから他のテーマに変更可能です。

ワードプレス子テーマの有効化を確認

サイトのトップページにもアクセスして動作に問題が無いか確認しておきましょう。

WordPressの子テーマが反映されない原因

子テーマをインストールしたのに何故か反映されないような場合に考えられる原因をまとめてみました。

子テーマを有効化していない

子テーマのインストールが済んだだけでは有効化されません。

テーマのインストール直後の画面で「有効化」リンクをクリックするか、「外観 → テーマ」の「テーマ」画面から「有効化」ボタンをクリックして有効にしてください。

子テーマのファイル名が間違っている

子テーマの中にあるファイルの名称は親テーマにあるものと同じでなければなりません。

スペルミスを無くすためにファイル名をコピペしてみましょう。

キャッシュプラグインを使っている

負荷対策の一環としてWordPressの「W3 Total Cache」「WP Fastest Cache」などのキャッシュプラグインを利用している方は、一度キャッシュの削除を試してみましょう。

キャッシュが効いているせいで反映されていない可能性があります。

style.cssの記述が間違っている

「style.css」には親テーマのフォルダ名を記述する部分(Template)がありますが、その名称が間違っている可能性があります。

大文字・小文字も区別されるので再確認してみてください。

親テーマのCSSファイルが読み込まれていない

子テーマを作るために必須なファイルは「style.css」と「functions.php」ですが、親テーマが「style.css」以外にも複数のCSSファイルを読み込んでいる場合は例外的に全てのCSSファイルを用意してください。

例えば、WordPressのテーマ「賢威」などが該当します。

賢威はCSSファイルとして「style.css」は読み込まずフロント画面では「base.css」「rwd.css」を、管理画面では「keni_admin.css」「colpick.css」を読み込んでいます。

そのため、「base.css」「rwd.css」「keni_admin.css」「colpick.css」の4ファイルも別途用意します。

※「style.css」は子テーマに必須のファイルなので読み込んでいなくても用意する必要があります。

賢威を利用している場合の入力例

「Template」のフォルダ名は賢威をダウンロードする時期によって変わってくるので適宜変更してください。

足りないCSSが分からない時はブラウザでF12キーを押すとデベロッパーツールが開くので「Console」タブをクリックすれば確認できます(以下はChromeを使った場合の例)。

WordPress子テーマでCSSが効かない原因を探る

そして、「functions.php」の中も変更します。

賢威を利用している場合の入力例

「keni_admin.css」と「colpick.css」は管理画面だけで必要なので「admin_menu」にフックしています。

これらのファイルを用意すると賢威でCSSが効かない問題は解消します。

まとめ

WordPressの子テーマを作成すれば親テーマの内容を継承しながら変更を加えたい部分だけ子テーマに記述することができます。

そのため、修正したファイルは子テーマを見れば一目瞭然なのでどのファイルに手を加えたのか分からなくなることがありません。

また、親テーマのファイルを直接編集しているとテーマがアップデートしたときに上書きされるので修正内容が全て消えてしまいますが、子テーマを利用していればそのような心配は無用です。

WordPressのカスタマイズをするなら子テーマの作成を推奨します。

スポンサーリンク

フォローする