Realizzare un banner di sfondo cliccabile

Si stanno diffondendo molto i banner di sfondo cliccabili. L’idea di base è avere un’immagine di sfondo che venga visualizzata all’esterno dei “contorni” del nostro sito, e che sia cliccabile.

Dopo aver consultato diverse guide, come sempre sono arrivato a una soluzione che è un mix di varie tecniche e tentativi. L’ho applicata a WordPress ma è valida su qualsiasi sito.

Supponiamo di avere 1000 pixel come larghezza del nostro sito, dovremo preparare un’immagine di sfondo più larga di quei 1000px, ad esempio 2000px, l’altezza è a piacere, ad esempio 1500px.
Lasciamo uno spazio di 100px (sempre modificabile a piacere) in alto, in modo che il banner sia visibile anche sui tablet (dove quasi sicuramente le bande laterali del banner verranno “tagliate” via).

Ecco un esempio di immagine “a ferro di cavallo”:

Banner di sfondo

vedete che viene lasciato vuoto lo spazio che verrà occupato dal sito.

Aggiungiamo nel body del codice html le seguenti righe:

<body>
<a id="skinlink" href="http://www.simonezanella.it" target="_blank"><span>&nbsp;</span></a>

e aggiungiamo al foglio di stile i seguenti parametri:

body {
margin:100px auto;
background:url('bannersfondo.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
}
a#skinlink {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 display: block;
 z-index: 1;
}
#skinlink span {
 display: none;
}

dove al posto di bannersfondo.jpg dovete mettere il percorso alla vostra immagine di sfondo.

Ulteriore personalizzazione: se volete, potete rendere visibile lo sfondo solo in determinati giorni della settimana, basta racchiudere il codice in questo blocco condizionale:

<?
if ((date('w') == 0) OR (date('w') == 6))
{
?>
<a id="skinlink" href="http://www.simonezanella.it" target="_blank">
<span>&nbsp;</span></a>
<?
}
?>

dove date(‘w’) restituisce il numero di giorno della settimana corrente, ponendo 0 = Domenica e 6 = Sabato. Nell’esempio, il banner viene mostrato solo il sabato e la domenica.
Per evitare che il sito venga spostato di 100px di margine dall’alto negli altri giorni, si può lasciare nel foglio di stile generale le impostazioni “standard” per il body vostro sito, e aggiungere nell’header, dopo aver richiamato tutti i fogli di stile, il seguente codice:

<head>
...
<?
if ((date('w') == 0) OR (date('w') == 6))
{
?>
<style>
body {
margin:100px auto;
background:url('bannersfondo.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
}
</style>
<?
}
?>
</head>

Consentire caricamento file xml in WordPress

Di norma WordPress consente il caricamento di file solo per le estensioni ritenute “sicure”. A causa delle nuove leggi per le pubbliche amministrazioni queste ultime hanno la necessità di caricare sui propri siti dei file XML e renderli accessibili ai vari Ministeri ed Enti. WordPress non lascia caricare file XML per questioni di sicurezza (non che il file xml abbia in sè delle criticità, ma non rientra nelle estensioni consentite di default), per poterli caricare bisogna aggiungere nel file functions.php (lo trovate nella cartella del vostro tema) le seguenti righe:

function my_myme_types($mime_types){
        $mime_types[‘xml‘] = ‘application/xml‘; //aggiunge l’estensione XML
        return $mime_types;
}
add_filter(‘upload_mimes’, ‘my_myme_types’, 1, 1);

Se avete realizzato un tema figlio potete creare un nuovo file functions.php da inserire nella cartella del tema figlio contenente le righe indicate sopra.
Per aggiungere tutte le estensioni di cui si ha bisogno è sufficiente aggiungere all’array $mime_types quelle desiderate.

Se non siete programmatori e volete un modo veloce per aggiungere questa funzionalità al vostro sito in WordPress, potete scaricare il plugin gratuito che ho realizzato: scarica caricaxml

(aggiornato a WordPress 4.7.1)

Problema WordPress: sul browser non si aggiornano la home page e i contenuti

Nelle ultime versioni di browser come Firefox e Chrome capita che visitando i siti WordPress non si aggiornino i contenuti. Cosa succede?

– carico un nuovo post/articolo/pagina dalla bacheca di WordPress
– ricarico la pagina sul browser
– continua ad apparire la vecchia pagina…

Il problema si è verificato su diversi miei siti realizzati in WordPress a seguito dell’aggiornamento alla versione 3.6.

Per risolvere “velocemente” in attesa di una soluzione ottimale, il consiglio è di aggiungere le seguenti righe di codice al file index.php presente nella cartella del vostro tema (tipicamente in wp-content/themes):

<?
header(‘Cache-Control: no-cache, no-store, must-revalidate’); // HTTP 1.1.
header(‘Pragma: no-cache’); // HTTP 1.0.
header(‘Expires: 0’); // Proxies.
?>

forzando il browser di chi visita il sito a riscaricare pagina e contenuti ogni volta.

Sicuramente non è la soluzione ottimale (la navigazione del vostro sito rallenta, e anche il traffico, da tenere in considerazione se non avete un contratto flat per il vostro hosting), ma è attualmente quella più veloce.