php - 更改 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>