wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

      2021/02/16   2146文字

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpressの仕組みねたで記事にできそうなポイントがあったのでお伝えします。

アクションフックだったんですけど(関数を実行)、『wp_headにcustomize_cssをadd_action』って書くと、なんとなくわかると思います。コードとかはどのようになっているか、さっそく見ていってみましょう。

■wordpressの仕組み上気になったCSSの出力され方

■気になったポイント・ヘッダーに長いCSSが勝手に入ってきてる


サイトは管理人が使っていたフリー曲素材サイトで、wordpressで組みました。テーマは昔のstingerです。style.cssはhtmlヘッダーのlink rel=’stylesheet’で読んでいるんですが、さらに長いCSSが勝手に入ってくるので気になっていました。知ってさえいれば何とでも対処はできるので、これはどっから出ているのかを調べます。

■しかし、style.cssには書いてない


で、style.cssを見てみたところ、htmlヘッダーに出ていたコードに該当する部分はありません。また、link rel=’stylesheet’で読んだstyle.cssの後からくるので、優先して適応されます(style.cssを変更しても、あとから上書きみたいになる)。

これはいったいどこから出てきているのでしょうか?いろいろいじくってきた経験からすると、テーマカスタマイザーあたりかなと予想がつきます。

■やっぱりカスタマイザーのCSSだった

■wp_headにcustomize_cssをadd_actionとはこういうこと


stinger plusにあった、カスタマイザー用の『st-theme-custumization.php』というファイルです。ここに冒頭にあったようなコードを出力している部分がありました。ファイル名的に、やっぱりテーマカスタマイザーですね。

で、最後にアクションフックadd_actionで、wp_headにcustomize_css出すという流れになってます。

■おまけ:テーマカスタマイザーって?


wpユーザーにはおなじみの機能です。CSSとか書かなくても、カンタン操作でヘッダーの画像や配色を変えたりできる便利な機能です。しかし万能ではありません(笑)

■ためしにcustomize_cssを消すとどうなるの?

■ヘッダーがきれいになります


ためしに消してみると、冒頭で言っていた、ヘッダーに入ってくるカスタマイザーのCSSが出てこなくなります。このようにヘッダーがきれいになりました。しくみや構成の理解にはなったけど、光回線のPCだと、あんまり表示速度のメリットは感じられないかな(笑)

■カスタマイザーで指定した色が無効になります

CSS出力しないってことは、カスタマイザーで指定した色が無効になります。こんなふうに、テーブルや見出し・メニューなどが白くなりました。カスタマイザーで色だけサクッと変えてる方は消さなくてもよいですし、CSS直接いじれる場合はカスタマイザーが干渉しないので、細かい設定やり放題です。

■そのほか事例:テーマによってはfunctions.phpだったりすることも


前もちょっと書いたけどおさらい。上記のテーマはstingerの前バージョンでしたが、わりとこのみなribbon liteでもチェック。テーマによって、カスタマイザーのCSSが出力されかたが違うことがあります。

テーマribbon liteでは、custom-backgroundの項目がfunctions.php内にありました。

■wp_headにcustomize_cssがadd_actionされてるのに気づくと、どんなメリットがあるか

これは管理人にあった事例です。
あるサイト制作時に、テーマカスタマイザーで背景色を黒にしていました。しかし、気が変わって、『ヘッダーの背景だけ黒・ほかの部分は白』みたいにしようとしたんですが、『テーマカスタマイザー背景色が全体に適応されているので、真っ黒か真っ白のどちらかしかできない(背景をテーマカスタマイザーで白にして、ヘッダー背景色指定してもあとから上書きされる)という状態になってしまいました。

そこで、サイズや色を細かく設定するために、customize_cssがadd_actionされているところを探して、その部分を無効化し、別々カラーを実現させました。

テーマカスタマイザーだと、カンタンに色を変えられるので便利なんですが、作りこんでいくと『かゆいところに手が届かない』ことがおこります。そのため、今回みたいに仕組みのチェックが必要になったわけです。


【カテゴリ】 - CSS, webサイト制作関連
【タグ】 - , ,

  関連記事

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)
【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介
【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)
【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装
googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて
WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも
WordPress CSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック