Wordpressの子テーマの作成手順メモ

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

今回はWordpressにおける子テーマの作成手順をメモって行きたいと思います。
テーマとは、以下の画面で設定できるものです。
ポチポチするだけで、WebサイトのUIを色々変えることが出来るので便利ですよね。

今回はLOCALを使って以下の設定で検証環境を立ち上げています。

LOCALについてはこちら
Wordpressって環境を作ろうとすると意外と苦労しますが、これがあればサクッと作れるのでおススメです。

なぜ子テーマを作成しないといけないのか？

子テーマを作成せず、テーマフォルダの中のphpファイルを直接編集すると、そのテーマ自体にアップデートが走った際に、カスタムしたものが消えてしまうようです。
テーマアップデートをしなくとも、コードを編集するにあたりデフォルトの処理内容を壊して機能不全を起こす可能性が出てきてしまいます。それを恐れてUI/UXを高めることが出来なくなるかもしれません。

コードレベルでWordpressをカスタマイズして使うことは無いのであれば子テーマを作る必要は無いのかもしれません。しかし、今後カスタムしていくことが否定しきれないのであれば、とりあえずやっておくくらいでもいいような気がします。
最初に子テーマを作成しそれをWordpressに適用しておかないと、入れ込んだ設定が巻き戻る可能性があります。

子テーマの作成方法

まず以下のような状態から子テーマを作成して、Wordpressに適用していこうと思います。
先程も添付しましたが、Wordpress環境を構築した後デフォルトの状態からCocoonと呼ばれるテーマを追加した状態であります。
Cocoonの導入方法は検索して頂ければ手順はごまんと出てきますしかなり簡単です。

この状態の時、フォルダ構成は以下のようになっています。
wp-content内のthemesフォルダにそれぞれのテーマのフォルダが作成されていることが見て取れると思います。
cocoon-masterというフォルダにcocoonのテーマに関連するものが格納されています。
今回はcocoon-masterが親となり、これを引き継いで子テーマを作っていこうと思います。

cocoon-masterと同じ階層のところにcocoon-childという名前のフォルダを作成して、その中にfunctions.php、style.css、sereenshot.pngの3つのファイルを用意します。

functions.phpの中身は以下です。

functions.php

<?php
function cocoon_child_enqueue_styles() {

    // 親テーマのスタイル読み込み
    wp_enqueue_style('cocoon-parent-style', get_template_directory_uri() . '/style.css');
    // 子テーマのスタイルを読み込み
    wp_enqueue_style('cocoon-child-style', get_stylesheet_directory_uri() . '/style.css', array('cocoon-parent-style'));

}

add_action('wp_enqueue_scripts', 'cocoon_child_enqueue_styles');

関数の処理について以下に記載します。

• wp_enqueue_style('cocoon-parent-style', get_template_directory_uri() . '/style.css');
  • wp_enqueue_style()：Wordpress専用の関数でCSSファイルをテーマやプラグインで読み込むための関数
    • 'cocoon-parent-style'：親のStyleSheetの名前。任意の名前でOKだが、一意にしておく必要がある
    • get_template_directory_uri()：親テーマのURLを返す
      • 親テーマをどのようにして判断しているかについてですが、あとから記載しますが今回の場合cocoon-childに設定しているstyle.cssの内容を確認しているようです。
    • '/style.css'：親テーマのstyle.cssを指定する
• wp_enqueue_style('cocoon-child-style', get_stylesheet_directory_uri() . '/style.css', array('cocoon-parent-style'));
  • wp_enqueue_style()：同上
    • 'cocoon-child-style'：子のStyleSheetの名前。任意の名前でOKだが、一意にしておく必要がある
    • get_stylesheet_directory_uri()：子テーマのURKを返す
    • '/style.css'：子テーマのStyle.cssを指定する
    • array('cocoon-parent-style')：cocoon-child-style（子テーマのスタイルシート）が読み込まれる前に、cocoon-parent-style（親テーマのスタイルシート）が読み込まれる必要があることを意味する
• add_action('wp_enqueue_scripts', 'cocoon_child_enqueue_styles');
  • add_action()：指定したアクションフックに対して、指定した関数を追加するために使用
    • 'wp_enqueue_scripts'：アクションフックの名前。今回はwp_enqueue_scriptsという名前のアクションフックを指定。
      • wp_enqueue_scripts：ページのヘッダーやフッターにスクリプトやスタイルを追加するために使用される
    • 'wp_enqueue_scripts'を実行する際に'cocoon_child_enqueue_styles'も一緒に実行してね！という事を書いている

style.cssの中身は以下です。

style.css

/*
Theme Name: Cocoon Child
Template: cocoon-master
Author: ohtsuka-shota
Version: 1.0
Description: Cocoonの子テーマ
*/

"Template: cocoon-master"という記載が重要です。
functions.phpの get_template_directory_uri()はここの記載を見て、これと同じ名前のフォルダが親フォルダとして認識しているようです。

作成した子テーマをWordpressに反映する

設定が正常に出来ているとWordpressの外観のところに、子テーマが表示されるようになります。
今回はCocoon Childという名前のテーマが表示されていると思います。（この名前は子テーマのstyle.cssのTheme Nameから取られています。）
表示されている画像については子テーマのフォルダ内に用意したscreenshot.pngを使っています。

これを有効化して完了です。