如何以与其他帖子不同的方式显示第一篇帖子

时间:2017-06-15 15:18:02

标签: php html css wordpress

我创建的设计将用于显示与其他帖子不同的第一篇帖子。这并不容易,因为第一篇文章需要在他自己的div id中,这与其他帖子完全不同。

这是我目前在wordpress php中使用的代码:

<?php get_header(); ?>

<!-- Begin Content -->

<div id="content-wide">
  <div class="post">

    <div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image() ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">

      <div class="p-heading">
        <h1>
          <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
            <?php the_title(); ?>
          </a>
        </h1>
        <div class="p-content">
          Excerpt text of the first post goes here but php the_excerpt doesnt work for this wide paragraph
        </div>
      </div>

    </div>

  </div>
</div>

<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; ?>

这是我的网站网址http://www.virmodrosti.com/zdravje/ 我想要的是第一篇文章没有显示两次,但只是移动到宽文章设计。这个大帖子在内容范围内。让我知道如何做到这一点。谢谢。

1 个答案:

答案 0 :(得分:1)

尝试添加一个从零开始并在while循环中递增的计数器,然后使用if else语句检查计数器的值,如果为零,则显示第一个帖子,否则显示其他帖子。

<强> EDITED

    <?php $counter = 0; ?>
    <?php while (have_posts()) : the_post(); ?>
        <?php if($counter == 0) { ?>
            <div id="content-wide">
                <div class="post">
                    <div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image(); ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
                        <div class="p-heading">
                            <h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                            <div class="p-content">
                                <?php the_excerpt(); ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
        <?php if($counter > 0) { ?>
            <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 } ?>
        <?php $counter ++; ?>
    <?php endwhile; ?>