CSS消失
新しいブログを作っている。古いブログからテーマファイルを持って来て、ちょっといじって適用してみた途端……CSSが消えてしまった。あれ?
カスタマイザーのライブプレビューではちゃんと適用されていたのに……
テーマを有効化するとCSSが消える。
開発者ツールでCSSを検索してみても、カスタマイザーの中ではちゃんとapp.cssがlink要素から参照されている。
<link rel="stylesheet" id="app-css" href="https://bunborg.74th.net/wp-content/themes/mogami74_bunborg/css/app.css" type="text/css" media="all">
有効化した時にはこれが消えてしまう。
CSSの登録を行っているはずのfunctions.phpを確認してみた。
add_action('wp_enqueue_scripts',function(){ wp_register_style('app',get_template_directory_uri().'/css/app.css',array(),'20170313','screen'); wp_enqueue_style('app'); });
もちろん、やっている。というか、このテーマを別のブログで使っているので、やってないわけがない。テーマカスタマイザーでも表示されているわけだし。
つまり、「CSSの表示に必要なことはすべてやっている証拠があるのに、有効化した時だけ表示されていない」という状態。
結論がわかった今から考えると、この辺で、正解に気づいておくべきだったという気もする。
スラッシュがないとダメ、スラッシュがあってもダメ
ふと思いついたのは、スラッシュの付け間違いとかそういうことなのではないか……ということだった。get_template_directory_uri()がスラッシュまで補完してくれちゃってたりとか……。
get_template_directory_uri().'/css/app.css'
ではなく、
get_template_directory_uri().'css/app.css'
にしてみた。
すると予想外のことが起きた。
<link rel="stylesheet" id="app-css" href="https://bunborg.74th.net/wp-content/themes/mogami74_bunborgcss/app.css" type="text/css" media="all">
消失していたはずのlink要素は無事出現したんだけれど、スラッシュが抜けている。あははー、そうだよな、スラッシュはつけなきゃダメって、教わったもんね……とスラッシュを付けなおすと、link要素は消失した。
……。
つけるとhrefが壊れる、つけないとlink要素そのものが消える。どうしろと。
StackOverflowで質問してみる
Googleでいろいろ探してもそれらしき情報がないので、StackOverflowで質問してみることにした。
→php - slash and wp_register_style - Stack Overflow
ここで教えてもらって、wp_register_style()は不要と教えてもらった。
add_action('wp_enqueue_scripts',function(){ wp_enqueue_style( 'app', get_stylesheet_directory_uri() . '/css/app.css', array(), '1.0.0', 'all' ); });
しかし肝心のスラッシュ問題は解決しない。むむむ。
デバッグモード、ログ取得
そういえば、デバッグモードを使ってなかったな、と気がついて、デバッグモードにしてみた。
→WordPress初心者におすすめ!デバッグモードの使い方 | Mignon Style
ログなしでもいいか……とやってみたんだけど、ブラウザに何のアラートも出ない。んん……何も出ないと張り合いがないな。念のため、ログもとってみるか……。とログをとってみたら、なんか出てる。
[09-Sep-2018 06:40:21 Asia/Tokyo] PHP Deprecated: Function create_function() is deprecated in /home/mogami74/www/blog/bunborg/wp-content/plugins/autoptimize/classes/autoptimizeBase.php on line 181 [09-Sep-2018 06:40:21 Asia/Tokyo] PHP Deprecated: Function create_function() is deprecated in /home/mogami74/www/blog/bunborg/wp-content/plugins/autoptimize/classes/autoptimizeBase.php on line 213 [09-Sep-2018 06:40:21 Asia/Tokyo] PHP Deprecated: Function create_function() is deprecated in /home/mogami74/www/blog/bunborg/wp-content/plugins/autoptimize/classes/autoptimizeBase.php on line 229 [09-Sep-2018 06:40:21 Asia/Tokyo] PHP Deprecated: Function create_function() is deprecated in /home/mogami74/www/blog/bunborg/wp-content/plugins/autoptimize/classes/autoptimizeBase.php on line 197 [09-Sep-2018 06:40:21 Asia/Tokyo] PHP Deprecated: Function create_function() is deprecated in /home/mogami74/www/blog/bunborg/wp-content/plugins/autoptimize/classes/autoptimizeStyles.php on line 98
なんじゃこりゃあ?
プラグインのAutoptimizeがエラーを吐いているみたい。よくわからんけど、気味悪いしパフォーマンスが落ちても本末転倒だから、停止しとくか……。
Autoptimize停止。
すると
<link rel="stylesheet" id="app-css" href="https://bunborg.74th.net/wp-content/themes/mogami74_bunborg/css/app.css" type="text/css" media="all">
おおおおおお前かぁ!
AutoptimizeのCSS最適化のどこかで影響受けていた模様。
Google様で調べると、「エラーが起きる場合は、たいていテーマファイルの方がどっかおかしいです」とあるので、悪いのは私のテーマでした本当に申しわけありませんでした。土下座してお詫び。
参考
→WordPress初心者におすすめ!デバッグモードの使い方 | Mignon Style
→関数リファレンス/wp enqueue style - WordPress Codex 日本語版
→Autoptimizeの設定と使い方|HTML,CSS,JavaScriptを最適化するプラグイン | WordPressのアフィリエイトで稼ぐ人生を始める-サトシ