WordPress 如何將迴圈分割成多個列

問題描述

如果我有一個從類別查詢執行的迴圈，如：

<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<ul>
<?php while ($the_query->have_posts()) : $the_query->the_post();?>
<li>.. </li><?php wp_reset_query(); ?>
<?php endwhile; ?>
</ul>

我將如何建立一個 if 子句，以一定的間隔打破列表，並啟動一個新的。所以例如在第 10 個帖子，返回一個</ul> 並在 11 開始一個新的<ul> 。

這是不正確的，但為了說明我的目標：

<?php $count =0;
    while($count <=50){
        if ($count == 9){
            echo "<li><a href='<?php%20the_permalink();%20?>'>
                      <?php the_title(); ?></a></li></ul>";
            }
        elseif ($count == 10){
        echo "<ul><li><a href='<?php%20the_permalink();%20?>'>
                          <?php the_title(); ?></a></li>";
        }
        else {
        echo "<li><a href='<?php%20the_permalink();%20?>'><?php the_title(); ?></a></li>";
        }

將此邏輯包括在迴圈中的正確方法是什麼？

最佳解決方案

為您的查詢建立列，並輕鬆顯示

在主題中可能更有用的東西適合於模板標籤和迴圈。我的第一個答案並沒有那麼重視。此外，我認為這是一個太複雜的一個快速採用。

我想到的一個更簡單的方法就是擴充套件”the loop” 的列，到目前為止這個解決方案：

一個 WP_Query_Columns 物件”extends” 任何標準 WP 查詢與列可以很容易地迭代。第一個引數是查詢變數，第二個引數是每列顯示的專案數：

<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<?php foreach(new WP_Query_Columns($the_query, 10) as $column_count) : ?>
    <ul>
        <?php while ($column_count--) : $the_query->the_post(); ?>
        <li><a href="<?php%20the_permalink();%20?>"><?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php endforeach; ?>

要使用它，只需將 WP_Query_Columns class from this gist 新增到您的主題 function.php 。

高階用法

如果您需要正在顯示的列號 (例如，對於某些偶數/奇怪的 CSS 類，您可以從 foreach 獲取列號：

<?php foreach(new WP_Query_Columns($the_query, 10) as $column => $column_count) : ?>

並且列的總數也可用：

<?php
    $the_columns = new WP_Query_Columns($the_query, 10);
    foreach($the_columns as $column => $column_count) :
?>
    <h2>Column <?php echo $column; ?>/<?php echo sizeof($the_columns); ?></h2>
    <ul>...

二十個例子

我可以快速地打入二十十個主題進行測試，並以這種方式在任何迴圈之上新增標題。它被插入到 loop.php 中，開始是主題的程式碼：

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
    <div id="post-0" class="post error404 not-found">
        <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
        <div class="entry-content">
            <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
            <?php get_search_form(); ?>
        </div><!-- .entry-content -->
    </div><!-- #post-0 -->
<?php endif; ?>

<!-- WP_Query_Columns -->
<?php
    ### Needs WP_Query_Columns --- see http://wordpress.stackexchange.com/q/9308/178
    $query_copy = clone $wp_query; // save to restore later
    foreach( new WP_Query_Columns($wp_query, 3) as $columns_index => $column_count ) : ?>
    <ul>
        <?php
        while ( $column_count-- ) : the_post(); ?>
            <li><h2 class="entry-title"><a href="<?php%20the_permalink();%20?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2></li>
        <?php endwhile; ?>
    </ul>
<?php endforeach; ?>
<?php $wp_query = $query_copy;?>

<?php
    /* Start the Loop.
    ...

對於更長的答案：

(這基本上是我以上的東西，但是更好地解釋瞭如何用簡單的數學操作來解決問題，我的新解決方案是迭代一些 pre-calculated)

這取決於你實際需要多少解決問題。

例如，如果每列的項數等於 1，這很簡單：

<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<?php while ($the_query->have_posts()) : $the_query->the_post();?>
<ul>
    <li>.. </li>
<ul>
<?php endwhile;  wp_reset_query(); ?>
</ul>

即使使用這個簡單的程式碼，也可以看出有多種決定要做：

一列中有多少項？
總共有多少物品？
是否有一個新的列開始？
還有一列要結束嗎？

最後一個問題是非常感興趣的 HTML 輸出，因為您可能不僅要包含專案，還包含 html 元素的列。

幸運的是，使用程式碼，我們可以設定所有這些變數，並建立始終根據需要計算的程式碼。

有時候甚至我們從一開始就不能回答每一個問題。對於例子，總專案的計數：是否有一些，一些，多個，一個完整的計數匹配總共的整數列？

即使 Jan Fabry 的答案可能在某些情況下工作 (如上例所述，對於 one-item-per-column 方案)，您可能對 WP_Query 返回的任意數量的專案感興趣。

首先為數學：

//
// arithmetical example:
//
# configuration:
$colSize = 20;  // number of items in a column
$itemsTotal = 50; // number of items (total)

# calculation:
$count = 0; // a zero-based counter variable
$isStartOfNewColum = 0 === ($count % $colSize); // modulo operation
$isEndOfColumn = ($count && $isStartOfNewColum) || $count === $itemsTotal; // encapsulation

該程式碼不執行，所以讓我們把它放在一個簡單的文字示例中

//
// simple-text example:
//
$column = 0; // init a column counter
for($count=0; $count<= $itemsTotal; $count++) {
    $isStartOfNewColum = 0 === ($count % $colSize); // modulo
    $isEndOfColumn = ($count && $isStartOfNewColum);
    $isStartOfNewColum && $column++; // update column counter

    if ($isEndOfColumn) {
        printf("/End of Column: %dn", $column-1);
    }

    if ($isStartOfNewColum) {
        printf("<start of Column: %dn", $column);
    }

    printf(" * item %dn", $count);
}
if ($count && !$isEndOfColumn && --$count === $itemsTotal) {
    printf("/End of Column: %dn", $column);
}

printf("Done. Total Number of Columns: %d.n", $column);

這實際上執行並已經做了一些輸出：

<start of Column: 1
 * item 0
 * item 1
 * item 2
 * item 3
...
 * item 17
 * item 18
 * item 19
/End of Column: 1
<start of Column: 2
 * item 20
 * item 21
 * item 22
...
 * item 37
 * item 38
 * item 39
/End of Column: 2
<start of Column: 3
 * item 40
 * item 41
 * item 42
...
 * item 48
 * item 49
 * item 50
/End of Column: 3
Done. Total Number of Columns: 3.

這個模擬已經很好了，它可以如何在 wordpress 模板中看起來像：

//
// wordpress example:
//
$count = 0; // init item counter
$column = 0; // init column counter
$colSize = 10; // column size of ten this time
$the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');
$itemsTotal = $the_query->post_count;
?>
<?php while ($the_query->have_posts()) : $the_query->the_post();?>
<?php
    # columns display variables
    $isStartOfNewColum = 0 === ($count % $colSize); // modulo
    $isEndOfColumn = ($count && $isStartOfNewColum);
    $isStartOfNewColum && $column++; // update column counter

    if ($isEndOfColumn) {
        print('</ul>');
    }

    if ($isStartOfNewColum) {
        printf('<ul class="col-%d">', $column);
    }
?>
    <li> ... make your day ...
    </li>
<?php endwhile; ?>
<?php
if ($count && !$isEndOfColumn && --$count === $itemsTotal) {
    print('</ul>');
}
// You don't have to do this in every loop, just once at the end should be enough
wp_reset_query();
?>

(我沒有在 WP 環境中執行最後一個例子，但應該至少在語法上是正確的。)

參考文獻

How to split a loop into multiple columns

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 如何將迴圈分割成多個列