PHPでCSSを動的に生成・変更(切り替え)する方法。

   

WordPressでサイトを運営すると、

  • 同じようなコードを変数として定義する
  • 直接コードを書くのではなく、管理画面で入力した値を取得する
  • ページによって読み込むファイルを変える

など、あれもこれも効率的に、動的に、管理したくなりますよね。

ただ、メインのファイルの中で唯一動的に管理できないのがスタイルシート(style.css)。

  • CSS Variables(カスタムプロパティ)
  • Sass

で対応することもできますが、対応しているブラウザが少なかったり、導入が面倒だったり、使えない関数があったり、CSSだけは静的に管理している方も多いのではないでしょうか?

インラインでスタイルを指定せずにPHPで管理する方法

そこで、未だに使われるのが、下記のような「インラインで要素内に直接スタイルを指定する方法」です。

<div id="header-background-image" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>

ただ、これは非推奨の方法のため、できれば使いたくないところ。(管理画面のみで使われる要素であれば別ですが)

では、どうすればいいのかというと、実はとっても簡単な方法があります。それは、styleタグの中に記述する方法です。

functions.phpにCSSを指定する関数を定義するだけで、動的にhead内に独自のCSSを生成してくれます。

functions.phpに記述するコード

下記がfunctions.phpに記述するコードです。styleタグの中への記述方法は、style.cssへの記述方法と同じです。

function style_change() {
?>
<style type="text/css">
 /* ここにCSSを追加 */
</style>
<?php }
add_action( 'wp_head', 'style_change');

【サンプル】background-image: urlの読み込み

例として、画像をimg要素として表示せずに、div要素にbackground-image: urlを指定して画像を表示する方法をご紹介します。

本来は、style.cssに絶対パス、または相対パスで画像のURLを指定するだけでOKですが、記事固有のアイキャッチ画像を表示する場合に使える方法です。

HTML(header.php)

<div id="header-background-image"></div>

functions.php

function style_change() {
?>
<style type="text/css">
#header-background-image {
 background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>');
}
</style>
<?php }
add_action( 'wp_head', 'style_change');

まとめ

SEO的に大きな影響があるわけではありませんが、メンテナンスのしやすさなどを考慮すると、styleタグでCSSを指定した方が良いでしょう。

以上、ご参考までに!(`・ω・´)ゞ

カテゴリー WordPressカスタマイズ

注目 失敗なし!au・docomoからmineo(マイネオ)へのMNP方法!

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人:

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

コメントを残す

CAPTCHA