WordPressには、有料・無料問わず豊富なテーマが提供されています。提供されているテーマは完成度が高いものも多いので、適用するだけでそれっぽくなるのですが、せっかくならカスタマイズしてオリジナリティを出したいですよね。というか、カスタマイズする人がほとんだと思います。
でもテーマをそのままカスタマイズしていませんか？それは少し危険です。なぜなら、テーマを更新してしまうと、カスタマイズしたファイルが上書きされてしまうからです。
公式ディレクトリから提供されているテーマは、内容が更新されるとアップデートの通知がきます。うっかりそのまま更新してしまうと、今までカスタマイズした内容がすべて上書きされてしまいます。バックアップを取っていれば戻せますが、データが残っていないとカスタマイズをし直す必要が出てきます。
かといって、テーマの更新をそのまま放置するのもあまりよくありません。もしテーマ内に脆弱性が見つかって、アップデートによってセキュリティが強化されたとしても、テーマを更新しなければ脆弱性は残ったままです。
では、どうすればテーマを更新してもカスタマイズした内容が上書きされなくなるのでしょうか。それは「子テーマ」を使うことで解決できます。テーマを子テーマ化しておけば、もととなるテーマを更新したとしてもカスタマイズした内容は保持されたままになります。
そんなわけで、前置きが長くなってしまいましたが、WordPressテーマを子テーマ化する方法を紹介したいと思います。
子テーマのディレクトリとstyle.cssの作成
まずは、wp-content/themes配下に子テーマ用のディレクトリを作成します。ディレクトリ名は半角英数字なら何でもOKです。わかりやすい名前で作成しておきましょう。
ディレクトリを作成したら、その中にstyle.cssを作成します。style.cssの先頭には、コメント形式で子テーマの情報を記述します。最低限必要なのは、子テーマの名前と親テーマのディレクトリ名です。
/*
Theme Name: Child
Template: twentyfifteen
*/このようにTheme Nameには子テーマの名前、Templateには親テーマのディレクトリ名を入れます。上記ではTwenty Fifteenを親テーマとしています。
他にもテーマの作成者や説明などの情報を入れておいてもOKです。以下は、Twenty Fifteenのstyle.css冒頭に記述されているテーマの情報です。
/*
Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/子テーマのディレクトリを作成して、style.cssを設置したら、WordPress管理画面の[外観] – [テーマ]に子テーマが現れます。
functions.phpの作成
style.cssを作成して、管理画面に子テーマが現れるようになっても、これだけでは不十分です。この状態でテーマを適用してみてもらうと、スタイルが何も適用されていないことがわかります。
先ほど作成したstyle.cssの中身は、テーマの情報を記述しただけなので、見た目の装飾は何も適用されません。親テーマのstyle.cssを読み込ませることで、スタイルを適用させます。
そこで、子テーマディレクトリの中にfunctions.phpを作成し、以下のコードを記述します。
<?php
//親テーマのstyle.cssを読み込み
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );functions.phpはPHPファイルなので、先頭に「<?php」を記述するのを忘れないようにしましょう。
もし、これでうまく親テーマのstyle.cssが読み込まれない場合は、子テーマのstyle.css内に@importを記述して親テーマのstyle.cssを読み込ませます。
@import url('../twentyfifteen/style.css');twentyfifteenの部分には、親テーマのディレクトリ名を入れてください。
上記を記述することで、親テーマと同じ装飾が子テーマにも施されます。
ファイルのコピーとカスタマイズ
ここまで準備ができたら、変更したいファイルを親テーマディレクトリから子テーマディレクトリにコピーします。子テーマにコピーしたファイルをカスタマイズしていきます。
子テーマを作成した場合の動きとしては、子テーマディレクトリ内に親テーマと同じファイルが存在する場合は、子テーマディレクトリ内のファイルが優先されるようになります。この時、親テーマのファイルは読み込まれません。
つまり、子テーマディレクトリ内にheader.phpなどのファイルをコピーして、コードをカスタマイズしていたらカスタマイズした内容が表示されることになります。子テーマ側にあるファイルが上書きされると覚えておけばOKですね。
この動作のおかげで、親テーマを更新してもカスタマイズした内容が失われずに済むというわけです。
functions.phpの動作
子テーマディレクトリ内のファイルを優先して利用するようになると書きましたが、functions.phpだけは動きが異なります。
functions.phpの場合は、子テーマ→親テーマという順番で両方が読み込まれます。この点だけ注意する必要があります。
親テーマ側で!function_existsによって重複チェックが行われていた場合は、同じ関数名を子テーマのfunctions.phpに定義すると、子テーマ側で定義した関数の内容に置き換えられます。
!function_existsによって重複チェックが行われていない場合は、同じ関数名を定義するとエラーで正常に動作しないです。
この場合は、特定の関数だけ親テーマよりも後で読み込んでもらうようにafter_setup_themeを使って、関数の内容を置き換える処理が必要です。詳しくは、「親テーマで定義されている関数を子テーマのfunctions.phpで上書きする方法」をご参照ください。
あとがき
テーマをカスタマイズする際は、子テーマ化しておくと色々と便利ですね。これからテーマをカスタマイズしようと思っている方の参考になれば幸いです。