WordPressの子テーマとは

2020年4月、WordPressの子テーマを作りました。

WordPress（ワードプレス）とは、世界で最も人気が高いCMS（コンテンツ管理システム）でホームページやブログなどのWEBサイトを作成するソフトウェアです。

WordPressは、データベース（DB）に格納した投稿記事などのコンテンツをテーマと呼ぶデザインに従って画面を構成して表示するシステムです。

WordPress公式サイトで、いろいろなテーマ（twentyfifteenなど）を公開しています。テーマは、PHPやCSSなどで記述されておりテーマを入れ替えるだけでWEBサイトのデザインを簡単に変更できます。

WEBサイトのデザインを自分好みに少し改良したいとき、テーマのCSS定義やPHPプログラムを直接修正してもよいですが、もしテーマのアップデートがあった場合に自分の修正が上書きされてしまいます。
そのため、一般的には親テーマを継承した子テーマを作成して、デザインの変更は子テーマで行います。

子テーマでは、親テーマとの差分のみ記述します。テーマ内のファイルは基本的に、『親テーマ → 子テーマ』の順に読み込まれます。
すなわち、子テーマの定義は親テーマより優先されます。従って、スタイルシートstyle.cssの定義は、親テーマの記述に子テーマの記述が追加されます。

このように子テーマを作成すれば、親テーマとの差分が明確になるというメリットがあります。そして、親テーマがアップデートで変更された場合でも、自分が変更した子テーマは上書きされませんので、デザインの変更内容は残ります。

子テーマの作成方法

WordPress Codex 日本語版に子テーマの作り方などについて説明があります。

子テーマのフォルダー作成

WordPressのテーマは、「/wp-content/themes」の下にテーマのフォルダーを作成して格納しています。例えば、テーマtwentyfifteenは「/wp-content/themestwentyfifteen」に格納しています。

親テーマの子テーマを作成する場合は、同じ階層に「親テーマ名-child」という子テーマ用のフォルダーを作成します。フォルダー名の命名規則はありませんが、このようにするとわかりやすいです。例えば、テーマhpb20の子テーマを作る場合は、hpb20-childとします。

そして、子テーマフォルダーに次のファイルを作成します。

ファイル名	区分	用途
style.css	必須	スタイルシート
functions.php	必須	テーマのための関数
screenshot.png	任意	テーマのサムネイル画像

スタイルシート style.css

子テーマのスタイルシート（style.css）を作成します。

@charset "utf-8";
/*
 Theme Name:  hpb20-child
 Template:    hpb20
 Description: ある計算機屋さんの子テーマ
 Author:      YUKI
 Version:     1.0
*/

1行目の@charsetは、スタイルシートの文字エンコーディングです。
2行目から8行目のコメントの中に、キーワードに続いて子テーマの情報を記述します。
その後に独自にカスタマイズする子テーマ用のスタイルを定義します。

キーワード	内容	区分	例
Theme Name:	子テーマの名前	必須	hpb20-child
Template:	親テーマのフォルダー名	必須	hpb20
Description:	テーマの説明	任意	○○の子テーマ
Author:	テーマの説明	任意	YUKI
Version:	バージョン	任意	1.0

テーマのための関数 functions.php

テーマのための関数（functions.php）で、親テーマと子テーマのスタイルシートをキューに入れます。

<?php
function my_enqueue_scripts() {
  $theme_uri = get_template_directory_uri();
  $style_uri = get_stylesheet_directory_uri();
  wp_enqueue_style(
        'parent-style', $theme_uri . '/style.css' 
  );
  wp_enqueue_style( 
        'child-style',  $style_uri . '/style.css', 
        array('parent-style')
  );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
?>

---

関数add_action()で、’wp_enqueue_scripts’にアクション関数を追加します。

---

関数wp_enqueue_style()は、スタイルシートをキューに追加して設定します。

 
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

引数	区分	意味
$handle	必須	スタイルシートのハンドル名
$src	任意	スタイルシートのURL
$deps	任意	先に読み込むスタイルのハンドル配列
$ver	任意	スタイルシートのバージョン番号
$media	任意	スタイルシートが定義されているメディア

テーマのサムネイル画像 screenshot.png

テーマを選択するときの目印となるように、スクリーンショットを準備します。任意なので無くてもかまいません。

•  サイズ【880×660 px】
•  ファイル形式【.png】
•  ファイル名 【screenshot.png】

子テーマを有効化

WordPressの管理画面から「外観」－「テーマ」を選択します。

先ほど作成した子テーマhpb-childが表示されますので選択します。

左側にスクリーンショット、右側にstyle.cssに記述した情報が表示されます。[有効化]のボタンを押して、新しいテーマを有効化します。

 

子テーマを試しにカスタマイズしてみます。スタイルシートstyle.cssを次のように修正します。

@charset "utf-8";
/*
 Theme Name:  hpb20-child
 Template:    hpb20
 Description: ある計算機屋さんの子テーマ
 Author:      YUKI
 Version:     1.0
*/
body { background: orange; }

ブラウザからサイトを更新してみてください。背景色がオレンジ色に変わります。

子テーマの確認

ページのソースを表示すると、親テーマのスタイルシートの後に子テーマのスタイルシートを適応しています。

<link rel='stylesheet' 
      id='parent-style-css'
      href='http://○○/wp-content/themes/hpb20/style.css?ver=5.4' 
      type='text/css' media='all' />
<link rel='stylesheet' 
      id='child-style-css'   
      href='http://○○/wp-content/themes/hpb20-child/style.css?ver=5.4' 
      type='text/css' media='all' />

スタイルシートstyle.cssなどを修正して、子テーマのデザインを変更できます。