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

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


この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

広告

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

新着記事

著者プロフィール

ものくろ(大東 信仁)

ブロガー/Web&Blogコーチ/親指シフト orzレイアウト開発者/ものくろキャンプ運営。のべ1,000名のブログサポートに携わる。WordPressが得意。

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

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

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

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告