Wordpressカスタマイズするときについめんどくさくなって、親テーマ自体に変更を加えることがありますが、これ、絶対NGです。

無駄な作業を繰り返して残業地獄にはまらないためにもさくっと子テーマの作り方を覚えてしまいましょう。

なぜWordpressに子テーマが必要なの?2つの理由

なぜWordpressに子テーマが必要なの?2つの理由

子テーマとは親テーマを引き継ぐもので、何もしなければ親テーマと同じ内容が表示されます。

子テーマ側で追加したスタイルや書き換えた部分だけが変更される仕組み。

だったら元(親)のテーマを直接書き換えるのと何が違うの?というのは普通の疑問ですよね。

その理由は2つあります。

理由1: テーマのアップデートで上書きを防ぐ

もっとも大きな理由がこれ。親テーマを書き換えた後にアップデートすると、なんと書き換えた部分も含めて上書きされてしまうのです。

まるでゲームのセーブデータが上書きされるくらいショックな出来事ですが、子テーマがあればこの問題を避けることができます。

子テーマを使うことで、親テーマがアップデートされても、子テーマは上書きされずそのまま残すことができます。

理由2: テーマカスタマイズを効率化する

もう1つがこれ。親テーマだと全てのファイルを管理する必要があるのに対し、子テーマなら必要なファイルだけでOK。

変更しないファイルは一切無視して作業できるので非常に効率よが良くなります。

子テーマの実装方法と使いかた

子テーマの実装方法はすごく簡単。必要なのはstyle.cssとfunctions.phpの2つのファイルだけ。

style.cssには次のような内容を書いておきます。

/*
 Theme Name:   Child Theme Name
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Child Theme Description
 Author:       Child Theme Author
 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:  child-theme-domain
*/

functions.phpは次のようにします。

<?php
function my_theme_enqueue_styles() {
  // 親テーマのCSSを読み込み、必須
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  // 子テーマのCSS設定、推奨、必須ではないがあるとlinkタグのid名に名前やバージョンを記載できる
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

子テーマの作り方

この2つのファイルをテーマフォルダの中に入れると、管理画面に表示されるようになります。

子テーマで親テーマのテンプレートを編集する方法

では実際にテンプレートの編集をしてみます。

編集対象のテンプレートをコピー、もしくはファイル名が同じで中身が空のテンプレートを作成します。

例えばsingle.phpを編集する場合は子テーマのフォルダにsingle.phpをコピーします。

子テーマのフォルダ/single.php

コードを少し編集してみます。

<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

  <h1>メインエリアのトップに見出し追加</h1>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

子テーマで親テーマのテンプレートを編集する方法

画面を見てみると、変更されているのがわかります。テーマを親テーマに戻すと編集した部分は表示されません。つまり親テーマの方は何も影響がないということです。

子テーマで親テーマのスタイルを編集する方法

次にスタイルの変更をやってみます。

最初に作成したstyle.cssの続きにCSSコードを書いていきます。ここではわかりやすくするため、テキストを赤い色に変更してみました。

body {
  color: red !important;
}
a {
  font-size: 30px;
}

子テーマで親テーマのスタイルを編集する方法

画面を見ると変更されているのがわかります。ここでも親テーマに戻すと何も変化はありません。

また、親テーマ側でテキストの色を青くしても子テーマ側では赤く変更しているため、子テーマ側の変更が表示されます。

ここが、理由のところで説明した、親テーマがアップデートされても子テーマの変更はそのまま残るということなのです。

まとめ

僕自身子テーマのことを知らなかった頃に、アップデートがあるたびに変更部分を再編集するという作業をしていて本当に大変だったのを覚えてます。

無駄な作業を繰り返さないために、Wordpressをカスタマイズするときは少しの変更でもできるだけ子テーマを使うようにしておくことを強くおすすめします。