🌟
疑似要素に背景画像を当てる(WordPress)
WordPressのカスタムフィールドからURLを引っ張ってきて背景画像を当てたい場合はインラインで対応できますが、疑似要素の場合はできません
フックに関数を登録することで可能にします
下記は固定ページかつCustom Field Suiteの繰り返しフィールドでの例です
フィールド名、ACF等の場合やページ条件が異なる場合は適宜変えてください
functions.php
function sample() {
if(is_page(99)) {
$loop = CFS() -> get('hoges');
if($loop) {
echo '<style>';
foreach($hoges as $index => $item) {
echo '.hoge:nth-child(' . ($index + 1) . ')::before {';
echo 'background-image: url(' . esc_url($item['img']) . ');';
echo '}';
}
echo '</style>';
}
}
}
add_action('wp_head', 'sample');
Discussion