Adorate l'effetto riflesso stile 2.0 che tanto si vede in giro? Qualcuno vi ha detto che serve il costosissimo photoshop per ottenere un risultato del genere? Niente di più falso! Basta il potentissimo quanto gratuito The Gimp per ottenere lo stesso risultato ad un costo sostanzialmente più contenuto.

Ecco come procedere.

Create una nuova immagine applicando lo sfondo che preferite. Incollate su questa l'elemento che volete riflettere, ma createlo come nuovo livello, o se preferite usate lo strumento testo per scrivere la frase desiderata. Ogni nuovo elemento di testo, per Gimp è un nuovo livello.

Dal menu finestre, non dimenticate di visualizzare quella dei livelli, se non si apre in automatico all'avvio di The Gimp.

Selezionate il livello target e cliccate su "Copia Livello" . Selezionate il livello copiato (rinominatelo se volete facilitare le cose) e andare sul menu Livello >> Trasforma >> Rifletti Verticalmente.

Usare lo strumento "Sposta" e far si che la base alta del livello trasformato sia tangente alla parte bassa del livello padre. Come nell'esempio sotto:

A questo punto, avendo cura di tener selezionato il livello trasformato, applicate a questo una nuova maschera. Tipologia della maschera: Bianco (totale opacità).

Selezionate come colori principali della tavolozza:

• Il nero come colore di primo piano (#000000)
• Il bianco come colore di sfondo (#ffffff)

Selezionate lo strumento "Gradiente" ed applicatelo sul livello con un movimento del mouse dal basso verso l'alto.

Fate diverse prove, fino a trovare l'ottimo desiderato. Il risultato lo vedete all'inizio di questo post.

Mi è stato chiesto, l'ho fatto ed ora è disponibile per tutti voi. MyFeed è un plugin per WordPress che vi permette di personalizzare il contenuto del vostro feed.

Cosa si può fare?

- Scegliere il numero di paragrafi da visualizzare nel contenuto del feed. Per cui, se non volete usare il tag MORE, non volete visualizzare l'excerpt nel feed e nello stesso tempo volete distribuire il feed NON completo, potete decidere quanto post visualizzare senza perdere la formattazione data dall'uso dell'excerpt nel feed.

- Scegliere un testo come ancora per il link al post che verrà visualizzato alla fine del content del post.

- Scegliere un testo arbitrario che si visualizzerà all'inizio di ogni post nel feed.

- Scegliere un testo arbitrario che si visualizzerà alla fine di ogni post nel feed.

Queste ultime due opzioni sono utili per promuovere attività correlate nel feed. Inserire advertising. I campi supportano bene html, per cui oltre al testo potrete inserire immagini e tutto quanto è supportato in tal senso.

Come si installa?

Scaricate l'archivio compresso, decompattatelo e copiate il file myfeed.php nella directory wp-content/plugins. Aprite il pannello di controllo del blog, attivate il plugin con la solita procedura e configuratelo adeguatamente.

Nota Bene

Il plugin ha un'opzione di attivazione / disattivazione interna ed indipendente dall'attivazione data nel pannello di gestione dei plugin di WP.

Ogni opzione è totalmente indipendente dalle altre, in modo da offrire la maggiore flessibilità all'utente.

Non so quanto possa essere utile, ma se serve è vostro e ricordate che il plugin è distribuito sotto licenza GNU/LGPL.

Capita spesso di usare JavaScript per eseguire funzioni routinarie e contemporanee nella stessa pagina. A volte tali operazioni sono rese difficili da fatto che le funzioni, scritte nel loro modo regolare, possono essere istanziate una sola volta.

Per evitare questo limite naturale - che non è del linguaggio di programmazione, ma della tipologia di scrittura adottata dal programmatore - si rende spesso necessario costruire un oggetto tramite il quale istanziare una sessione che potrà chiamare simultaneamente la stessa funzione senza intercorrere in conflitti con variabili esistenti.

Di fatto andremo a definire le funzioni che utilizzeremo per arrivare al nostro risultato all'interno di un oggetto, che poi verrà evocato con una propria istanza. Di un oggetto possiamo creare più istanze, ed ogni istanza può richiamare autonomamente ogni metodo dell'oggetto.

Facciamo un esempio pratico. Un semplice innerHTML.

function showText('text', 'id'){
  this.text = text;
  this.id   = id;
 
  this.g = function(){
    return document.getElementById(this.id);
  }
 
  this.show = function(){
    this.g.innerHTML = this.text;
  }
}

first = new showText('Hello World!','myId');
first.show();

second = new showText('Hello Web!','myOtherId');
second.show();

Sembra poco, ma può risultare molto potente ;)

Oggi vediamo un po' come creare un plugin per WordPress. Succede spesso che mi si chiede di apportare modifiche e personalizzazioni a plugin esistenti e d'altra parte capita anche ce ci sia gente che usa un plugin molto articolato e pesante per modifiche del tutto banali e che non giustificherebbero un appesantimento del software.

L'utilizzo dei plugin aiuta ad astrarre determinate funzioni dal core di wordpress e permette di non dover modificare intensivamente il template per attivare / disattivare certe funzionalità.

Sono sempre stato contrario ad un utilizzo intensivo dei plugin. In parole povere, chi si va vantando di usare 50 e oltre plugin per wordpress, secondo me ha semplicemente sbagliato piattaforma :) . Ma proprio per evitare queste eventualità, vediamo ora come si progetta un plugin per la più famosa piattaforma di blogging aiutandoci con un esempio passo passo. Alla fine otterremo un plugin che permette di aggiungere un testo arbitrario all'inizio di ogni post (un plugin inutile, ma con chiaro scopo didattico).

Fasi Preliminari

Come prima cosa, bisogna avere una conoscenza capillare delle funzioni messe a disposizione da WordPress. Per cui leggetevi per bene la documentazione ed avrete appreso più della metà di quello ce c'è bisogno di sapere.

Altra cosa fondamentale da sapere è come WordPress decide quali sono i plugin attivi. Le informazioni a tal proposito sono salvate nel database, ed esattamente nella tabella wp_opstions (dove wp_ è il table prefix) in corrispondenza della option_name = 'active_plugins'.

Tutti i plugin sono contenuti nella directory /wp-content/plugins/.

Cominciamo a Scrivere

Con il nostro editor di testo preferito creiamo un nuovo file, chiamato myplugin.php. Nelle primissime righe del file dobbiamo inserire delle linee di commento che verranno poi lette da wordpress al fine di identificare il plugin come tale e poterne importare le info relative alla versione, descrizione e autore.

<?php
/*
Plugin Name: Just a test plugin
Plugin URI: http://www.davidonzo.com/
Description: Just a simple plugin to show how wordpress plugins work and can be create.
Author: davidonzo
Version: 0.1
Author URI: http://www.davidonzo.com/
*/

• Plugin Name: il nome del plugin.
• Plugin URI: il link all'articolo che spiaga il funzionamento del plugin.
• Description: una descrizione breve, scritta tutta su una riga.
• Author: nome dell'autore.
• Version: il numero di versione.
• Author URI: il link dell'autore del plugin.

Tutte queste informazioni verranno poi mostrate nella pagina di gestione plugins del pannello di controllo di wordpress.

Le funzioni necessarie

Adesso dobbiamo pensare a cosa ci serve per far funzionare il plugin. Ripeto, stiamo pensando ad un plugin che mostrerà un testo arbitrario, scelto dall'utente, ad inizio di ogni post. Quindi ci serve un'opzione in cui salveremo la frase da mostrare, ed anche un'opzione per attivare / disattivare la visualizzazione.

Per semplificarci la vita sceglieremo di usare un solo recordi in cui includeremo le due informazioni necessarie. Le divideremo da simboli arbitrari (nell'esempio %%%) che ci permetteranno un explode sulla stringa.

A questo punto dobbiamo conoscere la struttura del database di wordpress. Le opzioni dei plugin vengono salvate sempre nella tabella wp_options. Possiamo creare una nuova opzione con la funziona add_option. Il valore attribuito verrà sempre salvato in un campo di tipo longtext.

In fase di installo aggiungeremo l'opzione necessaria dandogli dei valori di default. Vediamo come.

function myplugin_install(){
  if(get_option('opt_myplugin' == '') || !get_option('opt_myplugin')){
    add_option('opt_myplugin', '0%%%Write some text');
  }
}

if (isset($_GET['activate']) && $_GET['activate'] == 'true') {
    myplugin_install();
}

All'attivazione del plugin, se l'opzione opt_myplugin (nome che abbiamo scelto noi di dare) non esiste o se esiste, ma vuota allora viene aggiunta l'opzione al database. Questa funzione viene eseguita al momento dell'installazione del plugin.

Per come è scritta la funzione di installo, questa si eseguirà solo alla prima attivazione. Disattivando il plugin infatto le opzioni resteranno inalterate.

Pensiamo subito alla funzione per leggere le opzioni dal database, e nel nostro caso, estrarre le informazioni sensibili.

function myplugin_option($opt){
  $opt_myplugin = get_option('opt_myplugin');
  $opt_myplugin = explode('%%%', $opt_myplugin);
 
  switch($opt){
    case 'active':
      return $opt_myplugin[0];
    break;
   
    case 'text':
      return $opt_myplugin[1];
    break;
  }
}

La funzione get_option() fornita da wordpress ci fa estrarre in modo facile i dati dalla tabella wp_options. Tutto il resto è in funzione della nostra modalità di storing delle informazioni. Avremmo anche potuto pensare a due record per gestire separatamente i dati, ma in questo modo risparmiamo spazio di database, facendo fede ad una delle prime frasi scritte nel manuale di mysql: "make your data smaller as possibile".

Adesso ci serve una pagina all'interno del pannello di controllo per gestire le opzioni. Per prima cosa aggiungiamo un link alla finestra settings nel pannello di controllo. Anche in questo caso ci aiuta una funzione del core di wordpress.

function myplugin_config_page(){
  if (function_exists('add_options_page')){
    add_options_page('MyPlugin Menu Title',
                     'MyPlugin Option',
                     8,
                     basename(__FILE__),
                     'myplugin_config'
                     );
  }
}

La funzione add_options_page necessita di alcune opzioni:

• Il titolo della pagina di destinazione.
• L'ancora del link che apparirà nella pagina dei settings.
• Il livello necessario per accedervi.
• Il file da caricare.
• La funzione, inserita all'interno del file da caricare, da eseguire.

Ed ora vediamo la funzione che si occupa di visualizzare il pannello di controllo.

function myplugin_config(){
  $active   = (myplugin_option('active') == 1) ? 'checked' : '';
  $deactive = (myplugin_option('active') == 0) ? 'checked' : '';
  print('<div class="wrap">
         <h2>MyPlugin Options Tab</h2>
          <form id="ak_sharethis" name="myplugin_cnf" action="'.get_bloginfo('wpurl').'/wp-admin/index.php" method="post">
            <p>By this page it\'s possibile configure the plugin. Setup the following options to start testing how a wordpress plugin works!</p>
           <fieldset class="options">
            <p>Show some content before any post?</p>
               <ul>
                 <li>
                   <input type="radio" name="c_before_post" value="1" id="c_before_post_yes" '.$active.' />
                     <label for="c_before_post_yes">Yes</label>
                 </li>
                
                 <li>
                   <input type="radio" name="c_before_post" value="0" id="c_before_post_no" '.$deactive.' />
                     <label for="c_before_post_no">No</label>
                 </li>
               </ul>
              
               <p>Type the contet text to show:</p>
                 <input type="text" name="c_text_myplugin" value="'.myplugin_option('text').'" /> 
            </fieldset>
           <p class="submit">
        <input type="submit" name="myplugin_submit_button" value="Update Settings" />
       </p>
      </form>
         </div>');
}

Ne più ne meno che tanto html. Un form con cui gestiamo le poche opzioni di questo plugin. Ma non è tutto. Perchè se possiamo modificare le opzioni dalla pagina costruita dalla funzione precedente, è anche necessario avere una funzione che ci permetta di aggiornare le opzioni. Eccola:

function update_myplugin_settings(){
  if($_POST['myplugin_submit_button'] == 'Update Settings'){
    $newsetting = $_POST['c_before_post'] . '%%%' . $_POST['c_text_myplugin'];
    update_option('opt_myplugin',$newsetting);
    header('Location: '.get_bloginfo('wpurl').'/wp-admin/options-general.php?page=myplugin.php&updated=true'); 
  }
}

Si noti l'uso di update_option, che ci permette di aggiornare facilmente una particolare opzione inclusa nella tabella wp_options del database di wordpress.

Per fare eseguire tale funzione usiamo add_action(). Altro strumento messo a disposizione dal core di wordpress.

add_action('init', 'update_myplugin_settings', 9999);

Aggiunta in questo modo, con il tag init ed una priorità (9999) molto alta, l'azione verrà eseguita ad ogni caricamento del plugin. Ma questo non vuol dire che ad ogni caricamento del file myplugin.php le opzioni verranno aggiornate. Guardate la funzione update_myplugin_settings(). Invia la query al database solo se riceve i dati in post.

Ora abbiamo tutto. Pannello di controllo, possibilità di aggiornare le opzioni, pagina di configurazione. Ma ci siamo dimenticati di pensare all'output di front end? Ma ovviamente no :)

Questa è sicuramente la parte più facile. Si pensi solo ad una funzione che riscriva la variabile $content.

function add_myplugin_text_to_content($content){
  if(myplugin_option('active') == 1){
   $content = '<p>'.myplugin_option('text').'</p>' . $content;
  }
  return $content;
}

add_action('the_content', 'add_myplugin_text_to_content');

Facile no? E da ora, tutte le volte che volete aggiungere una riga o un'immagine da qualche parte, non andate a caricare quei pesantissimi plugin che saranno ottimi per chi li usa almeno all'80%, ma sono semplicemente un peso per chi non li sfrutta, ed una tortura per chi naviga i vostri blog.

Volete scaricare il plugin di esempio? E qui per voi!

Una semplice funzione per leggere il valore di un cookie.

function CookieValue (offset) {
  var stringend = document.cookie.indexOf (";", offset);
  if (stringend == -1)
   stringend = document.cookie.length;
  return unescape(document.cookie.substring(offset, stringend)).replace("+"," ");
}

  function GetCookie (name) {
   var argu = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var none = '';
   var i = 0;
   while (i < clen) {
    var a = i + alen;
      if (document.cookie.substring(i, a) == arg)
        return CookieValue(a);
      i = document.cookie.indexOf(" ", i) + 1;
      if (i == 0) break;
  }
 return none;
}

Come usarla?

Un esempio è sempre un buon modo per spiegare le cose. Si immagini di avere un cookie con nome "MyCookie" e valore "MyCookie+Value".

La funzione:

GetCookie('MyCookie')

Ritornerà: "MyCookie Value".

Non ho molto tempo per aggiornare il blog in questo periodo. Spero quanto prima di tornare a pieno regime :)

Può risultare utile calcolare le coordinate del mouse rispetto allo screen video dell'utente. Le utilizzazioni di tali dati possono essere innumerevoli. Una è quella di poter simulare via JavaScript l'effetto title con elementi di stile molto più particolari, che magari segua il mouse durante il suo move sull'elemento prescelto.

Vediamo come procedere

Per prima cosa dobbiamo distinguere Internet Explorer dal resto del mondo, quindi creiamo una funzione che ci permetta di avvistare il browser di casa Redmond all'orizzonte.

function isIE(){
  if(document.all){
    return true;
  }else{
    return false;
  }
}

Dopo di che scriviamo la funzione che ci permette di determinare in valore assoluto le coordinate x:y del mouse.

function getMousePosition(e){
   if (isIE()) {
     var e = window.event;
   }
     posx = e.clientX;
     posy = e.clientY;
}

Notate il diverso comportamento della funzione nel caso in cui il client utilizzi Internet Explorer. Per calcolare le coordinate del mouse è necessario usare window.event.

Ma le coordinate del mouse cambiano continuamente al movimento. Quindi dobbiamo fare in modo che la funzione si attivi ogni volta che il mouse si muove. Per far questo basta usare l'evento onmousemove.

All'interno del documento scriveremo quanto segue (preferibilmente nei tag del head):

<script type="text/javascript">
document.onmousemove=getMousePosition
</script>

Con qualche piccola modifica possiamo ottenere un risultato di questo genere. Aprite il link e passate col mouse sulla pagina. Le coordinate del mouse si aggiorneranno automaticamente :-)

Ma si può andare oltre, ed applicare la metodologia ad un elemento specifico, fissando a quello output del tutto particolareggiato. Ecco come simulare un title che segue il mouse quando passa sopra ad un elemento.

Nuova versione di TextScroller. Ho sistemato diversi bug presenti nella versione 1.0 ed implementato qualche improve per facilitarne l'uso. Ora funziona bene anche con Internet Explorer ed il bug di overflow di cui è affetto.

Nota Importante

Da questa versione non è più necessaria la presenza di due elementi uno dentro l'altro. Basterà un solo elemento identificato da un id univoco e penserà lo script a creare automaticamente un elemento child all'interno del quale far scrollare il testo contenuto nel id padre.

Di conseguenza la gestione dello stile degli elementi, opzionale nella precedente versione, qui è obbligatoria. Si avrà un parametro di controllo in meno lato utente.

Impostare lo script

Con il vostro editor di testo preferito aprite il file e modificate le preferenze seguenti:

  var orientamento = '';
  var parent = '';
  var duration = ;
  var h = ;
  var w = ;

var orientamento (array)

Può assumere i valori seguenti:

• TD: scorrimento dall'alto al basso;
• DT: scorrimento dal basso in alto;
• RL: scorrimento da destra a sinistra;
• LR: scorrimento da sinistra a destra;

var parent (string)

L'id dell'elemento che contiene il testo da scrollare.

var duration (integer)

Valore di durata in millisencondi di ogni spostamento. Più basso è il valore, più veloce risulterà l'effetto movimento del testo.

var h (integer)

Fissa l'altezza dell'elemento parent. In questo modo decidete quanto deve essere alto lo scrolling.

var w (integer)

Fissa la larghezza dell'elemento parent. In questo modo decidete quanto deve essere largo lo scrolling.

Impostare il codice HTML

Nei tag del head della pagina in cui volete usare la libreria, inserite:

<script type="text/javascript" src="textScroller.js"></script>

Tenendo a mente di dare le giuste coordinate del file js.

All'interno del tag body

<body onload="letsGo()">

All'interno della pagina dovrà esserci un elemento contraddistinto dall'ID che si vuole far scrollare.

<div id="parent">
    Testo da scrollare
    Testo da scrollare
    Testo da scrollare
</div>

Degradabilità

Il codice è adeguatamente degradato. Nel caso in cui il client non abbia JavaScript abilitato verranno seguite le indicazioni di css date nel foglio di stile. Nella maggior parte dei casi, la dimensione dell'elemento contenente il testo si adeguerà a questo mostrandolo statico e per intero.

Extra Style

Oltre agli elementi di stile inclusi nella libreria, l'utente potrà definire proprie direttive aggiuntive. L'id dell'elemento creato dallo script avrà lo stesso nome dell'id padre, ma con suffisso child-. Se la variabile parent dello script è l'id Testo, il nome dell'elemento creato dallo script sarà child-Testo.

Facile capire che basterà definire delle direttive di stile pre #child-Testo al fine di ottenere un aspetto ancora più personalizzato ed adeguato alle esigenze del web in cui viene inclusa la libreria.

Licenza

Questo software è realizzato e distribuito con licenza GNU/GPL v.3. E' possibile utilizzarlo per qualsiasi proposito. E' possibile modificarlo ed è possibile redistribuirlo a patto che venga rilasciato sotto le stesse condizioni di licenza.

Un esempio volante?

Anche questa volta immancabile :)

Qualche tempo fa avevo elogiato IE7 per la buona compatibilità con gli standard ed eccoci oggi di fronte ad un bug veramente grave se pensiamo a come questo viene fuori.

La dichiarazione overflow:hidden di un elemento parent viene ignorata se in un elemento child (interno a quello parent) viene dichiarato il position:relative.

Ma la cosa davvero bella è che il bug si manifesta solo se nel documento è specificato un corretto DOCTYPE.

Vediamo il tutto tramite un esempio minimizzato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="IT-it">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>IE7 Bug - Overflow:hidden e position:relative</title>
<style type="text/css">
.parent{
  width:300px;
  height:60px;
  border: 1px solid #ccc;
  overflow:hidden;
}

.child{
   position:relative;
}
</style>
</head>
<body>
<div class="parent">
 <div class="child">
  Questo &egrave; un po' di testo.<br />
  Questo &egrave; un po' di testo.<br />
  Questo &egrave; un po' di testo.<br />
  Questo &egrave; un po' di testo.<br />
  Questo &egrave; un po' di testo.<br />
  Questo &egrave; un po' di testo.<br />
 </div>
</div>
</body>
</html>

Notate che dentro il div con classe parent è annidato il div con classe child. Nonostante il parent sia settato per nascondere tutto il contenuto che eccede i 60px di altezza ed i 300px di larghezza, Internet Explorer 7 ignorerà la direttiva a causa del position:relative; della classe .child.

Eliminando le prime due righe del documento a beneficio di un laconico e poco corretto <html> tutto funzionerà a dovere. Ma ci ritroveremo immediatamente con una pagina impossibile da validare ed il cui comportamento sarà poco chiaro da browser a browser. Questo perchè, nonostante qualcuno pensi che la dichiarazione di DOCTYPE sia una sfigataggine dei nerd, questa è realmente utilizzata dai browser per determinare l'output da visualizzare all'utente.

Soluzione

Per far si che overflow sia rispettato anche su Internet Explorer si abbia l'accortezza di definire nello stile dell'elemento parent lo stesso tipo di position dell'elemento child. Nel nostro caso:

.parent{
  width:300px;
  height:60px;
  border: 1px solid #ccc;
  overflow:hidden;
  position:relative;
}

A voi un esempio con spiegazione estesa.

Text Scroller è una semplice libreria JavaScript che permette di effettuare lo scrolling del testo di un elemento di una magina web. E' possibile in questo modo creare un effetto "titoli di coda" o mostrare le ultime news in successione, senza dover usare troppo spazio di pagina.

Il contenuto dell'elemento prescelto verrà fatto scrollare in maniera ripetuta. Lo scrolling si arresta all'evento onmouseover, ovvero quando l'utente passa con il mouse sul testo. Questo permette di inserire permalink ed evitare che l'utente debba rincorrersi.

Come usare TextScroller?

E' semplicissimo. Scaricate il file textScroller.js contenuto in questo archivio. All'interno troverete anche un esempio live.

Impostare lo script

Con il vostro editor di testo preferito aprite il file e modificate le preferenze seguenti:

  var orientamento = '';
  var id = '';
  var parent = '';
  var duration = ;
  var l = ;
  var h = ;
  var w = ;

var orientamento (array)

Può assumere i valori seguenti:

• TD: scorrimento dall'alto al basso;
• DT: scorrimento dal basso in alto;
• RL: scorrimento da destra a sinistra;
• LR: scorrimento da sinistra a destra;

var id (string)

L'id dell'elemento che contiene il testo da scrollare.

var parent (string)

L'id dell'elemento padre del precedente. Ovvero l'elemento all'interno del quale id scrollerà.

var duration (integer)

Valore di durata in millisencondi di ogni spostamento. Più basso è il valore, più veloce risulterà l'effetto movimento del testo.

var l (boolean)

Se è impostato uguale ad uno attiva dei controlli automatici di stile per coordinare al meglio i due elementi della pagina interessati ed il tipo di scorrimento prescelto.

var h (integer)

Fissa l'altezza dell'elemento parent. In questo modo decidete quanto deve essere alto lo scrolling.

var w (integer)

Fissa la larghezza dell'elemento parent. In questo modo decidete quanto deve essere largo lo scrolling.

Impostare il codice HTML

Nei tag del head della pagina in cui volete usare la libreria, inserite:

<script type="text/javascript" src="textScroller.js"></script>

Tenendo a mente di dare le giuste coordinate del file js.

All'interno del tag body

<body onload="letsGo()">

All'interno della pagina dovranno esserci due elementi contraddistinti dagli id di id e parent della funzione, l'uno dentro l'altro, come nell'esempio.

<div id="parent">
  <div id="id">
    Testo da scrollare
    Testo da scrollare
    Testo da scrollare
  </div>
</div>

Un esempio volante?

Ovviamente :)

Mentre il popolo blogsferico del bel paese discute... dai sappiamo tutti di cosa discute... grazie ad un articolo scritto dai ragazzi di UnaNuovaProspettiva scopro l'ennesimo plugin per WordPress di Alex King: WordPress Mobile Edition.

Questo plugin controlla lo user-agent del browser del client e, se questo corrisponde ad uno di quelli racchiusi in un elenco (un array) debitamente compilato, viene mandato in loading un template alternativo, totalmente compatibile con dispositivi mobile.

Nei fatti il template incluso è una versione extralight di un qualsiasi altro template. Escludendo immagini di sfondo, fogli di stile pesanti e tutto il JavaScript incluso nelle pagine tradizionali, la navigazione risulta molto più veloce e soprattutto poco dispendiosa per chi paga la connessione mobile in funzione della quantità di dati scaricati.

Come sempre, nell'attesa che la piattaforma di blogging più famosa del mondo si decida a diventare realmente multilinguage, mi sono preso la briga di tradurre in italiano le parti del template mobile scritte in inglese.

Scarica WordPress Mobile Edition in Italiano

L'installazione è molto semplice. Scompattate l'archivio e copiate il file wp-mobile.php nella directory /wp-content/plugins/. Dopo di che copiate la directory la directory /wp-mobile/ in /wp-content/themes/ ed attivate il plugin dall'apposita pagina del pannello di controllo del blog.

Se qualcuno accederà al vostro blog da cellulare o palmare, senza bisogno di alcuna interazione, verrà direttamente mandato in loading il template mobile.

Per provare il plugin evitando di doversi connettere realmente da cellulare, con Firefox, installate l'addon User Agent Switcher ed usare come User Agent "Mozilla/3.0 (compatible; AvantGo 3.2)" o qualsiasi altro user agent di browser usati in dispositivi mobili.