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

   2017年5月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です!

[php]
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}
[/php]

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

[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’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}
[/php]

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

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

web tipsの記事