Chissà quante volte avrete pensato di creare una strip, o una riga utile sopra l'intestazione (header) di un tema WordPress o magari di un tema child WordPress Genesis.  A me, per esempio, è una cosa che è capitata molte volte e molto spesso sono dovuto ricorrere a dei plugin dal momento che avevo, proprio con WordPress Genesis, difficoltà a farlo, ma stavolta mi sono impegnato ed ho deciso di trovare una soluzione personalizzata, che voglio condividere con voi.

WordPress Genesis top bar

A cosa può servire una "top bar" da posizionare sopra l'header del tema? In realtà gli usi possono essere molteplici vediamone alcuni:

oppure una qualsiasi altra cosa che vi possa venire in mente per personalizzare il vostro sito web e dargli diciamo cosi un tocco di originalità.

Creazione del Widget

Andiamo a creare la nostra area e nel mio caso mi è venuto in mente di farne addirittura due, una a sinistra ed una a destra, e quindi creiamo una "top bar" area che sarà divisa in due, una parte a sinistra che chiamerò "Top bar left" ed una parte a destra il cui nome sarà "Top bar right" e per farlo ho scritto questo snippet di codice da inserire nel file functions.php del nostro tema:

Non appena salvato, nel backend del nostro WordPress Genesis Child Theme, sotto la voce Aspetto ---> Widgets compariranno due nuove aree, appunto con i nomi di "Top Bar Left" e "Top Bar Right" che dovrebbero dare la possibilità di poter inserire testo, codice HTML o altro.

Ma ancora queste aree non saranno visibili nel frontend del nostro sito web costruito con WordPress Genesis, per renderle visibili dobbiamo inserire ancora un po' di codice, quindi vi sottopondo altri snippets di codice da inserire appunto nel file functions.php:

A questo punto la nostra "top bar" sarà effettivamente visibile, ma per avere alla fine il corretto risultato sarà necessario inserire gli opportuni aggiustamenti visivi e abbiamo bisogno di utilizzare un po' di CSS che inseriremo nel file style.css del nostro tema child di WordPress Genesis:

Finalmente otteniamo il risultato sperato. Naturalmente potete e dovete modificare il codice per rendere il tutto adeguato al vostro tema child di WordPress Genesis. Ma si potrebbe presentare un problema, a volte di non facile soluzione: cosa potrebbe succedere se il nostro header è "sticky"?

Per chi non lo sapesse un header sticky e un header che rimane fisso in cima alla pagina, sempre, anche quando si utilizza la rotellina del mouse o la barra laterale per scorrere più o meno velocemente la pagina.
Questo appunto potrebbe essere un vero fastidio perchè ci ritroveremmo l'header fisso ed invece la "top bar" che scorre insieme alla pagina e questa, probabilmente, è una cosa che. dal punto di vista estetico, non va troppo bene e non è bello da vedere.
Alla fine però, la cosa si può risolvere sempre tramite CSS, mettendo "sticky" cioè fissa anche la "top bar" e visto che abbiamo dato alla nostra top bar una classe CSS apposita chiamata, guarda caso, .top-bar aggiungerò, aggiungeremo, al codice CSS prima illustrato, anche queste istruzioni:


.top-bar {
/* Fixed Options */
z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;
}

Un riepilogo di tutto il codice lo potete trovare a questo Link/Gist con tutti i codici del tutorial che ho messo nel mio account Git-Hub per renderlo disponibile e condividerlo con tutti coloro a cui potrebbe servire, poi magari potreste trovare qualcos'altro che vi possa essere utile per i vostri codici e/o lavori vari.

Molte volte è necessario mantenere i titoli dei post più corti possibile, per farli entrare correttamente in una vista di un blog, o per altri motivi. Il modo migliore per dare un taglio al titolo e posizionarlo nel modo giusto, qualsiasi sia la sua lunghezza totale è quello di intervenire via codice.

Lo si può fare facilmente con questo snippet di codice da inserire nel file functions.php :

Come si può vedere nel codice, la variabile $max viene utilizzata per limitare la lunghezza del titolo del post. Si può cambiare in qualsiasi numero, ma c'è da tenere presente che la lunghezza ottimale del titolo è compresa tra 55 e 60 caratteri, ottimale, ma non obbligatoria.

Poi, infine, per utilizzare la funzione sopra descritta, c'è da inserire un filtro di una riga nel template del tema desiderato che richiama la funzione stessa dove serve:

add_filter( 'the_title', 'max_title_length');

Anche WordPress Genesis ovviamente usa la sua favicon di identificazione. ma cos'è una favicon? Una favicon, il cui termine è l'abbreviazione dall'inglese favorite-icon ovvero icona dei preferiti, è una piccola immagine associata al tuo sito web che viene in genere visualizzata nella barra degli indirizzi del browser, nel menu Preferiti, nel menu dei segnalibri o nella scheda del browser.

WordPress Genesis: come cambiare la favicon

La favicon di Genesis è una "G" stilizzata che rappresenta in pratica il logo di WordPress Genesis e in realtà si può sostituire in modo molto semplice:

Step.1 - Creare il file favicon.ico

Generalmente, le favicon sono di 16 × 16 pixel e devono essere salvate come file, con il nome "favicon.ico". Il nome deve essere esattamente questo oppure il browser non lo riconoscerà. A causa delle piccole dimensioni, il design dovrebbe essere semplice e facilmente riconoscibile, "iconico" per cosi dire. Ad esempio, l'icona "G" di WordPress Genesis è semplice, riconoscibile e facile da vedere anche in questa piccola dimensione.

Si può usare un qualsiasi editor di immagini per salvare l'immagine in dimensione pixel di 16 × 16, ma per fortuna in rete si possono trovare diversi strumenti online per creare il file favicon.ico, anche modificando o convertendo un file grafico, jpg, gif o png:

Ad esempio Dynamic Drive FavIcon Generator è un tool online che permette di caricare una immagine per generare la favicon oppure favicon.cc permette addirittura anche di disegnarla online da zero oppure di importare una immagine e modificarla, ma ovviamente ce ne sono tanti altri, tutto quello che bisogna fare è cercare online quello che più ci piace.

Step.2 - Caricare il file favicon.ico nella directory del tuo tema WordPress

Il file favicon.ico viene riconosciuto e caricato automaticamente se si trova nella directory principale del tema WordPress, in questo caso potrebbe essere il tuo WordPress Genesis Child Theme ad esempio: /wpcontent/theme/ilmiochildtheme oppure un altro tema WordPress Genesis o un altro tema generico. Per esempio nel tema Agency si trova in /wp-content/themes/agency/images/favicon.ico, nel caso abbiate in utilizzo questo tema è sufficiente caricarlain questa directory via FTP ed il gioco è fatto.

Volendo si può anche intervenire via codice nel vostro tema child di WordPress Genesis e per chi lo vuole fare vi fornisco questo snippet di codice da inserire nel file function.php del vostro child theme, o con url diretto oppure con url relativo:

Ancora quello che abbiamo fatto nei precedenti due articoli non è sufficiente per ottenere un tema base simile, ma non uguale a quello fornito dal framework WordPress GENESIS, quindi andiamo a creare il file functions.php nella cartella del nostro WordPress Genesis child theme e ad iniziare l'impostazione delle funzioni di base che ci servono per i nostri utilizzi.

Iniziamo aggiungendo queste linee di codice all'inizio del file functions.php:


// Start the engine
require_once( get_template_directory() . '/lib/init.php' );

WordPress Genesis: child theme function.php

Il framework e le funzioni di Worpdress Genesis sono accessibili dalla cartella del tema genitore /lib/init.php, se gli diamo una breve occhiata ci rendiamo conto che in pratica questo file è effettivamente il "function" file del tema base di WordPress Genesis, infatti viene chiamato in causa anche dal il file function.php di WordPress Genesis che sta, come in tutti i temi di WordPress nella cartella principale.

Ma questo ancora non risolverà il problema del nostro layout che non apparirà come pensiamo.
Guardando meglio nel file init.php ne capiamo il motivo: più o meno alle linee da 66 a 73 sono disabilitate le funzioni per HTML5, per il responsive e del footer per il child theme, probabilmente una delle ragioni per cui viene fatta questa cosa è per gestire la compatibilità del framework WordPress Genesis con le versioni precedenti, però a noi queste funzionalità possono essere utili per il nostro tema per cui andiamo ad abilitarle ed inseriamo queste righe nel nostro file functions.php:

// Start the engine
require_once( get_template_directory() . '/lib/init.php' );add_theme_support( 'html5' );
add_theme_support( 'genesis-responsive-viewport' );
add_theme_support( 'genesis-footer-widgets', 3 );

E cosi aggiungiamo il supporto per il codice HTML5 con tutti i suoi elementi, il meta-tag viewport che ci servirà per rendere il nostro sito responsive ed un supporto per gestire il footer del child theme.

Una ulteriore aggiunta potrebbe essere la funzione per gestire il background personalizzato con una immagine o dei colori di sfondo attraverso il backend di WordPress in modo da poter controllare tutto questo sotto Aspetto > Background e per farlo basta semplicemente aggiungere questa linea di codice:

//* Add support for custom background
add_theme_support( 'custom-background' );

A questo punto il nostro tema child per WordPress Genesis è pronto e possiamo andare veramente a personalizzarlo con tutto quello che ci serve senza timore che gli aggiornamenti futuri del tema principale del framework WordPress Genesis ci creino problemi. Avanti cosi e buon lavoro.

Andiamo a creare il nostro child theme per il framework WordPress Genesis partendo da zero mantenendo per ora il look base Genesis ed includiamo il supporto per HTML5 un widget per il footer, la possibilità di personalizzare lo sfondo ed abilitiamo le impostazioni viewport per il design responsive del tema.

Installare WordPress GENESIS Framework

Per prima cosa abbiamo bisogno di scaricare da Studiopress il framework WordPress Genesis e caricarlo nel nostro sito WordPress proprio come fosse un tema qualsiasi, quindi da Aspetto -> Temi -> Aggiungi Nuovo e poi cliccando su "carica tema".
Ma dopo averlo caricato non è necessario attivarlo, dovremo invece attivare il nostro child theme e vedremo più avanti come.

Creare il Child Theme

Ora andiamo a creare il child theme di WordPress Genesis come si crea qualsiasi altro child theme per WordPress: creiamo una sottodirectory all'interno della directory themes di WordPress (wp-content/themes/) ed andiamo a chiamarla ad esempio "genesischild" oppure con il nome che più vi piace per definire il vostro tema.
Creiamo per prima cosa il file style.css all'interno di questa directory con il contenuto seguente:

Theme Name - E' il nome del child theme, ovviamente da personalizzare a piacimento. Theme URI - E' il collegamento dove questo child theme può essere scaricato. Description - Qui si può inserire una breve descrizione del tema e tutte le caratteristiche per le quali è stato creato. Author - Inserire qui il nome dell'autore o della società che ha sviluppato il tema. Author URI - E' il collegamento al sito di chi ha sviluppato il tema. Version - Dove si può specificare la versione del tema per tenerlo aggiornato. Tags - Qui si possono specificare certe caratteristiche del tema per individuarlo o cercarlo velocemente Template - Indica che il tema è un child theme e richiede la versione principale del framework Genesis per funzionare correttamente. Template Version - E' la versione minima di Genesis Framework richiesta per il corretto funzionamento. License - Per specificare il tipo di licenza per il rilascio del tema. License URI - Il collegamento al sito delle specifiche della licenza.

Poi l'unica riga in più che abbiamo dopo le impostazioni di base di WordPress è:

@import url('../genesis/style.css');

che va ad importare le impostazioni di base di stile fornite dal framework WordPress Genesis.

Dopo aver fatto queste semplici operazioni si potrà attivare il nuovo child theme dal backend di WordPress in Aspetto > Temi.

Come si può vedere, ovviamente, non compare una immagine per il tema. Questa è una operazione opzionale che possiamo fare anche in un secondo tempo, basta semplicemente crearsi una propria immagine, nominarla  screenshot.png  e caricarla nella directory del child theme che abbiamo creato. Il formato del file consigliato per WordPress è PNG, ma sono estensioni valide anche JPG, JPEG e GIF. La grandezza dell'immagine raccomandata è di 1200px in larghezza e 900px in altezza.

In pratica ora, attivando il child theme, potreste iniziare a lavorare solo che l'aspetto del Vs. sito non sarà quello desiderato dato che il nuovo child theme ancora non ha delle impostazioni di base e non ha praticamente nessuna istruzione riguardante il suo funzionamento.

Differenze tra il tema principale ed il tema child

Wordpress Genesis Theme Wordpress Genesis child theme

WordPress Genesis di default non viene eseguito come HTML5 e non visualizza lo stesso schema strutturale con le larghezze di pagina pixel anche utilizzando lo stesso CSS del genitore, questo è dovuto al fatto che è necessario abilitare queste funzionalità nel child theme di WordPress Genesis.
C'è anche da dire che noi abbiamo "importato" lo schema base CSS del framework con questa istruzione:
@import url('../genesis/style.css');
ma facendo in questo modo siamo legati a questa cosa ed al fatto che se cambiasse qualcosa quando il framework WordPress Genesis viene aggiornato rispetto allo schema base CSS, verrebbe cambiato anche nel nostro child theme.
Ma noi vogliamo che il child theme abbia la nostra struttura, quella che abbiamo ideato e che abbiamo in mente, quindi è opportuno che togliamo questa istruzione e creiamo appositamente le nostre istruzioni CSS.
Per adesso ci accontentiamo di copiare lo stile di base di WordPress Genesis che poi andremo a modificare, per questo facciamo un copia/incolla dal tema principale (wp-content/themes/genesis/style.css) e copiamo dalla riga:
/* Table of Contents
fino alla fine del file, incollando tutto nel file style.css del nostro child theme.

Il miglior approccio per personalizzare un tema di WordPress esistente ed anche quello consigliato da tutti è quello di utilizzare un child theme, per WordPress Genesis è la stessa cosa. Un child theme non è altro che un tema separato che memorizza tutte le tue specifiche personalizzazioni, partendo però dal tema esistente. In questo modo se aggiornate il tema genitore, in questo caso WordPress Genesis, non perderete tutto il duro lavoro fatto.
Se poi si lavora con un framework allora questa operazione, non solo è consigliata, ma è basilare per il corretto funzionamento del vostro tema. WordPress Genesis non è da meno, anzi quando tentate l'installazione di questo framework sarà lui stesso che vi consiglierà di farlo direttamente dal backend di WordPress.
I due vantaggi principali nel creare un child theme sono in primo luogo che avrai un tema contenente solo le tue specifiche personalizzazioni con la facilità di avere il controllo delle operazioni per capire dove si possano annidare problemi senza dover scavare (e poi anche interpretare) una tonnellata di codice che fra l'altro non avrai scritto personalmente.
In secondo luogo, se usi sempre lo stesso framework (nel nostro caso ovviamente WordPress Genesis), tutto il codice sviluppato per un progetto dovrebbe poter essere facilmente riutilizzabile su tutti i progetti futuri. Naturalmente questo dipende da te e dal tuo opportuno utilizzo di
actions e filters, nonchè degli hooks implementati nel framework.

WordPress Genesis Hooks: che cosa sono e perché ne avete bisogno.

Un hook è uno strumento che ti permette di "agganciare" il tema genitore in un determinato punto. Una action ti consente semplicemente di eseguire il codice in un determinato punto. Un filter consente di modificare le informazioni che verranno utilizzate dal tema.

Per capirne il funzionamento facciamo due esempi: (importante: nota che sono esempi che possono essere eseguiti ed utilizzati in qualsiasi tema wordpress).

wp_footer è una action di WordPress che permette di eseguire il codice in fondo alla tua pagina. Ad esempio, se voleste aggiungere il codice di monitoraggio di Google Analytics al fondo di ogni pagina, basta inserire questo snippet code nel file function.php del vostro tema:

excerpt_length invece è un filter che consente di modificare il numero di testo visualizzato quando si utilizza the_excerpt() nel tema. Per impostazione predefinita da WordPress, esso restituisce 55 parole se, per esempio, avete la necessità di usare invece 35 parole, potete inserire questo snippet code function.php:

In questo modo operando in sicurezza dal tuo child theme è possibile apportare facilmente tutte le modifiche necessarie e aggiornare temi e framework senza perdere il proprio lavoro.

-> Vai alla seconda parte

Copyright © 2023 - P. Iva 02677660546


Another project made with

by Marco Brughi
Città di Castello - Perugia - Arezzo - Firenze
Privacy Policy Cookie Policy
heart