wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@SS_mshpです。

今回は、自分のフリー曲素材サイトのチューニングをしてて、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されているところを探して、その部分を無効化し、別々カラーを実現させました。

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

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

Message

メールアドレスが公開されることはありません。

  関連記事

ワードプレス派が覚えると便利なPHP~投稿記事・固定ページ指定して表示/非表示

今回はワードプレスサイト制作で使えるテクニックです。 PHPで使う条件分 …

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエ …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』につい …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじ …

ワードプレスCSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントにつ …

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上 …