こんにちは。ディレクターのエリカです。
突然ですが、WordPressのテーマを利用したことはありますか?
「テーマ? 探したことないなぁ……」という方は「WordPressのテーマ選びで気をつけるべきポイントとオススメテーマ7選」がありますので、ご覧ください。
せっかく素敵なテーマを利用しているなら、ぜひ子テーマも利用してみてはいかがでしょうか?
子テーマとは?
WordPressには有料のものから、無料のものまで、さまざまなテーマがあります。いざ理想のテーマを見つけることができたとしても、細かいカスタマイズをしたいことってありますよね。
そんなときに、子テーマが便利です。
子テーマを利用すると、親となるテーマを部分的に置き換えて(カスタマイズして)使うことができるようになります。
なぜ子テーマを使うのか?
せっかく見つけた素晴らしいテーマです。そういったテーマは、制作者の方が常に改善していたり、新機能をつけてくれたりするので、アップデートできるようになることも多いんです。しかし、カスタマイズした部分が消えてしまうからアップデートできないという方、いらっしゃるのではないでしょうか。
子テーマで作成しておけば、その心配がなくなるんです! すばらしいですよね。
子テーマの作り方
それでは、子テーマの作り方です。簡単に言うと、以下の3つを準備すれば大丈夫です。
- 子テーマディレクトリ
- style.css
- functions.php
子テーマディレクトリの作成
テーマディレクトリ(wp-content/themes)配下に子テーマ用のディレクトリを作成します。
一般的には、「-child」という接尾辞を付けることが推奨されているそうなので、例えば、twentyfifteenの子テーマを作成するなら、twentyfifteen-childといった感じになりますね。
style.css の作成
作成した子テーマディレクトリの中に、通常のテーマと同様に、style.cssを作成します。
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
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: twenty-fifteen-child
*/
このとき、Templateについては、必ず親テーマを指定するようにします。その他の項目については、作成する子テーマにあわせてそれぞれ設定していきます。
functions.php の作成
style.cssと同じように、子テーマの中に下記のような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' );
}
子テーマの有効化
ここまでの作業で、テーマ一覧にはTwenty Fifteen Childというテーマが新たに追加されているはずです。あとは、このテーマを有効化すれば、子テーマが適用されるようになります。
実際に、この子テーマを有効化した状態でサイトを確認していただけるとわかるかと思いますが、親テーマとほぼ同様の機能・デザインが適用されているはずです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。