Chrome のデベロッパーツール【検証】と WordPress は相性が悪いのか? ― WordPress Ver 4.8 で CSS ファイルのマッピングができなくなった件

今までできていた事が突然できなくなるのは、良い気持ちがしない ―― ということ・・・WordPress での実例。

はじめに:

注意!

ここで説明している Chrome DevTools のマッピング機能は 2017年12月に廃止されたため、この記事の内容は全面的に無効になった。

マッピングに代わる Local Overrides(ローカルオーバーライド)機能が、Chrome Canary DevTools にインプリメントされている。この機能の使い方については下のリンクを参考にして頂きたい。
ただ、Chrome Canary では今後何が起きるかわからないので、私自身は今でもこの記事の設定を継続している。

参考記事:

去年の 4月 11日の記事「Chrome のデベロッパーツールでサンプル CSS を・・・以下省略」の追記(今年 5月 28日付け)で、通常の Chrome では実行できなくなったサーバーとクライアント側(local)の CSS ファイルのマッピングは、 Google Chrome Canary では実行可能である云々・・・と書いた。

ところがだ・・・その追記からひと月も経たないうちに、Chrome Canary でもマッピングができない事案が発生していたので、とても驚いた。

この問題はこれから説明する解決方法で片付いたのだが、思いがけない付録まで付いてきた。どういう訳か、通常の Google Chrome でも再びマッピングができるようになっていたのだ!いったい何が起きているのだろう・・・?

これは WordPress のテーマ Twenty Fourteen の子テーマを作ろうと思い立った時の話だ。

スポンサーリンク

 

  • マッピングが失敗する理由 ―― Why ?

下の図を見れば一目瞭然(いちもくりょうぜん)だ。
左が解決策を実施する前の URL 表示で、右が解決後の URL 表示。
拡張子 CSS の後ろに『?ver=4.8』 が付くとマッピングは必ず失敗する。これが悪さをしているのだ。

Settings の Workspace でファイル名まで詳細に指定しても、まったくダメだった。


マッピングが失敗する例


マッピングが成功する例

  • いつから URL にバージョン情報が付くようになったのか ―― When ?

これは簡単に推測できる。
WordPress を現行の Ver 4.8 にアップデートした時からだ。

  • どうすれば問題は解決するのか ―― How  to ?
  • (1)基本的な解決方法

ファイル拡張子の後のバージョン番号を削除する。
方法は以下のとおり。

テーマの functions.php の中の関数 wp_enqueue_style を修正する:

style.css 登録用の関数 wp_enqueue_style の第 4 引数に null を指定する。
第 3 引数には、とりあえず空の配列 array() を指定しておけば良いだろう。

下の引用は、Twenty Fourteen の functions.php の 240 行目前後にあるその部分を書き換えた例だ。Twenty Fourteen 以外の Twenty ファミリーでも style.css を明示的に指定していないので、検索する時には注意が必用だ。

修正の実例:

// Load our main stylesheet.
wp_enqueue_style(  ‘twentyfourteen-style’,  get_stylesheet_uri(),  array( ‘genericons’ ),  null );

※第 4 引数は CSS のバージョン番号を渡すために使う。
型は「文字列/Boolean(真偽)」で、デフォルト値は false だ。どちらにしても null 以外の値を指定するとバージョン番号は必ず追加される。

私は、今は Twenty Fourteen のオリジナル以外の機能を子テーマの anjirai に集約しているので、anjirai の functions.php の中で、親テーマの style.css と自作の CSS ファイルを登録している。

子テーマで登録している場合の実例:

… wp_enqueue_style(  ‘twentyfourteen-style’,  get_template_directory_uri() .
‘/style.css’, array(  ‘twentyfourteen-lato’, ‘genericons’ ),  null );
wp_enqueue_style(  ‘custom-style’,  get_stylesheet_directory_uri().
‘/css/custom-style.css’, array(  ‘twentyfourteen-lato’, ‘genericons’, ‘twentyfourteen-style’ ),  null );

… 以下省略。

実際には上のコードを含む関数  theme_enqueue_styles() を作って、それをアクションフックに登録している。このようにして親の style.css を登録する場合、子の style.css で @import ディレクティブ( 命令)を実行する必要はなくなる。

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

  • (2)その他の解決方法

自作の CSS だけをマッピングするならば、それ等を header.php に直接書き込むこともできる。その場合は functions.php の中で重複登録を行ってはいけない。重大なエラーが発生する。

header.php に CSS の URL を直接記入する:

  • Twenty Fourteen の header.php 記入例

これは子テーマを使わない時の例。

// header 終了タグ </header> の直前に以下のコードを挿入する。
<link rel=“stylesheet” href=“<?php bloginfo( ‘template_url’ ) ?>/css/custom-style.css”>

  • 子テーマ anirai の header.php の記入例

<link rel=“stylesheet” href=<?php echo get_stylesheet_directory_uri( ); ?>/css/custom-style.css”>

※文字列を直接書き込むので echo 命令を忘れてはいけない。
header.php は親テーマのものを丸ごとコピペしておく。

HTML を直接編集する:

あと、【検証】のソースタブで Edit as HTML を実行してじゃまな部分をガリガリ削る、というのでも何とかなるが、これはお笑い以外の何ものでもないな・・・。

いや、作業の開始/終了ごとにマッピングを ON/OFF するこまめな人には、意外とこの方法が合っているかも知れない。でも画面を更新するたびにガリガリしなきゃいけないんだよね・・・。

あとがき:

あとがきで図をのせるのもアレだけど、まず下の図を見て頂こう。

これは、今回の問題を解決してから、サーバーと local の custom-style.css をマッピングした後の様子を示している。URL ツリーから anjirai と Twenty Fourteen の style.css  が消えているのが分かるだろう。

サーバーと local のディレクトリ構造を合わせて、local に同じ名前の CSS ファイルを用意しておけば、どれか 1 個のファイルのマッピングが成功すると、他のファイルは自動的にマッピングされる。
その時点で、サーバー側の URL を指定する理由がなくなるため、CSS ファイルの名前と、そのファイルだけを収納する(サブ)フォルダの表示は消えてしまうのだ。

先月の不具合は「1 個のファイルがうまく行っても他のファイルは取り残される」というのと、「指定したファイルとは違うファイルだけがマッピングされる」という現象がランダムに現われる、何だこりゃの 2 本立てだった。

実は 14ヶ月前のテストでも、今回ほどひどくはなかったが、似たようなことはあった。それ以来、私はずっと local のディレクトリ構造に問題があると思っていたのだが、どうやらそれだけでもなかったようだ。

今後は、WordPress のバージョンアップにも注意しなければいけないことになったようだ。

スポンサーリンク

スポンサーリンク

コメントを残す

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