テキストエディタを使って、テーマを子テーマ化する

Wordpressのテーマを子テーマ化する方法を覚書。テキストエディタでシンプルにやってみたかったんです。

まえがき

WordPressを使ったホームページ製作の際、

  • 一からオリジナルテーマを作る人
  • 何かいい感じのテーマを見つけたらそれをベースにカスタマイズする人

がいますよね。

わたしは後者、いい感じのテーマを見つけたらカスタマイズする派です。

理由は、便利な機能がたくさんついていたり、SEO対策に強かったりするから。

ただし、テーマは頻繁に更新が発生するので、そのままいじるよりは子テーマ化した方が良さそうです。

子テーマ化せずに、テーマを直接編集→更新をしてしまうと、テーマの更新のたびに、自分で編集していた内容がすべて消えてしまいます。

更新はけっこう頻繁にあります。

子テーマは自分がベースとしたいテーマ(親テーマ)の変更したい部分のみをカスタマイズしていくので、親テーマが更新されても、自分がカスタマイズした部分は残るという仕組みです。

ただし、PHPなどをがつがつ修正したい場合は子テーマ化ではうまく対応できないこともあります。そういった人は本当は自分でテーマを作った方が良さそうですが、このサイトの管理人は良さげなテーマを見つけて使うくせにPHPをがつがついじりたいタイプです。

必要スキル/環境

  • テキストエディタ
  • (FTP環境が必要な場合あり)
  • php、CSS(コピペ可)

テキストエディタはなんでもOKです。
Windowsだと秀丸やsakuraエディタが好きですが、現在はMacなのでmiを使っています。

1.親テーマを追加

今回はWordpressのテーマTwenty Seventeenで子テーマ化する例です。

ちなみにここのサイトで使っているのは、Simplicity2という無料のテーマです。Simplicity2はあらかじめ子テーマも用意してくれているありがたいテーマです。親テーマはこれ!ととくに決めていない方はこちらのテーマをおすすめします。

さて、続けましょう。

外観-テーマからテーマの設定画面を開きます。

Twenty Seventeen」はWordpressのバージョンが4.7以降であればデフォルトのテーマとしてインストールされています。

自分の好みのテーマを使う場合は、新しいテーマを追加 からインストールしましょう。

2.子テーマ準備

まずは完成図。

フォルダ作成

子テーマを作るにあたって、決めるのは子テーマ名です。
Twenty Seventeen-child などわかりやすいものがいいでしょう。

テーマ名が決まったら、フォルダを作ります。
TwentySeventeen-child など、スペースを除いて、テーマがわかるものにしましょう。

ファイル作成

作成したフォルダに最低限必要なファイルは2つです。

  • style.css
  • functions.php

カスタマイズしたい内容に合わせて、single.phpやhome.phpなどを作成します。
functions.php以外は子テーマにあるファイルが優先されます。

例えば親テーマにsingle.phpがあり、子テーマにもsingle.phpがある場合、子テーマのsingle.phpが採用されます。

functions.phpに関しては、親テーマに対して機能を追加/削除するイメージです。親テーマのfunctions.phpと同じ関数を子テーマでも書くとエラーが発生します。

style.cssに関しては子テーマでのみCSSを有効にすることもできますし、親テーマ+子テーマというように親テーマの一部を自分好みに変えるということもできます。

ただし、子テーマ化する方々は親テーマのレイアウトを生かして修正したい場合がほとんどだと思うので、親テーマのstyle.cssを読み込んだあとに子テーマのstyle.cssを読み込むように設定をします。

functions.php → 親テーマ + 子テーマ
その他(single.phpなど) → 子テーマ
style.css → 親テーマ + 子テーマ(子テーマ優先)

では、子テーマのファイルの中身を見ていきます。
style.css

/*
Template:twentyseventeen
Theme Name:Twenty Seventeen_child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Description:Twenty Seventeenの子テーマです
Author:XXX XXX
Version:1.4
*/

/* 以下、カスタマイズ内容を書く */

まず、style.cssのポイント。

Template:twentyseventeen

親テーマのテンプレート名をTemplate:以下に記載します。

親テーマの見方(外観-テーマの編集)

親テーマのstyle.cssの始まり部分を見ると以下のようになっています(テーマによって書き方に違いあり)。

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your ....
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/

親テーマのテンプレート名を取得しなければならないのですが…
どれだか正直わかりませんでした。
Theme Nameで動作するテーマもあれば、しないものもあります。
Twenty SeventeenはTheme Nameでは動作しませんでした。

そのため、わたしはText Domainを見るようにしています。

Text Domain: twentyseventeen

Twenty SeventeenもSimplicity2もText Domainで問題なく子テーマ化できています。

次に子テーマ名の設定。

Theme Name:Twenty Seventeen_child

AuthorやTheme URI,versionは任意なので自分でわかりやすいように設定しておくといいでしょう。

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

次にfunctions.phpのポイント。

そもそもstyle.cssで親テーマのstyle.cssをインポートする書き方があるのですが、これは現在はあまり推奨されていないようです。

@import url('../xxxx/style.css');

そのためfunctions.phpで、親テーマのstyle.cssを読み込んだのちに、子テーマのstyle.cssを読み込む、という処理が必要になります。
1つ目のwp_enqueue_styleで親テーマから、2つ目のwp_enqueue_styleで子テーマからstyle.cssを読み込んでいます。
注意すべき点は、パスの取得で親テーマはget_template_directory_uri()を、子テーマはget_stylesheet_directory_uri()を使っている点です。

これら2つのファイルを文字コードはUTF-8で保存します。

ファイル圧縮

2つのファイルが入ったフォルダ(TwentySeventeen-child)を圧縮してzip形式にします。
もう1度完成図。

インストール

外観-テーマ-新しいテーマを追加で、作成した子テーマのzipファイルを選択。


インストールが完了したら有効化します。

3.動作確認

外観-カスタマイズ、もしくは実際のTOPページを見て画面を確認しましょう。

子テーマがうまく適用されない場合、レイアウトが崩れてしまう場合などは、親テーマがうまく読み込めていない可能性があります。

うまくいかない場合のチェック事項

  • ファイル名に間違いはないか
  • ファイル記載内容に間違いはないか
    • style.css Templeteに間違いはないか
    • functions.php wp_enqueue_styleのパスの指定が間違ってないか

WordPressログイン画面が真っ白になってしまった場合は、phpが間違っている可能性が高いです。
一度、アップロードしたファイルを削除(FTP機能が必要です)して、ファイルの書き方に間違いがないか確認しましょう。

おわりに

今回の2ファイル以外にphpを追加したい場合は、FTPソフトなどを使ってファイルをアップロードする必要があります。

ファイル数が少ない場合は、ご自分が使っているレンタルサーバーのFTP機能などを使ってアップロードするのもいいかもしれませんね。

ワードプレスや親テーマのバージョンの変化によって、それまで動作していた書き方でも動かなくなることもあります。
バージョンアップはバックアップなどを取って慎重に!