Come usare la massoneria per aggiungere Pinterest Style Post Grid in WordPress

Questo è un post di Josh Pollock

La visualizzazione a griglia di post di Pinterest è stata un progetto popolare per le pagine di indice dei blog di WordPress per un po '. È popolare non solo perché imita l'aspetto del popolare sito di social media, ma anche perché fa il miglior uso dello spazio sullo schermo. Su un indice blog WordPress, consente a ciascuna anteprima di post di essere la dimensione che deve essere naturalmente, senza lasciare ulteriore spazio.

In questo tutorial, ti mostrerò come utilizzare la famosa libreria JavaScript di Masonry per creare layout a griglia per il tuo indice del blog, oltre a pagine di archivio per il tuo tema. Tratterò alcuni aspetti che è necessario prendere in considerazione per l'ottimizzazione dei dispositivi mobili e come risolverli.

Nota: questo è un tutorial di livello avanzato per coloro che si sentono a proprio agio nel modificare temi WordPress e avere sufficiente conoscenza HTML / CSS.

Passaggio 1: aggiungi le librerie necessarie al tema

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

Per prima cosa devi caricare la Massoneria 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'); finisci se; //! is_admin () endif; //! slug_scripts_masonry esiste 

Questo codice carica semplicemente la muratura e lo rende disponibile per i file del modello del tema (vedere 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, l'inizializzazione della Massoneria senza jQuery è più affidabile e apre la possibilità di saltare il caricamento di jQuery, che può essere d'aiuto sia per i tempi di caricamento della pagina che per i problemi di compatibilità.

Passaggio 2: inizializza il Javascript

Questa funzione successiva imposta Masonry, definisce i contenitori che verranno utilizzati con esso e assicura che tutto avvenga nel giusto ordine. La massoneria deve calcolare la dimensione di ciascuno degli articoli sulla pagina per poter disporre la griglia in modo dinamico. Un problema che ho riscontrato con la massoneria in molti browser è che la massoneria calcola l'altezza degli articoli con immagini a caricamento lento, causando la sovrapposizione di elementi. La soluzione è usare le immagini caricate per impedire a Masonry di calcolare il layout fino a quando non vengono caricate tutte le immagini. Questo garantisce un corretto dimensionamento.

Questa è la funzione e l'azione che genererà lo script di inizializzazione nel piè di pagina:

 if (! function_exists ('slug_masonry_init')): function slug_masonry_init () ?> // imposta il contenitore che la muratura sarà all'interno di in var var container = document.querySelector ('# masonry-loop'); // crea vuote var msnry var msnry; // inizializza la Massoneria dopo che tutte le immagini hanno caricato imagesLoaded (container, function () msnry = new Masonry (container, itemSelector: '.masonry-entry'););   
La funzione è spiegata passo dopo passo con i commenti in linea. Ciò che la funzione Javascript fa è dire alla Massoneria di guardare dentro un contenitore con l'id "masonry-loop" per gli oggetti con la classe "muron-entry" e calcolare la griglia solo dopo che le immagini sono state caricate. Impostiamo il contenitore esterno con querySelector e l'inner con itemSelector.
 
Passaggio 2: Crea loop in muratura
 
Invece di aggiungere direttamente il markup HTML per Masonry a un modello, creeremo una parte modello separata per esso. Crea un nuovo file chiamato "content-masonry.php" e aggiungilo al tuo tema. Ciò ti consentirà di aggiungere il loop della Massoneria a tutti i diversi modelli che desideri.
 
Nel tuo nuovo file aggiungerai il codice mostrato di seguito. Il markup è simile a quello che normalmente vedresti per qualsiasi anteprima di contenuto. Puoi modificarlo comunque, devi solo essere sicuro che l'elemento più esterno abbia la classe di "masonry-entry" che abbiamo impostato come itemSelector nell'ultimo step.
 
 
             
 
Questo markup ha classi per ciascuna delle sue parti in modo da poter aggiungere markup per abbinare il tuo tema. Mi piace aggiungere un bel bordo leggermente arrotondato a .masonry-entry. Un'altra buona opzione non è il confine per .masonry-entry, ma per dargli una leggera ombra. Questo sembra particolarmente buono quando la miniatura del post si estende fino al confine del contenitore, cosa che può essere ottenuta assegnando margini di thumbnail in miniatura 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 loop di muratura ai modelli
 
Ora che abbiamo la nostra parte modello puoi usarla in qualsiasi modello nel tuo tema che ti piace. Potresti aggiungerlo a index.php, ma non a category.php se non lo vuoi usare per gli archivi di categoria. Se vuoi che venga usato solo sulla home page del tema, quando è impostato per mostrare i post del blog, lo utilizzerai in home.php. Ovunque tu scelga tutto ciò che devi fare è avvolgere il tuo loop in un contenitore con l'id "masonry-loop" e aggiungere la parte template nel ciclo usando get_template_part (). Assicurati di avviare il contenitore del ciclo di muratura prima del tempo (have_posts ()).
 
Ad esempio, ecco il ciclo principale dal index.php di twentythirteen:
 
          
 
E qui è stato modificato per usare il nostro loop in muratura:
 
            
 
Passaggio 4: impostare le larghezze reattive degli elementi della muratura
 
Ci sono diversi modi in cui puoi impostare la larghezza di ogni oggetto della Massoneria. È possibile impostare la larghezza utilizzando un numero di pixel quando si inizializza la muratura. Non sono un fan di farlo poiché utilizzo i temi responsive e richiede alcune complesse query multimediali per sistemare le cose su schermi piccoli. Per i responsive design, ho trovato che la cosa migliore da fare è impostare un valore di larghezza per .masonry-entry con una percentuale, in base a quanti elementi vuoi in una riga e lasciare che la Massoneria faccia il resto della matematica per te.
 
Tutto ciò richiede la divisione del 100 per il numero di elementi che si desidera impostare la percentuale in una semplice voce in style.css del proprio tema. Ad esempio, se vuoi quattro elementi in ogni riga, puoi farlo nel tuo file masonry.css:
 
.muratura-entry width: 25%
 
Passaggio 5: ottimizzazione mobile
 
Potremmo fermarci qui, ma non credo che il risultato finale funzioni incredibilmente bene sugli schermi dei piccoli telefoni. Una volta che sei soddisfatto del modo in cui il tuo tema appare con la nuova griglia di Massoneria sul desktop, controlla sul tuo telefono. Se non sei felice di come appare sul tuo telefono, allora dovrai fare un po 'di lavoro.
 
Non penso che ci sia abbastanza spazio sullo schermo di un telefono per tutto ciò che abbiamo aggiunto alla nostra parte del modello di masoneria del contenuto. Due buone soluzioni disponibili sono per abbreviare l'estratto per i telefoni o saltare interamente. Ecco una funzione extra che puoi aggiungere alle funzioni.php del tuo tema per farlo. Poiché non penso che questi problemi siano un problema su tablet, sto utilizzando un ottimo plugin Mobble in tutti gli esempi in questa sezione per apportare solo le modifiche sui telefoni, non sui tablet. Sto anche controllando se Mobble è attivo prima di usarlo e se necessario ricollegarsi 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) // imposta la lunghezza più corta una volta $ short = 10; // imposta long length una volta $ long = 55; // se possiamo solo impostare un breve estratto per i telefoni, altrimenti breve per tutti i dispositivi mobili se (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 esiste 
 
Come puoi vedere, iniziamo memorizzando la lunghezza dell'estratto lungo e la lunghezza dell'estratto breve nelle variabili, poiché utilizzeremo questi valori due volte e vorremmo essere in grado di cambiarli da un posto se avremo bisogno in seguito. Da lì proviamo se possiamo usare is_phone () di Mobble. Se è così, impostiamo il breve estratto per i telefoni e il lungo estratto se non lo siamo. Dopodiché facciamo la stessa cosa di base, ma usando wp_is_mobile, che interesserà tutti i dispositivi mobili, se is_phone () non può essere usato. Speriamo che l'altra parte di questa funzione non sarà mai usata, ma è bene avere un backup per ogni evenienza. Una volta impostata la logica della lunghezza dell'estrazione, si riduce semplicemente ad agganciare la funzione al filtro excerpt_length.
 
Accorciare l'estratto è un'opzione, ma possiamo anche eliminarlo interamente con un semplice processo. Ecco una nuova versione di content-masonry, con l'intera porzione di estratto ommited sui telefoni:
 
 
           
 
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 della Massoneria, che riduce il numero in fila, sui dispositivi mobili. Per fare ciò, aggiungeremo un diverso stile in linea all'intestazione 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 volere, per mantenere separati i tuoi stili di muratura. Se non lo usi, puoi usare l'handle da un altro foglio di stile già registrato.
 
 if (! function_exists ('slug_masonry_styles')): function slug_masonry_styles () // imposta la larghezza larga $ wide = '25% '; // imposta larghezza stretta $ narrow = '50% '; / ** Determina il valore per $ width ** / // se possiamo impostare solo narrow per i telefoni, altrimenti restringi per tutti i dispositivi mobili 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 per .masonry-entry con larghezza adeguata ** / $ custom_css = ".masonry-entry width: $ width;"; // È necessario utilizzare l'handle di un foglio di stile già accodato qui. wp_add_inline_style ('masonry', $ custom_css); add_action (' wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! esiste lo slug_masonry_styles 
 
Questa funzione accoda il foglio di stile personalizzato e quindi imposta un valore per la larghezza usando quella che dovrebbe essere una logica molto familiare. Dopodiché creiamo la variabile $ custom_css passando il valore per la larghezza in un bit di CSS altrimenti normale con $ width. Dopodiché usiamo wp_add_inline_style per dire a WordPress di stampare i nostri stili inline nell'intestazione ogni volta che viene usato il foglio di stile Masonry e quindi colleghiamo l'intera funzione a wp_enqueue_scripts e abbiamo finito.
 
Se hai scelto di combinare gli stili della Massoneria in un foglio di stile esistente, assicurati di utilizzare l'handle di quel foglio di stile con wp_add_inline_style o gli stili in linea non verranno inclusi. Mi piace usare wp_add_inline_style perché in genere avvolgo il gancio di azione per accodare la muratura in modo condizionale in modo che venga aggiunto solo quando necessario. Per esempio se sto usando solo massoneria sul mio blog index e sulle pagine di archivio, lo farei:
 
 if (is_home () || is_archive ()) add_action ('wp_enqueue_scripts', 'slug_scripts_masonry');  
 
Questi ultimi esempi dovrebbero aprire qualche altra idea nel tuo cervello. Ad esempio, è possibile utilizzare una logica simile per saltare la Massoneria del tutto su un dispositivo mobile. Anche wp_add_inline_style () è una funzione meno utilizzata, ma molto utile in quanto consente di impostare in modo programmatico diversi stili in base a qualsiasi tipo di condizionale. Può consentire di modificare radicalmente lo stile di qualsiasi elemento in base al rilevamento non solo del dispositivo, ma le modifiche potrebbero anche essere basate su quale modello viene utilizzato o anche se l'utente ha effettuato l'accesso o meno.
 
Spero che tu veda questi diversi cambiamenti che sto facendo come un'opportunità per diventare creativo. La massoneria e simili sistemi a cascata sono stati popolari per un po 'di tempo, quindi è tempo di alcuni nuovi colpi di scena su questa idea popolare. Mostraci nei commenti quali sono i modi fantasiosi con cui hai creato l'utilizzo della Massoneria in un tema WordPress.
 
Un ragazzo di WordPress polivalente, Josh Pollock scrive su WordPress, sviluppa i temi, funge da community manager per il framework dei pod e sostiene soluzioni open source per la progettazione sostenibile.