Cum să folosiți Masonry pentru a adăuga o grilă de postări în stil Pinterest în WordPress

Aceasta este o postare invitată de Josh Pollock

Afișajul tip Pinterest al postărilor a fost un design popular pentru paginile de index ale blogurilor WordPress de ceva vreme. Este popular nu numai pentru că imită aspectul site-ului popular de social media, ci și pentru că utilizează spațiul de pe ecran în cel mai bun mod posibil. Pe un index de blog WordPress, permite fiecărei previzualizări a postării să aibă dimensiunea de care are nevoie în mod natural, fără a lăsa spațiu suplimentar.

În acest tutorial, vă voi arăta cum să utilizați populara bibliotecă JavaScript Masonry pentru a crea layout-uri de grilă în cascadă pentru indexul blogului dvs., precum și paginile de arhivă ale temei dvs. Voi aborda câteva probleme pe care trebuie să le luați în considerare pentru optimizarea mobilă și cum să le rezolvați.

Notă: Acesta este un tutorial de nivel avansat pentru cei care se simt confortabil să editeze teme WordPress și au cunoștințe suficiente de HTML/CSS.

Pasul 1: Adăugați bibliotecile necesare temei dvs.

Actualizare: WordPress 3.9 include acum cea mai recentă versiune de Masonry.

Mai întâi trebuie să încarci Masonry în tema ta, folosind acest cod:

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

Acest cod încarcă pur și simplu masonry și îl face disponibil fișierelor de șablon ale temei dvs. (consultați ghidul nostru despre cum să adăugați corect JavaScript-uri și stiluri în WordPress). De asemenea, rețineți că nu adăugăm jQuery ca dependență pentru niciunul dintre acestea. Unul dintre avantajele Masonry 3 este că nu necesită jQuery, dar poate fi utilizat cu acesta. Din experiența mea, inițializarea Masonry fără jQuery este mai fiabilă și deschide posibilitatea de a omite încărcarea jQuery, ceea ce poate ajuta atât la timpii de încărcare a paginii, cât și la problemele de compatibilitate.

Pasul 2: Inițializarea Javascript-ului

Această funcție următoare configurează Masonry, definește containerele care vor fi utilizate cu acesta și, de asemenea, se asigură că totul se întâmplă în ordinea corectă. Masonry trebuie să calculeze dimensiunea fiecărui element de pe pagină pentru a-și aranja grila dinamic. O problemă cu care m-am confruntat cu Masonry în multe browsere este că Masonry va calcula greșit înălțimea elementelor cu imagini cu încărcare lentă, ducând la suprapunerea elementelor. Soluția este să folosiți imagesLoaded pentru a împiedica Masonry să calculeze aspectul până când toate imaginile sunt încărcate. Acest lucru asigură dimensionarea corectă.

Aceasta este funcția și acțiunea care va genera scriptul de inițializare în subsolul paginii:

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

Funcția este explicată pas cu pas cu comentarii inline. Ceea ce face funcția Javascript este să îi spună lui Masonry să caute într-un container cu id-ul „masonry-loop” elemente cu clasa „masonry-entry” și să calculeze grila doar după ce imaginile sunt încărcate. Am setat containerul exterior cu querySelector și pe cel interior cu itemSelector.

Pasul 2: Creează bucla Masonry

În loc să adăugăm marcajul HTML pentru Masonry direct într-un șablon, vom crea o parte de șablon separată pentru acesta. Creați un fișier nou numit „content-masonry.php” și adăugați-l la tema dvs. Acest lucru vă va permite să adăugați bucla Masonry în oricâte șabloane diferite doriți.

În noul dvs. fișier veți adăuga codul prezentat mai jos. Marcajul este similar cu ceea ce ați vedea în mod normal pentru orice previzualizare de conținut. Îl puteți modifica oricum doriți, doar asigurați-vă că elementul cel mai exterior are clasa „masonry-entry”, pe care am setat-o ca itemSelector în pasul anterior.

<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-->

Acest markup are clase pentru fiecare dintre părțile sale, astfel încât să puteți adăuga markup pentru a se potrivi temei dvs. Îmi place să adaug o bordură frumoasă, ușor rotunjită la .masonry-entry. O altă opțiune frumoasă este fără bordură pentru .masonry-entry, dar să îi oferiți o umbră ușoară. Acest lucru arată deosebit de bine atunci când miniatura postării se extinde pe toată lățimea până la marginea containerului, ceea ce poate fi realizat prin acordarea de margini și spațieri de 0 la .masonry-thumbnail în toate direcțiile. Va trebui să adăugați toate aceste stiluri într-un fișier numit masonry.css în directorul css al temei dvs.

Pasul 3: Adăugați bucla Masonry la șabloane

Acum că avem partea noastră de șablon, o puteți folosi în orice șablon din tema dvs. doriți. Ați putea să o adăugați la index.php, dar nu la category.php dacă nu doriți să fie folosită pentru arhivele de categorii. Dacă doriți să fie folosită doar pe pagina principală a temei dvs., când este setată să afișeze postări de blog, ați folosi-o în home.php. Oriunde ați alege, tot ce trebuie să faceți este să încadrați bucla într-un container cu id-ul „masonry-loop” și să adăugați partea de șablon în buclă folosind get_template_part(). Asigurați-vă că începeți containerul buclei masonry înainte de while (have_posts() ).

De exemplu, iată bucla principală din index.php-ul 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; ?>

Și iată-l modificat pentru a folosi bucla noastră 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; ?>

Pasul 4: Setați lățimile responsive ale elementelor Masonry

Există mai multe moduri în care puteți seta lățimea fiecărui element Masonry. Puteți seta lățimea folosind un număr de pixeli la inițializarea Masonry. Nu sunt un fan al acestei metode, deoarece folosesc teme responsive și necesită interogări media complexe pentru a obține rezultatele corecte pe ecrane mici. Pentru designuri responsive, am constatat că cel mai bun lucru de făcut este să setați o valoare de lățime pentru .masonry-entry cu un procent, în funcție de câte elemente doriți pe rând și să lăsați Masonry să facă restul calculelor pentru dvs.

Tot ce este necesar este să împarți 100 la numărul de elemente pe care dorești să le setezi ca procent, printr-o intrare simplă în fișierul style.css al temei tale. De exemplu, dacă dorești patru elemente pe rând, ai putea face acest lucru în fișierul tău masonry.css:

.masonry-entry{width:25%}

Pasul 5: Optimizare pentru mobil

Am putea să ne oprim aici, dar nu cred că rezultatul final funcționează incredibil de bine pe ecranele mici ale telefoanelor. Odată ce sunteți mulțumit de cum arată tema dvs. cu noua grilă Masonry pe desktop, verificați-o pe telefon. Dacă nu sunteți mulțumit de cum arată pe telefon, atunci va trebui să depuneți puțin efort.

Nu cred că există suficient spațiu pe ecranul unui telefon pentru tot ce am adăugat la componenta noastră de șablon content-masonry. Două soluții bune pe care le aveți la dispoziție sunt să scurtați rezumatul pentru telefoane sau să îl omiteți complet. Iată o funcție suplimentară pe care o puteți adăuga în fișierul functions.php al temei dvs. pentru a face acest lucru. Deoarece nu cred că aceste probleme sunt o problemă pe tablete, folosesc un plugin excelent Mobble în toate exemplele din această secțiune pentru a face modificările doar pe telefoane, nu pe tablete. De asemenea, verific dacă Mobble este activ înainte de a-l folosi și, dacă este necesar, revin la funcția mai generală de detectare a dispozitivelor mobile wp_is_mobile, care este încorporată în 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

După cum puteți vedea, începem prin a stoca lungimea rezumatului lung și lungimea rezumatului scurt în variabile, deoarece vom folosi acele valori de două ori și dorim să le putem schimba dintr-un singur loc, dacă vom avea nevoie mai târziu. De acolo, testăm dacă putem folosi is_phone() de la Mobble. Dacă da, setăm rezumatul scurt pentru telefoane și rezumatul lung dacă nu suntem. După aceea, facem același lucru de bază, dar folosind wp_is_mobile, care va afecta toate dispozitivele mobile, dacă is_phone() nu poate fi folosit. Sperăm că partea else a acestei funcții nu va fi folosită niciodată, dar este bine să avem o rezervă, doar în caz. Odată ce logica lungimii rezumatului este stabilită, totul se reduce la conectarea funcției la filtrul excerpt_length.

Scurtarea rezumatului este o opțiune, dar putem renunța complet la el printr-un proces simplu. Iată o nouă versiune a conținutului-masonry, cu porțiunea de rezumat omisă complet pe telefoane:

<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-->

De data aceasta testăm dacă nu suntem pe un telefon/dispozitiv mobil și, dacă da, returnăm partea de rezumat a buclei noastre. Dacă suntem pe un telefon/dispozitiv mobil, nu facem nimic.

Un alt lucru pe care ați putea dori să îl faceți este să măriți lățimea elementelor Masonry, ceea ce reduce numărul pe rând, pe dispozitivele mobile. Pentru a face acest lucru, vom adăuga un stil inline diferit la antet, bazat pe detectarea dispozitivului. Deoarece această funcție folosește wp_add_inline_styles, va depinde de o foaie de stil specifică. În acest caz, folosesc masonry.css, pe care ați putea dori să o folosiți pentru a vă păstra stilurile masonry separate. Dacă nu ajungeți să folosiți acest fișier, puteți folosi identificatorul (handle) de la o altă foaie de stil deja înregistrată.

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

Această funcție înregistrează foaia de stil personalizată și apoi setează o valoare pentru lățime folosind ceea ce ar trebui să fie acum o logică foarte familiară. După aceea, creăm variabila $custom_css trecând valoarea pentru lățime într-un fragment de CSS, altfel obișnuit, cu {$width}. După aceea, folosim wp_add_inline_style pentru a spune WordPress să imprime stilurile noastre inline în antet ori de câte ori este utilizată foaia de stil Masonry și apoi conectăm întreaga funcție la wp_enqueue_scripts și am terminat.

Dacă ați ales să combinați stilurile Masonry într-o foaie de stil existentă, asigurați-vă că utilizați identificatorul acelei foi de stil cu wp_add_inline_style sau stilurile dumneavoastră inline nu vor fi incluse. Îmi place să folosesc wp_add_inline_style deoarece, în general, înfășor acțiunea de enqueueing Masonry într-un condițional, astfel încât să fie adăugată doar atunci când este necesar. De exemplu, dacă folosesc Masonry doar pe pagina de index și pe paginile de arhivă, aș face acest lucru:

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

Aceste ultime exemple ar trebui să vă deschidă noi idei. De exemplu, ați putea folosi o logică similară pentru a omite complet Masonry pe un dispozitiv mobil. De asemenea, wp_add_inline_style() este o funcție mai puțin utilizată, dar foarte utilă, deoarece vă permite să setați programatic stiluri diferite pe baza oricărui tip de condițional. Poate permite schimbarea radicală a stilului oricărui element, nu numai pe baza detectării dispozitivului, ci și pe baza șablonului utilizat sau chiar dacă utilizatorul este conectat sau nu.

Sper că vedeți aceste diferite schimbări pe care le fac ca o oportunitate de a fi creativ. Masonry și sisteme similare de grile în cascadă sunt populare de ceva timp, așa că este timpul pentru câteva noi abordări ale acestei idei populare. Arătați-ne în comentarii ce modalități cool ați găsit pentru a folosi Masonry într-o temă WordPress.

Un tip WordPress multifuncțional, Josh Pollock scrie despre WordPress, dezvoltă teme, este managerul comunității pentru Pods Framework și susține soluții open source pentru design sustenabil.