フリーランスの道具箱

functions.phpを使ってますか?WordPress 子テーマの作り方間違ってたのに気づきました。

WordPressをカスタマイズする時は子テーマ

WordPressの外観(テーマ)をカスタマイズする時に、そのテーマのファイルを直接書き換えるとテーマのアップデートの時にファイルが機械的に書き換えられます。カスタマイズしたところが消えちゃいます。

じゃ、アップデートしないように、、というわけにもいきません。セキュリティーアップデートもありますし、WordPress本体のアップデートへの対応も必要です。

そんな時に便利なのが子テーマです。元々のテーマを「親」として、引き継ぐ形でテーマをカスタマイズできます。アップデートがあってもカスタマイズが保持できて、引き継ぐことでカスタマイズの作業時間も短縮できます。

子テーマには最低2つのファイルが必要

子テーマを作るには、2つのファイルとそれらを格納するディレクトリが必要となります。

ディレクトリは、他のテーマと並列に「wp-content/themes ディレクトリ」の下に作ります。子テーマだけれども、親テーマの下に配置しないこと、子テーマの名前に空白があるとエラーになることに注意です。

必須の2つのファイルはこちらです。

style.css
スタイルシートのヘッダ部分で親テーマの名前やフォルダを指定します。@importでの親テーマCSS読み込みは**書かない**ようにします。
functions.php
親テーマのCSSの読み込みを行う命令はこちら。同時にWordPress本体が親テーマと子テーマの関係をしっかり理解できる指定ができます。なお、このファイルの作り方はどの親テーマでも同じ(コピペ)でOKです。

あれ?style.css の1つだけでOKだったはずじゃ?なのですが、上のCodexによると非推奨と書かれています。

@import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。

@importを使うより、読み込み速度も有利ということです。

スタイルシートの@importは非推奨

@importは非推奨ということを知りませんでした。気付いたきっかけはこちらのスライドです。

Mignon StyleさんがWordCamp Tokyo 2015 のセッション スライドを読んでいて気づけました。感謝です。

設定方法

Codexが参考になります。

style.css

ヘッダに書く必須項目は2つです。

  • Theme Name:
  • Template:

[code]
/*
Theme Name: 子テーマの名前(ディレクトリ名と合わせる)
Template: 親テーマの名前
*/
[/code]

ただ、Codexの推奨形式はこちらとなります。

たくさんの項目があるのですが、ライセンスもきちんと表現している推奨形式がいいわけです。WordPressはオープンソースコミュニティで発展していますし。

あとはカスタマイズするCSSを追記していきます。

functions.php

このファイルの中では親テーマはどれか?ということを指示する必要はありません。どの場合も同じ書き方(つまり、下をコピペするとOK)になります。wp_enqueue_script()というWordPressの命令で親テーマのCSSを読み込みします。

通常はこちらのコードで子テーマのCSSが読み込まれます。

[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]

ただ、うまくいかない場合は下のコードにて子テーマを明確に読み込みするように指示する必要があります。つまり長いですがこちらのコードを使うのが良いです。

[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]

デザイン・カスタマイズについてはこちらのエントリーを読んでください。

  • 「視覚マーケティング実践講座 ブログデザインで自分ブランドを魅せる」絶版だけど、ブログのデザインを考えるのに役立つ凄い本 | ものくろぼっくす → https://mono96.jp/?p=12302

もう一つさらにエントリーを読んで行かれませんか?


この記事を書いた人 :

profile2016autumn

ブロガー・Web&Blogコーチ・親指シフトユーザー・orzレイアウト考案者。WordPressが得意。HTML・CSS・PHPも熟知し広範囲の知識を持つ。

誰でもインターネットを活用できる時代だから、頭でモヤモヤしている「こんなのを実現したいなぁ」を引き出して形にし実現させるお手伝い、そして、インターネットを上手に使えるようにサポートするのが得意です。

iPhoneやAndroidなどのガジェット、デジタルだけでなく文房具などのアナログなツールも大好きです。写真や旅を楽しむこと、おいしいお食事、楽しい・ワクワクすることが大好きです。

Twitterやfacebookでも情報発信中、よろしければフォローしてください。



Instagram
follow us in feedly

ご依頼・講座開催情報はこちら

ブログ・情報発信でお困りごと、モヤモヤ、解決。あなたのステップアップをサポートしています。

広告

情報発信コンサルティング・コーチ

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。
・Webを活用して本気でビジネス・人生を切り開きたい方
・Webのテクニカルな改善でお悩みの方
・アイディアはあるのに、記事の文章にするのがうまくいかない方
・親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みもダイレクトにアドバイス。ブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

お申し込みは
お問い合わせフォーム
からお願いします。

うまく表示されない時は
こちらをご覧下さい。

お申し込みは
お問い合わせフォーム
からお願いします。

こちらの記事も役立ちます