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

これは、あなたがコメントで答えについては詳しく説明し、何をする必要があるかでありますnth-childを使うために。

以下の例は、必要なものをターゲットにしています。この例では、3番目の要素をすべて対象とし、このスタイルを適用します。あなたのケースでは、5つの異なる色を使って、1n + 1、2n + 2、3n + 3などを使用します。

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