WordPressの子テーマを作ろう　Xeory_Extension-child

WordPressのテーマをカスタマイズする際に、親テーマを直接編集する事も出来ますが、親テーマを引き継いだ子テーマを作成するのが推奨されています。そんな訳で子テーマを作成してみました。

僕の今のテーマ（テンプレート）は「Xeory Extension」というテーマを使用しています。子テーマでは親のテーマ名の後に「child」とつけるのが推奨されているので、「Xeory_Extension-child」というテーマを作ります。

作業内容は大きく分けて４つです。

「Xeory_Extension-child」フォルダを作成。
作成したフォルダの中に「style.css」と「functions.php」を作成。
作成したファイルを編集。
親テーマと同じ階層に子テーマを入れる。

　「Xeory_Extension-child」フォルダを作成。 Xeory_Extension-childフォルダを作成します。

f:id:hpptms:20170921220038p:plain

　作成したフォルダの中に「style.css」と「functions.php」を作成。先ほどのフォルダに「style.css」と「functions.php」を作成します。

f:id:hpptms:20170921220114p:plain

3,　作成したファイルを編集。「style.css」と「functions.php」の中身を編集します。

まずは「style.css」ですが、下記の内容だといらない項目も含まれています。子テーマの名前と親テーマの指定は必須のようです。

/*
 Theme Name:   xeory_extension-child　※子テーマの名前
 Theme URI:    http://hpptms.dip.jp
 Description:  xeory_extension Child Theme
 Author:       hoge
 Author URI:   http://hpptms.dip.jp
 Template:     xeory_extension ※ここは親テーマのフォルダ名
 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:  xeory_extension-child
*/

次に「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')
    );
}

僕の場合は、これだけです。

ここで動作には特に必要ありませんが、WordPressのテーマ選択時に表示される画像も作りました。

f:id:hpptms:20170921220205p:plain

~~あ、ダサい。~~

画像の名前は他のテーマでも「screenshot.png」となっていたので、同じ名前にしておきました。最終的に子テーマフォルダの中は、下のようになりました。

f:id:hpptms:20170921220245p:plain

4.　親テーマと同じ階層に子テーマを入れる。作成したフォルダをWordPressの「/var/www/html/wp/wordpress/wp-content/themes」の中に入れました。 f:id:hpptms:20170921220316p:plain 所有者とパーミッションに関しては、他のテーマを参考に設定しました。この設定が間違っていると上手く動かない可能性があるので、子テーマを作成する場合は確認しておいた方がよさそうです。