W artykule:
This is a guest post by Josh Pollock
Siatkowe wyświetlanie postów w stylu Pinteresta od jakiegoś czasu jest popularnym projektem dla stron indeksów blogów WordPress. Jest popularny nie tylko dlatego, że naśladuje wygląd popularnego serwisu społecznościowego, ale także dlatego, że najlepiej wykorzystuje przestrzeń na ekranie. W indeksie blogów WordPress pozwala każdemu podglądowi postu na rozmiar, który naturalnie musi być, bez pozostawiania dodatkowej przestrzeni.
W tym samouczku pokażę Ci, jak używać popularnej Murowanej biblioteki JavaScript do tworzenia kaskadowych układów siatki dla indeksu bloga, a także stron archiwalnych dla Twojego motywu. Omówię kilka kwestii, które należy wziąć pod uwagę przy optymalizacji urządzeń mobilnych i jak je rozwiązać.
Uwaga: jest to zaawansowany samouczek dla tych, którzy czują się komfortowo edytując motywy WordPress i mają wystarczającą wiedzę HTML/CSS.
Krok 1: Dodaj Niezbędne Biblioteki Do Motywu
Aktualizacja: WordPress 3.9 teraz zawiera najnowszą wersję murarskie.
Najpierw musisz załadować murarstwo do swojego motywu, używając tego kodu:
jeśli (! function_exists ('slug_scripts_masonry') ) :
jeśli ( ! is_admin() ) :
function slug_scripts_masonry () {
wp_enqueue_script ('masonry');
wp_enqueue_style ('masoner', get_template_directory_uri ().'/css/');
}
add_action ('wp_enqueue_scripts', 'slug_scripts_masonry' );
endif;//! is_admin()
endif;//! slug_scripts_masonry istnieje
Ten kod po prostu ładuje murarstwo i udostępnia je do plików szablonów motywu (zobacz nasz przewodnik na temat prawidłowego dodawania skryptów JavaScript i stylów w WordPress). Zauważ również, że nie dodajemy jQuery jako zależności dla żadnego z nich. Jedną z zalet murarstwa 3 jest to, że nie wymaga jQuery, ale może być z nim używany. Z mojego doświadczenia wynika, że inicjalizacja murarstwa bez jQuery jest bardziej niezawodna i otwiera możliwość pominięcia ładowania jQuery, co może pomóc zarówno w czasie ładowania strony, jak i problemach ze zgodnością.
Krok 2: Zainicjuj Javascript
Ta następna funkcja ustawia murarstwo, definiuje kontenery, które będą z nim używane, a także upewnia się, że wszystko dzieje się we właściwej kolejności. Murarstwo musi obliczyć rozmiar każdego z elementów na stronie, aby dynamicznie rozplanować siatkę. Problem, który napotkałem z Murarstwem w wielu przeglądarkach, polega na tym, że murarstwo błędnie obliczy wysokość elementów przy powolnym ładowaniu obrazów, co prowadzi do nakładania się elementów. Rozwiązaniem jest użycie imagesLoaded, aby zapobiec obliczaniu układu przez system murarski do momentu załadowania wszystkich obrazów. Zapewnia to prawidłowy rozmiar.
Jest to funkcja i akcja, która wyświetli skrypt inicjalizacyjny w stopce strony:
jeśli ( ! function_exists ('slug_masonry_init' )) :
function slug_masonry_init () {?>
< script>
// Ustaw kontener, w którym będzie się znajdował w var
var container = document.querySelector ('#masoner-loop');
// create empty var msnry
var msnry;
// inicjalizuj murarstwo po załadowaniu wszystkich obrazów
imagesLoaded (container, function () {
msnry = new Masonry (container, {
itemSelector: ".murarstwo-wpis"
});
});
< / script>
<?php }
// Dodaj do wp_footer
add_action ('wp_footer', 'slug_masonry_init' );
endif;//! slug_masonry_init istnieje
Funkcja jest wyjaśniona krok po kroku za pomocą wbudowanych komentarzy. Funkcja Javascript mówi Murarowi, aby zajrzał do kontenera z identyfikatorem „murarska-pętla” dla elementów z klasą „murarska-entry” i obliczył siatkę dopiero po załadowaniu obrazów. Ustawiamy zewnętrzny Pojemnik za pomocą querySelector, a wewnętrzny za pomocą itemSelector.
Krok 2: Utwórz Pętlę Murarską
Zamiast dodawać znaczniki HTML dla murarstwa bezpośrednio do szablonu, stworzymy dla niego osobną część szablonu. Utwórz nowy plik o nazwie „content-masoner.php ” i dodaj go do swojego motywu. Pozwoli to na dodanie pętli murarskiej do dowolnej liczby różnych szablonów.
W Nowym pliku dodasz kod pokazany poniżej. Znaczniki są podobne do tych, które normalnie można zobaczyć w przypadku dowolnego podglądu zawartości. Możesz go modyfikować i tak musisz, tylko upewnij się, że najbardziej zewnętrzny element ma klasę „masoner-entry”, którą ustawiliśmy jako itemSelector w ostatnim kroku.
<article class = "masoner-entry" id = " post -<?php the_ID ();?>" <?php post_class ();?> >
<?php if ( has_post_thumbnail ()):?>
< div class = "masoner-thumbnail">
<a href="<?php the_permalink ('')?> "title="<?php the_title(); ?>"><?php the_post_thumbnail ('masoner-thumb');?>< / a>
< / div><!--.murarstwo-miniaturka-->
<?PHP endif;?>
< div class = "murarstwo-detale">
<h5><a href="<?php the_permalink ('')?> "title="<?php the_title(); ?> "><span class=" masoner-post-title"><?php the_title(); ?>< / span> < / a>< / h5>
< div class = "masoner-post-excerpt">
<?php the_excerpt(); ?>
< / div><!--.murarstwo-fragment -- >
< / div><!--/.murarstwo-szczegóły wpisu -- >
< / article><!--/.murarstwo-wpis-->
Ten znacznik ma klasy dla każdej z jego części, więc możesz dodać znaczniki, aby pasowały do Twojego motywu. Lubię dodawać ładne, lekko zaokrąglone obramowanie .murarskie-wejście. Inną miłą opcją jest brak obramowania .murarskie-wejście, ale dać mu lekki cień. Wygląda to szczególnie dobrze, gdy Miniatura posta rozciąga się na całą drogę do granicy kontenera ,co można osiągnąć poprzez podanie.murarstwo-marginesy miniatur i paddingi równe 0 we wszystkich kierunkach. Będziesz chciał dodać wszystkie te style do pliku o nazwie masonry.css w katalogu css Twojego motywu.
Krok 3: Dodaj Pętlę Murarską Do Szablonów
Teraz, gdy mamy naszą część szablonu, możesz go użyć w dowolnym szablonie w swoim temacie, który Ci się podoba. Możesz dodać go do indeksu.php, ale nie kategorii.php, jeśli nie chcesz go używać do archiwizacji kategorii. Jeśli chcesz go używać tylko na stronie głównej Twojego motywu, gdy jest ustawiony na wyświetlanie postów na blogu, użyjesz go w domu.php. Gdziekolwiek wybierzesz wszystko, co musisz zrobić, to owinąć pętlę w kontener o id „masoner-loop” i dodać część szablonu do pętli za pomocą get_template_part(). Pamiętaj, aby uruchomić kontener pętli murarskiej przed while (have_posts ()).
Na przykład, oto główna pętla z indeksu twentythirteen.php:
<?php if ( have_posts ()):?>
<?php / * pętla*/?>
<?php while ( have_posts ()): the_post ();?>
<?php get_template_part ('content', get_post_format() ); ?>
<?PHP endwhile;?>
<?php twentythirteen_paging_nav ();?>
<?PHP else:?>
<?php get_template_part ('content', 'none');?>
<?PHP endif;?>
I tutaj jest zmodyfikowany, aby skorzystać z naszej pętli murarskiej:
<?php if ( have_posts ()):?>
< div id = "masoner-loop">
<?php / * pętla*/?>
<?php while ( have_posts ()): the_post ();?>
<?php get_template_part ('content',' masonry'?>
<?PHP endwhile;?>
< / div><!-- /#murowanie-pętla-->
<?php twentythirteen_paging_nav ();?>
<?PHP else:?>
<?php get_template_part ('content', 'none');?>
<?PHP endif;?>
Krok 4: Ustaw responsywne szerokości elementów murarskich
Szerokość każdego elementu murarskiego można ustawić na kilka sposobów. Szerokość można ustawić za pomocą kilku pikseli podczas inicjalizacji masonerii. Nie jestem fanem robienia tego, ponieważ używam responsywnych motywów i wymaga to złożonych zapytań o media, aby uzyskać poprawność na małych ekranach. W przypadku projektów responsywnych najlepszą rzeczą do zrobienia jest ustawienie wartości szerokości .murarstwo-wpis z procentem, w oparciu o to, ile elementów chcesz z rzędu i pozwól Murarstwu wykonać resztę matematyki za Ciebie.
Wszystko to wymaga podzielenia 100 przez liczbę elementów, które chcesz ustawić procent w prostym wpisie w stylu Twojego motywu.css. Na przykład, jeśli chcesz cztery elementy w każdym wierszu, możesz to zrobić w murze.plik css:
.murowanie-wpis{width: 25%}
Krok 5: Optymalizacja Mobilna
Moglibyśmy się tu zatrzymać, ale nie sądzę, aby efekt końcowy działał niesamowicie dobrze na małych ekranach telefonów. Gdy będziesz zadowolony z wyglądu motywu z nową siatką murarską na pulpicie, sprawdź go w telefonie. Jeśli nie jesteś zadowolony z tego, jak wygląda w telefonie, musisz trochę popracować.
Nie sądzę, że na ekranie telefonu jest wystarczająco dużo miejsca na wszystko, co dodaliśmy do naszej części szablonu content-murarskie. Dwa dobre rozwiązania dostępne dla ciebie to skrócenie fragmentu dla telefonów lub całkowite pominięcie go. Oto dodatkowa funkcja, którą możesz dodać do funkcji motywu.php do tego. Ponieważ nie sądzę, że te problemy są problemem na tabletach, używam świetny plugin Mobble we wszystkich przykładach w tej sekcji, aby wprowadzić zmiany tylko na telefonach, a nie tabletach. Sprawdzam również, czy Mobble jest aktywny przed użyciem iw razie potrzeby wracam do bardziej ogólnej funkcji wykrywania urządzeń mobilnych wp_is_mobile, która jest wbudowana w WordPress.
jeśli (! function_exists ('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length ($length ) {
// Ustaw krótszą długość raz
$ short = 10;
// set long length once
$ long = 55;
// jeśli możemy ustawić tylko krótki fragment dla telefonów, inaczej krótki dla wszystkich urządzeń mobilnych
if (function_exists ('is_phone') {
if (is_phone() ) {
return $ short;
}
else {
return $long;
}
}
else {
if (wp_is_mobile() ) {
return $ short;
}
else {
return $long;
}
}
}
add_filter ('excerpt_length', 'slug_custom_excerpt_length', 999 );
endif;//! slug_custom_excerpt_length istnieje
Jak widać, zaczynamy od przechowywania długiej długości fragmentu i krótkiej długości fragmentu w zmiennych, ponieważ będziemy używać tych wartości dwa razy i chcemy być w stanie zmienić je z jednego miejsca, jeśli będziemy musieli później. Następnie testujemy, czy możemy użyć Is_phone () Mobble ’ a. Jeśli tak, ustawiamy krótki fragment dla telefonów i długi fragment, jeśli nie jesteśmy. Następnie robimy to samo, ale używając wp_is_mobile, co wpłynie na wszystkie urządzenia mobilne, jeśli nie można użyć is_phone (). Mam nadzieję, że pozostała część tej funkcji nigdy nie zostanie użyta, ale dobrze jest mieć kopię zapasową na wszelki wypadek. Gdy logika długości fragmentu jest ustawiona, sprowadza się to do podpięcia funkcji do filtra długości fragmentu.
Skrócenie fragmentu jest jedną z opcji, ale możemy również całkowicie pozbyć się go za pomocą prostego procesu. Oto nowa wersja treści-masoneria, z całym fragmentem części ommited na telefony:
<article class = "masoner-entry" id = " post -<?php the_ID ();?>" <?php post_class ();?> >
<?php if ( has_post_thumbnail ()):?>
< div class = "masoner-thumbnail">
<a href="<?php the_permalink ('')?> "title="<?php the_title(); ?>"><?php the_post_thumbnail ('masoner-thumb');?>< / a>
< / div><!--.murarstwo-miniaturka-->
<?PHP endif;?>
< div class = "murarstwo-detale">
<h5><a href="<?php the_permalink ('')?> "title="<?php the_title(); ?> "><span class=" masoner-post-title"><?php the_title(); ?>< / span> < / a>< / h5>
<?php
// umieść znacznik fragmentu w zmiennej, abyśmy nie musieli powtarzać go wielokrotnie.
$excerpt = '< div class = "masoner-post-excerpt">';
$ fragment= the_excerpt();
$ fragment= '</div><!--.murarstwo-fragment-->";
// jeśli możemy pominąć tylko dla telefonów, w przeciwnym razie pominąć dla wszystkich urządzeń mobilnych
if (function_exists ('is_phone') {
jeśli ( ! is_phone() ) {
echo $fragment;
}
}
else {
jeśli ( ! wp_is_mobile() ) {
echo $fragment;
}
}
?>
< / div><!--/.murarstwo-szczegóły wpisu -- >
< / article><!--/.murarstwo-wpis-->
Tym razem testujemy, czy nie jesteśmy na telefonie / urządzeniu mobilnym, a jeśli tak, to zwracamy fragment naszej pętli. Jeśli jesteśmy na telefonie / urządzeniu mobilnym, nic nie robimy.
Inną rzeczą, którą możesz chcieć zrobić, jest zwiększenie szerokości elementów murarskich, co zmniejsza liczbę z rzędu na urządzeniach mobilnych. Aby to zrobić, dodamy inny styl wbudowany do nagłówka w oparciu o wykrywanie urządzenia. Ponieważ ta funkcja używa wp_add_inline_styles, będzie ona zależna od określonego arkusza stylów. W tym przypadku używam murarstwa.css, który możesz chcieć, aby style murarskie były oddzielone. Jeśli nie skończysz używać, możesz użyć uchwytu z innego, już zarejestrowanego arkusza stylów.
jeśli ( ! function_exists ('slug_masonry_styles' ) ) :
function slug_masonry_styles () {
// ustaw szerokość
/ width = " 25%" / ;
// Ustaw wąską szerokość
$wąski = ' 50%';
/ * * Określ wartość dla $width**/
// jeśli możemy ustawić wąsko tylko dla telefonów, inaczej wąsko dla wszystkich urządzeń mobilnych
if (function_exists ('is_phone') {
if (is_phone() ) {
$width = $ narrow;
}
else {
$width = $width;
}
}
else {
if (wp_is_mobile() ) {
$width = $ narrow;
}
else {
$width = $width;
}
}
/ * * Output CSS for .murowanie-wejście o odpowiedniej szerokości**/
$custom_css = ".murarskie-wpis{width: {$width};}";
// Musisz użyć uchwytu już zapytanego arkusza stylów tutaj.
wp_add_inline_style ('masoner', $custom_css );
}
add_action ('wp_enqueue_scripts', 'slug_masonry_styles');
endif;//! slug_masonry_styles istnieje
Ta funkcja uruchamia Niestandardowy arkusz stylów, a następnie ustawia wartość szerokości za pomocą tego, co powinno być teraz bardzo znajomą logiką. Następnie tworzymy zmienną $custom_css przekazując wartość width do normalnie wyglądającego bitu CSS z {$width}. Następnie używamy wp_add_inline_style, aby powiedzieć WordPressowi, aby wydrukował nasze style w nagłówku, gdy używany jest arkusz stylów murarskich, a następnie podłączamy całą funkcję do wp_enqueue_scripts i gotowe.
Jeśli zdecydujesz się połączyć style murarskie w istniejący arkusz stylów, pamiętaj, aby użyć uchwytu tego arkusza stylów za pomocą wp_add_inline_style lub Style wbudowane nie zostaną uwzględnione. Lubię używać wp_add_inline_style, ponieważ ogólnie zawijam hook akcji do zapytania murarskiego w trybie warunkowym, więc dodaje się go tylko w razie potrzeby. Na przykład, Jeśli używam tylko masonerii na moim indeksie blogów i stronach archiwalnych, zrobiłbym to:
if (is_home () / / is_archive ()) {
add_action ('wp_enqueue_scripts', 'slug_scripts_masonry' );
}
Te kilka ostatnich przykładów powinno otworzyć kilka innych pomysłów w twoim mózgu. Na przykład możesz użyć podobnej logiki, aby całkowicie pominąć murowanie na urządzeniu mobilnym. Również wp_add_inline_style() jest rzadziej używaną, ale bardzo pomocną funkcją, ponieważ pozwala programowo ustawiać różne style w oparciu o dowolny typ warunku. Może to pozwolić na radykalną zmianę stylu dowolnego elementu w oparciu nie tylko o wykrywanie urządzenia, ale także o to, który szablon jest używany, a nawet o to, czy użytkownik jest zalogowany, czy nie.
Mam nadzieję, że te różne zmiany, które wprowadzam, będą dla was okazją do kreatywności. Murarskie i podobne kaskadowe systemy siatkowe są popularne już od jakiegoś czasu, więc nadszedł czas na nowe zwroty akcji na ten popularny pomysł. Pokaż nam w komentarzach, jakie fajne sposoby wymyśliłeś do korzystania z masonerii w motywie WordPress.
Wielozadaniowy gość od WordPressa, Josh Pollock pisze o WordPressie, zajmuje się tworzeniem motywów, służy jako community manager dla Pods Framework i opowiada się za rozwiązaniami open source dla zrównoważonego projektowania.
