Tworząc projekty witryn WordPress, czy kiedykolwiek miałeś ochotę stworzyć siatkowe wyświetlanie postów? Układ siatki świetnie sprawdza się w przypadku witryn zorientowanych na media, takich jak nasza galeria WordPress lub inna witryna typu prezentacja. Frameworki tematyczne, takie jak Genesis, mają już wbudowany system pętli siatki. Jeśli jednak próbujesz wyświetlić siatkę w swoim niestandardowym motywie WordPress, jesteśmy tutaj, aby ci pomóc. W tym artykule pokażemy, jak utworzyć pętlę siatki z miniaturkami postów w Twoim motywie WordPress.
Uwaga: musisz mieć uczciwe zrozumienie CSS i sposobu działania pętli WordPress.
Zanim zaczniemy, rzućmy okiem na to, co staramy się osiągnąć:
Jeśli zauważysz, posty na tej stronie są wyświetlane w siatce. Na słupkach po lewej stronie znajduje się granica, ale nie po prawej stronie. W normalnej pętli postu wszystkie posty mają tę samą stylizację, więc będziesz miał prawą krawędź na obu postach, która wyglądałaby dziwnie. Zauważ również, że odstępy są dość symetryczne. Co znowu nie jest możliwe przy normalnej pętli do zrobienia czegoś takiego. Teraz, gdy widzisz, co staramy się osiągnąć, rzućmy okiem na to, jak to osiągnąć.
Pierwszą rzeczą, którą musisz zrobić, to upewnić się, że Twój motyw ma włączone miniatury postów WordPress. Powinieneś również pomyśleć o tym, jak chcesz zmienić rozmiar swoich obrazów WordPress, ponieważ będziesz go potrzebować.
Po skonfigurowaniu miniatur i rozmiarów, zacznijmy to. Pozwala skonfigurować nasze zapytania pętli:
<?php $counter = 1; / / start counter $grids = 2; / / Grids per row global $query_string; / / Need this to make pagination work / * Konfigurowanie naszego niestandardowego zapytania (tutaj ustawiamy go tak, aby wyświetlał 12 postów na stronę i eliminował wszystkie lepkie posty*/ query_posts ($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?>
Powyższy kod wydaje się dość prosty, ponieważ wprowadziliśmy komentarze inline. Jedną z rzeczy, którą prawdopodobnie będziesz musiał edytować, jest zmienna posts_per_page dostosowana do Twoich potrzeb. Możesz również dodać inne parametry zapytania, jeśli chcesz. Teraz, gdy uruchomiliśmy pętlę, spójrzmy, jak chcemy wyświetlić posty w niej.
<?php
// Pokaż kolumnę po lewej stronie
if ($counter == 1) :
?>
< div class = "griditemleft">
< div class = "postimage">
<a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail');?>< / a>
< / div>
<H2><a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_title(); ?>< / a > < / H2>
< / div>
<?php
// Pokaż kolumnę po prawej stronie
elseif ($counter = = $grids) :
?>
< div class = "griditemright">
< div class = "postimage">
<a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail');?>< / a>
< / div>
<H2><a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_title(); ?>< / a > < / H2>
< / div>
<div class = "clear" >< / div>
<?php
$counter = 0;
endif;
?>
Zaczynamy Kod od sprawdzenia, czy licznik jest 1, co oznacza, że pokażemy naszą lewą siatkę. Po prostu wchodzimy i uruchamiamy div z niestandardową klasą css „griditemleft”. Wewnątrz dodaliśmy miniaturę postu i tytuł postu. Możesz dodawać lub odejmować dowolne elementy pętli (takie jak fragmenty, daty, Informacje o autorze, liczba komentarzy itp.). Uwaga: w naszych miniaturach nazywamy dodatkowy Rozmiar obrazu. Prawdopodobnie będziesz musiał zastąpić nazwę rozmiaru własnym rozmiarem, który utworzyłeś.
Po pierwszej siatce dodaliśmy elseif, który sprawdza, czy $counter pasuje do liczby określonej w naszych $grids (co powinno, ponieważ będziemy na drugim słupku). Jeśli licznik pasuje, wtedy możemy pokazać naszą właściwą siatkę, która zaczyna się od niestandardowej klasy css „griditemright”. Zauważ, że po zamknięciu div griditemright, dodajemy klasę clear. To wyjaśnimy, gdy przejdziemy do części CSS.
Po zakończeniu pętli z tym wyzerowujemy licznik na 0, aby mógł zacząć się ponownie w następnym wierszu.
Możemy po prostu zakończyć pętlę, którą rozpoczęliśmy, dodając ten kod:
<?php $counter++; endwhile; // Post Navigation code goes here endif; ?>
Powyższy kod zasadniczo kontynuuje licznik, dopóki nie osiągnie limitu określonego w naszej zmiennej query_post. Powodem, dla którego nie dodaliśmy powyższego kodu nawigacji po wpisie, jest to, że wielu ludzi używa wtyczki lub innej metody wyświetlania. Zostawiamy więc otwartą decyzję dla Ciebie.
Więc nasz końcowy kod pętli będzie wyglądał tak:
< div id = "gridcontainer">
<?php
$counter = 1; / / start counter
$grids = 2; / / Grids per row
global $query_string; / / Need this to make pagination work
/ * Konfigurowanie naszego niestandardowego zapytania (tutaj ustawiamy go tak, aby wyświetlał 12 postów na stronę i eliminował wszystkie lepkie posty) */
query_posts ($query_string . '&caller_get_posts=1&posts_per_page=12');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
// Pokaż kolumnę po lewej stronie
if ($counter == 1) :
?>
< div class = "griditemleft">
< div class = "postimage">
<a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail');?>< / a>
< / div>
<H2><a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_title(); ?>< / a > < / H2>
< / div>
<?php
// Pokaż kolumnę po prawej stronie
elseif ($counter = = $grids) :
?>
< div class = "griditemright">
< div class = "postimage">
<a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail');?>< / a>
< / div>
<H2><a href="<?php the_permalink(); ?> "title="<?php the_title_attribute(); ?>"><?php the_title(); ?>< / a > < / H2>
< / div>
<div class = "clear" >< / div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
// Paginacja może iść tutaj, jeśli chcesz.
endif;
?>
< / div>
Teraz, gdy mamy gotowy kod PHP, spójrzmy, jak będziemy go stylizować.
Nasze domyślne wyjście wyglądałoby tak:
< div id = "gridcontainer"> < div class = "griditemleft"> < div class="postimage"> Post Image< / div> < H2 > tytuł postu < /H2> < / div> < div class = "griditemright"> < div class="postimage"> Post Image< / div> < H2 > tytuł postu < /H2> < / div> <div class = "clear" >< / div> < / div>
Oto klasy, które musisz zmodyfikować:
# gridcontainer{margin: 20px 0; width: 100%;}
# gridcontainer h2 A{color: #77787a; font-size: 13px;}
# gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
# gridcontainer .griditemright{float: left; width: 278px;}
# gridcontainer .postimage{margin: 0 0 10px 0;}
Mamy nadzieję, że ten samouczek poprowadzi cię we właściwym kierunku w kierunku tworzenia pętli siatki dla Twoich postów WordPress.
