Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

WordPress のCSSが消失して往生した話

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

CSS消失

新しいブログを作っている。古いブログからテーマファイルを持って来て、ちょっといじって適用してみた途端……CSSが消えてしまった。あれ?

カスタマイザーのライブプレビューではちゃんと適用されていたのに……

f:id:mogami74:20180909080354j:plain

テーマを有効化するとCSSが消える。

f:id:mogami74:20180909080413p:plain

開発者ツールで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のアフィリエイトで稼ぐ人生を始める-サトシ