将 ACF 字段插入 CSS 伪元素

Question

我的网站上有这个部分：

这是在我的主页上，通过称为产品的自定义帖子类型的项目。

每个产品都有自己的产品颜色，我允许用户从高级自定义字段颜色选择器中进行选择。

我使用 CSS :before 和 :after 创建了箭头（一个用于直线，一个用于箭头），因此我可以使用产品颜色 ACF 为它们着色。

这意味着我必须在模板内应用颜色内联。但由于我使用了伪类，我不相信我可以为它们内联样式。

为了解决这个问题，我在循环中添加了一个样式块...这似乎有效，但它只采用黄色，因为我认为它是它找到的第一种颜色...

有没有办法解决这个问题？不知道是不是太复杂了……

这是与 CSS 文档分开的 CSS：

.products-item-inner .arrow-right:after {
  content: "";
  border: solid;
/*  border-color: <?php the_field('product_colour'); ?>; */
  border-width: 0 2px 2px 0;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left:-12px;
}

.products-item-inner .arrow-right:before {
  width: 30px;
  height: 2px;
/*  background-color: <?php the_field('product_colour'); ?>;*/
  content: "";
  display: inline-block;
  vertical-align: middle;
}

这是添加了 CSS <style> 内联的模板循环：

<div class="container">
<div class="row">

  <?php
      $args = array( 
        'post_type' => 'products',
        'posts_per_page' => 9999,
        'orderby' => 'none'
      );
      $the_query = new WP_Query( $args );
  ?>

  <?php if ( $the_query->have_posts()  ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>   

    <!-- <a href="<?php the_permalink(); ?>"> -->


    <div class="col-lg-4 products-item-outer">
    <div class="col-12 products-item-inner">

      <style type="text/css">
        .products-item-inner .arrow-right:after { border-color: <?php the_field('product_colour'); ?>; }
        .products-item-inner .arrow-right:before { background-color: <?php the_field('product_colour'); ?>; }
      </style>

      <div class="logo">
        <?php 
        $image = get_field('logo');
        if( !empty( $image ) ): ?>
          <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
        <?php endif; ?>          
      </div>    

      <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
      <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right"></span></div>

    </div>
    </div>
    <!-- </a> -->

  <?php endwhile; wp_reset_postdata(); endif; ?>

</div>
</div>

感谢收看 :)

Answer 1

旧版浏览器支持方式

为了获得最大的浏览器支持，您可以使用style 属性为您的.arrow-right 元素分配颜色，并可以在其伪元素中利用currentColor：

  <div class="container">
    <div class="row">

      <?php
          $args = array( 
            'post_type' => 'products',
            'posts_per_page' => 9999,
            'orderby' => 'none'
          );
          $the_query = new WP_Query( $args );
      ?>

      <?php if ( $the_query->have_posts()  ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>   

        <!-- <a href="<?php the_permalink(); ?>"> -->


        <div class="col-lg-4 products-item-outer">
          <div class="col-12 products-item-inner">
            <div class="logo">
              <?php 
              $image = get_field('logo');
              if( !empty( $image ) ): ?>
                <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
              <?php endif; ?>          
            </div>    

            <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
            <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right" style="color: <?php the_field('product_colour'); ?>;"></span></div>

          </div>
          </div>
          <!-- </a> -->

        <?php endwhile; wp_reset_postdata(); endif; ?>

      </div>
    </div>

    .products-item-inner .arrow-right:after {
      content: "";
      border: solid;
      border-color: currentColor;
      border-width: 0 2px 2px 0;
      display: inline-block;
      vertical-align: middle;
      padding: 5px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      margin-left:-12px;
    }

    .products-item-inner .arrow-right:before {
      width: 30px;
      height: 2px;
      background-color: currentColor;
      content: "";
      display: inline-block;
      vertical-align: middle;
    }

CSS 自定义属性方法

您也可以使用 CSS 自定义属性，如果您需要在多个位置使用颜色，而上述方法将不起作用（除非您在多个位置重复颜色定义）。

我将它作为style 属性添加到您的.products-item-outer 元素中。这将级联到您的 .arrow-right 伪元素中。在此示例中，我还添加了rebeccapurple 的后备颜色，以防该值丢失。

  <div class="container">
    <div class="row">

      <?php
          $args = array( 
            'post_type' => 'products',
            'posts_per_page' => 9999,
            'orderby' => 'none'
          );
          $the_query = new WP_Query( $args );
      ?>

      <?php if ( $the_query->have_posts()  ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>   

        <!-- <a href="<?php the_permalink(); ?>"> -->


        <div class="col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
          <div class="col-12 products-item-inner">
            <div class="logo">
              <?php 
              $image = get_field('logo');
              if( !empty( $image ) ): ?>
                <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
              <?php endif; ?>          
            </div>    

            <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
            <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right"></span></div>

          </div>
          </div>
          <!-- </a> -->

        <?php endwhile; wp_reset_postdata(); endif; ?>

      </div>
    </div>

    .products-item-inner .arrow-right:after {
      content: "";
      border: solid;
      border-color: var(--product-color, rebeccapurple);
      border-width: 0 2px 2px 0;
      display: inline-block;
      vertical-align: middle;
      padding: 5px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      margin-left:-12px;
    }

    .products-item-inner .arrow-right:before {
      width: 30px;
      height: 2px;
      background-color: var(--product-color, rebeccapurple);
      content: "";
      display: inline-block;
      vertical-align: middle;
    }