Jak mogę zintegrować pętlę Wordpress w zagnieżdżonych siatkach 960.gs/Bootstrap?

Question

Zaimplementować moją pierwszą witrynę Wordpress. W moim rozumieniu jest to, że pomaga, jeśli moja pętla dzwoni element rodzajowy, na przykład:

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

Podczas korzystania Twitter Bootstrap lub 960.gs, my feed obejmuje wiele kolumn i wielu wierszy.

Na przykład artykuły układa się poziomo na zagnieżdżonej siatce składającej się z 5 kolumn. Co 5 przedmiotów pojawia się nowy wiersz.

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. 

Wyjaśnię następny fragment, aby sprawdzić, czy mam fundamentalną wiedzę na temat działania tych systemów.

W 960.gs dla zagnieżdżonych siatek, muszę zadeklarować pierwszy element i ostatni element w każdym rzędzie z klas alpha i omega odpowiednio:

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

Podobnie w Twitter Bootstrap muszę umieścić każdy wiersz w swoim specjalnym DIV:

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

Jeśli moja siatka nie jest zagnieżdżona, rzeczy są trochę prostsze. Rozumiem, że mogę po prostu umieścić wewnątrz mojego pojemnika span1 lub grid_1. Każdy wiersz automatycznie przechodzi do następnego wiersza, gdy osiągnie maksymalną liczbę kolumn.

Mając to na uwadze, moja pętla Wordpress byłaby bardzo prosta. Nie musi identyfikować pierwszego i ostatniego elementu w wierszu, ani liczby, ani numerów przyrostowych, ani niczego podobnego.

Co chcę, aby dowiedzieć się, czy jest jakiś sposób, aby uprościć moje podejście tak, że pętla nie musi liczyć przedmioty, niby tak:

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

Answer 1

Okazuje się, że w Bootstrap, rozpiętość div s wag chory automatycznie zawija do następnego wiersza, gdy przekracza liczbę kolumn w danym wierszu.

Na przykład moja siatka to stała szerokość, 12 słupów siatki.

Moje regularne HTML non-Wordpress/pętla wygląda następująco:

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

Oczywiście, kiedy zintegrować pętlę, liczba span3 div s zawierających treść będzie się zmieniać jak dodam więcej treść do mojej witryny. Jednak Bootstrap z przyjemnością zawija się do następnej linii, gdy do miksu dodaje się nowy zakres 3.

Oznacza to, że moja pętla nie musi liczyć liczby przęseł z rzędu, aby obliczyć, kiedy wiersz zaczyna się/kończy.

To może wyglądać mniej więcej tak:

<div class="container"> 

    <div class="row"> 

     <!-- WORDPRESS LOOP BEGINS HERE --> 

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

     <!-- WORDPRESS LOOP ENDS HERE --> 

    </div> 

</div> 

Answer 2

Innym sposobem, aby o tym myśleć może być użycie Elementy listy <li> zamiast <div>. Następnie można zastosować style psuedo-element. Niestety, ostatnie dziecko nie jest obsługiwane przez niektóre przeglądarki. Ale elementy listy są ładne i czyste, ponieważ możesz je unieść w dowolne miejsce.

W przeciwnym razie można napisać 3 pętle. Pierwszy pobierze tylko pierwszy wpis w wybranej kategorii. Drugi przesunie o 1 i wyciągnie (X -1) z wszystkich stanowisk (zatrzymanie na krótko od pełnej listy). Trzeci chwyta tylko ostatni 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> 

Można użyć zmiennej w miejsce liczby całkowitej dla numberposts. Mam nadzieję, że to pomoże ci zacząć.

Answer 3

Dla konkretnego problemu: Nie jestem świadomy określonej funkcji wordpress, aby wykryć pierwszy i ostatni wpis w pętli, ale można bardzo łatwo obejść się z jakimś niestandardowym PHP.

Szybki i brudny przykład:

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

Jeśli ilość stanowisk nie zawsze jest 4, można odwołać się do globalnego var $ posts_per_page

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

Teraz kilka rad: jeśli rozumiem poprawnie, próbujesz zbudować motyw Wordpress. Po pierwsze, jeśli jest to Twoja pierwsza witryna z wordpress, proponuję zacząć od już wykonanej kompozycji, takiej jak domyślna (dwadzieścia jedenaście) lub jedna z wielu dostępnych za pośrednictwem menu Appearance.

Rzeczywiście kompilacja tematu nie streszcza się po prostu umieścić trochę kodu php w szablonie html: trzeba również podzielić szablon w wielu plikach (functions.php, header.php, footer.php, single.php i więc ...)

Na początek Proponuję zapoznać się z podstawowym tematem "Dwadzieścia Dwanaście".

Niektóre dobrych zasobów:

• Wordpress Codex

• Wordpress Codex : Theme Development

• Wordpress StackExchange