Come usare Masonry per aggiungere una griglia di post in stile Pinterest in WordPress

Questo è un post ospite di Josh Pollock

La visualizzazione a griglia dei post simile a Pinterest è un design popolare per le pagine di indice dei blog di WordPress da un po' di tempo. È popolare non solo perché imita l'aspetto del popolare sito di social media, ma anche perché sfrutta al meglio lo spazio sullo schermo. Su un indice di blog di WordPress, consente a ogni anteprima di post di avere le dimensioni naturali necessarie, senza lasciare spazio extra.

In questo tutorial, ti mostrerò come utilizzare la popolare libreria JavaScript Masonry per creare layout a griglia a cascata per l'indice del tuo blog, nonché per le pagine di archivio del tuo tema. Affronterò alcuni problemi che devi considerare per l'ottimizzazione per dispositivi mobili e come risolverli.

Nota: questo è un tutorial di livello avanzato per coloro che si sentono a proprio agio nell'editing dei temi di WordPress e hanno sufficienti conoscenze di HTML/CSS.

Passaggio 1: aggiungi le librerie necessarie al tuo tema

Aggiornamento: WordPress 3.9 include ora l'ultima versione di Masonry.

Per prima cosa devi caricare Masonry nel tuo tema, usando questo codice:

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

Questo codice carica semplicemente masonry e lo rende disponibile nei file del template del tuo tema (vedi la nostra guida su come aggiungere correttamente JavaScript e stili in WordPress). Si noti inoltre che non stiamo aggiungendo jQuery come dipendenza per nessuno dei due. Uno dei vantaggi di Masonry 3 è che non richiede jQuery, ma può essere utilizzato con esso. Nella mia esperienza, inizializzare Masonry senza jQuery è più affidabile e apre la possibilità di saltare il caricamento di jQuery, il che può aiutare sia con i tempi di caricamento della pagina che con i problemi di compatibilità.

Passaggio 2: Inizializza il JavaScript

La funzione successiva imposta Masonry, definisce i contenitori che verranno utilizzati con esso e si assicura anche che tutto avvenga nell'ordine corretto. Masonry deve calcolare le dimensioni di ciascuno degli elementi nella pagina per disporre dinamicamente la sua griglia. Un problema che ho riscontrato con Masonry in molti browser è che Masonry calcola erroneamente l'altezza degli elementi con immagini a caricamento lento, portando a elementi sovrapposti. La soluzione è utilizzare imagesLoaded per impedire a Masonry di calcolare il layout finché tutte le immagini non sono state caricate. Ciò garantisce un dimensionamento corretto.

Questa è la funzione e l'azione che produrrà lo script di inizializzazione nel footer della pagina:

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

La funzione è spiegata passo dopo passo con commenti inline. Ciò che fa la funzione JavaScript è dire a Masonry di cercare all'interno di un contenitore con l'ID "masonry-loop" gli elementi con la classe "masonry-entry" e di calcolare la griglia solo dopo che le immagini sono state caricate. Impostiamo il contenitore esterno con querySelector e quello interno con itemSelector.

Passaggio 2: Crea il loop Masonry

Invece di aggiungere il markup HTML per Masonry direttamente a un template, creeremo una parte di template separata per esso. Crea un nuovo file chiamato "content-masonry.php" e aggiungilo al tuo tema. Questo ti permetterà di aggiungere il loop Masonry a quanti template desideri.

Nel tuo nuovo file aggiungerai il codice mostrato di seguito. Il markup è simile a quello che vedresti normalmente per qualsiasi anteprima di contenuto. Puoi modificarlo come preferisci, assicurati solo che l'elemento più esterno abbia la classe "masonry-entry" che abbiamo impostato come itemSelector nell'ultimo passaggio.

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

Questo markup ha classi per ciascuna delle sue parti in modo da poter aggiungere markup per abbinarlo al tuo tema. Mi piace aggiungere un bel bordo leggermente arrotondato a .masonry-entry. Un'altra bella opzione è nessun bordo per .masonry-entry, ma dargli una leggera ombra. Questo ha un aspetto particolarmente buono quando la miniatura del post si estende per tutta la larghezza del contenitore, cosa che può essere realizzata dando a .masonry-thumbnail margini e padding di 0 in tutte le direzioni. Dovrai aggiungere tutti questi stili in un file chiamato masonry.css nella directory css del tuo tema.

Passaggio 3: Aggiungi il loop Masonry ai template

Ora che abbiamo la nostra parte di template, puoi usarla in qualsiasi template del tuo tema desideri. Potresti aggiungerla a index.php, ma non a category.php se non vuoi che venga utilizzata per gli archivi delle categorie. Se vuoi che venga utilizzata solo nella home page del tuo tema, quando è impostata per mostrare i post del blog, la useresti in home.php. Ovunque tu scelga, tutto ciò che devi fare è racchiudere il tuo loop in un contenitore con l'id "masonry-loop" e aggiungere la parte di template al loop usando get_template_part(). Assicurati di iniziare il contenitore del loop masonry prima di while (have_posts() ).

Ad esempio, ecco il ciclo principale dal file index.php di 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; ?>

Ed ecco come è stato modificato per utilizzare il nostro ciclo 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; ?>

Passaggio 4: Imposta le larghezze responsive degli elementi Masonry

Ci sono diversi modi per impostare la larghezza di ogni elemento Masonry. Puoi impostare la larghezza utilizzando un numero di pixel quando inizializzi Masonry. Non sono un fan di questo approccio poiché utilizzo temi responsive e richiede query multimediali complesse per ottenere risultati corretti su schermi piccoli. Per i design responsive, ho scoperto che la cosa migliore da fare è impostare un valore di larghezza per .masonry-entry con una percentuale, in base a quanti elementi desideri in una riga, e lasciare che Masonry faccia il resto dei calcoli per te.

Tutto ciò che serve è dividere 100 per il numero di elementi che desideri impostare la percentuale in una semplice voce nel file style.css del tuo tema. Ad esempio, se desideri quattro elementi per riga, potresti farlo nel tuo file masonry.css:

.masonry-entry{width:25%}

Passaggio 5: Ottimizzazione per dispositivi mobili

Potremmo fermarci qui, ma non credo che il risultato finale funzioni in modo incredibilmente efficace sugli schermi dei telefoni piccoli. Una volta che sei soddisfatto di come appare il tuo tema con la nuova griglia Masonry sul tuo desktop, controllalo sul tuo telefono. Se non sei soddisfatto di come appare sul tuo telefono, allora dovrai fare un po' di lavoro.

Non credo ci sia abbastanza spazio sullo schermo di un telefono per tutto ciò che abbiamo aggiunto alla nostra parte di modello content-masonry. Due buone soluzioni a tua disposizione sono accorciare l'estratto per i telefoni o saltarlo del tutto. Ecco una funzione aggiuntiva che puoi aggiungere al file functions.php del tuo tema per farlo. Poiché non credo che questi problemi siano un problema sui tablet, sto utilizzando un ottimo plugin Mobble in tutti gli esempi di questa sezione per apportare modifiche solo ai telefoni, non ai tablet. Sto anche verificando se Mobble è attivo prima di utilizzarlo e, se necessario, ricorro alla funzione di rilevamento mobile più generale wp_is_mobile, che è integrata in 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

Come potete vedere, iniziamo memorizzando la lunghezza dell'estratto lungo e la lunghezza dell'estratto corto in variabili, poiché utilizzeremo quei valori due volte e vogliamo poterli modificare da un unico posto, se necessario in seguito. Da lì, testiamo se possiamo usare is_phone() di Mobble. In tal caso, impostiamo l'estratto corto per i telefoni e l'estratto lungo se non lo siamo. Dopodiché, facciamo la stessa cosa di base, ma usando wp_is_mobile, che influenzerà tutti i dispositivi mobili, se is_phone() non può essere utilizzato. Speriamo che la parte else di questa funzione non venga mai utilizzata, ma è bene avere un backup, per sicurezza. Una volta impostata la logica della lunghezza dell'estratto, si tratta solo di agganciare la funzione al filtro excerpt_length.

Accorciare l'estratto è un'opzione, ma possiamo anche eliminarlo del tutto con un semplice processo. Ecco una nuova versione di content-masonry, con l'intera porzione di estratto omessa sui telefoni:

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

Questa volta stiamo testando per vedere se non siamo su un telefono/dispositivo mobile e, in tal caso, restituiamo la parte dell'estratto del nostro ciclo. Se siamo su un telefono/dispositivo mobile, non facciamo nulla.

Un'altra cosa che potresti voler fare è aumentare la larghezza degli elementi Masonry, il che riduce il numero per riga, sui dispositivi mobili. Per fare ciò, aggiungeremo uno stile inline diverso all'header in base al rilevamento del dispositivo. Poiché questa funzione utilizza wp_add_inline_styles, dipenderà da un foglio di stile specifico. In questo caso sto usando masonry.css, che potresti voler utilizzare per mantenere separati i tuoi stili masonry. Se non finisci per usarlo, puoi usare l'handle di un altro foglio di stile già registrato.

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

Questa funzione accoda il foglio di stile personalizzato e quindi imposta un valore per la larghezza utilizzando una logica che dovrebbe ora essere molto familiare. Successivamente creiamo la variabile $custom_css passando il valore per la larghezza in un pezzo di CSS dall'aspetto altrimenti normale con {$width}. Dopo di che utilizziamo wp_add_inline_style per dire a WordPress di stampare i nostri stili inline nell'intestazione ogni volta che viene utilizzato il foglio di stile Masonry e quindi agganciamo l'intera funzione a wp_enqueue_scripts e abbiamo finito.

Se hai scelto di combinare i tuoi stili Masonry in un foglio di stile esistente, assicurati di utilizzare l'handle di quel foglio di stile con wp_add_inline_style o i tuoi stili inline non verranno inclusi. Mi piace usare wp_add_inline_style perché generalmente racchiudo l'hook dell'azione per accodare Masonry in una condizione, in modo che venga aggiunto solo quando necessario. Ad esempio, se sto usando Masonry solo nell'indice del mio blog e nelle pagine di archivio, farei così:

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

Questi ultimi esempi dovrebbero aprire altre idee nella tua mente. Ad esempio, potresti usare una logica simile per saltare Masonry del tutto su un dispositivo mobile. Inoltre, wp_add_inline_style() è una funzione meno utilizzata, ma molto utile in quanto ti consente di impostare programmaticamente stili diversi in base a qualsiasi tipo di condizione. Può permetterti di cambiare radicalmente lo stile di qualsiasi elemento in base non solo al rilevamento del dispositivo, ma le modifiche potrebbero anche basarsi su quale modello viene utilizzato, o anche se l'utente è connesso o meno.

Spero che vedrai questi diversi cambiamenti che sto apportando come un'opportunità per essere creativi. I sistemi a griglia a cascata come il Masonry sono popolari da un po' di tempo, quindi è ora di dare qualche nuovo tocco a questa idea popolare. Mostraci nei commenti quali modi interessanti hai trovato per utilizzare Masonry in un tema WordPress.

Un esperto polivalente di WordPress, Josh Pollock scrive di WordPress, si occupa di sviluppo di temi, è il community manager per il Pods Framework e promuove soluzioni open source per il design sostenibile.