WordPress子テーマの作り方と私のイチオシ！カスタマイズ

WordPressでは、たくさんのデザインがテーマとして公開されています。
テーマのデザインやを一部だけ自分流に変更したいときもありますよね。
その際、子テーマを使うと、とっても便利です。

Contents

1 テーマ編集には、子テーマを使う！
- 1.1 子テーマを使う理由
2 2. 子テーマの作り方
3 3. 私がよくやるカスタマイズ

テーマ編集には、子テーマを使う！

子テーマは、WordPressにインストールしたテーマをベースに、一部分だけ変更するためのテーマです。

子テーマを使う理由

まず、公開中のテーマは開発者が随時バージョンアップしていきます。
私たちWordPressユーザーがテーマの中にあるファイルを書き換えても、テーマがアップデートすると、自分が更新した部分が消えてしまうんですね。
子テーマを使うことで、自分が変更した箇所はそのまま残すことができます。

また、テーマをカスタマイズするときには、テーマの構造や書かれているプログラムの内容など、技術的な知識が必要になります。
うっかり、誤った場所を更新してしまうと、ページが表示されなくなってしまうリスクがあります。

子テーマを使えば、もし間違った操作をしても、子テーマの中のファイルだけを見直せばいいので、安全にカスタマイズを進められます。

WordPressは子テーマを親テーマに上書きして、動作するようになっています。

◯ 親テーマ＝ベースとなるテーマ（開発者が随時アップデートするのでさわらない）
◯ 子テーマ＝カスタマイズするテーマ（更新したいファイルのみ追加する）

2. 子テーマの作り方

Twenty Sixteenのテーマを例に、子テーマの作り方を説明します。

2-1. 子テーマのフォルダを作るよ

自分のパソコン上でフォルダを作ってください。
子テーマのフォルダ構成
フォルダ名は「親テーマ-child」とすると分かりやすいです。

このフォルダの中に、子テーマのファイルを作っていきます。

style.css（必須）
functions.php（必須）
変更したいファイル（任意）

最低限必要なのはstyle.cssとfunctions.phpです。
style.cssがテーマの外観を設定するためのファイル。
functions.phpはテーマに機能を追加するためのファイルです。

2-2. style.cssにテーマの情報を書く

style.cssは子テーマの名前ともとになるテンプレート（親テーマ）を書きます。


/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/
/* 以下、子テーマ用のスタイルを記述します。*/
body{
    background:#FFEEB4;/* 試しに背景を黄色にしてみるよ */
}

Theme Name:子テーマの名前
Template:親テーマのフォルダ名
Templateは親テーマの名前とは違うので注意してください。

2-3. functions.phpの中身を書くよ

functions.phpは、テーマが動作するための機能を記述したファイルです。
ここで、CSSファイルの読み込み順序を記載します。
親テーマのCSSを読み込んだあと、子テーマの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' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
//以下に子テーマ用の関数を書く