Come dividere un loop in più colonne

https://wordpress.stackexchange.com/questions/9308

loop

16-10-2019
|

Domanda

Se ho un ciclo che parte da una query categoria come:

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

Come faccio a creare un caso clausola che rompe la lista in un certo intervallo, e inizia una nuova. Così, per esempio al 10 ° posto, restituire un </ul> e iniziare una nuova <ul> alle 11.

Questo non è corretto, ma per illustrare il mio obiettivo:

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

Qual è il modo corretto per includere questa logica nel circuito?

Soluzione

creare colonne per la query e facile visualizzazione

Nel temi è probabilmente più utile per avere qualcosa che si adatta bene in tag modello e il ciclo. La mia prima risposta non si è concentrato su più di tanto. Inoltre ho pensato che è un po 'troppo complicato per una rapida adozione.

Un approccio più facile che mi è venuta in mente era quella di estendere "loop" con le colonne ed è venuto a questa soluzione fino ad ora:

WP_Query_Columns oggetto "estende" tutta la domanda WP serie con colonne che possono essere facilmente iterato. Il primo parametro è la variabile query e il secondo parametro è il numero di elementi da visualizzare per colonna:

<?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 the_permalink(); ?>"><?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php endforeach; ?>

Per usarlo, basta aggiungere il classe WP_Query_Columns da questa sostanza al vostro temi function.php.

Uso avanzato

Se è necessario il numero della colonna che si sta visualizzazione (ad esempio per alcune classi CSS / Pari Dispari, è possibile ottenere che dal foreach così:

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

E il numero totale di colonne è disponibile così:

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

Twenty Ten Esempio

ho potuto incidere rapidamente venti tema ten per una prova e titoli aggiungendo di sopra di ogni ciclo in questo modo. E 'inserito nel loop.php, l'inizio è il codice del tema:

<?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 the_permalink(); ?>" 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.
    ...

Per una risposta più lunga:

(che è fondamentalmente come sono arrivato alla roba di cui sopra, ma spiega meglio come risolvere realmente il problema con semplici operazioni matematiche. La mia nuova soluzione è quella di iterare sopra qualcosa precalcolata.)

Dipende un po 'quanto effettivamente necessario per risolvere il problema.

Per esempio, se il numero di elementi per colonna è uguale a uno, questo è molto semplice:

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

Anche con questo semplice codice, si può vedere che ci sono più decisioni da prendere:

Quanti elementi sono in una colonna?
Quanti elementi ci sono in totale?
C'è una nuova colonna per iniziare?
E c'è una colonna di fine?

L'ultima domanda è abbastanza interestering per l'output HTML come probabilmente si vuole racchiudere non solo gli elementi, ma anche la colonna con elementi HTML.

Per fortuna con il codice, possiamo impostare tutti questi nelle variabili e creare codice che calcola sempre alle nostre esigenze.

E a volte anche, non possiamo nemmeno rispondere ad ogni domanda fin dall'inizio. Per exmaple, il numero di elementi totali: ci sono, alcuni, multiplo, un conteggio esatto che corrisponde con un numero intero di colonne in totale

Anche il lavoro risposta potrebbe di Jan Fabry in alcuni casi (come il mio esempio di cui sopra fa per lo scenario unico elemento-per-colonna), si potrebbe essere interessati a qualcosa che funziona per qualsiasi numero di oggetti restituiti da WP_Query.

In primo luogo per la matematica:

//
// 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

Questo codice non viene eseguito, quindi cerchiamo di mettere che su in un esempio di testo semplice

//
// 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: %d\n", $column-1);
    }

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

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

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

Questo viene eseguito in realtà e fa già qualche uscita:

<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.

Questo simula già abbastanza bene come potrebbe sguardo come in un template 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();
?>

(non ho eseguito l'ultimo esempio in un ambiente WP, ma dovrebbe essere almeno sintatticamente corretto.)

Altri suggerimenti

Questa è più una questione di programmazione generale, ma qui è l'idea di base:

<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<ul>
<?php
$post_counter = 0;
while ($the_query->have_posts()) :
    $the_query->the_post();
    $post_counter++;
?>
    <li>.. </li>
<?php
    if ( 0 == $post_counter % 10 ) {
        echo '</ul><ul>';
    }
endwhile;
?>
</ul>
<?php
// You don't have to do this in every loop, just once at the end should be enough
wp_reset_query();
?>

Non c'è bisogno di creare una var separata per il conteggio, come la query var conta già all'indirizzo: $wp_query->current_post. Inoltre, è necessario conto per la voce finale nella lista in modo da non avete <ul></ul> vuoto nel markup.

<?php 
$the_query = new WP_Query('showposts=21&orderby=title&order=asc'); 
echo "<ul>";
while ($the_query->have_posts()) :
    $the_query->the_post();
    echo "<li>{$the_query->current_post}</li>";

    // Note that the post is already counted in the $the_query->current_post variable when in the loop. Add one to translate array counting to real counts.
    // Jan's example didn't account for the final entry in the list. Don't want empty <ul>'s hanging around
    if ((($the_query->current_post+1) % 10 == 0) && ($the_query->current_post+1 !== count($the_query->posts))):
        echo "</ul><ul>";
    endif;
endwhile;
echo "</ul>";
?>

Aggiungere il href="https://gist.github.com/826061" rel="nofollow"> get_columns_array() funzione

Nel vostro tema si esegue un ciclo foreach poi sulle colonne:

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

I impostare la dimensione predefinita di una colonna a 10. È possibile utilizzare il secondo parametro per impostare la dimensione di una colonna da soli. Come a 7:. get_columns_array($post_count, 7);

Ecco un altro approccio si può prendere:

$article = 0;

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <?php $article = $article + 1; ?>
        <?php if ($article % 3 == 1) echo '<div class="row-fluid">';  ?>
            <div class="span4">
            <h2><a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
            </div><!--/span-->
        <?php if ($article % 3 == 0) echo '</div><!--/row-->';  ?>
    <?php endwhile;?>
<?php else: ?>
<h2>...</h2>
<?php endif; ?>

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a wordpress.stackexchange