アップデートしても大丈夫！WordPressの子テーマでデザインのカスタマイズをする方法

こんにちは。ディレクターのエリカです。
突然ですが、WordPressのテーマを利用したことはありますか？

「テーマ？　探したことないなぁ……」という方は「WordPressのテーマ選びで気をつけるべきポイントとオススメテーマ7選」がありますので、ご覧ください。

せっかく素敵なテーマを利用しているなら、ぜひ子テーマも利用してみてはいかがでしょうか？

子テーマとは？

WordPressには有料のものから、無料のものまで、さまざまなテーマがあります。いざ理想のテーマを見つけることができたとしても、細かいカスタマイズをしたいことってありますよね。

そんなときに、子テーマが便利です。
子テーマを利用すると、親となるテーマを部分的に置き換えて（カスタマイズして）使うことができるようになります。

なぜ子テーマを使うのか？

せっかく見つけた素晴らしいテーマです。そういったテーマは、制作者の方が常に改善していたり、新機能をつけてくれたりするので、アップデートできるようになることも多いんです。しかし、カスタマイズした部分が消えてしまうからアップデートできないという方、いらっしゃるのではないでしょうか。
子テーマで作成しておけば、その心配がなくなるんです！　すばらしいですよね。

子テーマの作り方

それでは、子テーマの作り方です。簡単に言うと、以下の3つを準備すれば大丈夫です。

• 子テーマディレクトリ
• style.css
• functions.php

子テーマディレクトリの作成

テーマディレクトリ（wp-content／themes）配下に子テーマ用のディレクトリを作成します。
一般的には、「-child」という接尾辞を付けることが推奨されているそうなので、例えば、twentyfifteenの子テーマを作成するなら、twentyfifteen-childといった感じになりますね。

style.css の作成

作成した子テーマディレクトリの中に、通常のテーマと同様に、style.cssを作成します。

/*
 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
*/

このとき、Templateについては、必ず親テーマを指定するようにします。その他の項目については、作成する子テーマにあわせてそれぞれ設定していきます。

functions.php の作成

style.cssと同じように、子テーマの中に下記のような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' );

}

子テーマの有効化

ここまでの作業で、テーマ一覧にはTwenty Fifteen Childというテーマが新たに追加されているはずです。あとは、このテーマを有効化すれば、子テーマが適用されるようになります。
実際に、この子テーマを有効化した状態でサイトを確認していただけるとわかるかと思いますが、親テーマとほぼ同様の機能・デザインが適用されているはずです。

子テーマを理解する

実際子テーマには2つのファイルしかないはずですが、親テーマと同様の機能が提供されるようになります。これは、どういうことでしょうか。
簡単に説明しますと、WordPressがテーマファイルを参照する際「もしも、子テーマディレクトリに親テーマディレクトリに存在するファイルと同名のファイルがあれば、そちらを優先する」という処理を行っているためです。
つまり、親テーマをベースにカスタマイズしたい部分（ファイル）を、子テーマに複製し修正すれば、そちらが参照されるようになるということです。

例えば、「ヘッダーの一部分を変更したい」となれば、header.phpを子テーマにも作成し、それを修正すればいいということになります。
補足で説明しておきますと、必ずしも親テーマに同名のファイルがなければいけない訳ではありません。テーマによっては、用意されていないテンプレートもあるかと思います。その場合でも、子テーマに作成しておけば、そちらが読み込まれるようになります。

このあたりは、下記が参考になります。

http://wpdocs.sourceforge.jp/テンプレート階層

テンプレートファイルが決定されるまでのフローが図解されていますので、テーマをカスタマイズする際は、一度読んでおくといいかもしれません。

しかしながら、functions.phpについてこの限りにありません。

functions.phpについて

親テーマにfunctions.phpがあり、子テーマにもfunctions.phpありますね。
これまでの流れであれば、親テーマのfunctions.phpが読み込まれないようにも思えるかもしれませんが、functions.phpについては親テーマのもの、子テーマのものが両方読み込まれるようになります。
順番としては、子テーマのfunctions.phpが先になります。
これがどういうことかといいますと、例えば親テーマに下記のような記述があった場合。

if (!function_exists('theme_special_nav')) {
    function theme_special_nav() {
        //  何かする。
    }
}

子テーマで、この関数を定義すれば、単純に親テーマの関数を置換するかのようなことができてしまいます（ただし、親テーマで上述のような書き方がされていることが前提になりますが）。

子テーマ内のファイルをインクルードしたい場合

通常のように、get_template_directory()をした場合は、親テーマのディレクトリを参照してしまいます。
子テーマ内のディレクトリを参照する場合は、下記のように get_stylesheet_directory() を利用するようにしましょう。

require_once( get_stylesheet_directory() . '/my_included_file.php' );

まとめ

いかがでしたでしょうか？
先人の知恵が詰まったテーマや素敵デザインのテーマ、便利な機能のテーマ、WordPressにはすばらしいテーマが本当にたくさんあります（もちろん、セキュリティの問題があるテーマもあったりしますが）。

テーマや子テーマが利用できる場面では積極的に利用して、開発の工数を短縮しましょう。

それでは！

【WordPressのカスタマイズを利用して効率良くサイト作り】

※ WordPressのテーマ選びで気をつけるべきポイントとオススメテーマ7選

※ WordPress管理画面カスタマイズあれこれ10選

※ WordPressのカスタマイズでよく使う！初心者が覚えておきたい条件分岐タグ9選

※ フックって？WordPressのカスタマイズ方法を説明します！

※ WordPressカスタマイズの幅が劇的に広がる、フィルターフックとアクションフックの使い方