このシリーズではWordPressを使用するに当たり、はまったトラブルの解決法や知ってて損はない情報を個人的な覚書を含めシェアしていきたいと思います。
現象：WP 子テーマ作成でヘッダー表示、ウィジット表示がおかしい
失敗したときの手順（親テーマ：twentyelevenの場合）
- 子テーマを作成するために「wp-content/themes/」配下に任意の名前（例：twentyeleven-child）を付けたフォルダを作成。
- style.cssを作成後新規に下記(※１)を記載。
- サーバーにアップロード
※１：作成したstyle.cssの中身（親テーマがtwentyelevenの場合）
@charset “utf-8″;
/*
Template:twentyeleven
Theme Name:twentyeleven-child
*/ @import url('../twentyeleven/style.css');
実際に親テーマに選んだテーマは別の物ですが、上記の手順で試した結果「ヘッダー部分の崩れ」「ウィジェットのエラー」が起こりました。
原因
この原因はfunction.php不足によるものでした。
スタイルシートがキューに含まれていないことが原因でした。
一部のサイトでは最低ファイルセットとして「style.css」のみあれば動くと記載されているようですが、実際は
- 子テーマディレクトリ
- style.css
- functions.php
が最低限必要なファイルでした。
そして、今回のエラーの最大の原因はCSS内で呼び出していた「@import url」。
子テーマ作成の必須要素は確かにstyle.cssのみ。
style.cssで親テーマのCSSを呼び出すことは確かに可能ですが、今回のようなエラーが起きるテンプレートも存在します。
正しくCSSを読み込むにはfunctions.phpから呼び出すのが推奨されています。
(どうやら調べてみると以前は@import urlで呼び出すのが一般的だったようですね。現在は仕様が変更されているようです。)
解決方法
結局下記ファイルに書き換えることで正常に動くようになりました。
style.css
/* Template:twentyeleven Theme Name:twentyeleven-child Theme URI:自分のサイトのURL Description:twentyeleven の子テーマです Author:自分の名前 Version:1.0 */
functions.php
functions.phpの1行目には「<?」を入力。
続けて下記ソースを記載。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
追記
上記はBASICな方法です。
一部テーマによってはCSS等の呼び出しが特殊なため上記だけではカバーできないものもあるようです。
表示が親テーマとどうしても異なる場合、テーマ開発もとに直接確認することが近道かと思います。
