Aggiungi layout in muratura e griglia al tuo sito WordPress con solo CSS
Pubblicato: 2014-07-09Hai mai desiderato ravvivare il modo in cui i tuoi post vengono visualizzati nella home page e negli archivi di WordPress?
E se potessi visualizzare i tuoi post utilizzando l'approccio in muratura (Pinterest) o forse un layout a griglia, il tutto semplicemente aggiungendo uno snippet di CSS?
Nessun plug-in, shortcode, modifiche ai modelli, assegnazione di pagine come home page. Solo puro CSS.
Continua a leggere o vai avanti usando questi link:
- Preparativi per l'aggiunta di layout in muratura e griglia al tuo sito
- Dare ai tuoi post l'aspetto della muratura di Pinterest
- Disposizione dei messaggi in una griglia
- Aggiunta del CSS personalizzato al tuo sito
Preparativi per l'aggiunta di layout in muratura e griglia al tuo sito WordPress
Queste soluzioni si basano esclusivamente su CSS e quindi, non a caso, fanno molto affidamento sul markup HTML sul tuo sito per funzionare senza modifiche.
Il CSS utilizzato è stato progettato (e testato) con i temi predefiniti. Ciò significa che il CSS ha un paio di aspettative:
- Esistono classi sull'elemento body che descrivono il tipo di pagina (es. home, blog, archivio, ricerca)
- Gli elenchi di post sono raccolte di elementi di articoli, completi di intestazione racchiusa in un div con l'id del contenuto
Se utilizzi un tema predefinito, sarai in grado di utilizzare il CSS senza modifiche. Anche se non lo fai, potresti scoprire che il tuo tema utilizza un markup abbastanza simile da poter comunque utilizzare il CSS così com'è. Ad esempio, il tema degli anni Ottanta utilizza praticamente lo stesso markup dei temi predefiniti.
Se il tuo tema non usa lo stesso markup – il modo più semplice per dirlo è controllare l'origine della pagina per le classi e gli ID a cui si fa riferimento nel CSS – allora puoi ancora usare il CSS, dovrai solo cambiare le classi e gli ID in modo che corrispondano al tuo markup.
Scegliere dove applicare lo styling
Puoi decidere di applicare lo stile scelto solo a determinate pagine.
WordPress lo rende davvero semplice poiché applica classi specifiche della pagina all'elemento body come blog, home, archivio e ricerca, quindi devi semplicemente codificare il tuo CSS per ciascuna delle classi pertinenti.
Ad esempio, se desideri applicare lo stile solo alla home page, il tuo CSS sarà simile a:
body.blog article { styles go here... }
Per applicare lo stile alla home page e alle pagine di archivio (categoria):
body.blog article, body.archive article { styles go here... }
Per applicare lo stile solo ai risultati della ricerca:
body.blog search { styles go here... }
Ancora una volta, questo dipende dal tuo tema che segue i consigli sui temi di WordPress.
Compatibilità del browser
Essendo CSS3, queste tecniche non funzioneranno su tutte le piattaforme e browser.
Ho testato e confermo che funzionano sulle ultime versioni di Chrome e Safari (entrambi su OS X) e su iOS (5+). I vari siti web CSS suggeriscono inoltre che anche IE10 non avrà problemi.
Al di fuori di questi browser (incluso IE9), il tuo chilometraggio varierà, ma vale la pena ricordare che il fallback è il tuo stile attuale, quindi i visitatori che utilizzano browser meno recenti semplicemente non noteranno alcuna differenza.
Se trovi che gli stili funzionano correttamente su una piattaforma non menzionata (in particolare Windows), faccelo sapere nei commenti.
Basta con le dichiarazioni di non responsabilità, quindi, diamo un'occhiata a come abbellire i tuoi elenchi di post.
Dare ai tuoi post l'aspetto della muratura di Pinterest
Ci sono molti temi WordPress e una manciata di plugin che mostrano i post in un formato in muratura in stile Pinterest. Ma con CSS3, puoi semplicemente aggiungere alcuni stili aggiuntivi al tuo sito WordPress e ottenere lo stesso effetto.
Questa soluzione, ispirata dal post di Rahul Arora su W3Bits, si basa sul supporto di CSS3 per la proprietà column . Questa proprietà suddividerà il contenuto sul numero definito di colonne e, sebbene la sua creazione sia stata probabilmente ispirata maggiormente dall'idea di far scorrere il testo attraverso le colonne in stile giornale, è altrettanto utile per un layout in muratura.
/* Masonry Custom CSS */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}
Nei layout predefiniti, i post vengono emessi come elementi dell'articolo racchiusi in un div con un id di contenuto.
Il CSS:
1. Imposta il numero di colonne sul #content wrapper utilizzando la proprietà column-count , in questo caso 4. Imposta anche column-gap . Noterai l'uso di -moz- e -webkit- per Firefox e Safari.
2. Trasforma gli elementi dell'articolo in mattoni, utilizzando il blocco in linea e impostando una larghezza al 100%.
3. Garantisce che l' intestazione della pagina e la navigazione si trovino nella propria "riga" specificando che questi elementi si estendono su tutte le colonne
Solo per mantenere le cose in ordine, potresti anche considerare di aggiungere quanto segue:
/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}
h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
Questo mette solo un margine attorno al contenuto e assicura che le parole lunghe nei titoli non eliminino la formattazione (utile per qualsiasi tema, non solo qui).
Rendendolo reattivo
Uno svantaggio dell'approccio a colonna è che si degrada rapidamente man mano che le dimensioni dello schermo si riducono.
Quello che vogliamo fare è manipolare il numero di colonne in modo che gli elementi dell'articolo ottengano una quantità ragionevole di spazio sullo schermo per mantenere l'integrità e l'appeal visivo dei mattoni. Quindi, aggiungiamo alcune query multimediali per modificare il numero di colonne in base alle dimensioni dello schermo:
@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
Come puoi vedere, abbiamo solo bisogno di cambiare la proprietà column-count (e le sue derivate) per ogni query.
Questi 4 punti di interruzione, 3 dei quali funzioneranno su tutte le piattaforme (ridimensiona semplicemente la finestra del browser per vederli avere effetto) e 1 specifico per un tablet in modalità verticale.
Ecco lo stile in muratura su iPad e iPhone:
Puoi (e dovresti), ovviamente, andare oltre e aggiungere più stile ai mattoni per migliorare l'appeal visivo, ma solo 3 istruzioni CSS per trasformare i tuoi elenchi di post in un muro in muratura sono piuttosto impressionanti!
Disposizione dei messaggi in una griglia
Se ti piace una maggiore uniformità e ordine rispetto a quella fornita dalla muratura, potresti essere interessato a disporre i tuoi post in una griglia.
Le griglie sono molto, molto facili da implementare ma sicuramente funzionano meglio quando le immagini in primo piano hanno tutte le stesse dimensioni, altrimenti puoi finire con un sacco di spazi bianchi che riempiono le "celle" più corte.
Questa volta il CSS è ancora più breve, basandosi semplicemente sullo stile degli elementi dell'articolo :
/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}
Questo è tutto ciò che è assolutamente necessario. Ancora una volta, utilizziamo il blocco in linea e ci assicuriamo che il contenuto dell'articolo (titolo, immagine in primo piano, estratto) sia allineato verticalmente.
La proprietà importante è la larghezza in quanto determina il numero di “colonne”. Ho usato 32,5% come valore iniziale (l'uso del 33% può portare a un wrapping prematuro) che fornirà 3 colonne. Ovviamente, se volessi 4 colonne, utilizzeresti 24,5%, 5 colonne 19,5%, ecc.
Aggiunta di reattività
Proprio come il nostro stile in muratura, le griglie dovranno essere reattive se vogliono mantenere la loro efficacia.
Poiché è la proprietà width che determina il numero di colonne, questa è la proprietà che verrà modificata nelle varie media query.
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px) {
body.blog article, body.archive article {
width: 100%;
}
}
Solo 3 query questa volta perché ho iniziato solo con 3 colonne. Se decidi di iniziare con più colonne, potresti voler aggiungere un punto di interruzione di larghezza massima: 1024 px per impostare la larghezza su 32,5% (3 colonne).
Ciò risulterà in:
- 2 colonne su un tablet in modalità verticale
- 2 colonne quando la dimensione dello schermo è una larghezza massima di 768px
- 1 colonna quando la dimensione dello schermo è una larghezza massima di 480px
Questi punti di interruzione riguarderanno sia tablet che smartphone e il ridimensionamento della finestra del browser.
Ecco il layout della griglia su iPad e iPhone:
Le griglie, un po' più ordinate della muratura, ma richiedono davvero coerenza e rigore quando si tratta di dimensioni dell'immagine in primo piano per essere più efficaci.
Aggiunta del CSS personalizzato al tuo sito
Ci sono una serie di opzioni quando si tratta di inserire il CSS personalizzato che hai scelto nel tuo sito WordPress. Se il tuo tema non include la possibilità di aggiungere CSS personalizzati, le tue scelte sono:
- Tema figlio : crea un tema figlio e aggiungi il CSS al foglio di stile
- Plugin : aggiungi lo stile scelto a un nuovo file CSS e crea un plug-in che utilizza la funzione wp-enqueue-style, magari condizionatamente in base alla pagina generata, per accodare il nuovo file
- Modifica il foglio di stile del tema corrente : non farlo, davvero, semplicemente non farlo
- Utilizza un plug-in CSS personalizzato : esistono numerosi plug-in che ti permetteranno di aggiungere CSS personalizzati al tuo sito tramite l'interfaccia di amministrazione di WordPress (il plug-in Simple Custom CSS giustamente chiamato è uno di questi plug-in)
Mi piace usare il plugin CSS personalizzato. È facile e veloce da configurare, rende il test un gioco da ragazzi ed è altrettanto facile e veloce rimuovere i CSS dal tuo sito WordPress (cancella l'editor o disinstalla il plugin).
CSS, la via per WordPress Zen
Il meraviglioso CSS Zen Garden ha dimostrato per molti anni che l'aspetto grafico di un sito può essere sostanzialmente modificato senza una sola modifica al markup ma cambiando il CSS.
Sebbene non si avvicinino affatto allo stesso livello, queste due tecniche dimostrano che anche cambiare l'aspetto grafico del tuo sito WordPress è del tutto possibile senza la necessità di modificare i modelli, utilizzare codici brevi o sviluppare temi figlio.
Solo un po' di CSS.
Nota del redattore: questo post è stato aggiornato per accuratezza e pertinenza. [Pubblicato originariamente: luglio 2014 / Revisionato: febbraio 2022]
tag: