7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Aggiungere in automatico ai post del blog un'immagine in evidenza basata sulla categoria

Scroll to top
Read Time: 8 mins

Italian (Italiano) translation by Roberta C (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

È frequente utilizzare nelle pagine di archivio le immagini in evidenza dei post, ma alcune volte potremmo aver bisogno di usarle in maniera un po' differente. A volte ho lavorato in siti dove le immagini visualizzate nei post erano relative alla categoria e non all'articolo in sé. Invece di inserire la stessa immagine in evidenza in ogni articolo di uguale categoria, sarebbe molto più semplice poter assegnare ad ogni categoria un'immagine e visualizzare quella.

I casi nei quali potrebbe essere utile sono:

  • quando ogni post è associato con un brand e vogliamo visualizzare il logo
  • quando ogni post è associato con uno o più luoghi e ne vogliamo visualizzare l'immagine (o la mappa)
  • quando ogni post è relazionato con un determinato argomento (per esempio in un sito elearning) e vogliamo visualizzare un'icona di questo argomento
  • quando i post fanno parte di una serie (come qualche volta capita in questo sito) e vogliamo usare un'immagine per identificare ogni serie

In questo tutorial userò alcune delle tecniche che ho già mostrato in due precedenti tutorial:

Perché questo tutorial funzioni bisogna seguire questi passaggi:

  1. registrare la categoria per gli allegati
  2. creare le categorie e aggiungere a queste le immagini
  3. nel loop, identificare a quale categoria appartiene il post e quindi eseguire la query per visualizzare l'immagine di questa categoria

Nota: Per ogni post viene identificata solo una categoria, e per ogni categoria viene visualizzata una sola immagine (la più recente).

Vedremo anche come è possibile adattare questa tecnica per altre pagine di archivio, ad esempio per gli archivi dei custom post type (post personalizzati).

Di cosa abbiamo bisogno

Per seguire questo tutorial abbiamo bisogno di:

  • un'ambiente di sviluppo per WordPress
  • un tema da poter editare (io creo un tema figlio di Twenty Fourteen)
  • accesso FTP (o MAMP e simili se stai lavorando in locale)
  • un editor di codice

Impostiamo i file del tema

Per seguire questo tutorial, abbiamo bisogno di creare o editare un tema. Io vado a creare un child theme (tema figlio) del tema Twenty Fourteen

Questo è il mio foglio di stile:

Questo imposta il tema come un tema figlio di Twenty Fourteen. Se vuoi sapere di più riguardo i temi figlio, dai uno sguardo alla pagina del Codex

Per andare aventi con questo tutorial dobbiamo inoltre creare un file functions.php per il nostro tema (o editarlo se ne già ne abbiamo uno nel tema), e anche creare un file index.php.

Registrare Categorie per le Immagini

Di default Wordpress non permette di assegnare categorie alle immagini, ma questo può essere facilmente cambiato.

Se il tema non ha ancora un file functions.php , creiamo un file chiamato functions.php e ci inseriamo il codice seguente:

Salviamo il file e andiamo nella schermata Media del nostro sito. Vediamo che le categorie sono state aggiunte al sottomenù dei media.

Media Library with categories added to submenuMedia Library with categories added to submenuMedia Library with categories added to submenu

Nota: per sapere di più, guarda questo tutorial.

Aggiungere Immagini di Categoria

Adesso dobbiamo caricare alcune immagini e associare a ciascuna una categoria. Le immagini da caricare dipendono dalle esigenze del tuo sito: ho usato i colori per le categorie così ho cercato immagini funzionali ai colori. Ho assegnato le categorie rilevanti, quindi così ora appare la mia Libreria Media:

Media Library showing images in different categoriesMedia Library showing images in different categoriesMedia Library showing images in different categories

Ora, aggiungo alcuni articoli e assegno loro le categorie.

List of posts with different categoriesList of posts with different categoriesList of posts with different categories

Creazione del file index.php

Ora che abbiamo impostato gli articoli e abbiamo assegnato le categorie alle immagini, bisogna editare il file index.php per visualizzare le immagini in evidenza per le categorie.

Impostiamo il File

Dobbiamo quindi editare il file index.php esistente o aggiungerne uno nuovo. Ne ho creato uno basato sul file index.php e il content.php del tema Twenty Fourteen. Ora appare così:

Identificare la categoria del post

Per visualizzare la relativa immagine di categoria dobbiamo identificare a quale categoria appartiene l'articolo. E dobbiamo farlo dentro il loop.

Primo, se stiamo lavorando con Twenty Fourteen, rimuoviamo la funzione che visualizza l'immagine in evidenza del post. Togliamo questa linea:

Immediatamente dopo l'apertura di <article>, aggiungiamo il seguente codice:

Questo crea una variabile chiamata $category il cui valore è quello dell'ID della prima categoria a cui il post appartiene, usando la funzione get_the_category()

Creare gli argomenti della Query

Adesso possiamo usare questa variabile negli argomenti della query. Sotto il codice appena inserito, aggiungere questo: 

Questi argomenti fanno in modo che la nostra query visualizzi solo un'immagine nella categoria indicata. Notare come dobbiamo usare l'argomento 'post_status' perché di default le immagini hanno 'post_status' => 'inherit' e non 'public' come gli altri post.

Ora aggiungiamo alla query questo codice:

Questo mette l'immagine dentro un div con classe category-featured-image che possiamo usare per aggiungere regole di stile. Utilizziamo quindi la funzione di wp_get_attachment_image() per visualizzare l'immagine.

Ora, se aggiorniamo la pagina del blog, vediamo  le immagini visualizzate:

Home page with images displayed for different categoriesHome page with images displayed for different categoriesHome page with images displayed for different categories

Adesso c'è troppo spazio vuoto, quindi aggiungiamo qualche regola di stile.

Formattare le Immagini

Apriamo il nostro foglio di stile del tema e aggiungiamo le regole di stile che vogliamo attribuire alle immagini. I ho aggiunto le seguenti:

Questo sposta le immagini alla sinistra del post:

Home page with images flush leftHome page with images flush leftHome page with images flush left

Adattare questa tecnica ad altri tipi di contenuto.

Possiamo usare questa tecnica con altri tipi di contenuto. Per esempio:

  • Con i custom post type, possiamo creare un file archive-$posttype.php per i post type con un loop simile a quello visto in precedenza.
  • Se stiamo usando delle tassonomie invece delle categorie, possiamo aggiungere gli 'attachment' ai post type associati alla tassonomia quando la registriamo. In questo caso dobbiamo sostituire la funzione get_the_category() con get_the_terms() e nella query gli argomenti della categoria con quelli della tassonomia.
  • È possibile combinare due tassonomie visualizzando per esempio le immagini di una tassonomia nei post dell'archivio di un'altra tassonomia, con magari l'immagine che collega alla pagina di archivio della tassonomia corrispondente.
  • E possiamo usare una tecnica simile a questa nel file archive.php, se il nostro tema ne ha uno, e visualizzare anche nell'archivio le immagini in evidenza della categoria dei post.
  • Se vogliamo combinare una o più delle tecniche sopra, possiamo creare e includere un file con il nostro loop (inserendo l'immagine della categoria) e richiarmarlo nei relativi template files.

Sommario

Come ho descritto all'inizio di questo tutorial, ci possono essere dei casi dove invece di mostrare l'immagine in evidenza di ogni post, si desidera visualizzare un'immagine relativa alla categoria al quale il post è associato.

In questo tutorial abbiamo imparato a fare questo, associando categorie alle immagini, identificando la prima categoria per ciascun post nel loop, e quindi creando una query per visualizzare l'immagine di quella categoria.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.