Jak użyć Masonry do dodania siatki postów w stylu Pinterest w WordPress

To jest post gościnny Josha Pollocka

Wyświetlanie postów w stylu przypominającym Pinterest, siatka postów, od jakiegoś czasu jest popularnym projektem dla stron indeksu 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. Na stronie indeksu bloga WordPress pozwala każdemu podglądowi posta mieć naturalnie potrzebny mu rozmiar, bez pozostawiania dodatkowego miejsca.

W tym tutorialu pokażę Ci, jak używać popularnej biblioteki JavaScript Masonry do tworzenia kaskadowych układów siatki dla indeksu Twojego bloga, a także stron archiwum Twojego motywu. Omówię kilka problemów, które musisz wziąć pod uwagę w przypadku optymalizacji mobilnej i jak je rozwiązać.

Uwaga: Jest to samouczek na poziomie zaawansowanym, przeznaczony dla osób, które czują się komfortowo edytując motywy WordPress i posiadają wystarczającą wiedzę z zakresu HTML/CSS.

Krok 1: Dodaj niezbędne biblioteki do swojego motywu

Aktualizacja: WordPress 3.9 zawiera teraz najnowszą wersję Masonry.

Najpierw musisz załadować Masonry do swojego motywu, używając tego kodu:

if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
    wp_enqueue_script('masonry');
    wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists

Ten kod po prostu ładuje masonry i udostępnia go w plikach szablonu motywu (zobacz nasz przewodnik, jak prawidłowo dodać JavaScript i style w WordPressie). Należy również pamiętać, że nie dodajemy jQuery jako zależności dla żadnego z nich. Jedną z zalet Masonry 3 jest to, że nie wymaga jQuery, ale może być z nim używany. Z mojego doświadczenia wynika, że inicjalizacja Masonry 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 w problemach z kompatybilnością.

Krok 2: Zainicjuj Javascript

Ta następna funkcja konfiguruje Masonry, definiuje używane z nią kontenery i zapewnia, że wszystko dzieje się we właściwej kolejności. Masonry musi obliczyć rozmiar każdego elementu na stronie, aby dynamicznie układać siatkę. Problem, z którym się spotkałem w Masonry w wielu przeglądarkach, polega na tym, że Masonry błędnie oblicza wysokość elementów z wolno ładującymi się obrazami, co prowadzi do nakładania się elementów. Rozwiązaniem jest użycie imagesLoaded, aby zapobiec obliczaniu układu przez Masonry do momentu załadowania wszystkich obrazów. Zapewnia to prawidłowe wymiarowanie.

Oto funkcja i akcja, która wyprowadzi skrypt inicjalizujący w stopce strony:

if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#masonry-loop');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            itemSelector: '.masonry-entry'
        });
    });
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists

Funkcja jest wyjaśniona krok po kroku za pomocą komentarzy w linii. Funkcja JavaScript mówi Masonry, aby szukał w kontenerze o identyfikatorze „masonry-loop” elementów o klasie „masonry-entry” i obliczał siatkę dopiero po załadowaniu obrazów. Ustawiamy zewnętrzny kontener za pomocą querySelector, a wewnętrzny za pomocą itemSelector.

Krok 2: Utwórz pętlę Masonry

Zamiast dodawać znaczniki HTML dla Masonry bezpośrednio do szablonu, stworzymy dla niego osobną część szablonu. Utwórz nowy plik o nazwie „content-masonry.php” i dodaj go do swojego motywu. Pozwoli to na dodanie pętli Masonry do tylu różnych szablonów, ilu chcesz.

W nowym pliku dodasz poniższy kod. Znaczniki są podobne do tych, które normalnie zobaczysz w podglądzie dowolnej treści. Możesz je dowolnie modyfikować, upewnij się tylko, że najbardziej zewnętrzny element ma klasę „masonry-entry”, którą ustawiliśmy jako selektor elementów w ostatnim kroku.

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <div class="masonry-post-excerpt">
            <?php the_excerpt(); ?>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Ten znacznik ma klasy dla każdej ze swoich części, dzięki czemu możesz dodać znaczniki pasujące do Twojego motywu. Lubię dodawać ładną, lekko zaokrągloną ramkę do .masonry-entry. Inną miłą opcją jest brak ramki dla .masonry-entry, ale nadanie jej lekkiego cienia. Wygląda to szczególnie dobrze, gdy miniatura posta rozciąga się na całą szerokość pojemnika, co można osiągnąć, nadając .masonry-thumbnail marginesy i dopełnienia równe 0 we wszystkich kierunkach. Wszystkie te style będziesz chciał dodać do pliku o nazwie masonry.css w katalogu css Twojego motywu.

Krok 3: Dodaj pętlę Masonry do szablonów

Teraz, gdy mamy już naszą część szablonu, możesz jej użyć w dowolnym szablonie w swoim motywie. Możesz dodać ją do index.php, ale nie do category.php, jeśli nie chcesz, aby była używana dla archiwów kategorii. Jeśli chcesz, aby była używana tylko na stronie głównej Twojego motywu, gdy jest ustawiona na wyświetlanie postów z bloga, użyłbyś jej w home.php. Gdziekolwiek wybierzesz, wszystko, co musisz zrobić, to owinąć swoją pętlę w kontener z identyfikatorem „masonry-loop” i dodać część szablonu do pętli za pomocą get_template_part(). Pamiętaj, aby rozpocząć kontener pętli masonry przed while (have_posts() ).

Na przykład, oto główna pętla z index.php motywu twentythirteen:

<?php if ( have_posts() ) : ?>

    <?php /* The loop */ ?>
    <?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; ?>

A oto zmodyfikowana wersja, aby użyć naszej pętli Masonry:

<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'masonry' ?>
    <?php endwhile; ?>
</div><!--/#masonry-loop-->
    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Krok 4: Ustaw responsywne szerokości elementów Masonry

Istnieje kilka sposobów ustawienia szerokości każdego elementu Masonry. Szerokość można ustawić za pomocą liczby pikseli podczas inicjalizacji Masonry. Nie przepadam za tym, ponieważ używam responsywnych motywów i wymaga to skomplikowanych zapytań medialnych, aby wszystko działało poprawnie na małych ekranach. W przypadku projektów responsywnych najlepszym rozwiązaniem okazało się ustawienie wartości szerokości dla .masonry-entry za pomocą procentu, w zależności od tego, ile elementów chcesz mieć w rzędzie, a resztę obliczeń pozostawić Masonry.

Wszystko, czego potrzeba, to podzielenie 100 przez liczbę elementów, które chcesz ustawić jako procent, w prostym wpisie w pliku style.css Twojego motywu. Na przykład, jeśli chcesz mieć cztery elementy w każdym wierszu, możesz zrobić to w pliku masonry.css:

.masonry-entry{width:25%}

Krok 5: Optymalizacja mobilna

Możemy tutaj zakończyć, ale nie sądzę, że końcowy rezultat działa niesamowicie dobrze na małych ekranach telefonów. Gdy będziesz zadowolony z tego, jak wygląda Twój motyw z nową siatką Masonry na komputerze, sprawdź go na telefonie. Jeśli nie jesteś zadowolony z tego, jak wygląda na telefonie, będziesz musiał 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-masonry. Dwie 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 pliku functions.php swojego motywu, aby to zrobić. Ponieważ nie sądzę, że te problemy występują na tabletach, używam świetnej wtyczki Mobble we wszystkich przykładach w tej sekcji, aby wprowadzać zmiany tylko na telefonach, a nie na tabletach. Sprawdzam również, czy Mobble jest aktywny, zanim go użyję, i w razie potrzeby wracam do bardziej ogólnej funkcji wykrywania urządzeń mobilnych wp_is_mobile, która jest wbudowana w WordPressa.

if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    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 exists

Jak widać, zaczynamy od przechowywania długości długiego i krótkiego fragmentu w zmiennych, ponieważ będziemy używać tych wartości dwukrotnie i chcemy móc je zmienić z jednego miejsca, jeśli zajdzie taka potrzeba później. Stamtąd sprawdzamy, czy możemy użyć Mobble’s is_phone(). Jeśli tak, ustawiamy krótki fragment dla telefonów, a długi fragment, jeśli nie jesteśmy. Po tym robimy to samo, ale używając wp_is_mobile, co wpłynie na wszystkie urządzenia mobilne, jeśli is_phone() nie może być użyte. Mamy nadzieję, że część else tej funkcji nigdy nie zostanie użyta, ale dobrze jest mieć zapas na wszelki wypadek. Gdy logika długości fragmentu zostanie ustawiona, pozostaje tylko podłączenie funkcji do filtra excerpt_length.

Skrócenie fragmentu jest jedną z opcji, ale możemy go również całkowicie usunąć za pomocą prostego procesu. Oto nowa wersja content-masonry, z całkowicie pominiętą częścią fragmentu na telefonach:

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <?php 
            //put the excerpt markup in variable so we don't have to repeat it multiple times.
            $excerpt = '<div class="masonry-post-excerpt">';
            $excerpt .= the_excerpt();
            $excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
            if (function_exists( 'is_phone') {
                if ( ! is_phone() ) {
                    echo $excerpt;
                }
            }
            else {
                if ( ! wp_is_mobile() ) {
                    echo $excerpt;
                }
            }
        ?>
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Tym razem sprawdzamy, czy nie jesteśmy na urządzeniu telefonicznym/mobilnym, a jeśli tak, zwracamy fragment naszej pętli. Jeśli jesteśmy na urządzeniu telefonicznym/mobilnym, nic nie robimy.

Inną rzeczą, którą możesz chcieć zrobić, jest zwiększenie szerokości elementów Masonry, co zmniejsza ich liczbę w wierszu na urządzeniach mobilnych. Aby to zrobić, dodamy inny styl wbudowany do nagłówka na podstawie wykrywania 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 masonry.css, który możesz chcieć zachować swoje style masonry oddzielnie. Jeśli ostatecznie go nie użyjesz, możesz użyć uchwytu z innego, już zarejestrowanego arkusza stylów.

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide = '25%';
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

Ta funkcja dodaje niestandardowy arkusz stylów, a następnie ustawia wartość szerokości, używając logiki, która powinna być już bardzo znajoma. Następnie tworzymy zmienną $custom_css, przekazując wartość szerokości do zwykle wyglądającego fragmentu CSS z {$width}. Następnie używamy wp_add_inline_style, aby poinformować WordPress, aby wydrukował nasze style w linii w nagłówku, gdy używany jest arkusz stylów Masonry, a następnie podłączamy całą funkcję do wp_enqueue_scripts i gotowe.

Jeśli wybrałeś połączenie stylów Masonry z istniejącym arkuszem stylów, upewnij się, że używasz uchwytu tego arkusza stylów z wp_add_inline_style, w przeciwnym razie Twoje style wbudowane nie zostaną uwzględnione. Lubię używać wp_add_inline_style, ponieważ zazwyczaj opakowuję haczyk akcji do kolejkowania Masonry w warunku, dzięki czemu jest dodawany tylko wtedy, gdy jest potrzebny. Na przykład, jeśli używam Masonry tylko na moim indeksie bloga i stronach archiwum, zrobiłbym to:

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

Te ostatnie kilka przykładów powinno otworzyć inne pomysły w Twoim umyśle. Na przykład, możesz użyć podobnej logiki, aby całkowicie pominąć Masonry na urządzeniu mobilnym. Ponadto wp_add_inline_style() to mniej używana, ale bardzo pomocna funkcja, ponieważ pozwala programowo ustawiać różne style w oparciu o dowolny typ warunku. Może pozwolić na radykalną zmianę stylu dowolnego elementu w oparciu nie tylko o wykrywanie urządzenia, ale zmiany mogą być również oparte na tym, który szablon jest używany, lub nawet czy użytkownik jest zalogowany, czy nie.

Mam nadzieję, że widzisz te różne zmiany, które wprowadzam, jako okazję do kreatywności. Masonry i podobne systemy siatek kaskadowych są popularne od jakiegoś czasu, więc nadszedł czas na nowe zwroty w tym popularnym pomyśle. Pokażcie w komentarzach, jakie fajne sposoby wymyśliliście na wykorzystanie Masonry w motywie WordPress.

Wielozadaniowy człowiek od WordPressa, Josh Pollock pisze o WordPressie, zajmuje się tworzeniem motywów, jest menedżerem społeczności dla Pods Framework i orędownikiem rozwiązań open source dla zrównoważonego projektowania.