WordPressの子テーマを作成する手順とCSSの追加方法

1から製作したWordPressテーマではなく、購入したWordPressテーマをカスタマイズする場合、管理画面からカスタマイズする他に子テーマを作成し、そのCSSを追加・編集する形で行う手法があることは、ご存知の方も多いのではないでしょうか。

しかし、子テーマを作らずに親テーマのファイルを直接編集してはいけない理由や、子テーマの作り方が分からない方が多い方もまた多いのではないでしょうか。

そこで本記事では、WordPressの子テーマを作る必要があるシーンや、子テーマの作り方、CSSを記述してテーマをカスタマイズする方法について解説します。WordPressテーマのカスタマイズを行いたい方は、ぜひ参考にしてください。

WordPressの子テーマを作るべき理由とは

まずはWordPressテーマにおける、親テーマと子テーマの概念について理解しましょう。

親テーマとは、カスタマイズする際の、継承元となるテーマのことです。一方で子テーマとは、親テーマをカスタマイズするためのテーマのことです。

WordPressテーマは、WordPress本体のバージョンアップへの対応や、脆弱性の修正などを理由に定期的にバージョンアップが行われます。

そのため、親テーマにファイルを直接追加したり、ファイルを直接編集してしまったりすると、バージョンアップの度に最新のファイルに書き換えられてしまい、カスタマイズした内容を保持できません。

しかし子テーマを作り、子テーマにカスタマイズを実装することで、親テーマのバージョンアップが行われたとしてもカスタマイズ内容が保持されます。つまり、バージョンアップによってWebサイトの仕様やデザインが変わってしまうことを防ぎ易くすることが可能です。

また、親テーマを何度も書き換えながら運用すると、不具合に遭遇したときの原因究明が困難になります。その結果、Webサイトの復旧に非常に多くの時間と工数を要するでしょう。

親テーマと同じ名前のファイルを子テーマに作成し、保存することで、内容を上書きできます。そのため、子テーマのカスタマイズで誤りがあったとしても、上書きしたファイルを削除することで、元のWebサイトの状態に戻るため、エラー対策の面でも非常に有用です。

WordPressの子テーマを作る方法

既存テーマに子テーマが用意されていない場合は、自らWordPressの子テーマを作る必要があります。WordPressの子テーマを作る際の手順は、下記の通りです。

1. 子テーマのフォルダを作成
2. style.cssの設定
3. functions.phpの設定
4. ファイルをZipファイルにする
5. 子テーマを有効化する

それぞれ順番に解説します。

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

子テーマを作る前に、データを格納するためのフォルダを用意する必要があります。フォルダを作る場所に制限はありませんが、自分が分かりやすい位置に作ることをおすすめします。

それぞれのOSにおける、フォルダの作り方は下記の通りです。

Windowsの場合

1. フォルダを作りたい場所を、「エクスプローラー」から開く
2. 画面左上にあるフォルダのアイコンをクリック
3. 今表示している場所に新規フォルダが作られるため、任意の名前を付ける

MacOSの場合

1. フォルダを作りたい場所を、「Finder」から開く
2. Finderの左下にある「新規フォルダ」をクリック
3. Windowsと同様にフォルダが作られるため、名前を付ける

なお、フォルダ名は「テーマ名-child」としておくと分かりやすいです。

そのため、今回は上記の命名をした前提で話を進めていきたいと思います。

style.cssの設定

上記で作成したフォルダ内に「style.css」を作成します。CSSファイルの編集を行う必要があるので、テキストエディタをインストールしておくことを強く推奨します。

なぜなら、PCに標準装備されているメモ帳では、誤入力や文字コードの違いなどによってエラーが起こる可能性が非常に高いからです。

style.cssを作成したら、必ずテーマ情報をファイル最上部に残しておきましょう。

Description、Author、Versionなども書き残すことができるものの、Theme NameとTemplateは必須です。

/*

Theme Name: （テーマ名）-childTemplate: （親テーマ名）

*/

functions.phpの設定

次に、上述したフォルダ内に「functions.php」を作成します。

「functions.php」とは、WordPress内にCSSやJavascriptを反映させたり、子テーマを読みこむ指示をしたりするファイルのことです。フォルダ内に「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」の内容は、基本的にどのテーマでも同じ内容となっているため、上記をコピー＆ペーストするだけで問題ありません。

ファイルをZipファイルにする

フォルダ内に「style.css」と「functions.php」が入っている状態になったら、実際に子テーマを使えるようになります。

なお、子テーマを有効化するための前段階として、フォルダをZipファイルにすることが必要です。フォルダをZipファイルにする手順は下記の通りです。

Windows

1. フォルダを選択し、右クリック
2. 「圧縮」を選択し、その中から、「Zip」を選択する

MacOS

1. フォルダを選択し、上部メニューバーの「ファイル」を選択
2. 「”（フォルダ名）”を圧縮」を選択する

子テーマを有効化する

フォルダを圧縮した後に、WordPressの管理画面から、子テーマをアップロードします。アップロードを行う手順は下記の通りです。なお、親テーマをインストールしていない場合は、下記と同様の手順で先に親テーマをインストールしておきましょう。

1. WordPress管理画面の左サイドバーから「外観」を選択する
2. 「新しいテーマを追加」もしくは、「新規追加」をクリックする
3. 「テーマのアップロード」を選択し、その後に表示される「ファイルを選択」をクリックする。
4. 先ほど作った子テーマのZipファイルを選択し、「今すぐインストール」をクリックすることで、WordPressへの子テーマのアップロードが完了します。

子テーマのアップロードが完了したら、「外観」のページに子テーマが表示されます。その子テーマにマウスカーソルを乗せると、「有効化」のボタンが表示されます。最後に、そのボタンをクリックすることで子テーマが有効化されます。

子テーマが反映されないときの対処法

ここまで、子テーマを有効化する方法について解説しました。しかし、ここまでの手順を行っても、子テーマが反映されないケースも見られます。そのような場合は、下記に当てはまっていないかを確認しましょう。

• 子テーマではなく、親テーマを有効化していないか
• 子テーマのファイル名が親テーマのテンプレートファイルと一致しているか
• スタイルシートの記述が適切であるか

特に、子テーマが正常に反映されないパターンとして、有効化ができない場合や特定のページのみ反映されないことがよくあります。

有効化できない場合は、style.cssの記述が誤っているケースが非常に多いです。上述した記述が適切に記載されているかを確認しましょう。

また、一部のページで子テーマが反映されていない場合は、ファイル名が間違っているケースが多く見られます。

親テーマと同じファイル名でなければ、子テーマが反映されず、親テーマが用いられます。そのため、反映されていないページで用いられる、子テーマのファイル名を改めて確認しましょう。

また、子テーマが反映されていない要因として、ブラウザに溜まったキャッシュが原因となっている可能性があります。キャッシュとは、ブラウザに一時的に保存される情報のことです。キャッシュが残っている場合、子テーマが有効化される前のWEBサイトが表示されることがあります。

キャッシュについては、サーバー側でキャッシュが溜まっているケースも考えられます。サーバーのキャッシュに対する対処法は、サーバーによって異なるため、詳しくはサーバーの管理者にお問い合わせください。

上記3つのどれにも該当しないにも関わらず、子テーマが反映されていない場合は、キャッシュの削除を行うか、SafariのプライベートブラウズやChromeのシークレットモードにてWEBサイトの確認を行いましょう。

WordPressテーマをCSSでカスタマイズするには

WordPressで子テーマを有効化した後に、実際にCSSでデザインのカスタムを行いたい方は多いでしょう。ここでは、WordPressテーマをCSSでカスタマイズする方法を解説します。

テーマファイルを編集する

テーマファイルを直接編集する場合、FTPクライアントでサイトに接続し、遠隔でテーマファイルの編集を行います。

FTPクライアントは非常に多くの種類がありますが、「Cyberduck」や「FileZilla」といった無料のもので問題ありません。テーマファイルを直接編集する方法は下記の通りです。

1. 利用中のホスティングサービスで、「ホスト名」「ポート」「ユーザー名」「パスワード」を確認。
2. FTPクライアントを開き、先ほど確認したFTP情報を入力。
3. 接続したら、WordPressがインストールされたフォルダへ移動し、「wp-content > themes」を開き、その中からテーマフォルダを探す。
4. テーマフォルダを見つけたら、]
5. 「style.css」の編集を行う。
6. 編集が完了したら保存し、サーバーに再び編集済みのファイルをアップロードする。

エンジニアであれば、上記の方法でカスタマイズする方法を推奨します。一方で、知見がない方が取り組むとエラーのリスクも高くなり、かえってWEBサイトのデザインを崩してしまうことも懸念されます。

そのような場合、次で解説する「プラグインを使用してカスタムCSSを追加する方法」がおすすめです。まずはプラグインを使用して、カスタムCSSの編集ができないかを試してみましょう。

プラグインを使用してWordPressにカスタムCSSを追加することも可能

ここまで、WordPressの子テーマを作る方法について解説しました。これまで解説した方法にてカスタムCSSを追加することも可能ですが、プラグインを使用してカスタムCSSを追加することも可能です。

ファイルを直接書き換えることに自信がない方にはこちらの方法がおすすめです。

カスタムCSSを追加する際に活用できるプラグインは下記の通りです。

• Simple Custom CSS
• Simple Custom CSS and JS
• Code Snippets

それぞれ順番に解説します。

Simple Custom CSS

「Simple Custom CSS」は、編集の容易さと、機能のシンプルさを併せ持つプラグインです。非常に人気なプラグインであり、多くの利用者が実際に使用しています。

「Simple Custom CSS」を利用することで、テーマファイルを直接編集することなく、簡単にCSSを追加してWEBサイトのデザインを変えられます。

機能が豊富でありながらも、非常に軽いプラグインであるため、WEBサイトのパフォーマンスを下げることなく利用できる点も強みです。

Simple Custom CSS and JS

「Simple Custom CSS and JS」は、上述の「Simple Custom CSS」と同様に、テーマファイルを変更することなくカスタムCSSを追加できるプラグインです。また、Simple Custom CSS and JSでは、Javascriptの記述も可能となっています。

シンプルなCSSのみを記述する場合はSimple Custom CSSを、JavaScriptも併せて記述したい場合はSimple Custom CSS and JSを導入するという形で使い分けると良いでしょう。

Code Snippets

「Code Snippets」は、「functions.php」を編集できるプラグインです。「functions.php」は、変更に失敗した際にWEBサイトが表示されなくなったり、挙動がおかしくなったりするリスクが非常に高いファイルです。

しかし、Code Snippetsを利用して「functions.php」を変更した場合、不具合が見られたらプラグインを無効化することで速やかにエラーを解除できます。

なお、WordPress上でプラグインを無効化できない場合は、サーバーからプラグインを削除しましょう。サーバーからプラグインを削除する方法は下記の通りです。

サーバーのファイル管理から「wp-config.php」を開き、「MySQLの設定」にある下記の情報を確認する。

• データベース名
• データベースのユーザー名
• データベースのパスワード

1. phpmyAdminにログインし、「データベース」を選択後、「wp-options」を選択する
2. option_nameから「active_plugin」を選択する
3. 文字列の中から、プラグイン名を探し、その手前の「i~;」を選択して削除する。その上で、先頭の「a:15: 」を「a:14:」に変更します。

まとめ

本記事では、WordPressの子テーマを作成する方法や、CSSを追加で記述する方法について解説しました。親テーマのテーマファイルを編集してしまうと、バージョンアップの度に変更した箇所が上書きされたり、エラーが起きた時の対応が困難になったりします。そのため、CSSの追加などのカスタマイズを行う場合は、必ず子テーマを活用することを念頭に置いておきましょう。

また、CSSを追加する方法も実に多様です。初心者の方は、最も手間がかからず、リスクの少ない方法であるプラグインの導入をすることを推奨します。

子テーマの活用についてより詳しく知りたい方は、下記の公式のドキュメントもご確認ください。

wordpress.org Theme Handbook

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

• WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
• セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
• WordPressに最適なサーバーの選定や構築から依頼したい…
• SEO対策や高速化も考慮したサイト構築を行なってほしい…
• 制作後の保守・運用についてもサポートしてほしい…
• 今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する