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

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

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

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

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

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

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

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

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

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

先ほどご紹介したCodexによると非推奨と書かれています。

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

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

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

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

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

設定方法

Codexが参考になります。

style.css

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

  • Theme Name:
  • Template:

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

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

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

functions.php

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

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

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

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

CSSカスタマイズを作業するときに、机に置いているのがこちらの書籍です。逆引きで探しやすく、Web検索で探すより便利です。

HTML5 & CSS3 デザインレシピ集
技術評論社 (2017-02-22)
売り上げランキング: 24,274

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

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告