Come creare una visualizzazione griglia di miniature di post nei temi di WordPress

Durante la creazione di design di siti WordPress, hai mai avuto l'impulso di creare una visualizzazione a griglia di post? Il layout della griglia è perfetto per i siti media centric come la nostra galleria WordPress o un altro tipo di sito vetrina. Quadri tematici come Genesis hanno già un sistema Grid Loop pre-costruito. Tuttavia, se stai cercando di creare una griglia nel tuo tema WordPress personalizzato, siamo qui per aiutarti. In questo articolo, ti mostreremo come creare una visualizzazione a griglia di miniature di post nel tuo tema WordPress.

Nota: è necessario avere una buona conoscenza dei CSS e di come funziona il ciclo WordPress.

Prima di iniziare, diamo un'occhiata a ciò che stiamo cercando di realizzare:

Se si nota, i post su questa pagina vengono visualizzati in una griglia. C'è un bordo sui montanti sul lato sinistro, ma non sul lato destro. Con un normale ciclo post, tutti i post seguono lo stesso stile, quindi avrai un bordo destro su entrambi i post che sembrerebbe strano. Notare anche che la spaziatura è piuttosto simmetrica. Il che non è ancora possibile con il normale loop da fare per fare qualcosa di simile. Ora che puoi vedere quello che stiamo cercando di ottenere, diamo un'occhiata a come realizzarlo.

La prima cosa che devi fare è assicurarti che il tuo tema abbia le miniature dei post di WordPress attivate. Dovresti anche pensare a come ridimensionare le tue immagini WordPress perché ne avrai bisogno.

Una volta che hai configurato le miniature e le dimensioni, inizia questa cosa. Consente di impostare le nostre query del ciclo:

Il codice sopra sembra piuttosto semplice perché abbiamo fatto commenti in linea. Una cosa che probabilmente dovresti modificare è la variabile posts_per_page in base alle tue esigenze. Se lo desideri, puoi anche aggiungere altri parametri di query. Ora che abbiamo avviato il ciclo, vediamo come vogliamo visualizzare i post al suo interno.

Iniziamo il codice controllando se il contatore è 1 che significa mostrare la nostra griglia sinistra. Entriamo semplicemente e iniziamo un div con una classe css personalizzata "griditemleft". Al suo interno abbiamo aggiunto la miniatura del post e il titolo del post. Puoi aggiungere o sottrarre qualsiasi elemento del ciclo (come estratti, date, informazioni sull'autore, numero di commenti, ecc.). Avviso: nelle nostre miniature, stiamo chiamando una dimensione di immagine aggiuntiva. Probabilmente dovrai sostituire il nome-dimensione con la tua dimensione che hai creato.

Dopo la prima griglia, abbiamo aggiunto un elseif che guarda se il contatore $ corrisponde al numero specificato nelle nostre griglie $ (che dovrebbe essere perché ci troveremo nel secondo post). Se il contatore corrisponde, allora possiamo mostrare la nostra griglia giusta che inizia con una classe css personalizzata "griditemright". Notare dopo aver chiuso il div di griditemright, stiamo aggiungendo una classe chiara. Questo spiegheremo quando arriveremo alla parte CSS.

Dopo che il ciclo è terminato, azzeriamo il contatore a 0, quindi può ricominciare nella riga successiva.

Possiamo semplicemente terminare il ciclo che abbiamo iniziato aggiungendo questo codice:

Il codice sopra continua in pratica il contatore finché non raggiunge il limite specificato nella variabile query_post. Il motivo per cui non abbiamo aggiunto il codice di navigazione post precedente è perché molte persone usano un plugin o un diverso metodo di visualizzazione per questo. Quindi lo stiamo lasciando aperto per voi a decidere da soli.

Quindi il nostro codice di loop finale sarà simile a questo:

Ora che abbiamo il codice PHP pronto, vediamo come lo modelliamo.

Il nostro output predefinito sarebbe simile a questo:

    Immagine post 
Titolo del post
    Immagine post 
Titolo del post
    

Ecco le classi che devi modificare:

 #gridcontainer margin: 20px 0; larghezza: 100%;  #gridcontainer h2 a color: # 77787a; font-size: 13px; #gridcontainer .griditemleft float: left; larghezza: 278 px; margine: 0 40px 40px 0; #gridcontainer .griditemright float: left; width: 278px; #gridcontainer .postimage margin: 0 0 10px 0; 

Speriamo che questo tutorial ti guidi nella giusta direzione per creare un display a griglia per i tuoi post WordPress.