WordPressの子テーマを作って、テーマを更新しても上書きされないようにする

はじめに

自分の写真用サイトをWordPressで作っていますが、テーマの更新があると改修部分がすべて上書きされてしまい、また書き換え作業をしなければならなくなります。

以前から、これは子テーマを作ることで対応できるということは知っていたのですが、いちいちそこまで…とも思って何もしないままでした。

この正月に私が使用しているテーマの更新が入り、いい加減更新後の調整作業するのもうんざりだったので、重い腰を上げて子テーマ対応してみました。これは、そのときのメモになります。
というか、せっかく正月の貴重な時間を使ってしまったので、まとめずにはいられないっていうか…。

基本的にはここを見れば書いてあることがベースなのですが、コンテンツの著作権表記の変更(テーマのソース中にある著作権表記の変更ではない)をするのに追加実装が必要になったので、ここでは併せてそれもまとめています。

なお、本記事では複数のCSSファイルを用いて実装されているテーマについては説明していません。単一のstyle.cssファイルだけで実装しているテーマについてのみ言及していますのでご注意ください(たぶん応用はできる気がします)。

テーマとWordPressバージョン

私が使用しているバージョンとテーマは以下のとおりです。かならずこのバージョンである必要はないでしょう。

• WordPress 4.7
• Attitudeテーマ

子テーマ作成

以下、ステップを追って子テーマを作成していきます。
子テーマを作成するといっても、たくさんのファイルをガリガリと書くわけではなく、必要な上書き用ファイルを用意するだけです。
事前に把握しておきたいキーワードは、以下のとおりです。

• 子テーマ用ディレクトリ (必要)
• style.css (必要)
• functions.php (必要)
• screenshot.png (なくてもいい)

なお、ディレクトリ表記はWordPressのインストールディレクトリからの相対ディレクトリ(たとえばインストールディレクトリ名がwordpressという名前なら、そのディレクトリからcdコマンドで移動できる範囲)で表記しています。

また、テーマ名はここでは「attitude」としていますが(私が使っているので)、別のテーマをお使いの場合も、ここを適宜読み替えてください。

子テーマ用ディレクトリの作成

まずは、themesディレクトリに移動して、子テーマ用ディレクトリを作成します。

その前に「子テーマ用ディレクトリ」とは、何なのか。
これは、対象とするテーマ(ここではattitude)を親とし、その親テーマを継承しつつ、親にはない機能やデザインを実装したり、あるいは親の機能やデザインを変更するためのファイルをまとめておくディレクトリのことです。オブジェクト指向のクラスの親子関係に似ていなくもないとは思いますが、関数のオーバライドなどはできません(たぶん)。

そして、子ディレクトリ自体は特別なことは何もなく、普通にmkdirコマンドでディレクトリを作れば良いだけです。
ただ、空白文字が含まれるディレクトリ名はWordPressでエラーとなるようですので、空白のないディレクトリ名にしましょう。

空白が含まれない上で、ディレクトリ名は自由に命名できます。ただし複数のテーマを持っている場合は、どのテーマの子テーマなのかがわかるディレクトリ名にしておくほうがよいでしょう。

ここではattitudeのカスマイズ版という意味で「attitude-custom」というディレクトリ名にしています。

子テーマディレクトリの作成

% cd wp-content/themes
% mkdir attitude-custom

さて、このディレクトリ内に次のファイルを用意します。

• style.css
• functions.php

いずれのファイルも、どのテーマでも持っているものです。子テーマで用意するこれらのファイルは、親テーマの同名ファイルの設定を上書き、ないしは追加を行うものとなります。

style.cssの作成

子テーマのstyle.cssファイルを作成します。
WordPressの他のstyle.cssと同様に、WordPressのstyle.cssにはメタデータが必要です。まずは、このメタデータだけでも書いておきましょう。

style.cssのWordPressヘッダ

/*
Theme Name: Attitude-Custom
Theme URI: http://themehorse.com/themes/attitude
Author: Atsushi Ezura
Author URI: http://zura.org
Template: attitude
Description: Attitude Custom Theme
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, light, blue, one-column, two-columns, three-columns, left-sidebar, right-sidebar, fluid-layout, custom-menu, custom-background, custom-header, featured-images, full-width-template, theme-options, threaded-comments, translation-ready, sticky-post
Text Domain: attitude
*/

親テーマのstyle.cssのヘッダからコピーして貼り付けています。その上で必要な箇所を書き換えています。

Theme Nameには、WordPressの管理画面の外観＞テーマで表示される画面に登場する名前になります。
Authorは自分の名前にしておけばいいかと思います。子テーマを作ったのは自分であるので問題はないでしょう。
Templateが大切で、親テーマのディレクトリ名をここに記載しなければなりません。ここを間違えると親がわからなくなります(というか外観＞テーマから見えなくなります)。
DescriptionとかVersionは適当に書いてください。
それ以外は親と同じに設定しています。

CSSの上書きは、一般的なCSSの上書きルールに基づいて、後に設定されたものや内側に設定されたものになります。子テーマのstyle.cssが最後に読み込まれるので、親テーマのCSSの設定を上書きすることになります。上書き自体はCSSのルールに基づくものなので(だと思う)、子テーマのstyle.cssに列挙したものが適切に上書きされるかどうかはテーマの構造に依存するかもしれません。

子テーマを使えるようにする準備

子テーマを使う準備を、functions.phpの実装に行います。ここで行うのは、親テーマの関連付けです。
add_action()でenqueueをhookして親テーマのスタイルシート(ここではstyle.css)をとの関連性を登録します。
get_template_directory_uri()の戻り値で親テーマのディレクトリをもらい、この子テーマの親スタイルを関連づけます。

親テーマとの関連づけ

<?php
/**
 * 子テーマを使う
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

ウェブ上のcopyright表記の置き換え

子テーマを使うだけであれば、さきほどの部分までで問題ありません。
ただ私の場合、ウェブサイトの末尾にあるcopyright表記に、WordPressや親テーマのものが付いているのはちょっと困るので(コンテンツ自体の著作権は私であり、powered byは特にいらない)、これを親テーマを直接いじらずに子テーマだけで対応することで、親テーマの更新に対応しようという試みです。

さきほどと同様に、functions.phpに追加実装を行います。
実は最初はremove_action()で前のアクション設定を取り除いて自分のアクションをadd_action()で登録すればいいと思っていたのですが、どうもうまくいかず。

add_action()とかremove_action()というのは、あるアクション(これはWordPressで決められている「アクションフック名」がある)に対して、対応する関数名と優先順位を指定して、そのアクションフックが実行された時に呼び出される関数を登録する(あるいは取り除く)という関数なのですが、remove_action()は(私がWordPressに特に詳しいわけではないからという理由だと思うけれど)うまく挙動しませんでした。

ということで、初期化のフックを使ってremoveとaddを行って置き換えを実行しようとしたのが、以下のコードです。

copyright部分の置き換え

/**
 * Copyright置き換え
 */
add_action( 'init', 'replace_footer_info' );
function replace_footer_info() {
        remove_action( 'attitude_footer', 'attitude_footer_info', 30 );
        add_action( 'attitude_footer', 'attitude_footer_info_mine', 20 );
}
function attitude_footer_info_mine() {
   echo '<div class="copyright">Copyright &copy; 2015-' . attitude_the_year() . ' Atsushi Ezura</div><!-- .copyright -->';
}

replace_footer_info()はfunctions.phpに実装した自作関数で、単にremove_action()とadd_action()を同時に行っているだけにすぎません。
この関数を呼び出すタイミングが「init」フックで呼び出して置き換えを図ります。
add_action()で追加する関数も自作関数で、attitude_footer_info()が呼ばれるところをattitude_footer_info_mine()で置き換えを図ります。もともとattitude_footer_info()関数が呼び出されることで期待しないcopyright表記が行われていたので(それはgrep -r 'copyright'とかで探した)、ここのフックを置き換えることで対応できるだろうという画策です。もっとスマートなやり方があるのではと思いつつも、とりあえずこの方法に落ち着きました。

screenshot.pngの配置

これは必須ではありませんが、外観＞テーマで表示されるテーマの画像は、このファイルになります。このファイルがないと何も表示されないので(テーマ自体は選択できる)、気になる方は配置すればよいでしょう。

管理画面からテーマを選択

上記コマンドラインからの設定がすべて終わったら、管理画面から外観＞テーマで、最初にTheme Nameで指定した名前のテーマを「有効化」して、テーマが有効になるかどうかを確認しましょう。