ワードプレスでのbackground-image

ワードプレスでコードステップの練習サイトを載せています。
先日、8作目まで完了しました。

http://genzaburow.starfree.jp/wordpress/book-store/

前回での話ですが、今まで、画像の配置はHTMLで<img>を使っていました。

これをワードプレスに載せる場合は、<img>で使っている相対パスを
テンプレートタグを使った絶対パスに変換する必要があります。

例：
<img src=”../img/logo.svg” alt=”logo”>
　　　　　　　⇩
<img src=”<?php echo get_stylesheet_directory_uri(); ?>/book-store/img/logo.svg” alt=”logo”>

今回、画像の表示を<img>ではなく、
CSSのbackgroundプロパティを使いました。
で、ここのURLの指定を、
同じようにテンプレートタグを使って絶対パスで書いたのですが、
うまく動きませんでした。

なんで？

調べたところ、結果としては、

CSSは相対パスで良い

ということでした。

その理由も、なんとなくわかるのですが、
まあ、いいや（笑）
とにかく、CSSのbackground−imageは
相対パスを使うということだけ覚えておけばいいか。

今回参考にしたサイトはこちら。

WordPressのCSSでbackground-imageを設定する方法
https://tantive-sl.com/2022/01/1457/

そもそもCSSにはPHPを書けない

もちろん、CHATGPTセンセーにも聞きました。

先ほどのサイトでも書かれている通り、
そもそもCSSにはPHP書けないんですね（笑）
知らなかったわ。

その時のやり取りも乗っけておきます。

質問　:　cssのbackgroundプロパティ ,url()にphpは使えるのか？

答え　：

CSSのbackgroundプロパティのurl()には直接PHPを埋め込むことはできません。CSSはクライアントサイドで解釈されるスタイルシート言語であり、PHPはサーバーサイドで実行されるスクリプト言語です。これらは異なるタイミングで処理されるため、直接的に組み合わせることはできません。

例えば、以下のようにPHPを直接CSSのurl()に埋め込むことはできません：
cssCopy code/* これは動作しません */
.my-element {
  background-image: url('<?php echo get_template_directory_uri(); ?>/images/my-image.jpg');
}
ただし、PHPを使用して動的なスタイルを生成し、それをCSSに反映する方法はあります。その場合は、PHPでスタイルを生成し、それをHTMLの<style>タグや外部のCSSファイルに埋め込むことができます。

例えば、PHPでスタイルを生成してHTMLの<style>タグに埋め込む場合：
phpCopy code<?php
$background_image_url = get_template_directory_uri() . '/images/my-image.jpg';
?>

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic CSS</title>
  <style>
    .my-element {
      background-image: url('<?php echo $background_image_url; ?>');
    }
  </style>
</head>
<body>
  <div class="my-element">
    This is a dynamically styled element with a background image.
  </div>
</body>
</html>
この方法を使うことで、PHPで生成したスタイルをHTMLの<style>タグ内に埋め込むことができます。同様に、外部のCSSファイルをPHPで生成して<link>タグを使って読み込むことも可能です。

つまり、直接CSSのbackgroundプロパティのurl()内にPHPを記述することはできませんが、PHPを使って動的なスタイルを生成し、それをHTMLの<style>タグや外部のCSSファイルに反映させることはできます。