WordPressでオリジナルの子テーマを作成する方法を見ていきます。また、ダッシュボードのテーマ画面に表示されるサムネイルも設定してきます。

子テーマ用のフォルダを作成する

新規フォルダを作成し、フォルダ名をテーマ名-childとして保存する。

テーマ名は任意の文字列で良いが、親テーマ名を引き継いで命名するとわかりやすい。

親テーマが　my-theme　の場合、
子テーマは　my-theme-child とする。

「style.css」と「functions.php」を作成する

作成したフォルダ内に、style.cssとfunctions.phpを作成する。

• my-theme-child
  • style.css
  • functions.php

style.cssを編集する

style.cssを子テーマとして機能させるために最低限必要な、親テーマ名と子テーマ名の2点をきじゅつする。

Theme Nameに子テーマ名、Templateに親テーマのディレクトリ名を記述する。スタイルシートは次のスタイルシートヘッダで始める必要がある。

/*
 Theme Name:   My Theme Child
 Template:     my-theme
*/

スタイルシートヘッダに記述できるテンプレート情報は以下の通り。

/*
 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
*/

functions.phpを編集する

子テーマのfunctions.phpでwp_enqueue_script()を使用し、子テーマのスタイルシートをキューに入れる。

依存関係に'parent-style'（親テーマのスタイルシートのバンドル名）を指定すると子テーマのスタイルシートは親テーマのあとで読み込まれる。

function my_child_enqueue_styles() {
    wp_enqueue_style(
		'child-style',
		get_stylesheet_uri(),
		array('parent-style')
	);
}
add_action('wp_enqueue_scripts', 'my_child_enqueue_styles');

子テーマ作成の注意事項

子テーマは親テーマのすべてのファイルを上書きする

• 従って、単純に同じ名前のファイルを子テーマディレクトリに置くことで、サイトがロードされると親テーマディレクトリ内の同名のファイルは上書きされる。

ただし、子テーマの functions.php は親の functions.php に追加して読み込まれる

• 子テーマのfunctions.phpは、親テーマの機能を上書きしない。親テーマのファイルの直前に読み込まれ、親のfunctions.phpに追加される

サムネイルの作成方法

1. テーマ画像に設定するpng画像を用意する。画像の推奨サイズは「880×660」「1200×900」など
2. 画像名と拡張子をscreenshot.pngとする
3. テーマ画像をテーマディレクトリに配置する

親テーマのサムネイルであれば親テーマのディレクトリに、子テーマのサムネイルであれば子テーマのディレクトリにそれぞれアップロードする。