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サイト制作関連
【タグ】 - , ,

  関連記事

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン
googleアドセンス広告で、競合他社の広告を自社サイトに表示させない方法
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える
WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?
bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】
有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)
googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて
WordPressサイトの独自ドメイン解除方法
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
【WordPress更新情報表示】php/wp組み込みファンクション(fetch_feed)で取得と、プラグインで表示どちらが良い?
【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装