WordPressの魅力は、既存のテーマをカスタマイズすることにより、１から自分でサイトのデザインを作成することなく、見た目はオリジナルのサイトを短期間で構築できることです。
テーマをカスタマイズする方法は２とおり
WordPressテーマのカスタマイズと聞くと少し敷居が高い気がしますが、CSSの知識が少しでもあればデザインのカスタマイズが簡単に行えます。
テーマを直接カスタマイズする
ひとつのカスタマイズ方法は、テーマファイルに直接手を加えて行く方法です。
テーマのファイルに直接手を加えて行く場合は、テーマの編集画面でstyle.cssを変更して行けばカスタマイズできます。
しかしこのカスタマイズ方法の問題は、テーマのバージョンアップを行う必要が出てきた時に、せっかく施したカスタマイズがクリアされてしまうことです。
テーマのバージョンアップ後にカスタマイズを施した状態に戻すには、もう一度、同様のカスタマイズを加える必要があります。
テーマの子テーマを作成してカスタマイズする
もうひとつのカスタマイズ方法は、テーマの子テーマを作成して、テーマの環境は残して置きながらカスタマイズを行う方法です。
この方法では、テーマのバージョンアップを行う必要が出てきた時にも、カスタマイズを施した内容がクリアされることはありません。
このことから、WordPressのテーマをカスタマイズするなら子テーマを使うべきでしょう。
WordPressのテーマには親と子の２つのテーマがある
WordPressの子テーマを使ったカスタマイズ方法を説明して行きたいと思います。
WordPressのテーマは、親テーマとも呼ばれます。そして、そのテーマの機能とスタイルを継承したものが、子テーマになります。
- 親テーマ：既存のWordPressテーマ
- 子テーマ：親テーマに属し、機能とスタイルを引き継いだ上で編集するためのテーマ
親テーマと子テーマの関係
WordPressのテーマには、さまざまなファイルが存在しており、サイトが表示されるまでにはそれらのファイルが順番に読み込まれています。
その中で１つの親テーマが読み込まれますが、子テーマを作成すると、親テーマ→子テーマという順番で２つ読み込まれます。
テーマファイルは、後から読み込まれたファイルの記述が優先されるので、子テーマが親テーマよりも優先されることになります。親テーマは無効になるという訳ではありません。
また、子テーマは独立したファイルなので親テーマのアップデートで消されることはありません。アップデートされた親テーマに対しても、子テーマで定義したカスタマイズの内容が反映されます。
子テーマを作っておくと、同じ親テーマを使っている限り、カスタマイズした内容を反映させることができます。
子テーマの作り方
WordPressのテーマをインストールしても、初期設定で子テーマの環境は存在しません。しかし、最近では、子テーマ自体を配布しているテーマもあるので、子テーマが用意されている場合はそちらを利用しましょう。
それでは、カスタマイズした内容を保持できるようにするための子テーマは、どのようにして作ればよいのかを説明して行きましょう。
子テーマを作る手順
子テーマを作るには、以下のような手順になります。
- 子テーマのフォルダを作る
- 子テーマに必要なファイルを作る
- 親テーマを継承するためのコードを書く
- 子テーマのCSSを記述する
- 親テーマのfunctions.phpを編集する
子テーマのフォルダを作る
パソコン上に子テーマ用のフォルダを作ります。名前は何でも構いませんが、判りやすいように「テーマ名＋child」という名前にするのが一般的です。
子テーマに必要なファイルを作る
次に、フォルダの中に、以下の2つの子テーマ用の空ファイルを作成します。
- style.css
- functions.php
親テーマを継承するためのコードを書く
子テーマ用のstyle.cssに、親テーマを継承するためにコードを記述します。
ここでは、親テーマをTwenty Fifteenで説明しています。
| /* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ |
必須項目は以下の２項目です。その他の項目は書かなくても問題ありません。
- Theme Name：子テーマを識別するための名前を書く
- Template：親テーマのフォルダ名を書く
子テーマのCSSを記述する
子テーマ用のstyle.cssに、カスタマイズするためのCSSを記述します。
カスタマイズする個所が部分的であれば、親テーマのstyle.cssより、該当する個所をコピーして子テーマ用のstyle.cssに貼り付けます。
いろいろな個所をカスタマイズする場合は、親テーマのstyle.cssの内容を、丸ごと子テーマ用のstyle.cssに貼り付けてしまった方が楽かもしれません。
子テーマでCSSをカスタマイズする際の記述方法
子テーマを作成しても親テーマが無効になるわけではありません。子テーマで定義されている内容が親テーマよりも優先されます。
親テーマの設定も有効ですので、確実に子テーマのカスタマイズが反映されるように記述します。
例えば、親テーマに下記の記述があり、font-size: 24pxをfont-size: 28pxにカスタマイズするとします。
| #header { float: left; font-size: 24px; padding: 20px 0; } |
子テーマでは、下記の通り記述します。
| #header { float: left; font-size: 28px !important; padding: 20px 0; } |
このように記述すれば、親テーマと子テーマのCSSに同じ記述があっても、子テーマのCSSで記述している内容が有効になります。
親テーマのfunctions.phpを編集する
WordPress上で、親テーマの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’ ); } |
この内容を記述することにより、親テーマのスタイルが子テーマに引き継がれます。
以前は、子テーマ側のstyle.cssでimportを利用して呼び出す方法が主流でしたが、importを利用すると呼び出しが遅くなるなどの弊害があるので、functions.php側で呼び出す方法が現在推奨されています。
子テーマのホルダーを圧縮する
パソコン上に作成した子テーマのファイルを、WordPress上からテーマにアップロードするために準備を行います。
「テーマ名＋child」名で作成したホルダーをZIP形式で圧縮します。ホルダーの中には下記の２つのファイルが存在することになります。
- style.css（子テーマ用として編集したファイル）
- functions.php（空のファイル）
子テーマのアップロード
管理メニュー＞テーマを選び、テーマを追加を選択し、パソコン上に作成した「テーマ名＋child」名の圧縮ファイルをWordPressのテーマにアップロードします。
もしくは、FTPが使えるのであれば、子テーマを圧縮せずに親テーマがあるディレクトリーへ直接アップロードしても良いでしょう。
子テーマの有効化
WordPressの管理画面から「外観→テーマ」を選択して、アップロードした子テーマを有効化します。（親テーマではありません）
これで、子テーマの設定は完了です。子テーマを適用した状態は、親テーマだけを適用して表示した状態と変わりがありません。子テーマのCSSに記述することによりテーマがカスタマイズされます。
コメント