首先发布不同的布局

Question

我需要为每个页面中的第一篇文章设置不同的布局，但不知道从哪里开始。代码如下：

<?php get_header(); ?>
<div class="row">
<section class="small-12 columns grid-style">
<?php $i = 0; $counter = range(0, 200, 3); ?>

  <?php 
  $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
  $args = array('offset'=> 0, 'paged'=>$paged);
  $all_posts = new WP_Query($args);
  if (have_posts()) :  while($all_posts->have_posts()) : $all_posts->the_post();?>

    <?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?

    <!--Post -->
      <article class="grid-style post" id="post-<?php the_ID(); ?>"
        <div class="post-img">
            <?php get_template_part( 'inc/postformats/grid-style' ); ?>
        </div>
        <div class="post-box">
            <div class="post-title">
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo ShortenText(get_the_title(), 50); ?></a></h2>
            </div>
            <aside class="post_categories">
                                <?php the_category(', '); ?>
            </aside>
            <div class="post-content">
                <?php echo ShortenText(get_the_excerpt(), 170); ?>
            </div>
        </div>
      </article>

    <!--/Post -->

      <?php if (in_array($i + 1, $counter)){ echo '</div>'; }   ?>

  <?php $i++; endwhile; ?>

    <div class="small-12 columns">
      <?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
    </div>
  <?php else : ?>
    <p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
  <?php endif; ?>
</section>
</div>
<?php get_footer(); ?>   

我需要使用不同的图像尺寸，所以我需要输出 仅针对第一个帖子。

Answer 1

您是否尝试将 div.row.journal 包含在第一篇文章中？ 如果是这种情况，请尝试这样做：

将<?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ? 替换为以下内容：（它只会在第一页回显，对于第一篇文章）

<?php
if ($all_posts->current_post == 0 && !is_paged()) {
    echo '<div class="row journal" data-equal=".post">';
}
?>

通过将<?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?> 替换为：

<?php
if ($all_posts->current_post == 0 && !is_paged()) {
    echo '</div>';
}
?>

Answer 2

你必须定义一个计数器并在循环内用 if...else... 询问

$post_counter = 1;
while (start_loop):

   if ($post_counter == 1){
       echo "<div id='1'></div>";
   else:
       echo "<div id='2'></div>";

   $post_counter += 1;

//end loop

我认为这应该对你有所帮助。

Answer 3

这是我现在拥有的代码，我能够为第一篇文章输出 HTML，为所有文章输出一个不同的 HTML，但我得到了 2 个第一篇文章。一个使用第一个布局，第二个使用第二个布局

<?php
   /*
   Template Name: Blog - Grid Style
   */
   ?>
   <?php get_header(); ?>
   <div class="row">
   <section class="small-12 columns grid-style">
    <?php $i = 0; $counter = range(0, 200, 3); ?>

      <?php 
      $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
      $args = array('offset'=> 0, 'paged'=>$paged);
      $all_posts = new WP_Query($args);
      $post_counter = 0;
      if (have_posts()) :  while($all_posts->have_posts()) : $all_posts->the_post();   $post_counter++;?>

        <?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?>



        <?php if ($post_counter == 1){ ?>

        <!--Layout Post 1-->
        <div class="row">
          <article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">

            <div class="post-img">
                <?php get_template_part( 'inc/postformats/grid-style' ); ?>
            </div>

            <div class="post-box">
                <div class="post-title">
                    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo ShortenText(get_the_title(), 50); ?></a>1</h2>
                </div>
                <aside class="post_categories">
                                    <?php the_category(', '); ?>
                </aside>
                <div class="post-content">
                    <?php echo ShortenText(get_the_excerpt(), 170); ?>
                </div>
            </div>


          </article>
         </div> 
        <!--/Layout Post 1-->

        <?php } ?>


        <!--Other Posts -->
        <div class="row">
          <article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">

            <div class="post-img">
                <?php get_template_part( 'inc/postformats/grid-style' ); ?>
            </div>

            <div class="post-box">
                <div class="post-title">
                    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo ShortenText(get_the_title(), 50); ?></a></h2>
                </div>
                <aside class="post_categories">
                                    <?php the_category(', '); ?>
                </aside>
                <div class="post-content">
                    <?php echo ShortenText(get_the_excerpt(), 170); ?>
                </div>
            </div>


          </article>
         </div> 
        <!--/Other Posts -->




          <?php if (in_array($i + 1, $counter)){ echo '</div>'; }   ?>


      <?php $i++; endwhile; ?>

        <div class="small-12 columns">
          <?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
        </div>
      <?php else : ?>
        <p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
      <?php endif; ?>
   </section>
   </div>
   <?php get_footer(); ?>