2016.02.07 2017.01.23 WordPressscofield

WordPressの子テーマの作り方と設定

WordPressのテーマカスタマイズは、子テーマを使うのが一般的です。

親テーマを直接カスタマイズすると、テーマをアップデートした際にカスタマイズした箇所が全て初期化されてしまうからです。子テーマを使えば、カスタマイズした箇所を引き継ぐことができます（有料無料問わずテーマのアップデートは必ずきます）。

テーマを一切カスタマイズせず使っている方は必要ありませんが、少しでも「スタイルシート（style.css）」を編集されている方、カスタマイズしたい方は、子テーマを使うべきです。

Contents

1 子テーマの作り方
2 style.css以外のファイルを子テーマでカスタマイズする方法
3 最後に

子テーマの作り方

難しいことは一切ありません（初めての方でも10分あれば作れます）。流れは以下の通りです。

子テーマフォルダの作成
style.cssの作成
functions.phpの作成
親テーマを継承するためのコードを記述
子テーマの有効化

実際にエックスサーバーで公式テーマ「Twenty Sixteen」の子テーマを作ってみます。

注意
有料テーマ等、子テーマが用意されているテーマでは設定不要です。通常テーマと同様、子テーマのzipファイルをアップロードして有効化させて下さい。

ファイルマネージャにログイン

エックスサーバーにログインして、「ファイルマネージャ」にログインします。

エックスサーバーのファイルマネージャにログイン

テーマフォルダに子テーマのフォルダを作る

テーマフォルダを開きます。

パス：/該当ドメイン/public_html/wp-content/themes/

「該当ドメイン」をクリック
「public_html」をクリック
「wp-content」をクリック
「themes」をクリック
子テーマのフォルダを作成

例えば、twentysixteenの子テーマを作りたい時は、「twentysixteen-child」といった名前をつけて子テーマのフォルダを作成します（フォルダ名は半角英数字ならなんでも構いません）。

子テーマフォルダの作成

子テーマフォルダに「style.css」と「functions.php」を作成する

先程作成した子テーマのフォルダを開き、2つのファイルを作成します。

style.css
functions.php

子テーマフォルダに2つのファイルを作成

子テーマのstyle.cssにスタイルシートヘッダを入力する（必須項目のみ）

style.cssにチェックを入れて、「編集」をクリックします。

style.cssの編集

下記コードを記述して、「編集」をクリックします（twentysixteenの場合）。

/*
 Theme Name:   Twenty Sixteen Child
 Template:     twentysixteen
*/

Theme Name: Twenty Sixteen Child

Template: twentysixteen

「Template:○○」の部分には、必ず「親テーマのフォルダ名」をそのまま入力して下さい。

Theme Name	テーマ一覧で表示される名前（自由につけてOK）
Template	親テーマのフォルダ名

style.css編集内容

スタイルシートヘッダに詳細な情報を入力したい方は、WordPress Codexを参考に入力して下さい（後から管理画面のテーマ編集から入力することもできます）。

ちなみに、「@import:」を使用して親テーマのスタイルシートをインポートすることもできますが、WordPress Codexでは「functions.php」で呼び出す方法を推奨しています。

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。

子テーマのfunctions.phpに親テーマを継承するためのコードを記述する

functions.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' );
 
}

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

functions.php編集内容

子テーマを有効化する

管理画面の「外観」に子テーマが追加されているので「有効化」します。

子テーマを選択

親テーマと同じデザインでサイトが表示されれば、子テーマの設定は完了です。後は、「スタイルシート（style.css）」を自由にカスタマイズして下さい。

style.css以外のファイルを子テーマでカスタマイズする方法

親テーマのフォルダを開き、カスタマイズしたいファイルをダウンロードします。

ファイルのダウンロード

子テーマのフォルダを開き、ダウンロードしたファイルをアップロードします。

ファイルの追加

子テーマの編集画面にアップロードしたファイルが追加されます。

テーマフッターが追加される

後は自由にカスタマイズして下さい。

但し、「style.css」と「functions.php」以外のファイルは、子テーマにあるファイルが優先して読み込まれます（親テーマのファイルが呼び出されない）。テーマがアップデートされた際に恩恵を受けられなくなる可能性があるので注意して下さい。

最後に

今回紹介した方法以外にも、ローカル環境で「子テーマフォルダ」を作成、その中に「style.css」と「functions.php」を作成、子テーマフォルダをzip形式で圧縮して管理画面からアップロードするといった方法もあります。結果は同じですから、やりやすい方法で子テーマを作成して下さい。

ちなみに、僕はWordPressを使い始めた頃、テーマをアップデートするとファイルが初期化されるなんて知らず、バックアップも取らずアップデートしてしまったことがあります。

当時は子テーマのことすら知りませんでした・・・。