NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.02.23

アップデートしても大丈夫!WordPressの子テーマでデザインのカスタマイズをする方法

エリカ

こんにちは。ディレクターのエリカです。
突然ですが、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というテーマが新たに追加されているはずです。あとは、このテーマを有効化すれば、子テーマが適用されるようになります。
実際に、この子テーマを有効化した状態でサイトを確認していただけるとわかるかと思いますが、親テーマとほぼ同様の機能・デザインが適用されているはずです。

  • 1
  • 2