Popup o modal box in 15 minuti

Pubblicato il 11 gennaio 2014
Autore:
L'articolo tratta di Seo, Web, Web Marketing, Wordpress .

popup-moda-box-wordpress

Ho realizzato qualche giorno fa un sito per un cliente che pretendeva la creazione di una splash screen prima del caricamento della home page; di una pagina, cioè, priva di testo, contenente un’immagine, che conducesse, poi, in maniera automatica, al sito vero e proprio. Si tratta di una pratica molto in voga diversi anni fa, ma utilizzata ancora oggi, specialmente per quei siti in cui coesistono più versioni in lingua o per ospitare inutili animazioni Flash.

Se avessi accontentato il cliente mi sarei macchiato di un “omicidio” a livello Seo: la prima pagina di un sito, quella, cioè, che risponde al nome a dominio, è l’elemento più rappresentativo dello stesso. Privarla di testo e di elementi utili che le consentano di essere caratterizzata all’interno dell’indice dei motori di ricerca è una pratica da evitarsi sempre, senza eccezioni!
Gli stessi backlink (i collegamenti ipertestuali provenienti da altri siti), almeno in massima parte, puntano al nome a dominio, e, se la pagina a cui questo corrisponde è priva di contenuto, perdono, in parte o in tutto, di efficacia.

In secondo luogo l’utente che viene costretto ad attendere e/o a dover effettuare un clic totalmente inutile e, spesso, a visualizzare la stessa immagine ad ogni apertura del sito, potrebbe abbandonarlo senza pensarci due volte!

Pertanto, posta la perentorietà della richiesta del cliente, ho realizzato che l’unica possibile soluzione poteva essere quella di utilizzare un popup a tutto schermo o, come è di moda definirlo in quest’ultimo periodo, di aprire una finestra modale contenente l’immagine sovrapposta al sito vero e proprio. Utilizzando questo escamotage i contenuti della home page vengono comunque processati dal browser e, ci si augura, ben indicizzati dai motori di ricerca.

Il popup o modal doveva possedere le seguenti caratteristiche: 

  • essere visibile solo nell’home page del sito;
  • contenere una immagine estesa per tutta la finestra del browser, in modo tale da generare nell’utente l’impressione che si tratti di una pagina vera e propria e non di un popup;
  • garantire la responsività all’immagine in esso contenuta (l’adattamento della stessa, cioè, alle risoluzione utilizzata dall’utente);
  • disattivarsi automaticamente dato un certo lasso di tempo, permettendo all’utente di visualizzare, poi, l’home page vera e propria;
  • contenere comunque un pulsante per la chiusura anticipata della finta pagina sovrapposta;
  • essere visualizzato solo alla prima visita e non alle successive.

Ho deciso di utilizzare un’applicazione di Jquery per soddisfare le condizioni di cui sopra, nella fattispecie Fancybox (ne esistono, ovviamente, anche delle altre).
L’ultima di queste, la visualizzazione del popup solo alla prima visita, tuttavia, non viene gestita direttamente e, pertanto, ho dovuto utilizzare l’ulteriore libreria Cookie di Jquery. Il cookie non è altro che un minuscolo file di testo che viene memorizzato nella cartella dei file temporanei del navigatore (browser) del computer di chi visita il sito e, tramite esso, si stabilisce se l’utente non deve più visualizzare il popup o modal box.

La procedura

tema-wordpressIn primo luogo è necessario scaricare e decomprimere la libreria Fancybox al seguente indirizzo.

Posto che si stia utilizzando WordPress, si copi il suo contenuto in una cartella, denominata nel mio caso proprio Fancybox all’interno del tema usato dal Cms.

Poi bisogna effettuare la medesima operazione per il plugin di Jquery Cookie, scaricabile a questo indirizzo (il solo file jquery.cookie.js è sufficiente).

A questo punto è necessario includere i javascript dell’applicazione all’interno della pagina header.php del tema.

  1. <script type="mce-text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.cookie.js"></script>
  2. <script type="mce-text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/fancybox/jquery.fancybox.pack.js"></script>
  3. <link href="<?php bloginfo( 'stylesheet_directory' ); ?>/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script type="mce-text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.cookie.js"></script>
<script type="mce-text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/fancybox/jquery.fancybox.pack.js"></script>
<link href="<?php bloginfo( 'stylesheet_directory' ); ?>/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />

Come si può osservare i riferimenti vanno posti subito dopo wp_head(), in modo tale che venga caricata la libreria Jquery (già inclusa in qualsiasi installazione standard di WordPress) e la chiusura di body. Consiglio di utilizzare il plugin Jquery Updater per essere certi di disporre della libreria più aggiornata.

Il mio è un tema custom, l’home page del sito è caratterizzata dall’elemento index.php del template, per cui ho modificato quel file; nel vostro caso potrebbe essere home.php o un altro elemento se intendete caricare la finestra modale in una sezione differente del sito (ad esempio una pagina specifica o un archivio di categoria, o, ancora, un particolare articolo).

Il codice è estremamente semplice:

 
  1. <script type="mce-text/javascript">// <![CDATA[
  2. $(document).ready(function(e) {
  3.         $("#apertura").click(function(){
  4.             $(this).delay(6500).queue(function(next) {
  5.                 $.fancybox.close();
  6.             });
  7.         });
  8.         if (typeof $.cookie('paola') == "undefined") {
  9.             $("#apertura").fancybox({ width: '100%', openEffect: 'none' }).click();
  10.             $.cookie('paola', 'visto', { expires: 365 });
  11.                     }
  12.     });
  13. // ]]></script>
<script type="mce-text/javascript">// <![CDATA[
$(document).ready(function(e) {
		$("#apertura").click(function(){
			$(this).delay(6500).queue(function(next) {
				$.fancybox.close();
			});
		});
		if (typeof $.cookie('paola') == "undefined") {
        	$("#apertura").fancybox({ width: '100%', openEffect: 'none' }).click();
			$.cookie('paola', 'visto', { expires: 365 });
					}
    });
// ]]></script>

Nella prima riga compare un link, “a”  che contiene l’immagine con id “apertura” posto  su display:none, che permette l’attivazione del popup. Esso viene nascosto per una questione estetica.

Nella prima parte della funzione si dichiara che qualora il popup venga caricato, debba essere visibile per 6500 millesecondi, per poi chiudersi automaticamente. Ovviamente tale valore può essere modificato a seconda delle vostre esigenze.

Nella seconda si determina che, se all’interno della cache del browser dell’utente è presente un cookie denominato “paola” (perdonate il vezzo di assegnare nomi di donna ai cookie!), allora la finestra modale non deve essere più visualizzabile per 365 giorni (parametro expires), valore che ovviamente è possibile variare a piacimento.

Nella fattispecie: se il cookie non esiste viene eseguito il codice e viene creato, per l’appunto un cookie con una scadenza pari all’anno, altrimenti viene ignorato.

Consideriamo questa riga in particolare:

$(“#apertura”).fancybox({ width: ’100%’, openEffect: ‘none’ }).click();

Il comando permette l’apertura del box modale: .click() infatti richiama la funzione $(“#apertura”).click(function(){…}); che attende 6.5s e chiude il fancybox. Di fatto viene simulato il clic sul link con id “apertura”.

Fancybox ovviamente dispone di numerosi comandi che trovate in questa pagina.

Nell’esempio ne ho utilizzati due. L’attribuzione del valore di 100% all’immagine che garantisce la responsività alla stessa, alternativamente è possibile attribuire alla finestra una dimensione fissa in pixel e OpenEffect posto su none, che stabilisce che all’apertura del modal box non siano attivati effetti grafici (gli effetti in apertura e chiusura del popup possono essere il fading – la dissolvenza - e l’elastico o nessuno dei due).

L’assenza di effetti in apertura consente di caricare quasi istantaneamente il modal box, dando così l’impressione all’utente che si tratti di una pagina vera e propria.
Un piccolo ritardo è comunque presente, intendo dire cioè che, per una frazione di secondo, prima è visibile l’home page del sito e, poi, la finestra modale.

Ovviamente questa è la configurazione che più si adattava alle mie esigenze, è possibile aggiungere parametri e definire altri comportamenti a vostra discrezione.

A questo punto la procedura si è conclusa, si può salvare il tutto e controllare il risultato!

Altre applicazioni

Modal box all’interno di una specifica pagina di WordPress

Poniamo si voglia creare il popup nella pagina denominata “Contatti” a cui WordPress ha attribuito id pari ad 7. Ebbene è sufficiente scaricare nel vostro pc l’elemento page.php del vostro tema, rinominandolo in page-contatti.php (ovviamente dovrete sostituire “contatti” con il lo slug effettivo della vostra pagina) e seguire le istruzioni precedenti. A quel punto si potrà ricaricare il nuovo file, via ftp, all’interno della cartella del vostro tema.

Modal box modificabile tramite editor

Poniamo, invece, si voglia aggiungere del testo al popup, un form o qualsiasi altro elemento di contenuto e, contemporaneamente, si voglia permettere al cliente finale di modificare autonomamente il popup senza costringerlo a scrivere e/o ritoccare codice. La soluzione è molto semplice: è sufficiente inserire all’interno del div che caratterizza il box modale il loop di una singola pagina. Nella fattispecie, create una nuova pagina che non deve comparire nei menu del sito, individuate il suo id (nel mio caso è pari a 7, la pagina “contatti” di cui all’esempio precedente) e inseritelo all’interno di questo snippet, nella seconda riga:

  1. <!--?php
  2. // Stampa il contenuto della pagina con ID 7
  3.    query_posts('page_id=7');
  4.    global $more;
  5.    $more = 0;
  6. // Loop
  7.    while (have_posts()) : the_post();
  8. // Il contenuto del post
  9.    the_content();
  10.    endwhile;
  11. ?-->
<!--?php 
// Stampa il contenuto della pagina con ID 7
   query_posts('page_id=7');
   global $more;
   $more = 0; 
// Loop
   while (have_posts()) : the_post(); 
// Il contenuto del post
   the_content(); 
   endwhile;
?-->

Per entrambi gli esempi sembra più efficace utilizzare un id di un div quale “ancora” per l’attivazione del popup, piuttosto che il link di cui all’esempio precedente, reso poi invisibile tramite display:none;.

Ringrazio il mio amico Alex Bedendo per la collaborazione.

Alternative tramite plugin per realizzare modal box o popup

Qualora non abbiate alcuna dimestichezza con php, ftp e codice in generale, potete ottenere più o meno lo stesso risultato con un plugin di WordPress ITRO Popup. L’ho testato personalmente e funziona perfettamente allo scopo!

Per concludere sembra quasi pleonastico affermare che il codice sopradescritto può essere utilizzato su qualsiasi altro content management system open source (Joomla, Drupal, ecc.) o anche su sistemi custom con i dovuti accomodamenti.

8 commenti all'articolo “Popup o modal box in 15 minuti”

  1. 13 gennaio 2014 alle 20:31

    Sempre esaustivo e innovativo :-)
    Io per pigrizia utilizzo un terzo metodo, quello del banner interstitial, con openX puoi gestire diversi parametri di visualizzazione, dai giorni della settimana, a quante volte deve essere visualizzato e quando far scadere la sessione, al tipo di browser o lingua dell’ip, etc.

    • 13 gennaio 2014 alle 22:18

      Grazie Gero, tu hai sempre una alternativa, questo è l’importante! :)
      Cmq me lo guardo openX, ho rimossso una parte dell’articolo in cui proponevo a qualche volenteroso di aiutarmi a creare uno script di un popup che si aprisse alla chiusura del browser, magari con il tuo metodo si può fare! :)

  2. 19 gennaio 2014 alle 23:47

    Salve, innanzitutto grazie per aver citato il nostro plugin. Volevamo chiedere se ci poteva riferire i problemi riscontrati con Chrome così da poter trovare il baco ed aggiornare la versione.
    Grazie per la collaborazione.

    Saluti,

    ITRO Team

    • 19 gennaio 2014 alle 23:59

      Salve, mi permetto di risponderti con il tu.
      Allora io ho testato su una decina di pc il popup generato tramite il vostro plugin e su di un paio, entrambi con Windows XP (ma non so dire onestamente se conti qualcosa il sistema operativo) e Chrome aggiornato all’ultima versione, il popup sfarfallava sullo schermo. Sembra impossibile, ma l’ho visto con i miei occhi! :)
      In più non rispondeva responsivamente alle modifiche della dimensione della finestra. Stessi computer, altri browser, tutto ok.
      Sinceramente non ho fatto un’analisi precisa del problema, perché avevo comunque intenzione di realizzare il tutto senza un plugin. Ciò detto, ho provato una decina di plugin per aprire popup e il vostro, sistemato questo piccolo bug, ritengo sia decisamente il migliore e il più semplice da utilizzare. :)

      • 24 gennaio 2014 alle 13:29

        Innanzitutto complimenti per il post, una soluzione molto semplice ed efficace ed una descrizione molto precisa!
        Per quanto riguarda il bug volevamo chiederti un grande favore… Potresti in qualche modo creare una pagina di test su cui attivare il plugin, dove possiamo fare qualche controllo ed eventalmente risolvere il problema?
        Il plugin ormai ha 44.000 download e punteggio 4.8 e vorremmo risolvere tutti i problemi possibili per migliorarlo e saremmo contenti di farlo anche grazie al tuo aiuto!

        • 24 gennaio 2014 alle 13:56

          Certo, datemi qualche giorno e vedo di riprodurre il problema…

          • 25 gennaio 2014 alle 16:37

            Ciao, ho fatto un test, con l’ultimo aggiornamento, i dati nel db non erano stati cancellati e devo dire che lo sfarfallio non si vede più.
            Se siete d’accordo correggo l’articolo.
            Ciao
            Enrico

          • 25 gennaio 2014 alle 17:14

            Certamente! Grazie ancora per aver citato il nostro plugin.

            Un saluto
            ITRO Team

Scrivi il tuo commento