WordPressが広く普及したことにより、デフォルトの公式テーマファイルだけでなく、
多くの企業・クリエイターがテーマファイルを作成し、幅広く提供されるようになりました。
これらのテーマファイルを上手く活用することによって、
よりデザイン性が高く、機能性に富んだ高クオリティなWEBサイトを低コストで実現することができるようになりました。
既存のテーマファイルをカスタマイズする際に大きな悩みとなるのが、
バージョンアップの問題です。
WordPressの場合、既存のテーマファイルにカスタマイズを加えても、
テーマファイルをバージョンアップすることで、今までのカスタマイズした内容が消えてしまうのです。
かといってずっとテーマファイルのバージョンアップを行わずにいると、
WordPress本体との互換性が失われかねません。
こういった問題の対策として、
WordPressでカスタマイズを行う際は、「子テーマ」に対してカスタマイズを加えるようにしましょう。
そうすることにより、
親テーマであるテーマファイルをバージョンアップしたとしても、子テーマに加えたカスタマイズを引き継ぐことができます。
ここでは、WordPressで既存のテーマファイルの子テーマを作る手順について見ていきましょう。
目次
親テーマと子テーマの関係
そもそも、「親テーマ」「子テーマ」とは何なのか。
「親テーマ」とは、既存のWordPressテーマファイルのことです。
自分以外の開発者が一般に広く公開しているテーマファイルで、定期的なバージョンアップがあります。
「子テーマ」とは、「親テーマ」のデザインや機能をそっくりそのまま引き継ぎつつ、独自のカスタマイズを自分で加えるための上書きテーマファイルです。
子テーマによるカスタマイズは、WordPress公式でも推奨されており、親テーマの機能を引き継ぎつつもテーマファイル自体は独立した構成となっています。
そのため、親テーマのアップデートがあった際には、親テーマのみが新しいテーファマイルに書き換わり、子テーマは影響を受けることがありません。
子テーマを作る手順
サーバーのテーマファイルディレクトリにアクセスする
まずは、サーバー上のWordPressのテーマファイルが格納されているディレクトリにアクセスしましょう。
FTPクライアントソフトで、以下の場所にアクセスします。
デフォルト状態であれば、「twentyfifteen」「twentysixteen」「twentyseventeen」のテーマディレクトリが存在しています。
【WordPressインストール先】/wp-content/themes
「FTPって何？」という方は以下のページを参考にしてください。
親テーマをアップロードする
親テーマのアップロードがまだの場合は、アップロードしておきましょう。
子テーマのディレクトリを作る
いよいよ、子テーマを作っていきます。
先ほどアクセスしたテーマファイルディレクトリの中で右クリック→「ディレクトリを作成(C)」をクリックし、子テーマのディレクトリ名をつけましょう。
名前は英語で入力します。
子テーマの必要ファイルを揃える
子テーマのディレクトリの中に、子テーマを動かす上で最低限必要なファイルを揃えていきましょう。
最低限必要なのは、「style.css」と「functions.php」です。
子テーマのディレクトリ内で、右クリック→「新しいファイルを作成(T)」をクリックし、ファイル名を入力してOKボタンをクリックしましょう。
「style.css」の中身を記述する
style.cssに記述しなければならないのは、テーマファイルの情報です。
ここで親テーマと子テーマを指定することにより、親子関係を引き継いだ子テーマとしてWordPressが認識してくれるようになります。
記述内容は以下の通りです。
style.css
「functions.php」の中身を記述する
functions.phpでは、スタイルシートの読み込みを指示します。
以下の内容を記述しましょう。
functions.php
管理画面からテーマを選択する
WordPress管理画面を開き、「外観」→「テーマ」でテーマファイルの一覧を表示しましょう。
キャプチャのように、追加した子テーマのテーマファイルが表示されれば、WordPressが正しく子テーマとして認識していることになります。
子テーマを有効にしましょう。
表示がされない場合や、エラーメッセージが表示される場合は、今一度手順を見直してみましょう。
動作確認
テーマを有効にしたら、実際にサイトを表示してみましょう。
カスタマイズする前なので、親テーマと全く同じデザインで表示されるのが正常です。
試しにbodyの色を変えるなどのカスタマイズを施して見て、内容が反映されることを確認しましょう。
動作がうまくいかない時は
テーマファイルによっては、参照するパスを再指定する必要があったり軽微な調整が必要な箇所が発生することがあります。
その際は、WEBインスペクタを利用するなどして、エラーの発生箇所を突き止め、テーマファイルを調整してあげましょう。
