在Wordpress中更改动态内容的边框颜色

Question

如果以前曾询问过，请致歉。说实话，我不知道什么条件可以找到相关内容。

目标：我的公司有一个使用WordPress内置的一些自定义PHP构建的新闻页面。新闻页面可以在这里看到：http://www.hospitalityq.com/press

我的营销管理人员想将印刷机上的浅灰色边框更改为我们公司调色板中的颜色。我们会有5种颜色，我们希望新闻项目在整个过程中旋转。是否有可能使用自己的颜色对每篇新闻文章进行着色，并通过添加到我们的PHP脚本来完成这些工作？

下面是我们现有脚本的副本。

我希望这是有道理的。如果更简单，我很乐意发布样机。

最佳， 丹

<?php 

$postID = get_the_ID(); 
$meta = get_post_meta($postID); 
?> 
    <!--pre> 
    <?php 
    //var_dump ($meta); 
    ?> 
    </pre--> 
<?php 
    if(has_post_thumbnail($postID)):; 
?> 
    <div class="clear-after"> 
    <div class="post-image"> 
    <a 
     href="<?php echo $meta['hq_news_articles_link'][0] ?>" 
     class="vc_read_more" 
     title="Read about <?php the_title_attribute(); ?>" 
     target="_blank"> 
     <?php the_post_thumbnail($postID); ?> 
    </a> 
    </div> 
<?php 
    endif; 
    $infoClass = 'post-info '. (!has_post_thumbnail($postID) ? 'no_image' : ''); 
?> 
<div class="<?php echo $infoClass; ?>"> 
<h4> 
    <a 
     href="<?php echo $meta['hq_news_articles_link'][0] ?>" 
     class="vc_read_more" 
     title="Read about <?php the_title_attribute(); ?>" 
     target="_blank" 
    > 
     <?php the_title();?> 
    </a> 
    </h4> 
     <h5> 
     <?php the_date('F j, Y');?> 
     </h5> 
     <p><?php 
      echo substr(get_the_excerpt(),0, 115); 
      // echo wp_trim_words(get_the_excerpt(), 20); 
      ?>&hellip; 
     <br><a 
     href="<?php $meta['hq_news_articles_link'][0] ?>" 
     class="hq_press-read-more" 
     title="Read about <?php the_title_attribute(); ?>" 
     target="_self" 
    > 
     Read article 
    </a> 
    </p> 
</div> 
</div> 

Answer 1

我会用CSS nth-child：

.company { 
 
    border: 1px solid black; 
 
} 
 

 
.company:nth-child(5n+1) { 
 
    border-color: red; 
 
} 
 

 
.company:nth-child(5n+2) { 
 
    border-color: green; 
 
} 
 

 
.company:nth-child(5n+3) { 
 
    border-color: yellow; 
 
} 
 

 
.company:nth-child(5n+4) { 
 
    border-color: blue; 
 
} 
 

 
.company:nth-child(5n+5) { 
 
    border-color: purple; 
 
}

<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div> 
 
<div class="company">company</div>

Answer 2

这是你需要做什么，在评论阐述了答案为了使用第n个孩子。

以下示例的目标是您需要的。此示例以每个第三个元素为目标并应用此样式。所以在你的情况下，使用你的5种不同的颜色，你会使用：1n + 1,2n + 2,3n + 3等。

li.entry-hq_news_articles:nth-child(3n+3) { 
    border: 1px solid #e31b12; 
}