将 CSS 类分配给第一个和第三个 html 元素

Question

我正在使用一个显示最近帖子的 wordpress 插件。我已经更改了模板，以便在主页的特色框中显示 3 个最近的帖子。问题是第一个盒子需要分配“alpha”类，最后一个盒子需要分配“omega”类才能正确匹配。我的 PHP 技能没那么高。

模板位于 template.php 页面中。大部分代码如下：

/**
 * The format for templates changed since version 0.17.
 * Since this code is included inside CatListDisplayer, $this refers to
 * the instance of CatListDisplayer that called this file.
 */

/* This is the string which will gather all the information.*/
$lcp_display_output = '';

// Show category link:
$lcp_display_output .= $this->get_category_link('strong');

//Add 'starting' tag. Here, I'm using an unordered list (ul) as an example:
$lcp_display_output .= '<div class="lcp_catlist info_box_area row clearfix" id="box_area_0">';

/**
 * Posts loop.
 * The code here will be executed for every post in the category.
 * As you can see, the different options are being called from functions on the
 * $this variable which is a CatListDisplayer.
 *
 * The CatListDisplayer has a function for each field we want to show.
 * So you'll see get_excerpt, get_thumbnail, etc.
 * You can now pass an html tag as a parameter. This tag will sorround the info
 * you want to display. You can also assign a specific CSS class to each field.
 */

foreach ($this->catlist->get_categories_posts() as $single){
  //Start a List Item for each post:
  $lcp_display_output .= '<div class="one-third column info_box alpha omega">';

  //Post Thumbnail
  $lcp_display_output .= $this->get_thumbnail($single);

  //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($single);

  //Show comments:
  $lcp_display_output .= $this->get_comments($single);

  //Show date:
  $lcp_display_output .= ' ' . $this->get_date($single, 'span', 'lcp-date');

  //Show author
  $lcp_display_output .= $this->get_author($single);

  //Custom fields:
  $lcp_display_output .= $this->get_custom_fields($this->params['customfield_display'], $single->ID);

  /**
   * Post content - Example of how to use tag and class parameters:
   * This will produce:<p class="lcp_content">The content</p>
   */
  $lcp_display_output .= $this->get_content($single, 'p', 'lcp_content');

  /**
   * Post content - Example of how to use tag and class parameters:
   * This will produce:<div class="lcp_excerpt">The content</div>
   */
  $lcp_display_output .= $this->get_excerpt($single, 'div', 'lcp_excerpt');

  //Close li tag
  $lcp_display_output .= '</div>';

}

$lcp_display_output .= '</div>';

我的第一个想法是为每个 div 元素自动增加一个类，然后专门设置它们的格式，但是如果有更简单的方法可以直接添加 alpha 和 omega 类，那就太好了！！！

Answer 1

要在 PHP 中执行此操作，您只需在循环中添加条件...

$i = 1;

foreach ($this->catlist->get_categories_posts() as $single){
  //Start a List Item for each post:
  if ($i == 1)
    $lcp_display_output .= '<div class="one-third column info_box alpha">';
  elseif ($i == 3)
    $lcp_display_output .= '<div class="one-third column info_box omega">';
  else
    $lcp_display_output .= '<div class="one-third column info_box">';

  // the rest of your foreach code
  ...

  $i++;

}

Answer 2

CSS：

.lcp_catlist .info_box:first-child, .lcp_catlist .info_box:last-child  {
  opacity: 0.3
}

Answer 3

为什么不简单试试这个：

$post_position = 1;

foreach ($this->catlist->get_categories_posts() as $single){
  //Start a List Item for each post:
  if ($post_position == 1){
      $lcp_display_output .= '<div class="one-third column info_box alpha">';
  }elsif ($post_position == 3){
      $lcp_display_output .= '<div class="one-third column info_box omega">';
  }else{
      $lcp_display_output .= '<div class="one-third column info_box">';
  }
  //Post Thumbnail
  $lcp_display_output .= $this->get_thumbnail($single);

  //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($single);

  //Show comments:
  $lcp_display_output .= $this->get_comments($single);

  //Show date:
  $lcp_display_output .= ' ' . $this->get_date($single, 'span', 'lcp-date');

  //Show author
  $lcp_display_output .= $this->get_author($single);

  //Custom fields:
  $lcp_display_output .= $this->get_custom_fields($this->params['customfield_display'], $single->ID);

  /**
   * Post content - Example of how to use tag and class parameters:
   * This will produce:<p class="lcp_content">The content</p>
   */
  $lcp_display_output .= $this->get_content($single, 'p', 'lcp_content');

  /**
   * Post content - Example of how to use tag and class parameters:
   * This will produce:<div class="lcp_excerpt">The content</div>
   */
  $lcp_display_output .= $this->get_excerpt($single, 'div', 'lcp_excerpt');

  //Close li tag
  $lcp_display_output .= '</div>';

  $post_position++;
}