【WordPress導入第3回】子テーマを作ろう

「第3回プラグインをインストールしよう」で、基本的な機能の追加を行いました。
ここからは細かいページレイアウトの変更（カスタマイズ）をしていきたいと思います。

子テーマって？

子テーマとは、ある特定のテーマ（親テーマ）をカスタマイズするときに用意するカスタマイズ専用のテーマファイルのことです。

子テーマを作ってカスタマイズを行うことによって、親テーマのデザインや機能をベースにしてカスタマイズしたい部分だけ自分で編集することができます。

親テーマを直接編集してテーマをカスタマイズすることも可能ですが、親テーマがアップデートされて更新した時に、「外観」＞「テーマエディター」でカスタマイズした部分がすべてアップデート後のデータに上書きされてしまいます。それではテーマのアップデートごとにカスタマイズ部分の修正が必要になってしまうために、手間がかかります。

「外観」＞「カスタマイズ」＞「追加CSS」に記述すると、アップデートしても上書きされることはありませんが、CSSしか編集できないなどカスタマイズに限界があります。
ですので、子テーマを作成し、カスタマイズを子テーマ側で行っておくと、親テーマがアップデートしても影響されずにいろいろなカスタマイズができるというメリットがあります。

では、親テーマをアップデートしなければ問題ない、という考えもあるかもしれませんが、バグ修正などの重大な更新があったり、追加機能があったりと、テーマによっては毎月更新されているものもありますので、アップデートを行う前提で進める必要があります。

おすすめのカスタマイズ方法

　前述したように、カスタマイズには3種類方法があります。今回おすすめしたいのは、カスタマイズ範囲が広い「子テーマを使った方法」になります。

「追加CSS」でのカスタマイズ
親テーマを「テーマエディター」からカスタマイズ
子テーマを作成して、「テーマエディター」からカスタマイズ

	追加CSS	親テーマ	子テーマ
メリット	・設定が必要なく簡単にできる・テーマをアップデートしてもカスタマイズはそのまま	・設定が必要なく簡単にできる・呼び出すCSSの量が最小なのでページ表示が高速	・css/phpすべてのカスタマイズができる・親テーマをアップデートしても子テーマでのカスタマイズはそのまま
デメリット	・CSSしかカスタマイズできない・同じCSSを多重に「呼びだし」→「上書き」することになるので、ページ表示が遅くなる	・テーマをアップデートすると、カスタマイズがリセットされる・テーマのアップデートをしないと、バグやセキュリティに問題あり・テーマアップデート時の作業量・負荷が多くなる	・子テーマ作成が必要・多重に呼び出すので、ページ表示が遅くなる
	初心者向け	上級者向け	中級者向け

CSS・PHPって、なに？

WordPressには、ファイルの拡張子が.cssと.phpの2種類があります。

CSSは、カスケーディングスタイルシート (Cascading Style Sheets)のことで、ウェブページのスタイルを指定するための言語です。文字や表・図のサイズだったり、色や余白などページの見栄えにかかわる部分の設定をおこないます。

phpで作成されたページのコンテンツをどう表示するか、といった表面上のページデザインというようイメージです。

PHPは、”PHP：Hypertext Preprocessor”のことで、サーバーサイドで動的なウェブページを作成するための機能をもっている言語です。ページの構成やコンテンツの呼び出しなど、Webサイトの機能にかかわる部分の設定を行います。
WordPressは、ヘッダー、投稿、固定、サイドバー、フッターなどの機能別に構成されているphpファイルを組み合わせて、ページを作成しています。

ある機能を表示させたり、機能内容を変更したりと、ページの骨組み（コンテンツ）を作るイメージです。

子テーマの作り方

実際に、子テーマを作成していきましょう。
子テーマの作り方は、3種類あります。上から順にお勧めの方法になっています。

テーマ開発元が用意したものを利用する
プラグインを使用する
自分で作成する

テーマ開発元が用意したものを利用する

　検索サイトで「テーマ名　子テーマ」と検索すると、開発元が用意した子テーマファイルがある場合があります。
その場合、子テーマのzipファイルをダウンロードして、アップロードすることができます。

まずは、子テーマのzipファイルをダウンロードして、デスクトップなどに保存します。
次に、「外観」＞「テーマ」から「新規追加」を選択します。

「テーマのアップロード」クリックし、「ファイルを選択」から先ほどダウンロードした子テーマのzipファイルを選択します。

アップロードが完了したら、子テーマを有効化して完了です。

プラグインを使用する

　開発元の子テーマがない場合は、子テーマを作成するプラグイン「Child Theme Configurator」を使いましょう。

「プラグイン」＞「新規追加」を選択し、プラグインの検索で「Child Theme Configurator」と入力します。

「今すぐインストール」を選択し、ボタンが「有効化」に変わったら、もう一度クリックします。

「ツール」＞「Child Themes」を選択します。

1.Select an action	子テーマの作成・編集・複製などを選択	「Create a new Child Theme」を選択します
2.Select a Parent Theme	子テーマを作成したい親テーマを選択	親テーマを選択した後、Analyzeを押します
3.Analyze Parent Theme	子テーマ作成に問題がないか確認
4.Name the new theme directory	子テーマディレクトリの名前	任意で構いません
5.Select where to save new styles	子テーマ用のスタイルシート	「Primary Stylesheet（style.css）」で構いません
6.Select Parent Theme stylesheet handling	親テーマのスタイルシートの扱い	「Use the WordPress style queue」を選択します
7.Customize the Child Theme Name, Description, Author, Version, etc	子テーマの情報	任意で構いません。必要であれば、子テーマ名を編集しましょう
8. Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme	親テーマのメニュー・ウィジェットの引継ぎ	親テーマでカスタマイズしていた場合は、チェックを入れましょう
9.Click to run the Configurator	子テーマの作成	Create New Child Themeで子テーマを作成します

「CREATE a new Child Theme」を選択し、子テーマを作成したい親テーマを選び、Analyzeをクリックします。

子テーマ作成に問題がなければ、以下のような表示が出ます。

あとは、デフォルト設定で構いません。既に親テーマでのカスタマイズをしている場合には、8にチェックをしましょう。

Create New Child Themeを選択します。

「外観」＞「テーマ」に子テーマが作成されました。子テーマを選択し、有効化すれば、子テーマに移行完了です。

自分で作成する

テーマ開発元もなく、PHPのバージョンの理由などにより、プラグインが使用できない場合には、自分で子テーマを作成しましょう。

子テーマに最低限必要なファイルは2つです。

style.css
functions.php

style.css

まず、子テーマのフォルダを作成しましょう。フォルダ名は任意で構いませんが、「親テーマ名-child」などがわかりやすいです。
次にそのフォルダー内に「style.css」という名前でCSSファイルを作成し、 style.css に以下のコードを記述します。以下のコードは最低限必要なものです。

/*
 Theme Name:   Twenty Twenty-One Child
 Template:     twentytwentyone
 Version:      1.0.0
*/

Theme Name	子テーマ名	任意の名称でOKですが、「親テーマ名 child」がわかりやすいです
Template	親テーマのフォルダ名	FTPなどで親テーマのフォルダ名を調べてください
Version	子テーマのバージョン	任意でOKですが、親テーマのバージョンと合わせると管理しやすいです

functions.php

フォルダー内に functions.php というPHPファイルを作成します。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')
);
}
?>

作成した子テーマフォルダをzip圧縮して、「外観」＞「テーマ」から「新規追加」＞「テーマをアップロード」をクリックし、子テーマのzipファイルを選択するとアップロードできます。

アップロードが終わったら、子テーマを有効化すれば完了です。