WordPressの子テーマの定義文にはスペースを入れない

  • 投稿日:
  • カテゴリ:
WordPressで、最近サイトをこさえたのですが、様々なサイトやプラグインにお世話になり、なんとか格好がつきました。

当方も、何か還元したいと思うのですが、取り立てて新しい事を紹介する力は、ありませんので、細かい「はまり」の事例などをご紹介すると共に、自分の備忘録としたいと思います。

バージョン3.3.1、マルチサイト、親テーマはtwentyelevenという環境での話です。

順不同で恐縮ですが第一段は、「子テーマ」。

MTなどど比べて、ダッシュボードから、ワンタッチでテーマファイルや、プラグインを簡単に更新できるのが、WordPressのいいところですが、安易にテーマを更新すると、カスマイズをした分まで、上書きされてしまいます。

そこで「子テーマ」と呼ばれる、カスタマイズしたテーマファイルや、スタイルシートを収めた追加フォルダ作成が推奨されています。

具体的な方法は、公式サイトにあります。
子テーマ - WordPress Codex 日本語版

ここで、当方のように、斜め読みして、twentyelevenをそっくり別名フォルダにいれ、アップロードすりゃ、子テーマなんて一丁あがり!は、間違いですね

とういうか、そのようにしても、子テーマの如く一見認識されてしまうのが、はまり。
テーマファイルの種類による読まれ方の違いや、継承関係について無視した事になり、次第に、思う通りの結果にならなくなります。


「子テーマ」といっても難しいことはなく、wp-content/themesフォルダ内に新しいファルダを作り、最低限オリジナル分のスタイルシートファイルを1個いれておくだけです。

ただ、そのファイルの冒頭のコメント文で、子テーマであることが分かるように、規定の書式で最低限の項目を書いておきます。またコメント文の直下に親テーマを読み込む設定 @import url('../twentyeleven/style.css'); などを記述しておきます。

まず、子テーマのstye.cssの冒頭のコメント文に子テーマ名、親テーマ名その他を、記述しないといけません。それで、

/*
Theme Name:     Kid
Author:         Demetris
Template:      twentyeleven
*/

が例文としてあげてありますが、このままだと、ブログ画面のヘッダー画像と、メインメニューの間に、空白行ができることがあります。随分とこれで、はまりました。

実は、ここは見出しを含めてスペースを取り、詰めて表記。
/*
Theme Name:Kid
Author:Demetris
Template:twentyeleven
*/

CSSのコメント文にありながら、スペースが生きてしまうのが不思議なのですが、このように詰めて表記すると、ヘッダー画像とメインメニューがきれいに表示されました。

※親テンプレートの各PHPファイルをカスタマイズしたい場合も、変更したファイルや使い分を子テーマ内にファイルを置けますが、追加分だけなのか、修正分を含む全部なのかなど、親ファイルとの関連ルールに要注意。