WordPress で子テーマを指定してカスタマイズする

最終更新日:
  • CentOS7
  • PHP7.x
  • WordPress5.x

デザインをカスタマイズしたい時は子テーマを使う。
適用しているテーマのCSSなどを直接修正してしまうと、
テーマの更新を行う度にテーマに関わる全てのファイルが書き変わるので書き直さないといけない。

子テーマとは

適用しているテーマを直接いじらず、
主に上書きという形で上書きしたいファイルのみ生成して適用させる方法

「twentynineteen」の子テーマを作成する

  • 「twentynineteen-child」という名前で子テーマを作成してみる
$ cd /path/to/your/project
$ cd wordpress/wp-content/themes
# 子テーマ用のディレクトリの作成
$ mkdir twentynineteen-child
$ cd twentynineteen-child
# 必須ファイル1の作成
$ touch style.css
# 必須ファイル2の作成
$ touch functions.php

style.css

style.css の下記コメントアウトの内容が重要

重要なパラメータ

  • Theme Name: 子テーマ名
    • 「外観」→「テーマ」に表示される名前
  • Template: 親のテンプレートのディレクトリ名
    • wordpress/wp-content/themes/twentynineteen
      • 今回の親のテンプレート名は「twentynineteen」
  • 残りパラメータは適当に
$ vi style.css

/*
 Theme Name:   Twenty Nineteen Child
 Theme URI:    http://example.com/twenty-nineteen-child/
 Description:  Twenty Nineteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentynineteen
 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 と Theme Name を環境に合わせる
↓ css のカスタマイズする場合はここから記述

body {
	color: #444;
}

functions.php

$ vi functions.php

/**
 * wp_enqueue_scripts() の実行内容が
 * wp_enqueue_scripts_override() の内容になる設定
 */
add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_override' );

/**
 * 親テーマの style.css が先に読み込まれ、
 * 子テーマの style.css が後に読み込まれるようになる設定
 */
function wp_enqueue_scripts_override() {
	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/wp-content/themes/twentynineteen
  • 子テーマ
    • wordpress/wp-content/themes/twentynineteen-child

twentynineteen/footer.php をカスタマイズしたい時は
twentynineteen-child/footer.php を作成する。

twentynineteen/template-parts/header/entry-header.php をカスタマイズしたい時は
twentynineteen-child/template-parts/header/entry-header.php を作成する。

子テーマにテンプレートファイルがあると、
親テーマのテンプレートファイルが呼ばれず、
子テーマのテンプレートファイルが呼ばれるようになる。

関連投稿