如何显示wordpress第一个帖子与其他帖子不同?

时间:2017-06-14 12:10:13

标签: php wordpress

index.php的第一部分,目前有大的帖子显示,包含这些条目:

<?php get_header(); ?>
<!-- Begin Content -->
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="p-heading"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
</div>
<?php endwhile; ?>

并且archive.php的第一部分包含以下条目:

 <?php get_header(); ?>
<!-- Begin Content -->
<div id="content-a">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="imgdiv"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image() ?>" width="250"></a></div>
<div class="p-heading"><h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>

<div class="p-content">
<?php the_excerpt(); ?>
</div>

<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12"><?php $totalcomments = get_comments_number(); echo $totalcomments; ?></div>

</div>

<?php endwhile; ?>

我对大帖子使用不同的样式div id =“content”,对于较小的帖子显示使用div id =“content-a”,连续3个。

现在,我希望只有最新的帖子会以大格式显示,正如css中的#content所定义的那样,其余的就像它们在#content-a的archive.php上一样。我怎么能这样做?

我的网站主索引页面为http://www.virmodrosti.com/,存档位于http://www.virmodrosti.com/zdravje/

请告诉我,谢谢。

2 个答案:

答案 0 :(得分:2)

最简单的方法是在CSS中使用:: first-child伪选择器。

如果这不是一个选项,您可以在while循环中添加一个计数器,并使用该计数器为您的项添加一个类。

<?php get_header(); ?>
<!-- Begin Content -->
<div id="content">
<?php 
  $counter = 0;
  if (have_posts()) : 
 ?>
  <?php while (have_posts()) : the_post(); ?>
  <div class="post count-<?php echo $counter; ?>">
  <div class="p-heading"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title();        ?></a></h1></div>
  <div class="p-content">
  <?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
 </div>
 <?php 
  $counter++;
  endwhile; ?>

答案 1 :(得分:1)

您的css选择器存在两个问题。

1 - 您无法使用div id='content-a'设置多个帖子的样式,因为ID是唯一的。您必须使用class=content-a

2 - 帖子圈id='content'内没有if (have_posts()) : while (have_posts()) : the_post();。唯一的id=content在循环之外。它将适用于所有帖子,无论如何。

修复是使用循环内部的类。在您的代码中,最好的代码是post,这是较高的div类。

然后你需要使用while (have_posts())循环标记第一篇帖子......

的index.php

<?php get_header(); ?>
    <!-- Begin Content -->
    <div id="content">
<?php if (have_posts()) : ?>
<?php 
$first_post = true;
while (have_posts()) : the_post(); ?>
    <div class="<?php
     if ($first_post){ 
         $first_post = false; 
         echo 'post-first';
     }else{ 
         echo 'post';
     }
     ?>">
    <div class="p-heading"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
</div>
<?php endwhile; ?>

在archive.php中,我不明白为什么要在WP_Query之后创建新的if (have_posts())对象。但由于它不是问题的一部分,也不是问题,我会这样离开......

archive.php

<?php get_header(); ?>
<!-- Begin Content -->
<div id="content">
<?php if (have_posts()) : ?>
<?php 
$query = new WP_Query(array('posts_per_page'=> 2,)); 
$first_post = true;
while ($query->have_posts()) : $query->the_post(); ?>
    <div class="<?php
     if ($first_post){ 
         $first_post = false; 
         echo 'post-first';
     }else{ 
         echo 'post';
     }
     ?>">    <div class="p-heading"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
</div>
<?php endwhile; ?>