WordPressのスタイルシートの読み込み順序でハマった

IE対応をやってく上でどうしても越えられない壁があり、
仕方なく、親テーマのWordPress Bootstrapのバージョンをv2.1からv2.2に更新してみた。
2.2から2.1へバージョンダウンする時よりはスムーズにいったんだけど、
いくつかハマったので、備忘録。

WordPressはphp上にスタイルシートのリンクを書くのではなく、
wp_register_styleとwp_enqueue_styleと言う関数を使って、スタイルシートを読み込む。
要するに、wp_register_styleはスタイルシートの定義(パスとかIDとか)を登録し、
wp_enqueue_styleは、登録した定義をスタイルシート出力のキューに追加する。
後は、wp_head関数が呼び出された時に、適切な順序でスタイルシートが読み込まれる・・・ハズなんだけど、
これがうまくいかなかった。

まず、第一にWordPress Bootstrapは、自身のstyle.cssを内部で出力しているらしく、
子テーマのスタイルシートがそのままでは読み込まれない。
そこで、上記の手順で子テーマのstyle.cssを読み込ませたのだが・・・
親テーマのstyle.cssの方が後に出力されてしまうため、
子テーマのstyle.cssでオーバーライドできないと言う事態に陥った。

フックを定義するときみたいな優先度の定義はないのかなーと思って調べてみたけれど
どうもそう言ったパラメータはない。
そもそも、どちらの関数もCodexにも載っていないので、イマイチ使い方がよくわからない。
同じようにハマった人はいないのかとgoogle先生に聞いてみても、良い返事は得られず。
仕方なく、WordPress.orgの英語ページを読み解いてみると・・・
第3引数の説明にこう書かれていた。

 

$deps
(array) (optional) Array of handles of any stylesheet that this stylesheet depends on; stylesheets that must be loaded before this stylesheet. false if there are no dependencies.
Default: array()

 
「must be loaded before this stylesheet.」って事は、これより先に読み込まれてなきゃいけないスタイルシートを指定できるって事だよなーと、思いつつ
このパラメータに、親テーマのスタイルシートのIDを指定してみた。
ちなみに、WordPress BootstrapのスタイルシートのIDは”wp-bootstrap”なので、こんな感じか?

 

  wp_register_style( 'hoge', get_stylesheet_directory_uri() . '/style.css', array('wp-bootstrap'), '1.0', 'all' );
  wp_enqueue_style( 'hoge');

これで、無事親テーマのスタイルシート読み込み後に、子テーマのスタイルシートが読み込まれるようになった。
でも、よくよく考えてみたらこの指定の仕方、JavaScriptを読み込む時と同じ感じなんだよね。
もっと早くに気づくべきだった・・。

まだ他にも、IEでうまくフォントサイズが指定できないとか、
LiteBox2プラグインが動かなくなるとか、ちっと問題はあるけれども
とりあえずIE8でもまともに見れるようになったので、よしとしよう。

ちなみに、以前問題となっていたFireFoxで動かなくなった件は
いつのまにか解決していた。
結局、なんだったんだろう???


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

  1. […] 前回、「ちっと問題はあるけれども、とりあえずIE8でも見えるようになった」と書いた。 ここで言っていた「ちっと問題はある」と言うのがどうにも気になったので、少し調べてみた。 […]

トラックバック URL