I widget rendono WordPress davvero flessibile. Aggiungendo aree widget ai tuoi temi, permetti agli utenti di inserire i propri contenuti personalizzati senza dover scrivere una riga di codice.
Sono più comuni nelle barre laterali e nei piè di pagina, dove sono spesso usati per contenere widget come il widget di ricerca, il widget degli ultimi post o forse un menu personalizzato. Ma se li aggiungi ai tuoi modelli di pagina e post li rendi ancora più potenti.
È possibile aggiungere aree widget a qualsiasi file di modello che ti piace. Mi piace aggiungerne molti ai miei temi, in luoghi come l’intestazione, prima e dopo la navigazione principale, e prima e dopo il contenuto. Puoi aggiungerli a una parte del modello (come l’intestazione) che viene utilizzata da ogni pagina del tuo sito, oppure puoi essere più specifico e aggiungerli ai file del modello per un determinato tipo di contenuto.
In questo post, ho intenzione di mostrarvi come fare proprio questo. Creerò un tema figlio del tema predefinito Twenty Seventeen e quindi all’interno di quel tema figlio, creerò alcuni nuovi file di modello: un file di modello di pagina personalizzato, un file di archivio di categoria e un singolo file di modello post.
In ognuno di questi aggiungerò un’area widget specifica per quel tipo di contenuto, quindi gli utenti la vedranno solo quando visualizzeranno una pagina utilizzando il modello di pagina, un archivio di categoria o un singolo post, rispettivamente.
Quindi iniziamo!
Nota: Ho aggiunto il codice per questo post a GitHub in modo da poterlo controllare se stai lavorando insieme a questo tutorial.
Impostazione del tema figlio
Utilizzerò un tema figlio del tema twenty seventeen: se stai lavorando con il tuo tema puoi modificarlo direttamente invece di creare un tema figlio. Ma se si sta utilizzando un tema di terze parti, è necessario creare un tema figlio. Questo perché quando si aggiorna il tema, tutte le modifiche apportate ad esso andranno perse.
Quindi, nella cartella wp-content/themes, crea una nuova cartella con il nome del tuo tema. Sto chiamando il mio wpmu-template-widgets. All’interno di questo, aggiungi uno stile.file css e aggiungilo:
Ricorda, se stai lavorando con il tuo tema puoi saltare questo passaggio. E se stai usando un tema genitore diverso, dovrai modificare il foglio di stile per rifletterlo. Se non sei sicuro, controlla il nostro post sulla creazione di temi figlio.
Registrazione delle aree Widget
Prima di poter aggiungere le aree widget ai nostri file modello, dobbiamo registrarle nel file delle funzioni del tema. Apri il tuo file functions se il tuo tema ne ha già uno o se si tratta di un nuovo tema figlio, crea un file chiamato functions.PHP.
Iniziamo aggiungendo la funzione vuota per registrare i widget e agganciandola all’hook widgets_init. Aggiungi questo al tuo file di funzioni:
All’interno di tale funzione, registreremo quattro aree widget: una per ogni singolo post e modelli di archivio di categoria e due per il modello di pagina personalizzato.
Inizia registrando il primo widget:
Questo utilizza la funzione register_sidebar(), con una serie di parametri come segue:
- Il nome dell’area del widget, che apparirà nella schermata di amministrazione Widget e nel Customizer. L’ho reso traducibile.
- Un ID univoco per l’area del widget.
- Markup per prima del widget, che utilizza segnaposto per l’internazionalizzazione.
- Markup per dopo il widget.
- Markup per prima e dopo il titolo del widget, che è racchiuso in un elemento
h3.
Quindi questo è il primo. Ora, ancora all’interno della tua funzione, aggiungi gli altri tre:
Quindi ora abbiamo quattro widget:
- Uno dopo il contenuto dei singoli post.
- Uno prima del contenuto di un archivio di categoria.
- Uno prima e uno dopo il contenuto del nostro modello di pagina widgetizzato.
Se si desidera spostare le aree del widget (ad esempio, mettendo l’archivio di categoria uno dopo il contenuto o il singolo post uno prima del contenuto), è necessario rinominarle in modo appropriato. Questo è così che si sa cosa sta succedendo quando si arriva a modificare il codice in futuro, e gli utenti sanno dove le aree del widget verranno emessi quando aggiungono widget a loro tramite la schermata di amministrazione Widget. Ricorda che se lo modifichi, dovrai inserire il codice per emettere i widget nella posizione corretta nei file del modello nel passaggio successivo, che potrebbe essere diverso da dove sto mettendo il mio.
Ora, se apri la pagina di amministrazione dei widget, vedrai le tue aree widget, pronte per i widget:
Ma se aggiungi widget alle tue nuove aree widget, non verranno visualizzati nel front-end del tuo sito. Devono ancora essere codificati nei file del modello.
Aggiungere le aree del widget ai file modello
Ora aggiungiamo il codice per produrre le aree del widget. Se si sta lavorando con il proprio tema si può solo bisogno di modificare i file di modello di tema esistenti. Se stai lavorando con un tema figlio (o il tuo tema non ha già i file di modello pertinenti), dovrai creare nuovi file.
Iniziamo con il file modello di pagina widgetized, poiché il tuo tema non lo avrà in entrambi i casi.
Nella cartella del tema, creare un nuovo file. Sto chiamando il mio page_widgetized.PHP. Apri quel file e aggiungilo:
Questo dice a WordPress che si tratta di un modello di pagina personalizzato. Se vuoi saperne di più su di loro, consulta la nostra guida dettagliata.
Nota: non utilizzare page-widgetized come nome file. Questo perché page – è un suffisso riservato in WordPress. Utilizzare un trattino basso invece di un trattino, o semplicemente evitare di utilizzare pagina all’inizio del tutto, se si preferisce.
Ora sotto quel testo commentato, copia tutto dalla pagina del tuo tema (o del tema principale).file php. Un’alternativa è fare una copia del file e aggiungere il testo commentato, dipende da te.
Ora potrai selezionare questo modello quando modifichi una pagina nel tuo sito:
Selezionalo per una delle tue pagine in modo da poter provare i widget. Ecco la mia pagina:
Non sembra molto eccitante in questo momento in quanto non ho aggiunto le aree del widget al file del modello. Facciamolo.
Nel file modello, aggiungi questo codice immediatamente sopra il contenuto della pagina, per l’area del widget di cui sopra:
Questo controlla se l’area del widget è stata popolata, utilizzando l’ID univoco creato per l’area del widget quando l’hai registrata nel file delle funzioni. Se è stato popolato, emette il contenuto dell’area del widget.
Ora aggiungi l’area widget sotto il contenuto. Dopo il contenuto (e all’interno di qualsiasi elemento che lo racchiude), aggiungi questo:
Salva il file del modello di pagina.
Ecco il codice completo del mio file modello di pagina, in modo da poter vedere dove le aree del widget prima e dopo il ciclo:
Ora per testarlo. Ho aggiunto un widget a ciascuna delle nuove aree widget:
Ed ecco come appaiono sulla mia pagina:
Quindi questo è il modello di pagina personalizzato impostato. Ora è necessario modificare gli altri due file di modello di pagina (o crearli se necessario). Segui questi passaggi:
- Se stai lavorando con un tema figlio, crea un file chiamato categoria.PHP. Copia il contenuto della categoria.file php dal tema genitore (se ne ha uno) o dall’archivio.file php (o indice.php se non ha quello.
- Se non stai lavorando con un tema figlio, ma il tuo tema non ha una categoria.file php, fare uno copiando l’archivio.file php (o se non ne hai uno, l’indice.file php).
- Aggiungi l’area widget sopra il contenuto nel file di archivio categoria-di nuovo, immediatamente prima del ciclo.
Ecco il codice per l’area del widget:
Ora ripeti questo per il singolo modello:
- Crea un singolo post.file php se il tuo tema non ne ha uno (o stai usando un tema figlio). Copia il contenuto dal singolo post del tuo tema principale.file php in esso, o dal file modello successivo nella gerarchia del modello (singolo.php, singolare.php o indice.PHP).
- Di nuovo, aggiungi l’area del widget, questa volta dopo il contenuto.
Ecco il codice:
Ora, se si aggiungono i widget, faranno apparire sul tuo sito. Ecco il mio che mostra un elenco di post recenti dopo un singolo post:
L’aggiunta di aree widget ai modelli offre flessibilità
Le aree widget consentono agli utenti del tema di aggiungere contenuti extra senza dover scrivere codice. Ma non sono solo per la barra laterale. L’aggiunta di aree widget extra ai file del modello ti offre aree mirate nel tuo sito a cui puoi aggiungere widget, con un controllo preciso su dove verranno visualizzate.
È possibile prendere questi esempi ulteriormente, se volete, l’aggiunta di aree di widget a tutti i file, o anche utilizzando diverse versioni della barra laterale.file php per diversi tipi di contenuto. Il mondo è la tua ostrica!