Immagini capitolo 6

Figura 6.1 – La struttura di base di un tema WordPress, con i suoi tre elementi primari, di cui quello centrale eventualmente diviso in due aree.
Figura 6.2 – La cartella del tema Twenty Nineteen; si notino i tre file PHP principali (header.php, index.php, footer.php) e i vari file CSS, fra cui quello principale, style.css.
Figura 6.3 – Alcuni dei temi visualizzati per la scelta e l’installazione in WordPress; si notino le diverse tipologie, facilmente riconoscibili, come il blog, in basso a sinistra, o il commercio elettronico, in basso a destra.
Figura 6.4 – Alcuni dei temi visualizzati cliccando su Aspetto -> Temi nell’area amministrativa di WordPress; si notino quelli di serie con il nome inglese dell’anno di pubblicazione.
Figura 6.5 – La scheda di dettaglio del popolare tema Astra; si noti a destra l’anteprima totalmente diversa da quella della miniatura.
Figura 6.6 – Il tema Astra nella pagina di dettaglio sul sito ufficiale di WordPress; si noti la maggiore ricchezza di informazioni e in particolare il link alla pagina del tema, che permette di visualizzare l’anteprima effettiva.
Figura 6.7 – Due dei temi della sezione WordPress di Themeforest (wpgc.it/146), con a sinistra
l’elenco delle categorie principali.
Figura 6.8 – Alcuni dei temi proposti da Elegant Themes, l’azienda che sviluppa, tra gli altri, il builder Divi; si noti la selezione della categoria “responsive” in alto (wpgc.it/147).
Figura 6.9 – La homepage ufficiale del tema Fluida, disponibile anche in versione freemium fra quelli selezionabili da WordPress; si noti il pulsante per la demo di anteprima in tempo reale.
Figura 6.10 – I dati identificativi del contenuto di un articolo forniti dal tema Astra, evidenziati nel codice prodotto e interpretato dal browser; si noti il richiamo a schema.org nel codice, in alto a sinistra.
Figura 6.11 – La parte superiore della home nel tema freemium Envo Magazine; si noti la struttura della testata, in grado di ospitare un logo rettangolare e un banner orizzontale.
Figura 6.12 – La schermata di selezione dei temi in WordPress; si notino l’etichetta su Twenty
Seventeen che lo contrassegna come installato, e il campo di ricerca in alto a destra.
Figura 6.13 – L’anteprima in tempo reale del tema Fluida, installato ma non attivato; si noti a sinistra il pannello di personalizzazione con le voci aggiuntive del tema, precedute dalle lettere FL, nella cui parte alta è visibile il pulsante per attivare il tema e confermare tutte le impostazioni eventualmente applicate.
Figura 6.14 – Alcuni degli oltre cento temi gratuiti di Automattic con piena compatibilità con Gutenberg (wpgc.it/150).
Figura 6.15 – Alcuni dei temi di Athemes nell’archivio di WordPress.org, visualizzati cercando il nome di uno di essi e cliccando poi sul link dello sviluppatore nella scheda informativa (wpgc.it/153).
Figura 6.16 – Le due offerte, annuale e “a vita”, di ; si noti la frase “Risk-free Guarantee” linkata a un dettaglio sulle condizioni di rimborso entro 30 giorni dall’acquisto qualora non si fosse soddisfatti dei prodotti (wpgc.it/155).
Figura 6.17 – Un tipico esempio di licenza di base ed estesa per uno dei temi distribuiti su ; si noti il costo elevato del secondo tipo di licenza.
Figura 6.18 – I template disponibili nella versione premium del tema Fluida, che troviamo in versione freemium sull’archivio di WordPress.org ma, appunto, senza questi modelli di pagina.
Figura 6.19 – Le opzioni di personalizzazione del tema Astra; si notino le voci a sinistra e le icone a forma di matita in corrispondenza degli elementi del tema su cui è possibile intervenire (wpgc.it/154).
Figura 6.20 – Le opzioni aggiuntive per il salvataggio e la condivisione delle impostazioni di personalizzazione; si noti il link per la condivisione di anteprima.
Figura 6.21 – La voce aggiuntiva che compare nella sezione Aspetto dopo l’installazione e attivazione del tema freemium Hestia; si noti a destra il pulsante per accedere all’area Personalizza.
Figura 6.22 – La schermata di gestione dei widget; si notino, a destra dell’elenco dei widget, le tre aree previste per ospitarli nel tema corrente e, in alto, il pulsante per la gestione attraverso gli strumenti di personalizzazione di WordPress (wpgc.it/157)
Figura 6.23 – La gestione dei widget e delle relative aree dalla sezione Personalizza di WordPress; si notino a destra le icone a forma di matita per richiamare più agevolmente l’elemento specifico del layout.
Figura 6.24 – Un esempio di aree widget all’interno di un tema (in questo caso Envo Magazine) gestibili anche dalla sezione Personalizza.
Figura 6.25 – Le schermata di modifica diretta del codice dei temi di WordPress, raggiungibile dal menu Editor della sezione Aspetto, con il foglio stile CSS aperto come da impostazione predefinita; si noti a destra l’elenco dei file del tema.
Figura 6.26 – La schermata di creazione di un tema figlio visualizzata dal plugin Child Themify; si notino i nomi del tema originale e di quello generato e, al di sotto, il link per le opzioni aggiuntive.
Figura 6.27 – Il codice del file style.css di un tema figlio (in questo caso di Astra); si notino le voci di commento, il link al tema originale e, a destra, la presenza del file functions.php oltre a quello del foglio stile.
Figura 6.28 – Un esempio di ispezione di un elemento della pagina web per mezzo dell’apposito comando offerto dal browser; si notino a destra gli elementi della pagina e, in basso, le proprietà dell’elemento selezionato (wpgc.it/160).
Figura 6.29 – Alcuni dei temi multi-purpose visualizzati usando il filtro di selezione sul famoso portale (wpgc.it/162).
Figura 6.30 – La schermata visualizzata dal plugin Shortcodes Ultimate, che aggiunge appunto un’ampia serie di elementi di questo tipo a WordPress, consentendone l’utilizzo nella composizione di pagine e articoli (wpgc.it/163).
Figura 6.31 – Un esempio della struttura a blocchi del builder Divi; si noti la struttura a sezioni orizzontali suddivise a loro volta in colonne, e i diversi strumenti di aggiunta, modifica e duplicazione degli elementi (wpgc.it/168).
Figura 6.32 – L’interfaccia di composizione di Beaver Builder (wpgc.it/167); si notino gli strumenti di modifica del layout e, a destra, il pannello per la scelta degli elementi e dei template.
Figura 6.33 – L’area di documentazione sul sito del builder Oxygen; si noti la presenza di una ricca serie di video suddivisi nei vari livelli di utilizzo (wpgc.it/175).
Figura 6.34 – I plugin contenenti raccolte di blocchi aggiuntivi per Gutenberg sono stati il primo segno dell’accoglienza del nuovo editor da parte degli sviluppatori (wpgc.it/179).
Figura 6.35 – Underscores (o semplicemente _s) è uno dei cosiddetti temi starter, uno degli strumenti utilizzati per sviluppare un tema ex novo per WordPress (wpgc.it/182).
Figura 6.36 – L’inspector del browser Chrome in azione nell’analisi di uno specifico elemento della pagina del sito wpgc.it; si notino a destra i pannelli con il codice e il richiamo al foglio stile CSS sull’elemento selezionato.
Figura 6.37 – L’interfaccia di Template Toaster; si noti la ricchezza di menu e pulsanti per la modifica di ogni aspetto del tema (wpgc.it/183).
Figura 6.38 – La homepage di Genesis nel periodo in cui era stato già presentato il nuovo editor a blocchi di WordPress; si noti infatti in alto l’avviso di compatibilità con Gutenberg (wpgc.it/186).
WordPress la Guida Completa blog ufficiale

In questo sito facciamo uso di strumenti interni o di terze parti che salvano dei piccoli file (cookie) sul tuo dispositivo di navigazione. I cookie vengono utilizzati, normalmente, per consentire al sito di funzionare in modo corretto (cookie tecnici), per generare statistiche sulla navigazione degli utenti (cookie statistici) e per fini di marketing e pubblicitari (cookie di profilazione). Possiamo utilizzare in modo diretto i cookie tecnici, , ma hai la possibilità e il diritto di scegliere se abilitare o meno i cookie statistici e di profilazione. Abilitando tali cookie, ci permetti di offrirti un’esperienza migliore nell’utilizzo del nostro sito. Disabilitandoli potresti non vedere alcuni contenuti (es. i video di YouTube). Informativa cookie