自定义颜色未正确穿过内部循环

Question

我有以下循环，它通过并列出自定义分类法。在本例中，它列出了我的自定义 post 类型 'Products'.

中的所有 'product categories'

<!-- Product Categories =========================================== -->

                <?php

                $taxonomy = 'product_category';
                $terms = get_terms($taxonomy); // Get all terms of a taxonomy

                if ( $terms && !is_wp_error( $terms ) ) :
                ?>
                    <div class="container-flex">
                    <div class="row">
                    
                        <?php foreach ( $terms as $term ) { 
                            $image = get_field('icon', $term ); 
                            $primarycolor = get_field('category_colour_primary', $term);
                            $secondarycolor = get_field('category_colour_secondary', $term);
                            $url = $image['url'];
                            $title = $image['title'];
                            $alt = $image['alt'];

                            $size = 'large';
                            $thumb = $image['sizes'][ $size ];

                        ?>

                        <style type="text/css">
                            .product-arrow-right:after { border-color: <?php echo $primarycolor; ?>; }
                            .product-arrow-right:before { background-color: <?php echo $primarycolor; ?>; }
                        </style>

                            <div class="col-md-4">
                                <div class="sector-item-container" style="position: relative;">

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <div class="sector-overlay"></div>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <div>  
                                            <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
                                        </div>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <h4><?php echo $term->name; ?></h4>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <p><?php echo $term->description; ?></p>
                                    </a>

                                    <div class="product-read-more-link"> 
                                        <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" style="color: <?php echo $primarycolor; ?>;">Find Out More</a><span class="product-arrow-right"></span> 
                                    </div> 

                                </div>
                            </div>


                        <?php } ?>
                    </div>
                    </div>
                <?php endif;?>
                <?php wp_reset_postdata(); ?>

术语：$primarycolor = get_field('category_colour_primary', $term); 似乎工作正常，因为我用它来为文本着色：

<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" style="color: <?php echo $primarycolor; ?>;">Find Out More</a><span class="product-arrow-right"></span>

但是当我尝试使用它来设置跨度的伪元素 :before 和 :after 的样式时，它似乎将它们全部设置为颜色列表中的最后一种颜色，这些颜色被拉过...

你会在这里看到它给箭头着色，但它把它们都着色为蓝色，最后一个分类法的颜色...

在检查器中，它似乎循环遍历所有分类颜色并选择最后一个。

因为我正在设置伪元素的样式，而且我不能使用 <?php echo $primarycolor; ?> 内嵌样式，所以我不得不在循环中添加样式：

<style type="text/css">
    .product-arrow-right:after { border-color: <?php echo $primarycolor; ?>; }
    .product-arrow-right:before { background-color: <?php echo $primarycolor; ?>; }
</style>

谁能告诉我哪里出错了？

Answer 1

尝试添加一些计数器

$css_key = 0;
foreach ( $terms as $term ) { 
  $css_key++;

然后将此计数器添加到您的 css 选择器

<style type="text/css">
    .product-arrow-right:nth-child(<?php echo $css_key; ?>):after { border-color: <?php echo $primarycolor; ?>; }
    .product-arrow-right:nth-child(<?php echo $css_key; ?>):before { background-color: <?php echo $primarycolor; ?>; }
</style>

自定义颜色未正确穿过内部循环

Custom colour not pulling through correctly inside loop

php

wordpress

advanced-custom-fields

custom-post-type

pseudo-element