Utilizzo di jQuery Masonry per la pubblicazione di Pinterest

Con l'inclusione di jQuery Masonry nella libreria di base di WordPress 3.5, non è mai stato più semplice modificare il layout di un modello per i post recenti.

La pubblicazione dei tuoi contenuti in un layout in muratura può rendere la parte del blog del tuo sito web più visivamente interessante per i tuoi lettori. Con jQuery Masonry, non importa la lunghezza del tuo estratto del post (ovviamente, ovviamente), si adatterà per riempire ogni spazio. Questo tutorial esplorerà l'idea alla base dell'uso della libreria jQuery Masonry di nuova inclusione con WordPres 3.5.

Che cos'è un layout in muratura?

Se hai sentito parlare di un muro in "muratura" (pensa a un muro di mattoni), allora hai una buona immagine mentale di come potrebbe sembrare un layout in muratura sul tuo sito web. Se sei ancora confuso, visita Pinterest e scopri come hanno definito ogni "spillo" sul loro sito web. Tutto è disposto verticalmente, riempiendo tutto lo spazio disponibile. È importante notare il termine "verticale" in quest'ultima frase. Puoi ottenere lo stesso tipo di effetto di muratura usando i float CSS, ma potresti incorrere in problemi di spaziatura. Ciò accade perché, diversamente da jQuery Masonry, i float CSS sistemeranno gli elementi orizzontalmente prima, poi verticalmente. Ciò può creare spazi vuoti molto inconsistenti e talvolta indesiderati nel layout. L'uso di jQuery Masonry può aiutare a risolvere questo problema.

Esempio di virgola mobile CSS

Nota come ci sono degli spazi tra i post di altezze diverse quando usi i float CSS.

Esempio di muratura jQuery

Con jQuery Masonry ogni post si adatta perfettamente al suo posto, senza lasciare spazi scomodi.

Ora che sappiamo cos'è un layout in muratura, iniziamo a creare un semplice layout jQuery Masonry per i nostri post recenti.

Passaggio 1 Utilizzo `wp_enqueue_script` caricare la libreria

Prima di iniziare a costruire il nostro muro, dobbiamo caricare lo script appropriato. Dovrai aggiungere il seguente codice al tuo functions.php file.

 function mason_script () wp_enqueue_script ('jquery-masonry');  add_action ('wp_enqueue_scripts', 'mason_script');

Passaggio 2 Impostazione della griglia

Per la mia struttura di muratura di base, implementerò il seguente codice HTML nel mio ciclo (o modello personalizzato, ovunque intendi costruire il tuo muro). Innanzitutto, imposterò il contenitore per il muro in muratura e quindi installerò il contenitore per ogni post all'interno del muro.

Impostazione del tuo CSS

Dovrai definire la larghezza del contenitore e la larghezza del palo per ottenere l'effettivo effetto muratura. Per la mia demo, ho impostato il mio contenitore a 960 pixel di larghezza e voglio avere 4 colonne di post. Quindi, ho bisogno di fare un po 'di matematica semplice per trovare la larghezza delle dimensioni che ogni post sulla mia parete dovrebbe essere.

Larghezza mattone = 960 px / 4 messaggi = 240 pixel ciascuno.

Con questo numero in mente, posso impostare il mio layout nel mio foglio di stile:

 #container width: 960px; // larghezza dell'intero contenitore per il muro .brick width: 220px; // larghezza di ogni mattone meno il padding tra le imbottiture: 0px 10px 15px 10px;

Passaggio 3 Configurare la funzione

Successivamente, abbiamo bisogno di impostare la funzione di muratura in modo tale che i nostri contenitori div siano tutti uniti nel muro. Usa il seguente codice per fare questo:

 jQuery (document) .ready (function ($) $ ('#container') .masonry (columnWidth: 220););

Conclusione

La massoneria è dotata di molte opzioni integrate che rendono molto interessante l'uso con WordPress. Ad esempio, è possibile applicare l'opzione di animazione per "animare" le disposizioni dei post, aggiungere altri elementi al muro (ottimo per i layout del portfolio) o incorporarlo con Infinte Scroll di Paul Irish. Indipendentemente da come pensi di utilizzare lo script jQuery Masonry, è una gradita aggiunta a WordPress 3.5.

Nota a margine: Raggiungere questo stesso effetto in CSS3 è possibile. Tuttavia, è necessario utilizzare la nuova funzionalità "colonne", che non è ancora supportata in ogni browser.

Codice