Masonry dla postów na WordPressie

Autor: Paweł Szroeder / 13 kwietnia 2017

Efekt w stylu Masonry zdobył swoją popularność za sprawą Pinteresta, gdzie kafelki idealnie dopasowują się między sobą tworząc charakterystyczny grid. Jak taki efekt uzyskać we własnym szablonie WordPress, np. dla postów? Wystarczy kilka kroków.

 

Efekt Masonry dla postów w WordPressie

 

Pobieramy bibliotekę Masonry

David DeSandro to twórca biblioteki JavaScript o nazwie Masonry. Możemy ją pobrać na stronie GitHub, przez npm, bowera lub po prostu na oficjalnej witrynie biblioteki.

Masonry swoją popularność zdobył już jakiś czas temu, ale wciąż możemy go spotkać na wielu stronach internetowych. Pomimo, że nie do końca odpowiada mi on ze względów UX, wciąż budzi entuzjazm i zadowolenie wśród klientów.

Po pobraniu biblioteki musimy zaimplementować ją do szablonu. Jeśli nasz projekt został zbudowany zgodnie ze specyfikacją Worpdress, otwieramy plik footer.php i przed zamknięciem tagu body wrzucamy plik JavaScript:

<script src="https://sciezka/js/masonry.pkgd.min.js"></script>

Biblioteka załadowana, możemy ruszać dalej.

 

Uruchamiamy Masonry za pomocą jQuery

Bibliotekę Masonry możemy zainicjować z jQuery, Vanilla JavaScript lub bezpośrednio w HTML. Ja wybrałem pierwszy wariant, uważam że jest najprostszy i najmniej skomplikowany. Pamiętajmy jednak, że wybierając tą metodę musimy mieć podpiętą do szablonu bibliotekę jQuery. Następnie w pliku footer.php dodajemy kawałek kodu:

$('.grid').masonry({
 itemSelector: '.grid-item',
 columnWidth: 200
});

Przede wszystkim wskazujemy klasę (lub ID), która stanowić będzie kontener dla naszych elementów (.grid). W opcjach natomiast podajemy klasę, jaką będą posiadać nasze elementy (.grid-item) wewnątrz kontenera. W tym przypadku będą to posty, także należy pamiętać, aby dla każdego z nich przypisać właśnie taką klasę w pętli PHP. Jeśli nie jesteś w stanie lub nie wiesz jak zmienić nazwę klasy dla każdego postu, po prostu wpisz taką jaką widzisz w źródle strony. Dodatkowo podajemy szerokość kolumny.

Te nie wszystkie dostępne opcje. Jeśli zakładamy, że nasze kolumny będą posiadały wartość wyrażoną w %, która będzie taka sama jak szerokość pojedynczego elementu, możemy zmienić kod na:

$('.grid').masonry({
 itemSelector: '.grid-item',
 columnWidth: '.grid-item',
 percentPosition: true
});

Dzięki takiemu zabiegowi, cały szablon będzie bardziej responsywny, a cały układ ładnie dopasuje się do okna przeglądarki.

 

Dodajemy style CSS

Mamy podpiętą bibliotekę, zainicjowaliśmy efekt, konsola nie wyrzuca błędów – czas na dodanie kilku reguł w CSS. W zasadzie wystarczy, że napiszemy:

.grid {
 width: 100%;
}

.grid-item {
 width: 25%;
 float: left;
 margin-bottom: 10px;
}

Nasza kolumna posiadać będzie 25% szerokości okna i dokładnie tyle samo każdy element wewnątrz grida. W zasadzie to wszystko, nasze posty pojawiają się już przy wykorzystaniu biblioteki Masonry.

 

Jak możemy rozbudować efekt?

Najpopularniejszą opcją jest wyświetlenie na start np. 6 postów, a reszty dopiero po scrollowaniu lub kliknięciu konkretnego przycisku. Możemy dodać także skrypt imagesLoaded, jeśli planujemy wykorzystać obrazki. Możliwości jest naprawdę bardzo dużo. Wiele zależy jednak od naszych umiejętności.

Efekt Masonary możemy także zaimplementować na stronie za pomocą gotowych wtyczek do Wordpresa – nie jest to rozwiązanie idealne, ale dla własnych potrzeb może wystarczyć.

Zachęcam do eksperymentowania z biblioteką.