子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。
子テーマディレクトリ
style.css
functions.php
このページのもくじ
(1)子テーマディレクトリの作成。
wp-content/themes ディレクトリ下に作成します。
子テーマディレクトリの名前は自由につけても構いませんが、親テーマがある場合は最後に ‘-child’ を付けておくとわかりやすいです。また、子テーマディレクトリの名前には空白を含めないこと。エラーが発生します。
(2)子テーマのスタイルシート (style.css) の作成。
スタイルシートは次のスタイルシートヘッダで始める必要があります。
WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに「管理画面 > 外観 > テーマ」画面に表示させるために必要なものです。
/* 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 */
内容の詳細は下記の通り。
よくわからないところは空白にして作業を進めましたが、子テーマとして認識してくれています。
/*
Theme Name: 子テーマの名称
Theme URI: 子テーマフォルダのある場所
Description: テーマ詳細
Author: 制作者名
Author URI: 制作者のアドレス(あれば)
Template: 親テーマのディレクトリ名←これは必須!!正確に!
Version: 1.0.0←自分で更新数がわかるようにしておくと便利
License:
License URI:
Tags:テーマの特徴をタグ (Tags) として指定することで、管理画面の「テーマのインストール」の特徴フィルターを使った検索に反映されます。
使用可能なタグのリストはテーマディレクトリ /enの「feature Filter」の検索項目 をご覧ください。
Text Domain:
*/
(3)functions.phpの作成
「functions.php」を作成して、スタイルシートやjavascriptなどを読み込みます。
親テーマからCSSを読み込むコード
<?php // 親テーマからcssを読み込む 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') ); }
これで親テーマの「style.css」を読み込みます。
子テーマの「style.css」は親テーマを上書きするので、変更したい箇所や追加したい部分だけ子テーマに設定すればサイトに反映されていきます。
参照:「WordPress Codex 日本語版」https://wpdocs.osdn.jp/子テーマ