按字母顺序排列的两列布局

时间：2013-08-20 作者：user36867

我试图从左到右两列输出一份存货清单，按字母顺序排序：

A | B

C | D

E | F

G | H

目前，下面的代码按字母顺序对一半的帖子进行排序，然后按字母顺序对其余帖子进行排序：

A | C

E | G

B | D

F | H

你知道我错在哪里吗？

<?php 
query_posts(  array( \'order\' => \'ASC\' , \'orderby\' => \'title\' , \'posts_per_page\' => -1 , \'post_type\' => \'stockist_directory\', \'regions\' => \'metropolitan\' ) );
if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">
<h1><?php the_title(); ?></h1>
  <?php the_field(\'shop_address\'); ?><br/>
  <?php the_field(\'suburb\'); ?>, <?php the_field(\'postcode\'); ?><br/>
  Phone: <?php the_field(\'phone_number\'); ?><br/>
  <a href="<?php the_field(\'website_address\'); ?>">Website</a>
</div>

<?php endif; endwhile; else: ?>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">

<h1><?php the_title(); ?></h1>
  <?php the_field(\'shop_address\'); ?><br/>
  <?php the_field(\'suburb\'); ?>, <?php the_field(\'postcode\'); ?><br/>
  Phone: <?php the_field(\'phone_number\'); ?><br/>
  <a href="<?php the_field(\'website_address\'); ?>">Website</a>
  </div>
<?php endif; endwhile; else: ?>

<?php endif; ?>

2 个回复

最合适的回答,由SO网友:gmazzap 整理而成

关于query\\u帖子的使用，正如@epilektric所说never use it. 使用WP_Query 相反

另一个考虑因素是keep your code DRY.

我建议您：

运行循环一次，然后将帖子放入助手数组中，使用两个键，一个键表示偶数，一个键表示奇数示例：

function post_data_output( $post ) {
  the_field(\'shop_address\', $post->ID );
  echo get_field(\'suburb\', $post->ID) . \',\'. get_field(\'postcode\', $post->ID) . \'<br/>\';
  echo \'Phone:\' . get_field(\'phone_number\', $post->ID) . \'<br/>\';
  echo \'<a href="\' . get_field(\'website_address\', $post->ID). \'">Website</a>\';
}

$args = array( \'order\' => \'ASC\' , \'orderby\' => \'title\' , \'posts_per_page\' => -1 , \'post_type\' => \'stockist_directory\', \'regions\' => \'metropolitan\' );

$query = new WP_Query($args);

if ($query->have_posts()) :
  $ordered = array(\'even\' => array(), \'odd\' => array());
  while($query->have_posts()) : $query->the_post();
    global $post;
    $key =  ( $query->current_post % 2 == 0) ? \'even\' : \'odd\';
    $ordered[$key][] = $post;
  endwhile;
  wp_reset_postdata();
  echo \'<div id="left-column">\';
  if ( ! empty($ordered[\'odd\']) ) { foreach( $ordered[\'odd\'] as $apost ) {
    post_data_output($apost);
  } }
  echo \'</div>\';
  echo \'<div id="right-column">\';
  foreach( $ordered[\'even\'] as $apost ) {
    post_data_output($apost);
  }
  echo \'</div>\';
endif;

SO网友:epilektric

That seems overly complex to sort the posts into columns. You should be able to achieve the results you want with a some simple logic.

Get the index of the current post.
Check the result of the modulus operator applied to the index.
Assign the appropriate column class based on the modulus result.

<?php if (have_posts()) : ?>
    <?php while(have_posts()) : the_post();

        if ($wp_query->current_post % 2) {
            $column_class=\'left-column\';
        } else {
            $column_class=\'right-column\';
        }
    ?>

        <div id="<?php echo $column_class; ?>">
            <!-- your content goes here -->
            <h1><?php the_title(); ?></h1>
        </div>

    <?php endwhile; else: ?>

    <!-- no posts to display -->

<?php endif; ?>

Other Considerations

You should also consider not using query_posts(). The following adjustments should provide the same result.

Switch query_posts() for WP_Query.

$query = new WP_Query(  array( \'order\' => \'ASC\' , \'orderby\' => \'title\' , \'posts_per_page\' => -1 , \'post_type\' => \'stockist_directory\', \'regions\' => \'metropolitan\' ) );

Then adjust The Loop to use $query. Also note that $wp_query->current_post has changed to $query->current_post.

<?php if ($query->have_posts()) : ?>
    <?php while($query->have_posts()) : $query->the_post();

        if ($query->current_post % 2) {
            $column_class=\'left-column\';
        } else {
            $column_class=\'right-column\';
        }
    ?>

After the loop reset the post data like this.

<?php wp_reset_postdata(); ?>

结束

小码农CODE

按字母顺序排列的两列布局

相关推荐

Problems with loop