Come integrare il loop di Wordpress nelle griglie annidate 960.gs/Bootstrap?

Question

In procinto di implementare il mio primo sito Wordpress. La mia comprensione è che aiuta se il mio ciclo sta chiamando a voce generica, ad esempio:

<div id="article-excerpt"> 
<div>Article Heading</div> 
<div>Article Sub-heading</div> 
</div> 

Quando si utilizza Twitter Bootstrap o 960.gs, il mio feed si estende su più colonne e più righe.

Ad esempio, gli articoli sono disposti orizzontalmente su una griglia annidata composta da 5 colonne. Ogni 5 articoli, c'è una nuova riga.

Row 1: [article div] [article div] [article div] [article div] [article div] 
Row 1: [article div] [article div] [article div] [article div] [article div] 
Row 1: [article div] [article div] [article div] [article div] [article div] 
etc. 

Spiegherò il prossimo bit per verificare che abbia una comprensione fondamentale di come funzionano questi sistemi.

In 960.gs, per griglie annidate, ho bisogno di dichiarare il primo elemento e l'ultimo elemento di ogni fila con classi di alpha e omega rispettivamente:

<div id="article excerpt" class="alpha grid_1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
</div> 

Analogamente, twitter Bootstrap devo posizionare ogni riga nel proprio DIV speciale:

<div class="row"> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

</div> 

Se la mia griglia non è nidificato, le cose sono un po 'più semplice. Mi rendo conto che posso semplicemente inserire uno span1 o grid_1 nel mio contenitore. Ogni riga avanza automaticamente alla riga successiva quando raggiunge il numero massimo di colonne.

Con questo in mente, il mio ciclo Wordpress sarebbe molto semplice. Non avrebbe bisogno di identificare il primo e l'ultimo elemento per riga, o contare, o incrementare i numeri, o qualcosa del genere.

Quello che voglio sapere è se c'è un modo per semplificare il mio approccio in modo che il ciclo non deve necessariamente contare oggetti, un po 'come questo:

<div class="grid_5"> 
    <LOOP> <div class="grid_1">generic article</div> </LOOP> 
</div> 

Answer 1

Si scopre che in Bootstrap, arco div s w mal si avvolgono automaticamente alla riga successiva quando superano il numero di colonne in una data riga.

Ad esempio, la mia griglia è una griglia a larghezza fissa a 12 colonne.

mio regolare non Wordpress/loop HTML simile a questo:

<div class="container"> 

<div class="row"> 

    <div class="span3"> 
    Content 
    </div> 

    <div class="span3"> 
    Content 
    </div> 

    <div class="span3"> 
    Content 
    </div> 

    <div class="span3"> 
    Content 
    </div> 

</div> 

Naturalmente, quando integro il ciclo, il numero di span3 div s con contenuti varierà come io aggiungo di più contenuto al mio sito. Tuttavia, Bootstrap passa felicemente alla riga successiva quando una nuova span 3 viene aggiunta al mix.

Ciò significa che il mio ciclo non ha bisogno di contare il numero di span in fila per calcolare quando una riga inizia/finisce.

Può sembrare qualcosa di simile:

<div class="container"> 

    <div class="row"> 

     <!-- WORDPRESS LOOP BEGINS HERE --> 

     <div class="span3"> 
     Content 
     </div> 

     <!-- WORDPRESS LOOP ENDS HERE --> 

    </div> 

</div> 

Answer 2

Un altro modo di pensare a questo potrebbe essere quello di utilizzare le voci di elenco <li> anziché <div>. È quindi possibile applicare gli stili di psuedo first-child. Sfortunatamente, l'ultimo figlio non è supportato da alcuni browser. Ma gli articoli della lista sono belli e puliti, dato che puoi galleggiare come preferisci.

In caso contrario, è possibile scrivere 3 loop. Il primo tirerà solo il primo post nella categoria che desideri. Il secondo sarà sfalsato di 1 e tirerà (X -1) dei post totali (fermandosi prima della lista completa). Quindi il terzo afferra solo l'ultimo post.

<ul> 
<?php 
global $post; 
$args = array('numberposts' => 5, 'offset'=> 1, 'category' => 1); 
$myposts = get_posts($args); 
foreach($myposts as $post) : setup_postdata($post); ?> 
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> 
<?php endforeach; ?> 
</ul> 

È possibile utilizzare una variabile al posto del numero intero per numberposts. Spero che questo ti aiuti a iniziare.

Answer 3

Per il tuo problema specifico: non sono a conoscenza della funzione di wordpress specifica per rilevare il primo e l'ultimo post mentre ci si trova nel ciclo, ma si può facilmente lavorare con qualche PHP personalizzato.

Un esempio veloce e sporco:

<div class="grid_4"> 

<?php 

// Query the posts 
query_posts('posts_per_page=4'); 

$i = 0; 
if (have_posts()) : while (have_posts()) : the_post(); 
$i++; 

$class = ''; 
if ($i == 1) then $class = ' first'; 
if ($i == 4) then $class = ' last'; 
?> 

<div class="grid_1<?php echo $class; ?>">generic article</div> 

<?php endwhile; endif; ?> 
</div> 

Se la quantità di messaggi non è sempre 4, è possibile fare riferimento al globale var $ posts_per_page

global $posts_per_page; 
... 
if ($i == $posts_per_page) then $class = ' last'; 

Ora alcuni consigli: se ho capito correttamente, stai cercando di creare un tema Wordpress. Innanzitutto, se questo è il tuo primo sito wordpress, ti suggerisco di iniziare con un tema già fatto, come quello predefinito (Twenty Eleven) o uno dei tanti disponibili tramite il menu Appearance.

Infatti costruire un tema non riassume semplicemente di inserire del codice php in un template html: devi anche dividere il tuo template in molti file (functions.php, header.php, footer.php, single.php, e quindi ...)

Per iniziare ti suggerisco di studiare come viene costruito il tema di base "Twenty Twelve".

Alcune buone risorse:

• Wordpress Codex

• Wordpress Codex : Theme Development

• Wordpress StackExchange