Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Creare una galleria di immagini per WordPress: programmare il plugin

by
Difficulty:IntermediateLength:MediumLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Final product image
What You'll Be Creating

Alle persone piacciono le immagini. A loro piace guardarle, a loro piace cliccarle. Quindi ha senso usarle nella navigazione del tuo sito.

Puoi già utilizzare le immagini in primo piano nelle pagine di archivio, consentendo agli utenti di avere una maggiore intuizione di ciò che tratta l'articolo e dando alle pagine di archivio un aspetto migliore. L'immagine bella, grande e cliccabile inoltre rende più intuitivo il processo di navigazione verso una pagina o un articolo.

Ma ci sono altri posti dove è possibile utilizzare le immagini in primo piano per aiutare la navigazione verso le parti del tuo sito WordPress. In questo tutorial in due parti, ti mostrerò come creare una griglia di immagini che si collegano alle pagine figlio di una determinata pagina del sito, o alle pagine figlio della pagina corrente.

In questa prima parte, illustrerò come scrivere il PHP per recuperare le pagine ed elaborare i loro titoli e le immagini in primo piano, all'interno dei link. E nella seconda parte, Ian Yates ti mostrerà come aggiungere il CSS per trasformare il tuo elenco in una griglia di grande impatto.

Di che cosa hai bisogno

Per seguire questo tutorial, è necessario quanto segue:

  • Un'installazione di sviluppo di WordPress — non aggiungerla al tuo sito online fino a quando non lo hai provato.
  • Un tema che abbia sia hook di azione per aggiungere contenuto che sia possibile modificare. Se è un tema di terze parti senza hook, crea un tema child e modificalo.
  • Un editor di codice.

Decidere il tuo approccio

La prima cosa da fare è decidere quali pagine volete restituire. In questo tutorial, illustrerò due opzioni:

  • Un elenco delle pagine figlio della pagina corrente, con immagini
  • Un elenco delle pagine figlio di una pagina specifica, con le immagini. Questo si può visualizzare ovunque nel tuo sito, non solo nella pagina genitore.

Come iniziare

Il punto di partenza è lo stesso per entrambi gli approcci.

Inizia creando un plugin nella cartella wp-content/plugins. È necessario creare una cartella per il tuo plugin, come nella seconda parte di questo tutorial, aggiungeremo un foglio di stile, così come il file principale del plugin.

Una volta che hai la cartella, crea un file PHP per il codice. Chiamerò il mio tutsplus-child-pages.php.

Ora imposta il file del plugin con il testo decommentato nella parte superiore:

Questo dice a WordPress che cos'è il plugin e cosa fa.

Ora, se non lo hai già fatto, vai avanti e crea alcune pagine. Creerò alcune pagine con pagine figlio, includendo una pagina Locations come genitore per la mia lista di pagine specifica.

Ecco le mie pagine di admin:

Hierarchical pages in the WordPress admin

Ora è il momento di scrivere la funzione per elaborare l'elenco.

Elaborare un elenco di elementi figlio della pagina corrente

Cominciamo con questa opzione. Questo visualizzerà un elenco di tutti i figli della pagina corrente, con immagini, link e il titolo.

Si tratta di un approccio utile se il tuo sito ha una struttura gerarchica delle pagine, e vuoi incoraggiare le persone a visitare le pagine di primo livello (o le pagine di medio livello, se le avete) a visitare le pagine sottostanti nella struttura.

Inizia creando una funzione nel file del plugin:

Ora all'interno di questa funzione, controlla se siamo su una pagina. Tutto il resto andrà all'interno di quel tag condizionale:

Successivamente, imposta la variabile globale $post e definisci la pagina principale:

Dopo di che, definisci gli argomenti per la funzione get_pages():

Puoi voler modificare alcuni di tali argomenti. Ho usato menu_order per l'ordinamento così posso regolarlo manualmente, ma potresti utilizzare data, titolo o qualsiasi altro parametro ordinabile.

Il prossimo compito è quello di impostare un ciclo foreach utilizzando i risultati di questa funzione get_pages():

Ripassiamo il codice:

  1. In primo luogo stiamo controllando se la funzione get_pages() ha restituito dei risultati, cioè se $children è popolato.
  2. Quindi iniziamo un ciclo foreach per ogni pagina figlio come la variabile $post,
  3. All'interno del ciclo, apriamo un elemento article.
  4. Controlliamo se c'è un'immagine di primo piano (o un post miniatura) e diamolo in output all'interno di un link alla pagina.
  5. Diamo poi in output il titolo della pagina all'interno di un link a esso.
  6. Infine chiudiamo i nostri elementi e i controlli condizionali e lo stesso ciclo foreach.

Ho aggiunto le classi CSS a ogni elemento così possiamo dargli uno stile nella seconda parte di questo tutorial.

Aggiungere il codice al tema

Ora hai la tua funzione. Il passo successivo è aggiungerla al tuo tema, così che possa essere data in output nel posto corretto.

Se il tuo tema è dotato di hook di azione, puoi associare la funzione a uno di quelli. Così se la mia aveva un hook after_content, potrei aggiungere questo codice al mio plugin, all'esterno della funzione:

Tuttavia, sto usando il tema Twenty Sixteen per questa demo, che non ha hook di azione come questo. Così, invece avrai bisogno di aggiungere la mia funzione direttamente in un file del modello.

Se stai lavorando con il tuo tema, puoi aggiungerlo al file page.php nel punto dove vuoi visualizzare l'elenco.

Ma se stai utilizzando un tema di terze parti, non devi modificarlo, perché tutte le modifiche andranno perse la prossima volta che aggiorni il tema. Invece, crea un tema child. Crea una copia del file page.php dal tuo tema genitore (o una copia del file di loop per page.php) nel nuovo tema child e modifica questo invece.

Identifica dove nella tua pagina vuoi che si trovi l'elenco e aggiungi questo al file del modello del tema:

L'ho aggiunto dopo il ciclo nel file page.php del mio tema child.

Ora diamo un'occhiata al sito. Ecco la mia pagina Chi siamo con le sue pagine figlio:

The About Us page with links to child pages after the content

Ecco come si aggiungono i collegamenti alle pagine figlio della pagina corrente. Ma cosa succede se volete aggiungere collegamenti ai figli di una pagina specifica? Lo affrontiamo dopo.

Visualizzare un elenco di figli di una pagina specifica

Il codice per questo è quasi identico al codice per i figli della pagina corrente. La differenza è nella definizione della pagina genitore che utilizzerai durante l'esecuzione di get_pages().

Fai una copia della prima funzione nel file del plugin e modifica il nome della funzione, così sono diversi.

Trova il controllo condizionale per essere su una pagina e rimuovilo. Non dimenticare di eliminare anche le parentesi graffe di chiusura di quel controllo.

Ora trova la riga che dice:

Sostituiscila con questo:

Vedrai che questo utilizza la funzione get_page_by_path(), con il primo parametro che è lo slug della pagina di destinazione. Modificalo in modo che utilizzi lo slug della pagina che si vuole indirizzare nel proprio sito.

Inoltre è consigliabile modificare le classi CSS in questa funzione, in modo che siano distinte da quelle nella prima funzione. In questo modo, se le utilizzi entrambe, è possibile usare uno stile diverso per ciascuna.

Ecco la funzione completa dopo aver apportato queste modifiche:

Aggiungere il codice al tema

Ancora una volta, è necessario aggiungere il codice al vostro tema. In questo caso non vorrai solo il tuo elenco di output su pagine statiche e potresti volerlo mettere in un posto diverso.

Se il tuo tema è dotato di hook di azione, puoi utilizzare uno di quelli nel tuo file del plugin, in modo simile a prima:

Lo aggiungerò al footer del mio tema, ancora una volta creando e modificando un duplicato di footer.php nel mio tema child.

Ecco il codice nel mio file footer.php, immediatamente all'interno dell'apertura dell'elemento footer:

Ed ecco l'output dell'elenco nel mio footer. Questo è alla base di un singolo post:

The locations images and titles all underneath each other on the left side of the page

Suggerimento: Potresti voler evitare l'output di questa lista nella pagina Locations se si hanno entrambe le funzioni in esecuzione, per evitare duplicazioni. Prova ad aggiungere un tag condizionale utilizzando l'id della pagina per raggiungere questo obiettivo.

Prossimi passi

Ora avete due elenchi di pagine. Una delle pagine figlio della pagina corrente e un altro delle pagine figlio di una pagina specifica.

In questo momento, sono tutte spinte su un lato della pagina e i titoli non sono così belli. Nella prossima parte di questo tutorial in due parti, imparerai come dare uno stile alle immagini per creare una griglia con un layout a griglia CSS e come integrare il testo del titolo in quella griglia.

Advertisement
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.