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 の子テーマを作ろうと思い立った時の話だ。…このページを読む

Chrome のデベロッパーツール【検証】でアクション疑似クラスを作成する ― div 要素の【展開/折り畳み】もそれなりには・・・

アクション疑似クラスを作ってみる ―― WordPress での実例。

はじめに:

この章では、第 1 章で作ったクラス型スタイルを利用して、アクション疑似クラス型スタイル(アクション疑似クラス)を作ってみる。

応用例では、div 要素のアコーディオン的な【展開/折り畳み】を、WordPress では順必須の簡単なショートコードと、幾つかのスタイルを組み合わせることで実現している。

そのサンプルコード中では、クラス型、ID 型、要素型の各スタイルをあえて混在させてあるので、そこをいじると動作がどう変わるのか ―― または変わらないのか、ということを各位ご自分で試してみて頂きたい。…このページを読む