一回折れた人

人生設計失敗した人

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

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

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

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

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

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

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のテーマ選択時に表示される画像も作りました。

あ、ダサい。

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

4. 親テーマと同じ階層に子テーマを入れる。 作成したフォルダをWordPressの「/var/www/html/wp/wordpress/wp-content/themes」の中に入れました。

所有者とパーミッションに関しては、他のテーマを参考に設定しました。 この設定が間違っていると上手く動かない可能性があるので、子テーマを作成する場合は確認しておいた方がよさそうです。

4まで終わればwordPressの管理画面のテーマに出てくるので、設定してあげれば完了です。