Le computed properties sono funzioni che vengono eseguite soltanto quando necessario, ovvero quando “cambia” qualcosa che le riguarda. I metodi invece vengono eseguiti ogni volta che si esegue un’azione con Vue. I watcher sono invece funzioni che vengono eseguite quando cambia uno specifico data. Watch nel senso proprio di “osservare” il cambiamento del valore di un dato. Nell’esempio seguente vediamo come funziona una computed property ed una funzione watch.

Nello specifico…

1. Tramite le direttiva v-on:click (abbreviata in @click) andiamo ad aumentare o diminuire il valore del data chiamato “value”.
2. La computed property chiamata result() di default restituisce la scritta “Not there yet”, quindi non fa nulla finchè, come descritto sopra, questo valore non cambia.
3. Quando result() cambia (ovvero quando il valore che impostiamo è 16) allora si attiva il watch che, in questo caso, resetta value a 0. E così il circolo ricomincia.

See the Pen qxxLjM by Davide De Maestri (@gleenk) on CodePen.

L'articolo Vue.js #03 – Tutorial – Computed Properties e Watch proviene da Gleenk Webdesign.

Innanzitutto, che cos’è una direttiva (directive)? Una directive è un’istruzione che inserisco nel codice, e fa il binding (in italiano “legame”) tra l’html ed i dati che si trovano nell’istanza di Vue.js.

La directive v-once

In Vue.js quando andiamo a stampare una variabile/funzione tra graffe, il suo valore viene sovrascritto se esso viene modificato dalla variabile/funzione stessa in altre parti, eseguite successivamente, del codice. Quindi se per esempio inizialmente diamo a {{ title }} il valore di “Hello World!” e successivamente quel valore viene cambiato, ovunque {{ title }} assumerà l’ultimo valore attribuitogli. Per evitare questo, e tenere traccia dei valori iniziali è possibile usare la directive v-once, come nell’esempio seguente:

See the Pen rJzBZz by Davide De Maestri (@gleenk) on CodePen.

La directive v-bind

La directive v-bind permette di  stampare un link dentro ad un attributo html in modo dinamico (ovvero generato da Vue). Quindi, per poter stampare un link o un valore dinamico, dentro ad un attributo html, non si dovrà scrivere semplicemente {{ link }} ma occorrerà usare v-bind. Come? Vediamolo nell’esempio:

See the Pen rJzVRY by Davide De Maestri (@gleenk) on CodePen.

La directive v-html

Ultima della nostra terna, è la directive v-html che permette di renderizzare codice html dentro alle nostre stringhe. Tuttavia bisogna prestare molta attenzione nell’utilizzo di v-html, infatti tramite questa direttiva è possibile iniettare codice malevole, è importante quindi fare in modo che venga utilizzato soltanto laddove si è sicuri che quell’output generato sia conosciuto e sicuro.

See the Pen zRdGVW by Davide De Maestri (@gleenk) on CodePen.

L'articolo Vue.js #02 – Tutorial – v-once, v-bind e v-html proviene da Gleenk Webdesign.

Una volta implementato nel nostro codice HTML il richiamo a Vue.js tramite CDN: https://cdn.jsdelivr.net/npm/vue/dist/vue.js, avremo a disposizione tutto ciò che è necessario per iniziare a divertirci. Vediamo quindi 3 semplici modi per interagire/renderizzare del codice sfruttando Vue.

See the Pen RQGKYv by Davide De Maestri (@gleenk) on CodePen.

Alcune brevi  note preliminari per comprendere l’esempio:

• L’interpolazione dei dati avviene tramite doppie parentesi graffe (in soldoni, viene interpretato e quindi “letto” da Vue.js)
• L’oggetto Vue (new Vue) in questo esempio ha 3 proprietà ovvero:
  • el (che definisce l’elemento del DOM dentro cui agisce Vue)
  • data (che contiene le proprietà, in questo caso “title”)
  • methods (che contiene i metodi/funzioni che eseguono le azioni)
• L’attributo v-on: che abbiamo assegnato all’input si chiama “direttiva” e si occupa di ascoltare gli eventi che arrivano dal DOM ed attivarsi all’occorrenza. In questo caso abbiamo detto di attivarsi quando viene effettuata qualsiasi attività sull’input stesso (keyup ecc…)

Tornando invece all’esempio, sono presenti 3 modi diversi di interagire col DOM, rappresentati dai 3 metodi diversi utilizzati.

Esempio 1: data-binding

Nel primo caso, attraverso la direttiva v-on:input attiviamo il metodo changeTitle() che, come indicato nei commenti al codice, cambia il contenuto di title in base al value dell’elemento target. Quindi, in parole povere, ciò che viene digitato nell’input diventa il valore di title.

Esempio 2

Nel secondo esempio invece viene semplicemente mostrata la possibilità di inserire direttamente la funzione tra parentesi graffe e veder stampato il contenuto che viene ritornato dalla funzione. Questo è possibile soltanto se return restituisce una stringa.

Esempio 3

Questo esempio è stato fatto solo ed esclusivamente per far vedere una proprietà interessante di Vue. Ovvero che il framework ci permette di avere sempre a disposizione tutte le proprietà dell’oggetto, in questo caso “title” anche se si trovano al di fuori del nostro metodo.

L'articolo Vue.js #01 – Tutorial – Interazioni col DOM proviene da Gleenk Webdesign.

Linee di griglia, colonne, righe e celle.

Come viene ben mostrato nell’immagine soprastante ci sono 4 elementi che entrano in gioco quando usi Grid:

1. Le linee di griglia (grid lines) colorate in grigio
2. Le colonne in azzurro
3. Le righe in verde
4. Le celle in arancione

Come creare una griglia?

Immagina di voler creare una griglia con 6 elementi figli. Il primo passo da compiere è quello di impostare come sarà la griglia, definendo quindi righe e colonne tramite le proprietà grid-template-columns e grid-template-rows.

Prendi il seguente codice html e css come esempio:
HTML

<section class="grid-layout">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
</section>

CSS

.grid-layout {
  display:grid;
  font-family: Arial, sans-serif;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 80px 80px;
}

Otterrai il seguente risultato:

• grid-template-columns: definisce il numero di colonne e la loro larghezza. Nel caso sopra abbiamo scritto 3 volte 100px, quindi 3 è il numero di colonne, 100px è la larghezza di ognunca delle colonne.
• grid-template-rows: definisce il numero di righe (ovviamente devono esserci elementi sufficienti per riempirle) e l’altezza di ogni riga. Nel caso sopra abbiamo 2 righe, alte entrambe 80px.

Disporre gli elementi

Nell’esempio soprastante hai visto come disporre righe e colonne. Immagina di voler cambiare la posizione di alcuni elementi. Come si può fare? Grazie alle proprietà grid-column e grid-row assegnate agli elementi figli è possibile. Per esempio assegnando le seguenti proprietà css:

.grid-layout .item-1 {
  grid-column: 1;
  grid-row: 1;
}
.grid-layout .item-2 {
  grid-column: 3;
  grid-row: 1;
}
.grid-layout .item-3 {
  grid-column: 2;
  grid-row: 2;
}

Otterrai la stessa griglia ma avrai spostato gli elementi 1, 2, 3 in posizioni differenti molto rapidamente.

A questo punto puoi provare a fare un esperimento… Provando a rimuovere gli elementi 4,5,6 dal layout, otterrai il tuo primo layout a forma di griglia. Come? Così:

See the Pen oWordG by Davide De Maestri (@gleenk) on CodePen.

L'articolo CSS Grid Layout – Tutorial per iniziare proviene da Gleenk Webdesign.

Il problema cruciale è che questa mole viene comunque in parte caricata dal sito impattando pesantemente sui tempi di caricamento. Se a questo aggiungi che normalmente un sito di piccole dimensioni viene ospitato su server condivisi… Il danno è fatto. Quindi, che fare?

Io, da web designer, sconsiglio da sempre l’utilizzo di temi laddove si è in presenza di un investimento ragionevole in termini di soldi da spendere per la propria immagine online, nei casi in cui fosse una scelta obbligata, dettata da esigenze che esulano dal discorso più strettamente creativo (anche su questo nutro comunque sempre perplessità :D) sarebbe fondamentale investire nell’ottimizzazione del sito stesso (per quanto possibile) e nella scelta di un piano hosting che possa migliorare i tempi di caricamento.

Chiusa la parentesi che riguarda i temi, passiamo ad analizzare invece l’impatto che hanno i plugin, sui quali, come accennavo prima, possiamo intervenire, anche solo per il semplice fatto che spesso è possibile cercare alternative o valutare di implementare soluzioni customizzate che non richiedano l’uso di plugin.

Come funzionano i plugin per WordPress?

I plugin per WordPress sono delle estensioni che aumentano le funzionalità di base del tuo sito WordPress aggiungendo per esempio Form di contatto, gallerie, funzionalità di vendita ecc… Ogni volta che un utente visita il tuo sito web, WordPress carica in ordine prima tutte le funzionalità presenti nel “core” e poi carica tutti i plugin che hai attivato. Per fare ciò vengono fatte delle richieste al server che ospita il tuo sito web, richieste che devono essere elaborate e restituite al tuo browser. Tutto questo richiede tempo.

Come i plugin impattano sui tempi di caricamento?

Ogni plugin di WordPress offre funzionalità differenti che possono necessitare di chiamate al database MySQL a livello di back-end e/o di front-end, così come di fogli di stile CSS, JavaScript, immagini ecc… Tutto questo, come dicevo prima, necessita che vengano effettuate delle richieste HTTP (per la parte front-end) al server, e ogni richiesta corrisponde ad una porzione di tempo richiesta per il caricamento complessivo.

Quando tutto questo avviene in modo ottimale, l’impatto sulle performance è minimo, tuttavia l’utilizzo di troppe risorse impatterà sull’esperienza dell’utente (UX) che visiterà il tuo sito web.

Come controllare quali files vengono caricati dai plugin di WordPress?

Per scoprire quali files vengono caricati insieme al tuo sito ed ai tuoi plugin, puoi servirti degli strumenti di sviluppo presenti nel browser (Ispeziona elemento per Chrome e Firefox) o di software dedicati (scelta consigliata). Nel caso volessi utilizzare il browser, apri la tab “Network” del tool, visita la pagina che ti interessa e sarai in grado di vedere l’elenco a cascata dei files richiesti ed i relativi tempi di caricamento. Alternativamente, i tools più utili per fare questo test sono:

• Pingdom: https://tools.pingdom.com/ (imposta la località più vicina al tuo paese di residenza)
• GTmetrix: https://gtmetrix.com/

Schermata files caricati dal server – Pingdom Tools

Quando i plugin sono considerati troppi?

Diventa quindi spontaneo chiedersi quando i plugin sono troppi. In realtà non esiste una risposta, tutto dipende da quali plugin stai utilizzando e come sono fatti. Un pessimo plugin potrebbe caricare 12 files contemporaneamente, mentre diversi plugin scritti bene ne potrebbero caricare meno.

Un plugin ben fatto cerca di ridurre al minimo il numero di richieste da fare al server, tuttavia non sempre vengono prese le giuste accortezze e l’impatto sui tempi di caricamento può diventare importante. Sicuramente un numero molto alto di plugin può comunque comportare rallentamenti su macchine non performanti. Per questo, se non è possibile fare a meno di numeri elevati, è necessario, dopo aver preso tutti gli accorgimenti possibili sul sito, affidarsi a server VPS, Cloud o dedicati per migliorare le performance. La combinazione ottimale di cache e server performante infatti permette di gestire al meglio la maggior parte delle situazioni che rallentano il tuo sito in WordPress.

Per addetti ai lavori, come ottimizzare gli assets dei plugin manualmente

Se sei un professionista che si occupa di WordPress puoi cercare di controllare come vengono caricati i files dei plugin, per farlo occorrono competenze di codice e capacità di debug.

Il modo corretto di caricare script e css in WordPress è tramite le funzioni wp_enqueue_style e wp_enqueue_script . WordPress offre anche funzioni per deregistrare questi script e css. Farlo tuttavia significherebbe rompere i plugin o causarne malfunzionamenti. Per risolvere questo problema dovresti copiare e incollare questi stili e script dentro al tuo file css e js per caricarli tutti insieme una volta sola riducendo le richieste http.

Disabilitare fogli stile in WordPress

Innanzitutto occorre trovare il nome del css che ti interessa tramite l’ispeziona elemento o, meglio, visualizzando il sorgente della pagina di riferimento. Il nome utile è quello che si trova nell’ID della proprietà <link rel="stylesheet" . Una volta segnato il nome (per esempio “font-awesome-css”, puoi deregistrarlo dentro al file function in questo modo:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'font-awesome-css' );
}

In questo modo ricordati che stai rimuovendo di fatto questo css da tutto il sito senza alcun criterio di esclusione. Lo stesso può essere fatto con i file .js dei plugin. Vediamo come.

Disabilitare il js dei plugin WordPress

Come per i CSS, puoi disabilitare il file js dei plugin deregistrandoli. A differenza di quanto visto prima, il nome del file che ti interessa non si vedrà utilizzando l’ispeziona elemento, sarà infatti necessario esplorando i files del plugin… Esiste però un modo più rapido per elencare tutte le chiamate fatte dai plugin. Occorre inserire questa funzione dentro il file functions.php in modo da creare uno shortcode che elencherà tutti gli script generati dai plugin.

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles');

Andando ad inserire quindi lo shortcode [pluginhandles] dentro ad una pagina qualsiasi otterrai il fatidico elenco puntato con i nomi che ti interessano.

È ora possibile deregistrarli come fatto in precedenza. Ipotizzando di aver trovato lo script denominato “contact-form-7”, potrai deregistrarlo così:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

Ricordati che così facendo impedirai ai plugin di funzionare correttamente… A cosa serve quindi tutto ciò? Il senso sta nell’utilizzare queste regole aggiungendo delle esclusioni in modo che siano limitate solo ad alcune pagine e non impattino sui tempi di caricamento dove non sono presenti.

Vediamo quindi come caricare gli script solo in pagine specifiche.

Caricare gli script in pagine specifiche

Ipotizziamo che tu abbia sul tuo sito la form di contatto, generata usando Contact Form 7, solo nella pagina contatti. Non sarà necessario caricare i files richiesti dal plugin in tutto il sito. Potrai quindi, sempre tramite il file functions.php decidere di deregistrare completamente il plugin ad eccezione della pagina contatti:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contatti') ) {
wp_deregister_script( 'contact-form-7' );
}
}

Et voilà, il gioco è fatto.

Ispirato a How WordPress Plugins Affect Your Site’s Load Time

L'articolo In che modo temi e plugin rallentano il tuo sito in WordPress proviene da Gleenk Webdesign.

Se nel corso degli anni la sintassi ha subito diversi cambiamenti, oggi, grazie anche all’uso più diffuso di sistemi di compilazione automatizzata (nello specifico autoprefixer) è possibile garantire un supporto quasi totale. Tuttavia, come ogni nuova tecnica offerta dai CSS, è bene non abusarne. Vediamo quindi ora le 3 funzionalità per cui flexbox è indispensabile e risolve facilmente problemi “storici” che ogni webdesigner si è trovato a fronteggiare.

Per una guida completa su flexbox vi consiglio di leggere questa ottima guida di CSS Tricks: A Complete Guide to Flexbox.

Altezze uguali degli elementi

Uno dei casi storici in cui è sorta la necessità di avere la stessa altezza tra due elementi, riguarda la combinazione sidebar+contenuto. Nell’esempio sottostante infatti, per poter ottenere la medesima altezza tra le due parti, era necessario avvalersi di javascript. Attraverso flexbox è sufficiente dichiarare display:flex all’elemento contenitore (per esempio il main che contiene sidebar e contenuto) ed i due elementi figli avranno automaticamente la medesima altezza.

Questo esempio ci porta immediatamente ad analizzare un’altra situazione di uso comune.

Prendete una serie di elementi ripetuti (con float o inline-block abitualmente) che, pur presentando contenuti con lunghezza differente, abbiamo la stessa altezza. Anche in questo caso era necessario dichiarare un’altezza fissa comune, oppure una min-height o trovare l’elemento più alto in javascript ed assegnare a tutti la sua altezza. Questo presentava la necessità di dover gestire i vari casi responsive cambiando le altezze.

Tutto ciò non è più necessario, infatti, come abbiamo visto nell’esempio sopra, la stessa proprietà può essere applicata al nuovo caso.

Tuttavia, come si vede dall’esempio, occorre sistemare qualcosa. Dovremo introdurre una nuova proprietà, chiamata flex-wrap, e dovremo assegnarle l’attributo wrap. Di default infatti flexbox mette tutti gli elementi su di una linea. Attraverso flex-wrap:wrap diciamo invece di andare a capo su più righe in modo che i contenuti occupino lo spazio necessario richiesto:

Riordinamento degli elementi

Ci sono due casi in cui abitualmente occorre poter cambiare l’ordine degli elementi rapidamente.

1. Per finalità SEO, quando si vuole che un testo venga letto “prima” dallo spider
2. Quando su mobile si vuole che un’elemento che a codice viene “prima”, venga spostato visivamente dopo o viceversa

Flexbox offre una comodissima soluzione. Attraverso la proprietà order, dichiarata ad un elemento figlio, si definisce il numero di posizione in cui dovrà apparire.

Nel caso sopra potremo quindi, per esempio, decidere di cambiare l’ordine visivo su mobile. Nello specifico vediamo anche come sia possibile passare da un ordine orizzontale ad uno verticale, utilizzando la proprietà flex-direction.

Allineamenti nel “vuoto”

Per concludere, flexbox diventa irrinunciabile quando vogliamo allineare rapidamente un elemento sia verticalmente che orizzontalmente rispetto al contenitore (NB: il contenitore deve avere delle dimensioni o comunque occupare uno spazio fisico per poter contenere elementi allineati). Per farlo occorre assegnare al contenitore le proprietà align-items: center e justify-content:center che allineano gli elementi figli rispettivamente in orizzontale e verticale. All’elemento figlio potrete assegnare una larghezza massima a piacere.

Queste sono le 3 situazioni principali in cui mi è capitato di imbattermi quotidianamente e che hanno trovato beneficio dall’arrivo di flexbox.

L'articolo CSS Flexbox, è ora di usarlo! Ma quando ha realmente senso? proviene da Gleenk Webdesign.

Da quando è uscito HTML5 lo standard vuole che si usi l’attributo required per rendere obbligatorio un campo. Tuttora però, come evidenzia caniuse.com, abbiamo un supporto parziale soprattutto per browser dei dispositivi mobile.

Diventa così indispensabile mettere a disposizione delle fallback per ovviare ogni tipo di problema.

Vediamo quindi, in questo tutorial, come inserire campi obbligatori tramite l’attributo required su tutti i dispositivi desktop e mobile.

jQuery, Validation, Modernizr e si comincia

Procuriamoci jQuery, jQuery Validation e Modernizr ed incominciamo a scrivere…

HTML

<form action="" method="post">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" required>

<label for="email">Email</label>
<input type="email" name="email" id="email" required>

<button type="submit">Invia</button>
</form>

Javascript

Tramite Modernizr verifichiamo il supporto per “required” usando if (!Modernizr.input.required) { se non troveremo il supporto aggiungeremo una classe chiamata required che permetterà di attivare la fallback.

(function ($) {

	// controlla il supporto per "required"
	if (Modernizr.input.required) {

		// non fare nulla se è supportato

	} else {

		// se no attraversa tutti i campi input
		$('form').find('input[required]').each(function () {

			// e aggiungi una classe required
			$(this).attr('class', 'required ' + this.getAttribute('type')).removeAttr('required');

		});

		// e inizializza il plugin di validazione
		$('form').each(function () {
			$(this).validate();
		});

	}

}(jQuery));

Et voilà. Il gioco è fatto.

PS: Per customizzare le opzioni di validazione vi invito a leggere la documentazione di jQuery validation!

L'articolo HTML5 attributo required e fallback proviene da Gleenk Webdesign.

Colonne con la stessa altezza

Personalmente, ad oggi, per realizzare elementi con la stessa altezza in modo “dinamico” mi avvalevo dell’ottimo script matcHeight.js, laddove min-height non veniva in soccorso in modo efficace. Attraverso il flex-model non c’è niente di più semplice in quanto le colonne create vengono istanziate con altezze uguali di default. Come? Così:

.container {
  /* Inizializza il flex model */
	display: flex;
  /* Valori di default che impostiamo a scopo didattico */
	flex-direction: row; /* Disponi orizzontalmente gli elementi dentro container */
  align-items: stretch; /* Gli elementi dentro container prendono l'altezza massima consentita */
}

Per vedere un esempio concreto di applicazione vi invito a vedere questa pagina d’esempio (dove main e aside se ispezionate il sorgente hanno la stessa altezza).

Elementi riordinati

Una delle potenzialità del Flexbox è la possibilità di cambiare al volo l’ordinamento degli elementi. Questo può risultare utile, per esempio in ambito SEO, per decidere di mostrare visivamente prima alcuni elementi che a livello di codice si trovano dopo. Oppure possiamo finalmente “spostare” gli elementi quando facciamo uso delle media-queries per elementi responsive.

Ad oggi infatti si era costretti a mantenere la stessa sequenza visiva su Desktop e su Mobile andando ad incolonnare gli elementi.

Grazie a questa potenzialità non saremo più vincolati:

.container{
   display: flex;
}

/* Visivamente fa fede l'ordinamento impostato dai CSS */

.blue{
   order: 3;
}
.red{
   order: 2;
}
.green{
   order: 1;
}

Centrare elementi orizzontalmente e verticalmente

Una delle operazioni per cui chiunque ha perso tempo nel corso della sua carriera di web designer trova finalmente LA soluzione tramite il modello flexbox. Stop a display table, a pseudoelementi al 100% ecc… Justify-content e Align-items saranno da oggi le vostre migliori amiche!

.container{
	display: flex;

	/*Centra sull'asse primario */
	justify-content: center;

	/* Centra sull'asse secondario */
        align-items: center;
}

Responsive, da orizzontale a verticale

Tramite l’utilizzo delle proprietà flex-direction e di flex possiamo passare rapidamente da un layout che si sviluppa in orizzontale ad uno che si sviluppa in verticale:

.container{
	display: flex;
}

/* impostiamo quanto spazio sul totale occupano le colonne */

.col-1{
	flex: 1;
}

.col-2{
	flex: 2;
}

@media (max-width: 800px){
	.container{
		/* Trasformiamo le righe in colonne */
		flex-direction: column;		
	}
}

Sticky footer delle mie brame!

Come ti blocco in fondo alla pagina senza impazzire? L’operazione da svolgere qui è più complessa, infatti dobbiamo impostare al body e all’html un’altezza del 100%, dopodichè dobbiamo dire, tramite la proprietà flex, “quanto spazio deve occupare” il corpo della pagina e quanto il footer. Come? Così (descrizione nel codice):

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* La sezione principale del sito prenderà tutto lo spazio disponibile nella pagina che non è occupato dal footer */
   flex: 1 0 auto;
}

footer{
   /* Il footer prendereà tutto lo spazio verticale che server e non un pixel di più. */
   flex: 0 0 auto;
}

Se qualche proprietà ti fosse poco chiara ti invito a leggere questo post per approfondire: Flex – CSS Tricks

Articolo ispirato a 5 Flexbox Techniques You Need to Know About

L'articolo CSS – 5 Tecniche Flexbox pronte all’uso proviene da Gleenk Webdesign.

Come risolviamo questo semplice problema? Tramite l’utilizzo delle sessioni.

Piccola premessa: WordPress non permette di utilizzare le funzioni salvo diverse indicazioni. Per permettergli di farlo dobbiamo inserire questa porzione di codice, in cima al file functions.php

if (!session_id()) {
    session_start();
}

A questo punto possiamo impostare la nostra sessione all’interno del nostro tema WordPress. Per esempio, apriamo header.php ed inseriamo quanto segue:

<?php
	session_start();
	
	if (!$_SESSION['splashscreen']){

		echo "Mostra Popup";
		$_SESSION['splashscreen'] = true;

	} else {
		
		echo "Non Mostrare Popup";
	}
?>

In questo modo, la prima porzione di codice verrà mostrata solamente al primo caricamento della pagina/sito, mentre successivamente i tuoi utenti saranno liberi di navigare senza distrazioni! Fanne buon uso!

L'articolo Memorizzare e stampare i valori di una sessione WordPress proviene da Gleenk Webdesign.