🌟

疑似要素に背景画像を当てる(WordPress)

2023/12/25に公開

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