将 ACF 字段插入 CSS 伪元素

Question

我的网站上有这个部分：

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

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

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

这意味着我必须在模板内应用内嵌颜色。但是因为我使用了 Pseudo 类，我不相信我可以将它们设置为内联样式。

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

有办法解决这个问题吗？我不确定我是否把它弄得太复杂了...

这是 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;
    }

将 ACF 字段插入 CSS 伪元素

Insert ACF filed into CSS pseudo element

php

css

advanced-custom-fields

custom-post-type

pseudo-element

旧版浏览器支持方法

CSS 自定义属性方法

将 ACF 字段插入 CSS 伪元素

Insert ACF filed into CSS pseudo element

php

css

advanced-custom-fields

custom-post-type

pseudo-element

旧版浏览器支持方法

CSS 自定义 属性 方法

CSS 自定义属性方法