Introduzione:
il sito è pensato per poter avere un numero gestibile di elementi (pagine, offerte, articoli) separati in diverse sezioni admin, che vedremo una per una (almeno per quanto riguarda le sezioni personalizzate che non troverete in altri siti con base WordPress).
In questo progetto facciamo un utilizza massiccio di shortcodes, codici utilizzabili per esprimere funzioni speciali, come la formattazione di tabelle prezzo con funzioni specifiche (on-off su bollettino o fisso-variabile), contact form o caroselli di offerte abbinabili.
In questa guida illustro anche alcune delle funzioni più importanti relative alla configurazione del tema.
Il discorso WooCommerce, possiamo approfondirlo sulla guida ufficiale dello stesso, visto che, salvo alcune personalizzazioni, il sistema di e-commerce è perfettamente integrato con lo stile del sito e già utilizzabile e configurato.
Reusable blocks
Blocchi riutilizzabili, sono comodi per poter avere parti del sito che si ripetono su più pagine, modificandoli, la modifica ha influenza su ogni pagine in cui il blocco è richiamato.
Rispetto ai temi comuni, la voce di menu “Reusable blocks” è visibile, perché usiamo questi blocchi in maniera costante, e spesso necessitano di aggiornamenti indipendenti dalle pagine in cui si trovano.
Un esempio sono i blocchi “Promo row Count Down…”, collegati alle slides e alle pagine offerta (richiamati dunque almeno due volte), potranno essere comodamente modificati direttamente, senza passare per la pagina in cui si trovano.
Pagine/Articoli
Elementi comuni a tutte le normali installazioni di WordPress:
I contenuti delle pagine vengono gestiti tramite l’editor Gutenberg, editor ufficiale del nuovo WordPress.
I template disponibili per le pagine sono:
- Template predefinito (normale template con sidebar e allineamento hero a sinistra).
- ADV Search (sistema di ricerca anvanzata integrato nel tema, in base al post type oggetto della ricerca, propone filtri basati sulle tassonomie del post type e sui suoi meta fields [prezzo, dimensione ecc… ad esempio]).
- Coming soon (template senza header e footer, pensato per situazioni di manutenzione).
- Contatti (template con form apposito, email recipient configurabile in Theme options->Indirizzi e numeri->Indirizzo Generale).
- Home (Template per la home con slider automatico, area site intro e Blog pre-footer).
- Lavora con noi (template con form apposito, email recipient configurabile in Theme options->Indirizzi e numeri->Indirizzo lavora con noi).
- No sidebar (normale template senza sidebar e allineamento hero a sinistra).
- SEI PROMO (Template con claim in HTML pensato per le promo).
Campi extra del tema
- Generale
- Sottotitolo (h2)
- Titolo breve (titolo breadcrubms [o briciole di pane])
- Contatti e goto Url:
generano delle call to action in golden area (basso-destra) che permettono di mostrare una modale, gestibile dalla tab “Modal” di questo set di opzioni.
- Video:
- per utilizzare un video in loop nel luogo in cui appare l’immagine in evidenza della pagina, inserire url video, il link è diretto a un file video, utilizzare l’opzione videoURL, altrimenti seguire gli esempi per gli altri due provider video.
- Localizzazione e data
- vengono utilizzati per creare un blocco pre-footer con mappa google embed dell’indirizzo inserito, modificando data, titolo e titolo per localizzazione, è possibile editare le etichette di default che appariranno nel blocco localizzazione della pagina in cui questi campi sono valorizzati.
- Modal
- citata in precedenza, permette di editare le caratteristiche di default della modale nella pagina, modificandone i defaults (i defaults sono editabili in Theme optios->Default Site CTA).
- Attach files
- permette di collegare documenti ad una pagina, creando una sezione sotto il contenuto con l’elenco dei files allegati e il loro titolo.
- Configura correlati
- utile soprattutto con gli articoli, permette di modificare i contenuti correlati per creare relazioni tra, ad esempio, post e prodotti (due post type differenti).
- Configura come banner
- permette di preparare la pagina quando la si presenta in anteprima tramite un banner interno al sito (raramente la utilizziamo su questo progetto), questo per permettere di utilizzare diverse immagini che nella pagina avrebbero problemi di collocazione (ad esempio, come banner impostiamo immagine con grafica, sulla pagina impostiamo come immagine in evidenza una hero image da 1920×1080).
Page builder
Il sistema di page building è integrato e serve a poter usare le funzioni multi-purpuse del tema su una pagina specifica, potrete dunque:
- Opzioni pagina
- Page title h1 (permette di gestire i titoli pagina in heading inferiori, qualora fosse richiesto da particolari esigenze SEO o titoli h1 alternativi posizionati sopra l’header della pagina).
- Cambia tipo di header, permette di configrare una tipologia di header alternativa integrata nel tema, utile spesso nella creazione di landing page.
- Cambia logo: si può usare un logo alternativo in una specifica pagina. Per usare un altro logo è necessario caricarlo nella cartella del tema “societa-energia-italia-cream/images/”.
- Menu personalizzato, che potete creare tramite “Aspetto->Menu“, una volta realizzato sarà disponibile nella tendina di selezione dei menu.
- Altezza header permette di modificare l’altezza dell’immagine principale con titolo, vanno utilizzate unità di misura insieme al numero (600px, 75vh ecc…).
- Classe CSS breadcrumbs è utile soprattutto per nascondere le briciole di pane in una pagina, utilizzando la stringa “hidden”.
- Content settings:
- Hide site header: permette di nascondere l’intero header con menu e logo.
- Hide featured image: permette di nascondere la parte iniziale della pagina, che comprende l’h1, l’eventuale sottotitolo e l’immagine in evidenza.
- Mostra titolo pagina dopo breadcrumps: permette di mostrare il titolo oltre le breadcrumbs e fuori dalla “hero image”, in tal caso, sarà utile applicare una altezza fissa all’immagine in evidenza per poterla visualizzare.
- Nascondi contenuto: permette di nascondere completamente tutto il contenuto della pagina.
- Inverti indicazione di default per trasparenza header: consente di rendere l’header trasparente e in posizione “fixed”.
- Opzioni slider
- Usa slider: attiva la slider nelle pagine normali (nella pagina con template “Home” l’indicazione è invertita).
- Slide tag: permette di visualizzare nello slider solo slides taggate con il tag indicato (va usato lo slug del tag).
- Altezza slider: va definita in px o vh.
- Slider di contenuti: questa soluzione consente di far scorrere nello slider dei contenuti del sito, ad esempio, dei prodotti WooCommerce. Ad esempio, per far scorrere i prodotti della categoria “Book” i campi vanno compilati come segue. Post type: “product”; Tassonomie: “product_cat”; termini: “book”.
- Custom CSS/JS:
- Si può aggiungere css e javascript personalizzato attraverso i campi specifici.
Gallery
Permette di configurare uno slider di immagini che prende il posto della hero image della pagina.
Slides
Sono le slides principali presenti sulla home page; attraverso questa sezione è possibile gestire contenuti, immagini e posizione delle slide.
Usando i tag, è possibile richiamare specifiche slides su una pagina tramite le opzioni slider di una pagina.
Una slide, porta con se tutte le impostazioni di una pagina o un articolo, ciò che conta, oltre alla tab generale in cui configurare il sottotitolo, è il titolo principale, il contenuto e le opzioni slide.
Impostazioni slide
- Nascondi titolo: elimina titolo e sottotitolo se presenti, consentendo di inserire tutto nell’editor.
- Colore titoli: consente di impostare una colorazione ai titoli sulla slide.
- Posizione area di testo: consente di orientare il contenuti della slide in una zona specifica dello spazio.
- Testo link: se presente un url di destinazione o se la slide è l’anteprima di un contenuto approfondibile, la call to action avrà la dicitura impostata qua.
- Colore bottone: consente di impostare il bottone generale o nero o bianco.
- Classe CSS Bottone: usando le classi css è possibile gestire il tipo di bottone che verrà visualizzato (button, rounded-button o altro).
- Link di destinazione: se presente genererà una call to action che al click riporta alla destinazione indicata; se la call to action viene nascosta per qualunque motivo, il link viene applicato anche a tutta la superfice della slide.
- Background area di testo: permette di impostare un background per tutta l’area in cui è presente il testo della slide; usare valori css per “background-color” (è possibile usare rgba() o esadecimali).
- Cell container class: classe css aggiuntiva per l’intera area slide.
- Classe css area di testo: classe css aggiuntiva per area di testo.
- Effetto blur: viene applicato un effetto blur all’immagine se impostato (da 0 a 1).
- Opacità immagine: è possibile abbassare l’opacità dell’immagine (da 0 a 1).
- Image author attribution: usato per, eventualmente, inserire i crediti per l’autore della foto.
Shortcodes
Liste post types
Per creare una lista di prodotti in griglia è possibile usare lo shortcode “car_contents”:
[car_contents id="griglia_1" ptypes="post" taxonomies="category" terms="travel" pperpage="9" classes="" list_type="grid3"]
Questo shortcode genera una lista di Articoli del blog della categoria Travel, con un limite di 9, in 3 colonne. Il numero di colonne di default è definito dal list_type, nell’esempio il template dell’elemento utilizzato per la lista è grid3 (si trovano nella cartella del tema “template-parts/lists/content-grid3.php).
Una lista dei template disponibili in questa installazione:
Available list types
Si possono aggiungere nuovi templates inserendo nella cartella “template-parts/lists/” del tema child nuovi template, o sovrascrivere quelli esistenti nel tema padre salvandoli in tale cartella e personalizzandoli.
La dimensione degli elementi nelle liste è determinata dalle classi css Bootstrap. Il numero di colonne puù essere gestito per tutti i templates impostando i valori numerici “items_w_desk”, “items_w_tab” e “items_w_smart”, in questo modo è possibile alterare il numero di colonne nei 3 brakepoints.
Griglie prodotti
Differiscono leggermente da quanto espresso in precedenza. Per avere una lista di prodotti woocommerce con tutte le funzionalità di aggiunta al carrello, scontistica e altro in una griglia è necessario questo approccio:
[car_contents id="griglia_2" ptypes="product" taxonomies="product_cat" terms="books,e-books" pperpage="9" classes="products columns-3" list_type="woocommerce_product"]
L’attributo “classes” è fondamentale per lo stile e il funzionamento degli elementi in lista, la classe columns-3 può variare da columns-1 a columns-6, indipendentemente dalle impostazioni generali di WooCommerce sul sito.
Un accorgimento indispensabile per lo stile di una griglia prodotti è quello di conferire ad un elemento che contiene la lista la classe CSS “woocommerce”. Metodo consigliato, creare un gruppo attorno allo shortcode della lista e impostare, nella sidebar di editing, sotto “Avanzate” della gestione blocco, inserire la parola “woocommerce” nel campo Classe/i CSS aggiuntiva/e.
Questo shortcode genera una lista di prodotti woocommerce della categoria prodotto Book e e-Book, con un limite di 9, in 3 colonne.
Caroselli di contenuti
Si possono pubblicare caroselli che sfruttano le funzionalità del plugin js Flickity:
[jcar_contents id="griglia_1" ptype="post" taxonomies="category" terms="travel" pperpage="9" classes="" list_type="grid3" items_w_desk=4 items_w_tab=2 items_w_smart=1]
Come per il precedente shortcode, è possibile impostare list_type e colonne, sia con il metodo della scelta del list_type, sia impostando dei valori diversi per gli attributi.
Caroselli di prodotti
[jcar_contents id="griglia_2" ptype="product" taxonomies="product_cat" terms="books,e-books" pperpage="9" classes="products columns-3" list_type="woocommerce_product"]
Come nel caso delle istruzioni per lo shortcode Griglia prodotti, è necessario contenere questo shortcode all’interno di un gruppo o contenitore con classe css “woocommerce”.
Caroselli offerte
Crea un carosello di contenuti, inserendo nell’attributo “blocks” una sequenza di ID separati da virgole. Può essere utile per una raccolta lead per la vendita di servizi. I contenuti rispondono secondo le impostazioni che gli vengono impartite, ad esempio, se per uno dei contenuti in elenco blocks è stato impostato un “Goto URL” (Campi extra del tema -> Generale) specifico, il click riporterà non al contenuto stesso ma al link personalizzato.
[pricing_plans id="carosello_1" blocks="6509,201,235" cta_class="rounded-button circle whatsapp-link flex-bwa" show_content="0" footer_class="flex-bwa width-pr-100"]
I valori contenuti nell’opzione “blocks”, sono gli ID delle offerte separati da virgola (senza spazi preferibilmente). Gli altri valori sono impostati per dare l’effetto concordato in fase di design.
ATTENZIONE: è importante che, se appaiono più caroselli nella stessa pagina, il valore ID sia diverso per ciascuno di essi.
Countdown
Si può inseirie all’interno dei contenuti uno shortcode che genera un countdown, basterà impostare la data nel formato aaaa-mm-gg:
[countdown timer_id="my_timer" date="" title=""]
Impostando il valore date con un valore personalizzato (aaaa-mm-gg), il countdown non si aggiornerà più fino allo scadere.
Contact form
Il tema è dotato di un sistema di contatti integrato, è possibile consultare la guida all’utilizzo su in Theme options -> Indirizzi e Numeri -> Using
Theme options
Imposta i loghi
I loghi si trovano nella cartella del tema [themes_dir]societa-energia-italia-cream/images/media/. Impostando i loghi appariranno sul riquadro grigio chiaro corrispondente.
- Site logo (logo default del sito)
- Site “.onscroll” logo (logo menu compatto durante scrolling)
- Site footer logo (logo presente nel footer se non viene nascosto)
- Site mobile logo (logo sito sotto i <782px)
- Site e-mails logo (logo del template email [jpg o png, svg causa problemi di recapito email])
- Site backend logo (logo accesso wp admin)
Preferenze style e colori
- Select extra sections row decorations
- Grazie a questa opzione, i blocchi inseriti all’interno dei contenuti, con background colorato e classe css “decorated”, saranno decorati con la decorazione selezionata.
- Default colors
- Colori primario e secondario definiscono definiscono il colore dei link (primario) e dei link in fase attiva (secondario), tali colori sono usati nello schema colore del sito in maniera prevalente, danno colore ai bottoni di default e alle voci di menu se non definite; le variabili css per richiamare primario e secondario sono, rispettivamente, var(–color-link) e var(–color-link-hover).
- Impostare i colori primari per i tasti WooCommerce, i primary sono tutti i tasti principali (add to cart, checkout, place order), i bottoni default di WooCommerce (seconda riga di opzioni), ereditano i colori primario e secondario,. Possono essere impostati i colori dei prezzi.
- Menu colors
- Colore menu (background del menu principale del sito)
- Colore menu “.scrolled” (quando il menu è compatto, assume il colore impostato in questa opzione)
- Colore mobile menu (colore sotto i 782px, Auto eredita il Colore menu)
- Colore topbar (background della barra top sopra il menu principale)
- Menu items colors
- Per ogni stato menu, è possibile definire il colore delle voci di menu in stato di normalità e di active.
- Footer colors
- Footer top color (definisce il colore della parte superiore del footer)
- Footer bottom color (definisce il colore della parte inferiore del footer)
- Social colors
- Se attive, le icone social appariranno in header o footer, qui è possibile definirne i colori
- Valore CSS background color #page
- Se impostato, permette di definire un background color generale per il sito
Impostazioni layout
- Tipo di anteprime (definisce il tipo di anteprime dei post nelle pagine blog e archivio categoria o tag)
- Header type (definisce il tipo di header del sito)
- Footer type (definisce il tipo di footer utilizzato [numero blocchi e disposizione])
- Utility links type (nel blog, saranno presenti i link per visitare e commentare un articolo, possono essere in modalità icona o testo)
- Site layout (definisce limiti e margini del sito)
- Titolo sito personalizzato (solo su home template, permette di rimpiazzare l’H1 della pagina, di default sarebbe il nome sito)
- Tagline personalizzata (viene rimpiazzato il “Motto” del sito WP con questo H2)
- Classi CSS per breadcrumbs (si definiscono i valori di default [spesso i defaults sono stabiliti via css])
- Opzioni misc:
- Rendi menu trasparente (rende il menu trasparente, consentendo di vedere al di sotto di esso [il valore menu color deve essere “transparent”])
- Use titles after featured images (permette di indicare di default, su tutte le pagine che il titolo si posizioni fuori dalla featured image [potrebbe essere necessario stabilire nel css principale un’altezza di default per la hero image])
- Attiva top bar (mostra una barra superiore con menu a destra e area user a sinistra, usa il menu impostato come “Menu di supporto”)
- Mostra tagline (permette di mostrare il motto del sito insieme al logo, nell’header principale)
- Hide footer logo (nasconde il logo presente nel footer)
- Mostra social links in header (permette di visualizzare i link social nell’header principale del sito)
- Nascondi header search (nasconde lo strumento di ricerca presente di default di fianco al menu)
- Posizione articoli correlati (mostra articoli correlati nella sidebar prima degli widget impostati su Aspetto->Widgets->Sidebar principale)
- Header search stile (permette di scegliere la tipologia di visualizzazione dello strumento di ricerca)
- Usa taxonomy personalizzata per correlati (permette di visualizzare tra i correlati, articoli appartenenti a categorie invece che tag in comune)
Opzioni contenuti
Impostazioni di default per pagine generali e strumenti del sito in frontend.
- Nascondi date pubblicazione (nasconde le date di pubblicazione degli articoli)
- Non usare immagini segnaposto (se impostato, le pagine, articoli o altri contenuti pubblici saranno visualizzati senza featured image [background colore primario])
- Immagine default Blog image ID (id dell’immagine dalla libreria dei media che viene utilizzata nella pagina principale del blog)
- Default placeholder image id (utilizzata nelle featured image o hero image [se l’opzione precedente è disattivata] e nelle anteprime blog)
- Custom message user
- Custom message user (nella topbar, se attiva, appare di default il link di accesso all’area utente, altrimenti l’html impostato in questo campo)
- Nascondi hello user rimuove completamente la parte sinistra della topbar
Avvisi, notifiche, popup e privacy
- ID del post per PopUp
- Usare questo campo impostando l’ID del Reusable block che apparirà sul sito alla prima visita dell’utente, per visualizzare l’ID, accedere al blocco e visualizzare l’ID nella barra indirizzo.
- Tip: consiglio di riutilizzare il blocco riutilizzabile PopUp dopo averlo ripubblicato, è configurato in tal modo da avere dei gruppi con classi css per apparire correttamente, sostituire grafica e link può essere la migliore soluzione.
- Costom cookie name
- Si usa per resettare una promozione e fare in modo che chi ha chiuso il PopUp nell’ultima settimana lo riveda senza richiamarlo dal tasto promo.
- ID del post in golden area
- Permette di impostare avvisi o altre informazioni nell’area in basso a destra del frontend, l’utilizzo è il medesimo dell’ID per il PopUp.
- ID exit popup
- Può essere impostata una exit popup, che appare quando il mouse esce dall’area del sito o del browser.
- Custom Cookie modal title
- Permette di personalizzare il titolo della modale di avviso cookie.
- Privacy policy page ID
- Se impostato genera il link privacy policy nel footer, crea un link in tutti i form di contatto, collegati all’accettazione trattamento dati e attiva l’apparizione della Cookie modal.
- No Cookie modal
- Inibisce l’apparizione della cookie modal, utile per l’integrazione di sistemi compliance avanzati con selezione granulare (cookiebot, iubenda, others…).
Sistema compliance GDPR integrato
Questo sistema è pensato per rendere il sito sicuro dal punto di vista tecnico.
La corretta integrazione del sistema di consenso deve essere effettuata tramite Google Tag Manager.
Importazione del container
(in aggiornamento)
Il container va impostato come segue, importando la configurazione json sottostante:
Scarica il file di importazione
- Accedere all’account Google Tag Manager collegato al proprio sito
- Selezionare la tab Admin
- Selezionare “Importa container”
- Dopo aver estratto il file json dallo zip scaricato, caricarlo su “Choose container file”
- Scegliere le impostazioni di importazione preferite (merge è consigliato)
- Verificare le variabili e modificare il codice GA4 per la variabile “WellPlay Monitoring G4 code”
A questo punto, il container è configurato per interagire con il sito.
All’accesso al sito, nessun tag di tracciamento viene lanciato fino al consenso.
Se l’utente sceglie uso tecnico, viene attivato il tag GA4 per scopi di analisi dell’uso del sito con IP anonimo.
Se l’utente accetta tutte le condizioni, viene attivato il tag GA4 con IP (dato personale raccolto).
Questa configurazione consente di essere compliance dal punto di vista tecnico, ma deve essere configurata secondo le necessità espresse da chi utilizza gli strumenti di misurazione e tracciamento, che deve descriverne l’utilizzo che se ne fa in caso di consenso, così che le descrizioni siano visibili nella cookie modal in modo da garantire una selezione granulare ed essere compliance quando il sito integrerà strumenti marketing digitale.
Per una descrizione automatica dell’uso che si fa dei cookies di terze parti, sono integrabili strumenti quali CookieBot o Iubenda, che consentono la stessa conformità tecnica attuale, ma un database di argomenti per descrivere l’uso di ogni tag che può essere attivato sul sito.
FB e Social links
Questas pagina di opzioni, contenuta nel menu Theme options -> FB e Social links, permette di configurare i link social.
Valorizzando i campi, appariranno i link social nelle sezioni prestabilite (header e footer se attivi, vedi Theme options: Impostazioni layout).
Home / Blog
In questa pagina si impostano le caratteristiche generali del template “Home” e della index, ovvero la pagina generale degli articoli (Blog).
- Nascondi Site intro
- Tutta la sezione del contenuto home viene nascosta.
- Nasconti Site titoli intro
- Nasconde solo il nome del sito e il motto che appaiono sotto lo slider iniziale del template “Home”.
- Inserisci classe CSS per home #primary
- è possibile definire css aggiuntivo per la pagina con template “Home”.
- Titolo Blog
- H1 della pagina del blog che contiene tutti gli articoli.
- Blog description
- Compone la descrizione del blog nella pagina con template “Home” (pre-footer anteprima blog e pagina generale articoli)
- Blog area CSS class (Home template)
- Permette di impostare una classe css per l’area blog nel template “Home”.
- List type in blog section (Home template)
- Tipo di anteprime dei post in home
- Number of posts in home
- Numero massimo di anteprime in home
- Config home slider
- Con queste pozioni è possibile impostare di default un diverso tipo di contenuti per lo slider della home:
- Home slide custom post type to display
- Default is home_slide
- Home slide custom taxonomy
- Default is post_tag
- Home slide terms to display
- Default ” (insert terms slug separate by comma)
- Home slide image crop
- Dimensione del ritaglio slides
- Home slide custom post type to display
- Con queste pozioni è possibile impostare di default un diverso tipo di contenuti per lo slider della home:
About Us (on footer)
Impostazioni area footer, campo descrittivo, codici per recaptcha contect form e indirizzo generale (template Contatti e Lavora con noi).
- Testo widget contatti footer e template Contatti
- I campi descrittivi permettono di aggiungere un blocco di testo sotto il logo footer.
- Il campo dedscrittivo alternativo appare nel template Contatti.
Impostazioni credits in basso.
Indirizzi e Numeri
- Indirizzo email generale
- Usato per l’invio delle email su tutti i contactform integrati nel sito (sistema shortcode delò tema)
- Indirizzo email alternativo
- Telefono principale
- Usato nelle Call to action Modal (impostazioni pagina “Campi extra del tema -> Modal“) come numero di telefono di default, viene sostituito dall’impostazione che viene eventualmente configurata in pagina.
- Telefono secondario
- Per uso interno, richiamabile tramite codice.
- Copyright area
- Contiene i contenuti legali del footer del sito, generalmente utilizzato per i dati aziendali.
Richiama indirizzo email alternativo:
$theme_opt = get_option('theme_option_name');
$phone_secondary = isset($theme_opt["general_listing_contact"]) ? $theme_opt["general_listing_contact"] : null;
Richiama indirizzo email Work with us:
$theme_opt = get_option('theme_option_name');
$phone_secondary = isset($theme_opt["general_rivenditori_contact"]) ? $theme_opt["general_rivenditori_contact"] : null;
Richiama numero di telefono secondario:
$theme_opt = get_option('theme_option_name');
$phone_secondary = isset($theme_opt["general_phone2_contact"]) ? $theme_opt["general_phone2_contact"] : null;
E-mail template
Queste opzioni permettono di modificare i messaggi default di autorisposta quando si sottoscrivono form integrati (metodo shortcode descritto in “Shortcodes: the_contactform”).
Inserire contenuti addizionali alle autorisposte può essere utile per inviare contenuti specifici attraverso tutti i form del sito. Per farlo, si può creare un blocco riutilizzabile. Si consiglia di non utilizzare materiale troppo pesante, o comunque realizzare blocchi semplici senza troppo codice HTML per evitare di finire in spam.
Guida alle Classi CSS del tema
Coming soon