WordPressで擬似要素やメディアクエリを動的にする

WordPressでCSSのプロパティを動的にしたい場合、HTMLタグのstyle属性に記述することがあると思います。

<?php
  $bg_color = '#ddd';
?>
<div class="hoge" style="background: <?php echo esc_attr($bg_color); ?>;">
  <p>hoge</p>
</div>

style属性は便利ではありますが、擬似要素やメディアクエリは記述できません。
この記事では、WordPressでこの課題を解決する方法を紹介します。

通常通りCSSファイルを読み込む

まず、wp_enqueue_scriptsアクションにフックして、CSSファイルを読み込みます。
静的なプロパティはここで指定しましょう。

function my_enqueue_scripts() {
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/mystyle.css', array(), '1.0.', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
.hoge::after {
  content: "";
  display: block;
  width: 150px;
  height: 150px;
}

PHPでスタイルを組み立てる

続いて、同じくmy_enqueue_scripts関数内で、PHPでスタイルを組み立てていきます。
今回は、固定ページ（sample-page）に、Advanced Custom Fieldsを使って「テキスト」と「画像」のフィールドを用意しました。

function my_enqueue_scripts() {

  /* （中略） */
  
  $internal_style = '';
  if ( is_page('sample-page') ) {
    $text = get_field('text', get_queried_object_id());
    if ( $text ) {
      $internal_style .= ".hoge::before { content: '{$text}'; }";
    }
    $img = get_field('img', get_queried_object_id());
    if ( $img ) {
      $internal_style .= "@media (max-width: 767px) { .hoge::after { background-image: url({$img}); } }";
    }
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

headタグの中に出力する

最後に、wp_add_inline_style関数を実行して、headタグの中に組み立てたCSSを出力します。

function my_enqueue_scripts() {

  /* （中略） */

  if ( $internal_style ) {
    wp_add_inline_style( 'my-style', $internal_style );
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

実際にページのソースを確認すると、以下のように出力されていることが確認できます。

<link rel='stylesheet' id='my-style-css' href='https://{domain}/wp-content/themes/{theme}/mystyle.css?ver=1.0.' type='text/css' media='all' />
<style id='my-style-inline-css' type='text/css'>
.hoge::before { content: '123'; }@media (max-width: 767px) { .hoge::after { background-image: url(https://{domain}/wp-content/uploads/2024/07/{filename}); } }
</style>

完成コード

function my_enqueue_scripts() {
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/mystyle.css', array(), '1.0.', 'all' );
  $internal_style = '';
  if ( is_page('sample-page') ) {
    $text = get_field('text', get_queried_object_id());
    if ( $text ) {
      $internal_style .= ".hoge::before { content: '{$text}'; }";
    }
    $img = get_field('img', get_queried_object_id());
    if ( $img ) {
      $internal_style .= "@media (max-width: 767px) { .hoge::after { background-image: url({$img}); } }";
    }
  }
  if ( $internal_style ) {
    wp_add_inline_style( 'my-style', $internal_style );
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

コメント