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を指定した方が良いでしょう。
以上、ご参考までに！(｀･ω･´)ゞ
