wordpressでのスマホ対応webサイト制作・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サイト制作 【タグ】 - , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

ワードプレステーマインストール時に、エラーで画面真っ白を復旧させた方法

今回は、管理人がメインで使ってるweb製作ツールワードプレスで、たまに発生するエラーから復旧した方法を紹介します。 ワードプレスにはちょっとしたエラーでサイト真 …

ワードプレスの『AllinOne SEOPack』って、なぜ・どんな仕組みで検索に強くなるの?

今回は、ワードプレスの検索エンジン最適化用プラグインが、どんな仕組みで検索に強くなるのかを調べます。 All in One SEO Packというと、Yoast …

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

今回は、最近何件か対応させていただいている、ワードプレスサイト制作についての話題です。 サーバー借りてインストールしたまでは良いけど、ではドメインどうするの?と …

ブログ型ワードプレスサイトの強力武器~更新情報を確実に伝えるping Optimizer

今回は、地味だけど重要な『ping送信』を、確実にワードプレスサイトに実装していきます。 会社やお店・スクールなどのサイトをワードプレスで組んで、『sns連携や …

サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜひ紹介してくれ』といわれたので、ご紹介いたします。 AID LLCさまよりご依頼いただい …

データベース圧迫するワードプレス リビジョンを、安定稼動のため削除・制限する(プラグインとconfig.php)

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 データベースなどが絡んでくるのでちょっとややこしいかもしれませんが、長く運用する上では押 …

このサイトでPVを15倍(月間1480pv→22500pv・1年半の間)にした、seo・スマホ・記事話題の対策

今回は、いろいろエディットやチューニングをしていたら、アクセスが増えてPVが上がってしまったこのサイトの状況についてお話いたします。 googleアナリティクス …

【wpプラグイン】スライドショー実装でwebサイトをリッチにする『Slider by WD』

今回は、ワードプレスでサイトにスライドショーを実装します。 名前は『Slider by WD』。『Responsive Slider for WordPress …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法です。 前回は『テーマインストール時にエラーが発生したときの復旧』でしたが、今回はさらに …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使ってたfc2ぶろぐがあったので(fc2は外部ファイル読み込み・ヘッダーに書く、両方できる) …