Tutorial: animare le media query

Animare gli elementi della pagina al resize della finestra del browser è semplicissimo. Serve a qualcosa? No! Aumenta i tempi di caricamento? Assolutamente sì. È divertente? Of course!

In questo esempio ho animato il resize delle colonne di un eventuale layout:

<div class="main"> <div class="sub sub1"> foo </div> <div class="sub sub2"> foo </div> <div class="sub sub3"> foo </div> </div> <style> * { transition: all .5s ease-in-out; box-sizing: border-box; } body { background-color: grey; height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center; } .main { border: 1px solid tomato; width: 300px; height: auto; padding: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .sub { background-color: darkseagreen; color: white; padding: 1rem; margin: .5rem 0; display: inline; } .sub1 { width: 100%; } .sub2, .sub3 { width: calc(50% - .5rem); } @media screen and (max-width:900px) { .sub { background-color: tomato; } .sub2, .sub3 { width: 100%; } } </style>
Code language: HTML, XML (xml)

Il selettore * seleziona tutti gli elementi all'interno del file. A questo o applicato una semplice transizione ease-in-out. Di conseguenza la parte che veramente interessa è:

* { transition: all .5s ease-in-out; box-sizing: border-box; }
Code language: CSS (css)
Link alla pen qui sotto

See the Pen Animated media queries by Francesco (@Francesco_Maretti) on CodePen.

Trucchi e stranezze in CSS

CSS non è un linguaggio noto per la sua difficoltà, al contrario: a differenza di altri linguaggi del web è possibile impararne le basi in tempo relativamente breve e con strumenti gratuiti e a disposizione di chiunque ne voglia far uso. Nonostante questo, però esistono delle stranezze in CSS che probabilmente non tutti conoscono e che possono trasformare un facile progetto in un incubo di !important non necessari.

Le peculiarità di CSS sono talmente tante che aggiornerò questo post in più fasi.

I margini si sovrappongono

Prendiamo come esempio questo codice:

<div style="margin-bottom: 20px; padding:10px; background-color: tomato">foo</div> <div style="margin-top: 20px; padding:10px; background-color: darkseagreen">foo</div>
Code language: HTML, XML (xml)

A rigor di logica le due div dovrebbero avere margine 40px (20px + 20px), giusto? Sbagliato.

foo
foo

In CSS i margini si sovrappongono e non si sommano tra loro.

Height: 100% deve avere un parent con altezza stabilita

Stesso discorso vale per width: 100%. Se l'elemento genitore non ha una dimensione allora height e width non funzioneranno nel modo che ci aspettiamo.

<html> <body> <div style="height:100%; background-color: darkseagreen;"></div> </body> </html>
Code language: HTML, XML (xml)

Viceversa, se applichiamo un'altezza qualsiasi al container genitore allora:

<html> <body style="height:20vh"> <div style="height:100%; background-color:darkseagreen;"></div> </body> </html>
Code language: HTML, XML (xml)

In questo modo il contenuto occuperà tutto lo spazio in altezza lasciato dal contenitore.

Si possono targettare gli attributi

Forse non tutti sono a conoscenza che, in CSS; è possibile selezionare gli elementi utilizzando il loro attributi: nell'esempio ho usato come target l'attributo custom-attribute e ho applicato lo pseudo-selettore :not per escluderlo dalla mia selezione.

<div class="demo-container"> <div custom-attribute="attribute" style="background-color: tomato; padding:10px; margin-bottom: 20px;">foo</div> <div style="padding:10px; margin-bottom: 20px;">foo</div> <div custom-attribute="attribute" style="background-color: tomato; padding:10px; margin-bottom: 20px;">foo</div> </div> <style> .demo-container div:not([custom-attribute]) { background-color: darkseagreen } </style>
Code language: HTML, XML (xml)
foo
foo
foo

Si possono popolare le proprietà content con gli attributi

Gli attributi possono essere utilizzati per popolare dinamicamente certi contenuti.

<a custom-tooltip="Vai al mio link" class="demo-link" href="https://miolink.com">Questo è il mio link</a> <style> .demo-link { position: relative; width: 150px; padding: 5px 10px; color: white; background-color: darkseagreen; } .demo-link:before { position:absolute; content: attr(href); width:100%; height:100%; padding: 3px 6px; top: 0; left: calc(100% + 6px); background-color: gray; text-align:center; } </style>
Code language: HTML, XML (xml)

In questo caso ho utilizzato l'attributo href per popolare il contenuto dello pseudo-elemento before .

Questo è il mio link

Questi sono solo alcune delle "stranezze" e delle peculiarità di CSS. Continuerò ad aggiornare la lista man mano che incontrerò di nuovo (o per la prima volta) le strane e poco usate implementazioni di questo linguaggio.

Proteggere un sito WordPress in modo semplice

WordPress è uno dei CMS, ovvero dei sistemi per la pubblicazione di contenuti, più diffusi: basti pensare che, ad oggi, il 64% dei siti che utilizzano un CMS al mondo è basato su WordPress. Se da un lato questo è un tributo alla piattaforma, dall'altro significa anche che c'è più interesse da parte di hacker e malintenzionati a voler "bucare" il sistema.

Lasciare libero accesso al proprio sito significa consentire ad eventuali hacker di rubare informazioni sensibili riguardo i propri utenti, oltre a rischiare di venire penalizzati da Google. È responsabilità del gestore di un sito, come quella del proprietario di un negozio "fisico", di proteggere il proprio business al meglio delle proprie possibilità.

Questa necessità non deve però spaventare: utilizzando delle semplici strategie è possibile eliminare quasi totalmente la possibilità di trovare il proprio sito esposto a potenziali attacchi. Queste (e altre) sono le strategie che utilizziamo su tutti i siti prodotti da Froglab: alcune sono semplici pratiche di buon senso, altre invece non sono così banali.

La strategia del buon senso

Utilizza password e username sicuri

Il primo intervento da effettuare è quello di utilizzare un nome utente e una password sicuri. Utilizzare come nome utente "admin" significa dare agli hacker già metà delle chiavi di accesso al proprio sito; allo stesso modo è necessario utilizzare una password complessa, in modo da rendere più complicato l'accesso. Consiglio l'uso di password alfanumeriche che contengano anche simboli. Più la password è senza senso e complessa più sarà difficile da trovare. È possibile fare un divertente test sulla sicurezza delle password su questo sito e verificare di persona quanto tempo (teoricamente) un hacker impiegherebbe a crackare una password.

Animazione di inserimento passwrod
Da zero secondi a 21.000 anni in pochi secondi

L'utilizzo di password complesse è buona prassi in qualsiasi occasione e non deve assolutamente essere un deterrente il fatto che siano difficili da ricordare: non è necessario memorizzare le proprie password. Basta utilizzare un qualsiasi programma di gestione password (come 1password o LastPass, per fare degli esempi commerciali) o sfruttare la funzione di memorizzazione password del proprio browser.

Fai backup frequenti

La seconda strategia è quella di ricorrere a backup frequenti: spesso sono gli stessi hosting ad offrire questo servizio, incluso nel proprio pacchetto o come add-on. Di prassi in Froglab abbiamo backup programmati on-server (sul medesimo server del sito) e off-server (ovvero su altro server, diverso da quello del sito) per tutti i nostri siti. Quanto frequenti debbano essere sta alla volontà del singolo e al tipo di sito: un e-commerce o un blog necessiteranno di backup più frequenti (giornalieri) rispetto ad un sito statico.

Mantieni il numero di plugin al minimo

Maggiore è il numero di plugin utilizzati maggiore sarò il pericolo per la sicurezza e l'integrità del sito. Non si tratta di malafede da parte degli sviluppatori, ma di un semplice calcolo statistico: basta un solo plugin "bucato" per compromettere completamente il lavoro svolto; più sono i plugin utilizzati maggiore sarà il pericolo.

Serve quindi razionalizzare il numero di plugin utilizzati e trovare alternative, laddove possibile.

Schermata della repository di WordPress
Una delle categorie di plugin più ridicola è quella degli scroll to top: un plugin può essere letteralmente sostituito da una linea di codice CSS.

Mantieni WordPress aggiornato

È vitale mantenere WordPress e i plugin installati il più possibile aggiornati. Questo non significa necessariamente aggiornare sempre i plugin all'ultima versione disponibile, perché questo potrebbe creare problemi di compatibilità tra le versioni di WordPress e i plugin stessi. Per sapere se un plugin è testato con la propria versione di WordPress è necessario controllare il changelog dell'aggiornamento nella sezione plugin della bacheca.

Schermata di changelog su WordPress
Schermata di changelog per un plugin di WordPress

Attiva SSL sul sito

SSL sta per Secure Socket Layer ed è un protocollo che cripta i dati trasferiti dal sito al browser, rendendo di fatto queste informazioni sicure e non intercettabili. In genere un sito protetto da SSL è indicato da un lucchetto vicino al dominio nella barra dell'URL e dall'utilizzo del protocollo https invece dei http.

SSL attivato sui browser Chrome e Firefox

Di solito il servizio di SSL è incluso nell'hosting, tuttavia alcuni (Namecheap e GoDaddy, per esempio) impongono l'uso di un protocollo proprietario a pagamento. In questo caso l'unica possibilità é quella di sottostare alla "tassa" imposta oppure di migrare il proprio sito verso un hosting che includa di default l'attivazione di SSL sul proprio dominio.

Usa un hosting WordPress VPS

Utilizzare un hosting condiviso significa spartire il proprio server con un numero variabile di altri siti: un problema di sicurezza su uno qualsiasi di questi può compromettere anche il proprio, semplicemente perché si trova allo stesso "indirizzo". Utilizzando un hosting VPS significa mettersi al riparo da questo tipo di pericoli e ottenere una serie di benefici che vanno al di là della sicurezza. Scopri perché è meglio scegliere un hosting cloud.

Ulteriori step di sicurezza

Cambia la pagina di log-in

Uno degli step essenziali per proteggere un sito WordPress è quello di cambiare la pagina di login che, di default, si trova all'URL www.sitointernet.com/wp-admin. Questo step è essenziale perché tutti gli attacchi brute-force ai siti WordPress sono rivolti verso questo URL: semplicemente modificandolo sarà possibile rimuovere la possibilità di essere vittima di attacchi "di massa" rivolti verso questo indirizzo. Come fare? La strada più semplice è l'utilizzo di un plugin come Change wp-admin login, oppure è possibile modificare il file wp-login.php (fai un backup del file prima di procedere).

Basterà infatti aprire il file e rimpiazzare tutte le occorrenze della stringa wp-login.php al suo interno con il nuovo url per il nostro login, come ad esempio gestione-sito.php e salvare: in questo modo qualsiasi tentativo di raggiungere /wp-admin sarà bloccato e la nuova pagina di login si troverà su www.sitointernet.com/gestione-sito.php.

Usa un plugin per la sicurezza (e mantienilo aggiornato)

Esistono diverse soluzioni per garantire la sicurezza di un sito: una tra queste è l'utilizzo di un plugin specifico per la sicurezza. In Froglab utilizziamo WordFence per tutte le nostre esigenze. Questo plugin ci consente in una volta sola di:

Altri consigli

Esistono altri trucchi che possono aumentare la sicurezza di un sito WordPress, come ad esempio disabilitare l'editing di functions.php oppure cambiare il prefisso delle tabelle del database, tuttavia si tratta di procedure probabilmente troppo complesse per poter essere spiegate in questa occasione: anche solo utilizzando gli stratagemmi di cui abbiamo parlato è possibile diminuire drasticamente il pericolo di un eventuale attacco.

È importante ricordare come sia i nostri dati che quelli dei nostri utenti siano sempre e costantemente da difendere e come recuperare un sito compromesso sia molto più difficile e costoso rispetto a mettere in pratica dei semplici stratagemmi per fare in modo di poter far crescere il proprio sito in sicurezza.

Tutorial: disegnare un feed slider in HTML e CSS

Questo tutorial è ispirato dal feed degli articoli del sito CSS tricks: ho voluto cercare di ricreare un feel simile utilizzando solo HTML e CSS (e solo una punta di Javascript) partendo da zero. In un futuro articolo ho in programma di utilizzare il codice che troverete qui sotto per implementarlo in WordPress e rendere a tutti gli effetti il feed dinamico.

Per quanto riguardo CSS invece, ho utilizzato flexbox per allineare gli elementi e ho fatto uso di variabili e media query oltre che applicare uno styling alla scrollbar.

Schermata con slideshow
Il risultato finale

Struttura HTML

Per prima cosa ho creato una struttura per il feed: si tratta solo di poche div a cui ho assegnato specifiche classi che ho utilizzato più tardi nel CSS.

<div class="main-container"> <div class="main-container_tab"> <div class="main-container_tab_datetitle"> <div class="main-container_tab_date"> Article <span>Jun 3, 2021</span> </div> <h3 class="main-container_tab_title">Quisque id mi</h3> </div> <div class="main-container_tab_photoauthor"> <img class="main-container_tab_photo" src="https://maretti.rocks/wp-content/uploads/2019/12/fav_152.png"> <p class="main-container_tab_author">Francesco Maretti</p> </div> </div> <div class="main-container_tab"> <div class="main-container_tab_datetitle"> <div class="main-container_tab_date"> Article <span>Jun 4, 2021</span> </div> <h3 class="main-container_tab_title">Nullam quis ante</h3> </div> <div class="main-container_tab_photoauthor"> <img class="main-container_tab_photo" src="https://maretti.rocks/wp-content/uploads/2019/12/fav_152.png"> <p class="main-container_tab_author">Francesco Maretti</p> </div> </div> <div class="main-container_tab"> <div class="main-container_tab_datetitle"> <div class="main-container_tab_date"> Article <span>Jun 5, 2021</span> </div> <h3 class="main-container_tab_title">Donec sodales</h3> </div> <div class="main-container_tab_photoauthor"> <img class="main-container_tab_photo" src="https://maretti.rocks/wp-content/uploads/2019/12/fav_152.png"> <p class="main-container_tab_author">Francesco Maretti</p> </div> </div> <div class="main-container_tab"> <div class="main-container_tab_datetitle"> <div class="main-container_tab_date"> Article <span>Jun 6, 2021</span> </div> <h3 class="main-container_tab_title">Quisque id mi</h3> </div> <div class="main-container_tab_photoauthor"> <img class="main-container_tab_photo" src="https://maretti.rocks/wp-content/uploads/2019/12/fav_152.png"> <p class="main-container_tab_author">Francesco Maretti</p> </div> </div> <div class="main-container_tab"> <div class="main-container_tab_datetitle"> <div class="main-container_tab_date"> Article <span>Jun 7, 2021</span> </div> <h3 class="main-container_tab_title">Nullam quis ante</h3> </div> <div class="main-container_tab_photoauthor"> <img class="main-container_tab_photo" src="https://maretti.rocks/wp-content/uploads/2019/12/fav_152.png"> <p class="main-container_tab_author">Francesco Maretti</p> </div> </div> <div class="main-container_tab"> <div class="main-container_tab_datetitle"> <div class="main-container_tab_date"> Article <span>Jun 8, 2021</span> </div> <h3 class="main-container_tab_title">Donec sodales</h3> </div> <div class="main-container_tab_photoauthor"> <img class="main-container_tab_photo" src="https://maretti.rocks/wp-content/uploads/2019/12/fav_152.png"> <p class="main-container_tab_author">Francesco Maretti</p> </div> </div> </div>
Code language: HTML, XML (xml)

La classe main-container indica il container del feed vero e proprio, mentre le singole schede hanno classe main-container_tab. Utilizzando questo tipo di nomenclatura ho cercato di mantenere ordine tra le mie classi, che riflettono la struttura dell'elemento e dei sui elementi figli.

Import dei font e variabili

Per quanto riguarda il CSS, per prima cosa ho importato i font da Google font utilizzando @import e creato le variabili che diventeranno i colori utilizzati per creare il feed. Inserirò i vendor prefixes alla fine, dando per quasi scontato che la gran parte delle persone che lavorino nel web design con browser webkit.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono&display=swap'); :root { --black: #333; --blacker: #4b4b4b; --white: #ededed; --orange: #eea365; --orangest: #ec7456; }
Code language: CSS (css)

L'utilizzo delle variabili in CSS è ancora cosa poco sfruttata: se ne fa uso abbondante nei pre-processori, ma in vanilla CSS vengono spesso dimenticate. In questo caso ne ho fatto un utilizzo blando, limitando a dichiarare come variabili alcuni colori che useremo in seguito (black, blacker, white, orange, orangest). Avrei sicuramente potuto essere più professionale nel dare loro un nome, ma bisogna pur svagarsi ogni tanto. È interessante notare come le variabili, che vengono dichiarate sempre utilizzando lo schema --nomevariabile: valore; siano impostate utilizzando la pseudo-classe :root, che indica l'elemento base della pagina. In sostanza, :root equivale ad html, ma è ancora più specifico.

CSS container principale

Ho organizzato il contenuto del container principale utilizzando flexbox: nello specifico ho impostato la direzione dei suoi elementi figli su una riga (flex-direction: row). Ho anche fatto in modo che la barra di scroll fosse visibile solo in orizzontale (overflow-x: scroll e overflow-y: hidden).

.main-container { display: flex; flex-direction: row; flex-wrap: nowrap; width: 80%; height: auto; padding: 40px; margin: 0 auto; overflow-x: scroll; overflow-y: hidden; border-right: 5px solid var(--orangest); cursor: grab; }
Code language: CSS (css)

La scrollbar grigia di default di Chrome è sicuramente bruttina, ma possiamo darle uno stile con CSS. Questo codice CSS non è ancora supportato da Firefox, che sostituirà la nostra barra custom con quella di default: per evitare che ciò accada ho aggiunto le proprietà scrollbar-width e scrollbar-color che, pur non sortendo lo stesso medesimo effetto, ci si avvicinano abbastanza.

.main-container::-webkit-scrollbar { height: 10px; } .main-container::-webkit-scrollbar-track { background: var(--blacker); } .main-container::-webkit-scrollbar-thumb { background-color: var(--orange); } .main-container { scrollbar-width: thin; scrollbar-color: var(--orange) var(--white); }
Code language: CSS (css)

CSS singole schede

Per quanto riguarda le singole schede, non ho fatto molto se non usare flexbox con le proprietà flex-direction: column e justify-content: space-between in modo da garantire che le due div figlie, quella che contiene data e titolo e quella che contiene foto e nome dell'autore, occupino tutto lo spazio in verticale della scheda. Nota sui gradienti in Firefox: necessitano, per essere supportati, del prefisso moz-linear-gradient e, anche utilizzandolo, il supporto è un po' debole. Personalmente non ritengo che conoscere tutti i prefissi dedicati sia un impiego utile di tempo, quindi preferisco lavorare su Chrome e lasciare il lavoro sporco di inserirli a siti come Autoprefixer. Tuttavia penso sia assolutamente dovuto sapere in anticipo almeno le principali carenze dei maggiori browser per diffusione.

.main-container_tab { min-width: 20%; height: 300px; padding: 20px; background: var(--black); background: linear-gradient(45deg, var(--blacker) 0%, var(--black) 100%); border-radius: 10px; transition: all .5s ease-in-out; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; cursor: grab; } .main-container_tab:not(:first-child) { transform: translateX(-80px); transform-origin: 100%; box-shadow: -5px 0 20px 0 rgba(0, 0, 0, 0.2); } .main-container_tab:hover:not(:first-child) { transform: rotate(5deg) translateX(-120px); } .main-container_tab:first-child:hover { margin-right: 80px; }
Code language: CSS (css)

Per chi si approcciasse per la prima volta all'utilizzo delle pseudo-classi, :first-child e :not sono due esempi classici: la prima consente di selezionare solo il primo elemento figlio, mentre la seconda consente di escludere dalla selezione uno specifico elemento; in questo caso l'istruzione è di non applicare lo stile al primo elemento con classe .main-container_tab, ovvero la prima tab. In questo caso avrei potuto utilizzare anche un'altra pseudo-classe al posto di :first-child, ovvero :nth-child(1), ma, in questo caso, :first-child risulta più elegante, a mio parere.

L'ultimo step per quanto riguarda le schede è quello di dare uno stile al contenuto testuale.

.main-container_tab_date { font-family: 'Roboto Mono', monospace; font-size: .8rem; font-weight: 900; color: var(--white); } .main-container_tab_date span { opacity: .5; font-weight: 500 } .main-container_tab_title { font-family: 'Open Sans', sans-serif; font-weight: 700; color: var(--orange); margin: 0; } .main-container_tab_photoauthor { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .main-container_tab_photo { width: 50px; height: 50px; } .main-container_tab_author { margin-left: 20px; font-family: 'Roboto Mono', monospace; color: var(--white); font-size: .8rem }
Code language: CSS (css)

Media queries

Il tocco finale sono le media queries, che consentono di rendere lo slider responsive. Dato che ho utilizzato percentuali per decidere quanto spazio occupasse ogni singola scheda, è solo questione di ritoccarle per le diverse viewport e il gioco è fatto.

@media screen and (max-width:1300px) { .main-container_tab { min-width: 33%; } } @media screen and (max-width:900px) { .main-container_tab { min-width: 50%; } } @media screen and (max-width:500px) { .main-container_tab { min-width: 100%; } }
Code language: CSS (css)

Fatto questo e testato lo slider su diverse dimensioni di schermo per verificarne il funzionamento, l'unica aggiunta, a parte l'aggiunta di tutti i prefissi dei vendor nel CSS (di nuovo, mi affido al sito Autoprefixer per questo compito), è l'inserimento del codice Javascript che mi ha consentito di rendere le schede "trascinabili" con un click del mouse.

const slider = document.querySelector('.main-container'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 3; //scroll-fast slider.scrollLeft = scrollLeft - walk; console.log(walk); });
Code language: JavaScript (javascript)

Ed ecco, infine, il risultato finale.

Tutorial: script nell'header e nel footer senza plugin su WordPress

Per aumentare le potenzialità di WordPress o anche semplicemente per inserire il codice di tracciamento per Google Analytics è necessario apportare delle modifiche all'header e al footer del nostro sito. Utilizzando il CMS non è immediato capire come inserire questi codici: ad ora non esiste una funzione out-of-the-box che ci consenta di copiare e incollare gli script che desideriamo nella giusta posizione. Per ovviare a questo problema è possibile percorrere tre strade: modificare il template del sito, utilizzare un plugin oppure inserire da soli gli script utilizzando il file functions.php.

Modificando il template del sito

È possibile inserire i propri codici customizzati nell'header e nel footer modificando il template nel tema: modificare il tema non è raccomandato se non si è assolutamente sicuri di quello che si sta facendo, soprattutto se il tema è attivo. Bisogna inoltre tenere conto che, a meno che non siamo in controllo del tema, il primo aggiornamento ripristinerà lo status iniziale e le nostre modifiche riscritte. Per questo, nel caso di temi scaricati o acquistati, è necessario assicurarsi di utilizzare un child-theme per il proprio sito: in questo modo possiamo essere sicuri che nessun aggiornamento rimuoverà il nostro codice e che avremo totale controllo sui nostri script e sulle eventuali modifiche di CSS. Questo non toglie che teoricamente sia possibile inserire script ed altri elementi su un tema attivo e senza child-theme, ma significa anche che è un procediemnto troppo pericoloso per parlarne in questa sede.

Utilizzando un plugin di terze parti

Utilizzare un plug-in per inserire del codice nell'header e nel footer è senz'altro la soluzione più a basso rischio: esistono decine di plug-in in circolazione che permettono di farlo, forse il più diffuso è Insert Header and Footers di WPBeginner, e il rischio di rompere qualcosa è relativo, dato che basta disattivare il plugin per rimuovere i nostri script. Tuttavia non la ritengo una soluzione soddisfacente, perché in WordPress, come in tante altre situazioni, less is more: non vogliamo gestire un altro plugin che si aggiunga a quelli sulla nostra lista e soprattutto non vogliamo rischiare che un aggiornamento sbagliato da parte del developer rischi di rompere tutti i nostri siti, o che qualche hacker sfrutti del codice su cui non abbiamo controllo per scopi illeciti. Detto questo, qual'è la soluzione?

Modificando il file function.php del tema

La soluzione più elegante è senz'altro quella di modificare il file function.php del nostro sito, collocato all'interno della cartella del nostro child-theme. L'esempio nelle immagini è stato realizzato utilizzando Elementor con tema-figlio basato su Hello Elementor, un tema gratuito che è possibile scaricare dalla repository di WordPress, ma si può applicare a qualsiasi tema a patto che si tratti di un child-theme. È possibile raggiungere function.php navigando in Aspetto > Editor del tema e scegliendo funtion.php dalla colonna di sinistra.

Schermata dell'editor WordPress
Functions.php all'interno di un tema figlio

Non tocchiamo il codice già presente, che potrebbe variare su altri temi, e limitiamoci ad aggiungere il nostro codice sotto e senza modificare nient'altro.

/* SCRIPT NELL'HEADER */ add_action('wp_head', 'script_head'); function script_head(){ ?> <!--SCRIPT HEADER--> <?php }; /* SCRIPT NEL FOOTER */ add_action('wp_footer', 'script_footer'); function script_footer(){ ?> <!--SCRIPT FOOTER--> <?php };
Code language: HTML, XML (xml)

A questo punto potremo semplicemente sostituire i placeholder <!--SCRIPT HEADER--> e <!--SCRIPT FOOTER--> con i nostri script, senza mai doverci preoccupare di aggiornare plug-in oppure di non essere in controllo del nostro sito.

Tutorial: cambiare colore dell'header con lo scroll

Che meraviglia gli header trasparenti: danno importanza al contenuto della pagina e permettono di dare più "aria" al design. Cosa succede però al nostro header sticky trasparente quando scrolliamo la pagina? Nella gran parte dei casi diventa completamente illeggibile, perché quello che vale per la nostra hero non sempre vale per il resto del sito. Come risolvere il problema, quindi? Semplicemente con un pizzico di CSS e di jQuery.

Questo tutorial funziona con tutti i temi e tutti i builder in commercio: l'esempio è stato prodotto su WordPress utilizzando Elementor come builder, ma le stesse regole possono essere applicate a qualsiasi sito, costruito o meno con WordPress, a patto che ci sia possibilità di modificare il CSS e di inserire degli script. Il metodo NON è testato con WIX, Squarespace o altri builder commerciali semplicemente perché non li conosco e non posso garantire sulla loro flessibilità.

Schermata di un sito web
;(

Step 1: assegnare una classe all'header

Il primo passo da compiere è quello di assegnare una classe personalizzata al nostro header. Nel caso non fosse possibile allora, utilizzando i Developers Tools (Ctrl+Maiusc+I su Windows e Command+Option+I su MacOS ), dovremo trovare una classe che contraddistingua univocamente il nostro header. Su Elementor la classe di default per gli elementi sticky è elementor-sticky, tuttavia prefersco utilizzare un selettore custom, nel caso elementor-sticky sia utilizzato da qualche altro elemento di cui non vogliamo cambiare lo sfondo.

Per questo tutorial la classe che assegnerò all'header è ilMioHeader.

Schermata di interfaccia di Elementor
Ho assegnato la classe ilMioHeader alla parte sticky dell'header

Step 2: aggiungere il codice jQuery

A questo punto l'header ha una classe personalizzata: il risultato che vogliamo ottenere è quello di cambiarne il colore di sfondo facendo in modo che una nuova classe sia aggiunga a ilMioHeader quando lo scroll supera un tot numero di pixel dal top della pagina. Per raggiungere lo scopo quello che dobbiamo fare è di inserire un piccolo script all'interno del tag <footer> del nostro sito. Per scoprire come farlo senza utilizzare plugin consiglio questo altro articolo. Perché nel footer e non nell'header? Perché il tag si trova prima nel DOM del nostro header, quindi inserendo lo script in quella posizione non succederebbe nulla.

Naturalmente queste operazioni sono consigliate solo e unicamente se stiamo utilizzando un tema child e soprattutto se, in caso di errore, possiamo facilmente accedere all'FTP per, eventualmente, rimuovere il codice e ripristinare il sito al suo stato precedente.

<script> (function($) { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".ilMioHeader").addClass("nuovoSfondo"); } else { $(".ilMioHeader").removeClass("nuovoSfondo"); } }); })( jQuery ); </script>
Code language: HTML, XML (xml)

Cosa significa questo codice? In pratica quello che stiamo facendo è di dire: se scrollo più di 500px dall'inizio della pagina, aggiungi la classe nuovoSfondo alla classe ilMioHeader; viceversa, se la distanza dal top della pagina è inferiore a 500px, allora rimuovi la classe nuovoSfondo.
Per il momento non abbiamo ancora dato nessuno stile alla classe nuovoSfondo, ma possiamo verificare che effettivamente stia accadendo qualcosa utilizzando i Develper Tools.

Schermata di developers tool
La classe nuovoSfondo viene aggiunta in coda alle altre con lo scroll

Step 3: aggiungere il CSS

Come è possibile verificare nell'immagine, ora la nostra classe ilMioHeader fa in modo che, dopo 500px di scroll, alla lista delle classi di quella specifica sezione venga aggiunta una nuova classe chiamata nuovoSfondo. Al momento ancora non succede nulla, perché la classe nuovoSfondo non ha alcuno stile impostato in CSS. Per fare in modo che questo avvenga dovremo ora modificare il nostro foglio di stile.
Dove aggiungere il codice dipende dal builder che stiamo utilizzando: su Elementor come su Oxygen Builder esiste una sezione apposita, così come generalmente è possibile aggiungere custom CSS in Temi > Personalizza > CSS aggiuntivo. Altimenti è possibile copiarlo e incollarlo nel file functions.php del nostro tema child.

.ilMioHeader { background-color: rgba(5, 73, 231, 0); } .ilMioHeader.nuovoSfondo { background-color: rgba(5, 73, 231, 1); }
Code language: CSS (css)

Cosa abbiamo fatto? Abbiamo impostato per ilMioHeader un colore azzurro in rgba, dandogli però opacità 0, perché vogliamo che il suo stato iniziale sia comunque di trasparenza. Dopodiché abbiamo impostato questa condizione: se ad ilMioHeader si aggiunge la classe nuovoSfondo allora l'opacità del nostro colore diventa 1. Qui sotto il risultato.

Nuovo header
Lo script funziona, ma la transizione lascia a desiderare

Step 4: aggiungiamo una transizione

Abbiamo verificato di non aver rotto il sito e che il nostro script funzioni come inteso, però la transizione tra lo stato a e lo stato b lascia un po' il tempo che trova: questo perché non abbiamo impostato nessuna transizione nel nostro CSS: quello che ci rimane da fare è di rendere il tutto un po' più piacevole inserendo una transition e un timing per la transition nel nostro custom CSS.

.ilMioHeader { background-color: rgba(5, 73, 231, 0); transition: all .5s ease-in-out } .ilMioHeader.nuovoSfondo { background-color: rgba(5, 73, 231, 1); }
Code language: CSS (css)

Così facendo abbiamo imposto una transizione della durata di mezzo secondo (.5s) per tutte (all) le transizioni di ilMioHeader e con una transition-timing-function settata su ease-in-out. Ora la transizione è molto più piacevole e la pagina più professionale.

Risultato finale
Il risultato finale