takanashi タナビーの高梨です。
WordPressのテーマを自作していて、CSSでbackground-imageを設定しようとして、ふと手が止まってしまいました。
テンプレートフォルダのパスを取得するのはget_template_directory_uriだよなぁ、でもCSSにphpって書けないよなぁ？？
さて、どうする？？
結果、極めてシンプルな結論となったので備忘に書きとめておきます。
この度、すべてのブロックに対して簡単に背景画像を設定できるプラグインを開発し提供開始しました。
詳細はこちらからご確認ください。
CSSおすすめ本
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計の考え方と手法を丁寧に説明し、モジュールごとに具体的なサンプルで分かりやすく示してくれている良書です。
行き当たりばったりでCSSを書き始め、分量が多くなると混乱してくるといったありがちな状況に悩んでいる方にお勧めです。
CSSにphpを書こうという発想が間違い！
なまじget_template_directory_uri()などを知っているため、どうやってこの情報をCSSに取り込むのか？という発想の始点があって無駄な時間を過ごしてしまいました。
最初は自然な発想で、
background-image: <php? get_template_directory_uri(); ?>などとしていましたが、当然出力されるCSSはそのまんまが出力されます！
たどり着いた結論がこちら
background-image: "images/xxxx.png"とか
background-image: "../../uploads/xxxx/xxx.pngとか。
CSSファイルからの相対パスを書けば良いだけでした。
メディアライブラリにアップロードした画像の場合は後者ですね。
フォルダ構成とファイルの配置はテーマや各自の環境によって異なると思います。
サーバのファイルマネージャなどから自身の環境を確認してください。
ただ、後者の場合は相対パスではなく直接画像のURLを指定して、background-image: url(http://～～)などとした方が分かりやすいかもしれません。
画像ファイルのURL確認方法はこちらの記事にまとめています。
まとめ
というわけで、極めてシンプルな結論でした。
高梨＠タナビースタジオラボでは、ご自身での設定が難しいような場合のご相談を承っています。
お問合せページからお気軽にお問合せください！
