将 ACF 字段插入 CSS 伪元素

Posted

技术标签:

【中文标题】将 ACF 字段插入 CSS 伪元素【英文标题】:Insert ACF filed into CSS pseudo element 【发布时间】:2020-07-07 06:18:33 【问题描述】:

我的网站上有这个部分:

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

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

我使用 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 &lt;style&gt; 内联的模板循环:

<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']); ?>"  />
        <?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>

感谢收看 :)

【问题讨论】:

您可以使用 CSS 自定义属性,还是需要支持旧版浏览器? 那是评论 - 我想我会同意那些我们说我们不支持 Internet Explorer 并且如果我们支持它只会改变颜色 - 虽然我不知道很多关于他们的事吗? 【参考方案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']); ?>"  />
              <?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']); ?>"  />
              <?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;
    

【讨论】:

非常感谢 - 我已经使用了 CSS 自定义属性方法,并且效果很好 - 我必须阅读自定义属性!再次感谢:) 太好了,很高兴我能帮上忙!

以上是关于将 ACF 字段插入 CSS 伪元素的主要内容,如果未能解决你的问题,请参考以下文章

CSS 中 ::before 和 ::after 伪元素的几个实际用途

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS3伪元素伪类选择器

使用 :before CSS 伪元素将图像添加到模态

如何使用python爬虫获取css伪元素例如:before

css伪类和伪元素