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

这是你需要做的，详细说明使用nth-child的评论中的答案。

以下示例针对您的需求。此示例针对每个第三个元素并应用此样式。因此，在您的情况下，使用5种不同的颜色，您将使用：1n + 1,2n + 2,3n + 3等。

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

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

2 个答案: