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

时间:2014-04-07 20:15:51

标签: php html css wordpress

我正在使用wordpress插件显示最近的帖子。我已更改模板,以便最近的3个帖子将显示在主页上的精选框中。问题是需要为第一个框分配“alpha' class和lastt框需要分配' 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类,那就太棒了!!!

3 个答案:

答案 0 :(得分:2)

要在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++;

}

答案 1 :(得分:1)

CSS:

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

答案 2 :(得分:0)

为什么不简单试试这个:

$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++;
}