webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/02/16

今回は、自分のフリー曲素材サイトのチューニングをしてて、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メディア制作運用
【タグ】 - , ,

  関連記事

【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする

今回は、かなり地味めなCSSプロパティ(字間スペース&行の高さ) ...

WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも

今回は、もはや何でもある感じのWordPressプラグインで、『 ...

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...