wordpressをカスタマイズしたいときの子テーマの作り方。

  2017年12月12日

wordpressに少し慣れてくると、カスタマイズしたくなりませんか?
ここの色を変えたいなぁ、こういう配置に変えたいなぁ…など。

テーマを直接カスタマイズすると、テーマのアップデートがかかったときに
せっかくカスタマイズした内容は消えてしまいます。
そんなときに、役立つのが「子テーマ」の存在です。

元のテーマを「親」として、テーマは引き継いで「子」テーマで
カスタマイズすることができます。
この場合、アップデートがあっても、
アップデートをされるのは「親」テーマなので、「子」テーマで
カスタマイズした内容は残ります。

せっかく時間かけてなおしたのに…!!
ということがなくなります。

子テーマをつくるのに必要なファイル

子テーマをつくるには、親テーマのようなテーマのディレクトリと
style.css、そしてfunction.phpが必要になります。

  • style.css
  • function.php

今まではstyle.cssで@importして親テーマのcssを呼んでいましたが、
変わったようです。
現在は@importを使用して子テーマをつくることは
非推奨となっているみたい。知らなかった…!
そしてimportを使うより、速度も速くなるそうですよ。

子テーマのディレクトリをつくろう

まずは、子テーマのディレクトリをつくりましょう。
たとえば、「twentyfifteen」というテーマを使う場合、
子テーマは「twentyfifteen-child」というようにテーマ名の後ろに
-childを追加しましょう!

style.cssをつくろう

まずは最初に、テーマの詳細について
style.cssに記述しましょう。

/*
Theme Name: twentyfifteen-child //子テーマのディレクトリ名
Template: twentyfifteen //親テーマのディレクトリ名
*/

function.phpをつくろう

お次は、function.phpで親テーマのスタイルシートを
読み込むコードを記述します。
これはコピペでOKです!

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

ただ、うまくいかないこともあるようです。
残念ながら私は上記のコードではうまくいかなかったので、
下のコードのように明確に子テーマのスタイルシートを読み込む必要がありました。
これで私はうまくいきました!
こちらもコピペでOKです!

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

これで子テーマが完成しました。

こちらのサイトを参考にさせていただきました!
スライドで分かりやすく説明してあります。

ABOUTこの記事を書いた人

  • mm
  • Editor: うぇぶもようの中の人