Jak użyć Masonry do dodania siatki wpisów w stylu Pinterest w WordPressie?

Wpis gościnny autorstwa Josha Pollocka

Wyświetlanie wpisów w formie siatki przypominającej Pinterest jest od jakiegoś czasu popularnym projektem stron indeksowych blogów WordPress. Jest popularny nie tylko dlatego, że naśladuje wygląd popularnej witryny mediów społecznościowych, ale także dlatego, że najlepiej wykorzystuje przestrzeń na ekranie. W indeksie bloga WordPress pozwala to na podgląd każdego wpisu w rozmiarze, w jakim naturalnie powinien być, bez pozostawiania dodatkowego miejsca.

W tym poradniku 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 dla twojego motywu. Poruszę kilka problemów, które należy wziąć pod uwagę przy optymalizacji mobilnej i jak je rozwiązać.

Uwaga: Jest to poradnik na poziomie zaawansowanym 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 twojego motywu

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

Najpierw musisz wczytywać Masonry do twojego 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 wczytuje masonry i udostępnia go plikom szablonu twojego motywu (zobacz nasz przewodnik na temat prawidłowego dodawania skryptów JavaScript i stylów w WordPressie). Należy również pamiętać, że nie dodajemy jQuery jako zależności. 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 wczytywania jQuery, co może być pomocne zarówno w przypadku czasu wczytywania strony, jak i problemów z kompatybilnością.

Krok 2: Inicjalizacja Javascript

Ta następna funkcja konfiguruje Masonry, 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. Masonry musi obliczyć rozmiar każdego elementu na stronie, aby dynamicznie układać swoją siatkę. Problem, który napotkałem z Masonry w wielu przeglądarkach, polega na tym, że Masonry błędnie oblicza wysokość elementów z wolno wczytującymi się obrazkami, co prowadzi do nakładania się elementów. Rozwiązaniem jest użycie funkcji imagesLoaded, aby uniemożliwić Masonry obliczanie układu, dopóki wszystkie obrazki nie zostaną wczytywane. Zapewnia to prawidłowy rozmiar.

Jest to funkcja i działanie, które spowoduje wyświetlenie skryptu inicjalizacyjnego 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 z komentarzami inline. Funkcja Javascript nakazuje Masonry szukać wewnątrz kontenera o identyfikatorze „masonry-loop” elementów z klasą „masonry-entry” i obliczać siatkę dopiero po wczytywaniu obrazków. Zewnętrzny kontener ustawiamy za pomocą querySelector, a wewnętrzny za pomocą itemSelector.

Krok 2: Tworzenie pętli masońskiej

Zamiast dodawać znaczniki HTML dla Masonry bezpośrednio do szablonu, utworzymy dla niego osobny fragment szablonu. Utwórz nowy plik o nazwie „content-masonry.php” i dodaj go do twojego motywu. Umożliwi to dodanie pętli Masonry do dowolnej liczby szablonów.

W twoim nowym pliku utwórz kod pokazany poniżej. Znaczniki są podobne do tych, które normalnie można zobaczyć w podglądzie treści. Możesz go zmodyfikować w dowolny sposób, po prostu upewnij się, że najbardziej zewnętrzny element ma klasę „masonry-entry”, którą ustawiliśmy jako itemSelector 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 z jego części, więc możesz dodać znaczniki pasujące do twojego motywu. Lubię dodawać ładne, lekko zaokrąglone obramowanie do .masonry-entry. Inną fajną opcją jest brak obramowania dla .masonry-entry, ale nadanie mu lekkiego cienia. Wygląda to szczególnie dobrze, gdy miniaturka wpisu rozciąga się na całą drogę do granicy kontenera, co można osiągnąć poprzez nadanie .masonry-thumbnail marginesów i dopełnienia 0 we wszystkich kierunkach. Wszystkie te style należy dodać do pliku o nazwie masonry.css w katalogu css twojego motywu.

Krok 3: Dodanie pętli masonry do szablonów

Teraz, gdy mamy już nasz fragment szablonu, możesz go użyć w dowolnym szablonie twojego motywu. Możesz dodać go do index.php, ale nie do category.php, jeśli nie chcesz, aby był używany w archiwach kategorii. Jeśli chcesz, aby był używany tylko na stronie głównej twojego motywu, gdy jest ustawiony na wyświetlanie wpisów na blogu, użyj go w home.php. Gdziekolwiek wybierzesz, wszystko co musisz zrobić, to zawinąć twoją pętlę w kontener o identyfikatorze „masonry-loop” i dodać fragment szablonu do pętli za pomocą get_template_part(). Upewnij się, że kontener pętli masonry został uruchomiony przed while (have_posts()).

Na przykład, oto główna pętla z index.php strony 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 tutaj jest zmodyfikowana, 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: Ustawianie responsywnych szerokości elementów Masonry

Istnieje kilka sposobów na ustawienie szerokości każdego elementu Masonry. Możesz ustawić szerokość za pomocą liczby pikseli podczas inicjalizacji Masonry. Nie jestem fanem tego sposobu, ponieważ używam responsywnych motywów i wymaga to skomplikowanych zapytań o media, aby uzyskać prawidłowe działanie na małych ekranach. W przypadku projektów responsywnych najlepszą rzeczą do zrobienia jest ustawienie wartości szerokości dla .masonry-entry z wartością procentową, w oparciu o liczbę elementów w rzędzie i pozwolenie Masonry na wykonanie reszty obliczeń za Ciebie.

Wszystko, czego to wymaga, to podzielenie 100 przez liczbę elementów, które chcesz ustawić procentowo w prostym wpisie w style.css twojego motywu. Na przykład, jeśli chcesz mieć cztery elementy w każdym rzędzie, możesz to zrobić w twoim pliku masonry.css:

.masonry-entry{width:25%}

Krok 5: Optymalizacja mobilna

Moglibyśmy zatrzymać się w tym miejscu, ale nie sądzę, aby efekt końcowy działał niesamowicie dobrze na małych ekranach telefonów. Gdy już będziesz zadowolony z wyglądu twojego motywu z nową siatką Masonry na komputerze, sprawdź go na telefonie. Jeśli nie jesteś zadowolony z tego, jak wygląda na twoim telefonie, będziesz musiał trochę popracować.

Nie sądzę, aby na ekranie telefonu było wystarczająco dużo miejsca na wszystko, co dodaliśmy do naszego fragmentu szablonu Masonry. Dwa dobre rozwiązania dostępne dla ciebie to skrócenie zajawki dla telefonów lub pominięcie jej całkowicie. Oto dodatkowa funkcja, którą możesz dodać do functions.php twojego motywu, aby to zrobić. Ponieważ nie sądzę, aby te problemy były problemem na tabletach, używam świetnej wtyczki Mobble we wszystkich przykładach w tej sekcji, aby wprowadzić zmiany tylko na telefonach, a nie tabletach. Sprawdzam również, czy Mobble jest włączana przed jej użyciem i w razie potrzeby wracam do bardziej ogólnej funkcji wykrywania urządzeń mobilnych wp_is_mobile, która jest wbudowana w WordPress.

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 zajawki w zmiennych, ponieważ będziemy używać tych wartości dwukrotnie i chcemy mieć możliwość zmiany ich z jednego miejsca, jeśli zajdzie taka potrzeba później. Następnie sprawdzamy, czy możemy użyć funkcji is_phone() Mobble. Jeśli tak, ustawiamy krótką zajawkę dla telefonów i długą, jeśli nie. Następnie robimy tę samą podstawową rzecz, ale używając wp_is_mobile, co będzie miało wpływ na wszystkie urządzenia mobilne, jeśli nie można użyć is_phone(). Miejmy nadzieję, że część else tej funkcji nigdy nie zostanie użyta, ale dobrze jest mieć kopię zapasową na wszelki wypadek. Po ustawieniu logiki długości zajawki wystarczy podpiąć funkcję do filtra excerpt_length.

Skrócenie zajawki jest jedną z opcji, ale możemy też całkowicie z niej zrezygnować za pomocą prostego procesu. Oto nowa wersja content-masonry, z całą zajawką pominiętą 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 telefonie / urządzeniu mobilnym, a jeśli tak, zwracamy zajawkę naszej pętli. Jeśli jesteśmy na telefonie/urządzeniu mobilnym, nie robimy nic.

Inną rzeczą, którą możesz chcieć zrobić, jest zwiększenie szerokości elementów Masonry, co zmniejsza liczbę w rzędzie na urządzeniach mobilnych. Aby to zrobić, dodamy inny styl inline do nagłówka w oparciu o wykrywanie urządzenia. Ponieważ ta funkcja używa wp_add_inline_styles, będzie zależna od konkretnego arkusza stylów. W tym przypadku używam pliku masonry.css, który może być przydatny, jeśli chcesz oddzielić twoje style masonry. Jeśli nie chcesz z niego korzystać, 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 wywołuje własny arkusz stylów, a następnie ustawia wartość szerokości przy użyciu bardzo dobrze znanej logiki. Następnie tworzymy zmienną $custom_css, przekazując wartość szerokości do normalnie wyglądającego fragmentu CSS za pomocą {$width}. Następnie używamy wp_add_inline_style, aby powiedzieć WordPressowi, aby drukował nasze style inline w nagłówku za każdym razem, gdy używany jest arkusz stylów Masonry, a następnie podpinamy całą funkcję do wp_enqueue_scripts i gotowe.

Jeśli zdecydujesz się połączyć swoje style Masonry z istniejącym arkuszem stylów, pamiętaj, aby użyć uchwytu tego arkusza stylów z wp_add_inline_style, w przeciwnym razie twoje style inline nie zostaną uwzględnione. Lubię używać wp_add_inline_style, ponieważ zazwyczaj zawijam hak działania dla enqueueing Masonry w warunku, więc jest on dodawany tylko wtedy, gdy jest to potrzebne. Na przykład, jeśli używam Masonry tylko na indeksie bloga i stronach archiwum, 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żna użyć podobnej logiki, aby całkowicie pominąć Masonry na urządzeniach mobilnych. 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 rodzaj warunku. Umożliwia ona radykalną zmianę stylu dowolnego elementu w oparciu nie tylko o wykrywanie urządzenia, ale zmiany mogą być również oparte na używanym szablonie, a nawet na tym, czy użytkownik loguje się, czy nie.

Mam nadzieję, że te różne zmiany, które wprowadzam, będą okazją do wykazania się kreatywnością. Masonry i podobne kaskadowe systemy siatki są popularne już od jakiegoś czasu, więc nadszedł czas na nowe zwroty w tym popularnym pomyśle. Pokaż nam w komentarzach, jakie fajne sposoby na wykorzystanie Masonry w motywie WordPress wymyśliłeś.

Josh Pollock, wielozadaniowy WordPressowiec, pisze o WordPressie, zajmuje się tworzeniem motywów, służy jako menedżer społeczności dla Pods Framework i opowiada się za rozwiązaniami open source dla zrównoważonego projektowania.