Nota importante: ho scoperto che, se si crea un nuovo ruolo utilizzando l’Editor Ruoli Utente, è possibile fare la query passando qualsiasi ruolo e quindi possiamo potenzialmente filtrare qualsiasi utente!

Creare una pagina personalizzata

Confesso che non ho fatto esperimenti in altre pagine, nel web infatti si consigliava di utilizzare una pagina personalizzata per fare l’operazione di recupero utenti. Non credo tuttavia che possano sorgere particolari problemi, salvo avere l’accortezza di “resettare” le query del caso (wp_reset_query/wp_reset_postdata).

Comunque, nell’esempio ho realizzato una pagina personalizzata:

< ?php /* Template Name: Template Chi siamo */ ?>

Wp_User_Query per estrarre i dati

Ecco lo script completo utilizzato:

< ?php
// dichiariamo gli argomenti
$args  = array(
// cerca solo gli utenti con ruolo Autore (è qui che dovrete mettere l"eventuale ruolo creato con Role Editor)
"role" => "Author",
// order results by display_name
"orderby" => "display_name"
);
// Creiamo l"oggetto WP_User_Query
$wp_user_query = new WP_User_Query($args);
// Estraiamo i risultati
$authors = $wp_user_query->get_results();
// Controlliamo che vi siano
if (!empty($authors))
{
	echo "<ul>";
	// cicliamo tutti gli utenti filtrati
	foreach ($authors as $author)
	{
		// recuperiamo i dati di ognuno
		$author_info = get_userdata($author->ID); ?>
		<li>
                        //Creiamo un url alla pagina autore della persona (pare che debba avere un post almeno pubblicato per funzionare il link, vi risulta?
			<a href="<?php bloginfo("url")?>/?author=< ?php print $author_info->ID ?>">
 
                        // Recuperiamo l"avatar e settiamo la dimensione (quadrata)
			< ?php print get_avatar( $author_info->user_email,100);?>
                        // Recuperiamo nome e cognome.
			< ?php print $author_info->first_name ?> < ?php print $author_info->last_name ?>
			</a>
		</li>
	< ?php
	}
	echo "</ul>";
} else {
	echo "Nessun autore trovato";
}
?></ul>

Ho inserito i commenti direttamente nel codice in modo da semplificarne la comprensione. Utilizzando la fantomatica wp_reset_query è possibile lanciare più query nella stessa pagina. Infine confermo che l’esempio riportato funziona anche con i Gravatars
Potete vedere un esempio in cui ho utilizzato il seguente script qui: http://www.webhouseit.com/chi-siamo/

Articoli correlati:

1. 10 Tecniche per personalizzare il pannello admin di WordPress
2. Come creare un widget personalizzato per WordPress
3. Trasferire blog WordPress 3+ in un nuovo dominio

Premetto che la funzionalità è ancora limitata, ed essendo vincolata a due stati (checked o no) non permette grandi controlli. Tuttavia ecco i due semplici esperimenti che ho fatto utilizzando alcune proprietà esclusive dei CSS3. Perdonerete la totale mancanza di qualsiasi elemento grafico, vero! Sono solo due esperimenti…

PS: utilizzate Chrome o Firefox 12+ per riuscire a vedere tutto correttamente!

Ruotare un’immagine al click

Il primo esempio è molto carino da vedersi, sicuramente del tutto inutile a livello pratico, ma fa uso della trasformazione CSS3 chiamata “rotateY”. Che cosa fa? Semplicemente ruota un oggetto del DOM rispetto all’asse Y.

Il codice HTML

<div class="animate-wrap">  
	<input type="checkbox" id="ani-1"/>Ruota immagine 1
	<div class="animate">
		<img src="01.jpg" width="640" height="480" id="img1"/>
	</div>
</div>​

Nota fondamentale: L’oggetto checkbox deve stare immediatamente prima del div “animate”. Già, al momento (confesso di non aver cercato a lungo, quindi se avete altre tecniche vi invito a segnalarle nei commenti) è quanto ho trovato per far avvenire la magia. La magia CSS:

 
.animate img {
	display:block;
	position:relative;
	}
 
/* GENERICHE */
 
.animate-wrap input[type="checkbox"]:checked + .animate img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
 
.animate-wrap input[type="checkbox"] + .animate img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
 
/* IMMAGINE 1 */
.animate-wrap input[type="checkbox"]:checked + .animate #img1 {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

Le prime due proprietà mi servivano per dare a tutte le animazioni la stessa durata. 0.5 secondi con effetto ease-out in uscita. Il “trucco” però avviene nell’ultima parte. E’ qui infatti che si dice al browser: prendi l’immagine con id “img1” che sta dentro al div con classe “.animate” che si trova “+” immediatamente dopo il checkbox. Ma fai tutto ciò quando “spunti” il checkbox! Et voilà, la magia si realizza! Non ho ancora capito perchè ritorni da solo allo stato di partenza se tolgo la spunta. Ma tant’è, ci piace così no?

Spostare un’immagine al click: usiamo i keyframes

I keyframes sono il futuro prossimo del CSS. Praticamente sono una sorta di timeline (si come quella di flash) che permette di controllare le animazioni nel tempo. Vi consiglio di buttare un occhio a questo articolo che abbiamo pubblicato di recente su Webhouse, per approfondire un po’ la questione. Ma tornando a bomba sui nostri esempi… Ecco come fare per spostare un’immagine utilizzando solo codice CSS:

Il codice HTML

<div class="animate-wrap">  
	<input type="checkbox" id="ani-2"/>Sposta immagine 2
	<div class="animate">
		<img src="02.jpg" width="640" height="480" id="img2"/>
	</div>
</div>​

ed il CSS che si occupa di “spostare” l’immagine utilizzando una transizione.

/* KEYFRAMES PER IMMAGINE 2 */
@-webkit-keyframes mymove {
	0%   { left: 0; }
	50% { left: 200px; }
	100% { left: 0; }
}
@-moz-keyframes mymove {
	0%   { left: 0; }
	50% { left: 200px; }
	100% { left: 0; }
}
@-ms-keyframes mymove {
	0%   { left: 0; }
	50% { left: 200px; }
	100% { left: 0; }
}
@-keyframes mymove {
	0%   { left: 0; }
	50% { left: 200px; }
	100% { left: 0; }
}
 
/* IMMAGINE 2 */
.animate-wrap input[type="checkbox"]:checked + .animate #img2 {
    -webkit-animation:mymove 1s normal;
    -moz-animation:mymove 1s normal;
    animation:mymove 1s normal;
}

Come vedete prima dobbiamo dichiarare nell’arco di 1 secondo, in che stato si troverà il nostro oggetto del DOM. Al 50% dell’animazione si troverà spostato di 200px a sinistra(dichiara un position:relative o absolute se no non si sposta. Sì okay, è una considerazione niubba ma meglio farla ).
Note: il nome dell’animazione lo scegliamo noi. Quindi “mymove” può essere pippo, pluto o paperino! Idem per la durata e le %. Ovviamente il 50% di 1 secondo sono 0.5 secondi. Per il resto mi sembra tutto intuitivo, non resta che sbizzarrirsi! Magari con qualche esempio più creativo del mio :S
E’ semplicemente fantastico no?

Articoli correlati:

1. Realizzare carte animate con Transizioni e Animazioni CSS3
2. Semplice menu a tendina dropdown con jQuery
3. Lo pseudo selettore :target | CSS3

Evitiamo i duplicati con un trick

Il semplice trucco per evitare che i post vengano duplicati tra i loops è quello di memorizzare l’ID del post in questione all’interno del primo loop e verificarne l’esistenza (e quindi determinarne l’esclusione) nel loop successivo:

< ?php $my_query = new WP_Query('category_name=evidenza&posts_per_page=1');
  while ($my_query->have_posts()) : $my_query->the_post();
  $non_duplicare = $post->ID; //Questo è il trick
?>
<!-- Fai le tue azioni dentro al loop -->
< ?php endwhile; ?>

Ora che l’ID è memorizzato nella variabile $non_duplicare, aggiungiamo un controllo nel secondo loop. Scriveremo qualcosa di simile a ciò:

< ?php if (have_posts()) : while (have_posts()) : the_post();
if( $post->ID == $non_duplicare ) continue; //Questo è il trick
?>
<!-- Fai le tue azioni dentro al loop -->
< ?php endwhile; endif; ?>

Se l’ID del post corrisponde a quello memorizzato allora non considerarlo e vai avanti nell’estrazione degli altri post.
Tutto molto semplice no?

Articoli correlati:

1. WordPress Loop Snippets – Partire col piede giusto
2. Templates differenti per articoli diversi in WordPress
3. Paginazione di categorie personalizzate in WordPress

La funzione Javascript di confronto

function dateCompare(){
	var preimpostata = new Date(2092, 3, 30); //30 APRILE 2092
	var oggi = new Date();
 
	var diff = preimpostata.getTime()  - oggi.getTime();
 
	//Se la data preimpostata è già passata
	if(diff< =0){
		alert("La data è già passata!");
	}
	//Se la data preimpostata non è ancora passata
	else {
		alert("Non è ancora passata la data!");
	}
};

Con il codice mostrato stiamo eseguendo le seguenti operazioni:

• Imposto una data “traguardo” e la memorizzo nella variabile “preimpostata”. Ricordiamoci che la numerazione dei mesi in Javascript parte da 0 e non da uno. Quindi Gennaio corrisponde al mese numero 0.
• Memorizzo in una variabile “oggi” la data odierna del pc utilizzando l’oggetto Date.
• Il metodo getTime() restituisce il numero di millisecondi trascorsi tra il 1 Gennaio 1970 e la data di riferimento. Nel nostro caso quindi saranno rispettivamente la data odierna e il 30 Aprile 2092.
• Se questa differenza è minore o uguale a zero (e quindi la data preimpostata è passata), fai un’azione altrimenti fanne un’altra

Come possiamo vedere è tutto molto semplice. Utilizzando la funzione setFullYear() avremmo potuto anche fare il confronto diretto tra le due date senza passare per i “millisecondi”. Altri metodi utili dell’oggetto Date() per la gestione delle date sono:

• getHours() – Per ottenere l’ora
• getMinutes() – Per ottenere i minuti
• getSeconds() – Per ottenere i secondi
• getYear() – Per ottenere l’anno
• getFullYear() – Per ottenere l’anno a 4 cifre

Per la realizzazione di un orologio, ricordo ancora che utilizzando un linguaggio client-side possiamo recuperare solamente l’orario del PC dell’utente, vi rimando a questo semplice esempio: Javascript Time Clock.

Articoli correlati:

1. Simulare una fonte di luce dinamica in JavaScript
2. Estrazione di numeri casuali compresi tra due valori in jQuery/Javascript
3. jQuery load per eseguire più azioni rimanendo nella stessa pagina

11/03/12 – Il codice è stato ripulito e tutti i bugs relativi allo spostamento sono stati finalmente risolti

A grande richiesta, con oltre 650 download per la versione 1.0, è finalmente disponibile la versione 2.0 del jQuery news spotSlider by Gleenk.

Un carousel per le news!

In primis: tutte le vecchie funzionalità del carousel sono state mantenute! Ti invito quindi, se non l’avessi già fatto, a leggere l’articolo relativo al jQuery newsSpot slider v1.0 in cui vengono illustrate passo passo. In seguito invece illustrerò brevemente le modifiche apportate.
Anticipo fin d’ora che anche il supporto per i browser è rimasto invariato in modo che non si perdesse nessuna fetta di utenza!

3 novità per la versione 2.0

Sono tre le novità introdotte, su vostra richiesta, nella versione 2.0. Vediamole 1 ad 1 analizzando brevemente il codice jQuery che è stato necessario implementare:

1. Temporizzatore con stati play/pause

Attraverso un semplice pulsante play/pause è ora possibile automatizzare lo scorrimento delle news con un tempo stabilito da noi!
Per quanto riguarda il codice html è stato sufficiente aggiungere un link e posizionarlo all’interno dello slider.

   <a href="javascript:void(0)" id="toggleTime" class="tpause" title="Play/Pause"></a>

In jQuery utilizziamo la funzione toggle() per far sì che ad ogni click venga azionato o disattivato il timer e, allo stesso tempo, venga effettuato lo switch dell’immagine di background.

$("#toggleTime").toggle(
	//click in stato di pausa
	  function () {
		stopTimer();
		$(this).removeClass("tpause");
		$(this).addClass("tplay");
	  },
 
	  function () {
		startTimer();
		$(this).removeClass("tplay");
		$(this).addClass("tpause");
	  }
	);

La gestione del temporizzatore invece è affidata alle funzioni javascript setInterval() e clearInterval() che servono per lanciare e fermare delle funzioni ad intervalli regolari. In questo caso l’azione da ripetere sarà il semplice click sulla freccia destra! (ps: ricordatevi l’unbind per evitare i click multipli!)

//timer autoslide
	var myTimer;
	var timerbis;
 
	function startTimer() {
		myTimer = window.setInterval( function() {
			$('.news_slider-right').click();
                        $('.news_slider-right').unbind();
		}, intTmp);
	};
 
	function stopTimer(){
		window.clearInterval(myTimer);
		clearTimeout(timerbis);
	}

Una piccola nota: la variabile intTmp permette di cambiare l’intervallo di tempo entro cui effettuare il cambio di slide. Sarà quindi sufficiente modificare questo parametro all’inizio dello script (espresso in millisecondi):

//Tempo auto-slide
	var intTmp = 5000;

2. Freccia di navigazione indietro a scomparsa

Nella versione precedente la freccia di navigazione sinistra era sempre visibile, ora invece, quando ci troviamo al punto di partenza, viene automaticamente rimossa! Per farlo è stato sufficiente verificare il caso in cui il “left” dello slider avesse valore 0. In tal caso, da verificare ad ogni click al termine dello scorrimento, la freccia viene nascosta.

//controllo posizione per comparsa frecce
	function checkFrecce(){
	if(boxUl.css("left")=="0px"){
		$(".news_slider-left").hide();
		}
	else{
		$(".news_slider-left").show();
		}
	}

3. Ritorno automatico al punto di partenza

Per concludere, è stato fatto un semplice controllo sulla posizione dello slider affinchè, raggiunto l’ultimo blocco di 4 news, lo slider torni automaticamente alla posizione iniziale. Il controllo implementato è il seguente:

...
boxUl.stop().animate({left:"0px"}
...

Note d’uso e conclusioni

Questo script, come il precedente è rilasciato sotto licenza CC Non Commerciale. Sarei lieto di poter vedere i siti in cui implementerete lo script per poterli condividere con tutti i lettori. Infine, se qualcuno riscontrasse dei bug o avesse delle migliorie da apportare… fatevi avanti!

Articoli correlati:

1. jQuery News Slider – gleenk spotSlider v1.0
2. Uno slider infinito in 4 righe, con jQuery!
3. jQuery bind e unbind, come prevenire click multipli

Pratiche di ottimizzazione del <title>

Vediamo quindi 9 rapidi consigli per ricordarsi di controllare che stiamo svolgendo tutto nel modo corretto è migliore possibile!

1. Un title per pagina, nel tag <head>

Uno degli errori più comuni quando si realizza una pagina web è quello di lasciare il title in bianco, di utilizzarne più di uno per pagina o di inserirlo nel posto sbagliato. Nessuna di queste operazioni è corretta. Inserisci quindi il titolo nel tag <head>, uno per pagina, chiaro ed essenziale.

2. Parole chiave ordinate decrescentemente per importanza

In questo tag è bene inserire le parole chiavi più importanti in ordine di importanza decrescente. La prima parola quindi ha maggior valore, la seconda un po’ meno e così via.
Quando effettui una ricerca per le parole chiave (ad esempio con l’Adwords Keyword Tool) controlla sempre il traffico generato dalle parole che stai andando ad utilizzare. Annotati anche il livello di competitività e fai quindi la tua scelta di conseguenza.
Non far diventare questo luogo un’accozzaglia di parole però, sia chiaro. A nessuno piace leggere una lista di parole insensate.

3. Il nome del brand alla fine

A causa di quanto appena affermato riguardo alla rilevanza assegnata al <title>, a meno che il nome del tuo brand sia più importante e ricercato del singolo prodotto, metti sempre il nome della tua società alla fine. Per pagine interne al sito, diverse quindi dalla homepage, potresti pensare di omettere il nome del brand.

4. Non usare più di 70 caratteri, spazi inclusi

I motori di ricerca non apprezzano i titoli lunghi e dopo una certa lunghezza li tagliano azzerando quindi il valore delle keywords. Resta quindi dentro al limite di 70 caratteri per evitare che ciò accade. Ad ogni modo questo numero può oscillare facilmente tra valori prossimi ai 70 quindi, per quanto possibile, cerca di mantenere il numero di parole ridotto.

5. Evita di usare le stop-words

Le stop-words sono parole che non hanno alcun valore per i motori di ricerca. Solitamente consistono in articoli, verbi ausiliari, congiunzioni, preposizioni e pronomi. Per quanto possibile evita quindi di utilizzarli ricordandoti sempre però che non dovrai trasformare il tuo titolo in un elenco illeggibile per un utente umano. Puoi trovare un elenco di stopwords su ranks.nl.

6. Usa parole chiave rilevanti presenti nel corpo del testo

Per ottenere maggio beneficio dal title, è bene che le parole chiave usate rispecchino (e siano presenti) il testo del corpo della pagina. Questo è fondamentale affinchè i motori di ricerca capiscano che il titolo è realmente la sintesi di ciò che l’utente leggerà.

7. Titoli diversi per pagine diverse

In siti ben fatti non dovrebbe mai succedere che lo stesso contenuto sia presente su più pagine (non fosse altro che per evitare penalizzazioni da contenuti duplicati), allo stesso modo lo stesso title non deve mai trovarsi su più pagine. Se perfino google webmaster tools ce lo dice un motivo in fondo ci sarà

8. Evita di replicare esattamente lo stesso contenuto del tag h1

In modo simile, seppure pare che recentemente Google abbia ridotto l’importanza di questo tag, l’h1 svolge la funzione di descrivere il contenuto di una pagina web. Dal momento che si configura come contenitore rilevante di parole chiave è bene che presenti parole chiave ma fornite, possibilmente, in modo leggermente differente dal title.

9. Evita il keyword stuffing

Non ripetere la stessa parola più volte nel title, è una pratica scorretta e potrebbe facilmente venire penalizzata. Sfrutta quindi più parole, ottimizzale ma non eccedere mai. Uscire dalle penalizzazioni, soprattutto se sei agli inizi dei tuoi studi SEO, potrebbe sarà sicuramente più difficile che entrarci.

Ispirato a: “Nine Best Practices For Optimized title Tags”

Articoli correlati:

1. Trucchi SEO per l’ottimizzazione delle pagine Facebook
2. Consigli per ottimizzare le immagini per i motori di ricerca
3. Consigli per scrivere un copy User e SEO Friendly

Nessuno vorrebbe che l’icona del proprio sito venisse visualizzata come nell’immagine qui sopra, confondendosi tra tutti gli altri salvataggi. Non curare l’immagine lascia al titolo l’unica possibilità di catturare l’attenzione. Se invece sfruttiamo anche questa piccola possibilità possiamo sperare di fidelizzare maggiormente l’utente con il nostro brand.

Settare un’immagine non per nulla difficile. Creiamo un PNG di 158×158 pixel, ed aggiungiamo dentro <head> il seguente codice HTML:

<link rel="icon" type="images/icon" href="favicon.png" />

<link rel="apple-touch-icon" href="images/icon.png"/>

Il consiglio è di non utilizzare trasparenze e ricordarsi che i bordi verranno stondati. Evitiamo quindi scritte troppo vicine ai margini.

Creare un immagine per il Display Retina

Quando realizziamo un sito per mobile potremmo decidere di sfruttare il display retina dell’iPhone per dare ai suoi utenti una visualizzazione migliore delle nostre immagini. Il meccanismo è semplice ed applicabile solamente alle immagini CSS di background.
Ricordo che per migliorare immagini inserite tramite tag img invece è sufficiente caricare immagini di dimensioni maggiori dello schermo e settare una larghezza del 100% ed un altezza automatica.

Ma vediamo un esempio che fa al caso nostro tenendo presente che 1px sull’iPhone corrisponde a 2 pixel retina:

<div id="editIcon"></div>
 
Nel css invece andremo ad impostare:

#editIcon{
   height: 16px;
   width: 16px;
   background: url(img/edit.png) no-repeat; // L'immagine avrà una dimensione originale di 32x32pixel
   -webkit-background-size: 16px 16px;
   background-size: 16px 16px;
}

L’immagine con risoluzione 32×32 pixel viene usata per raddoppiare la qualità della risoluzione quando si forza l’immagine a 16x16px. Ovviamente questo comporta la creazione di immagini più pesanti, di conseguenza sarà opportuno realizzare un CSS apposito per il nostro dispositivo retina in modo da aggirare il problema:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="retina.css" />

Articoli correlati:

1. Set di dimensioni di immagini diverse per i nostri articoli WordPress
2. Didascalie per immagini con jQuery hover e animate
3. Aumentare la velocità di un sito

Let’s go! E’ tempo di HTML!

Bando alle ciance, è tempo di scrivere il nostro codice HTML! Ci servirà davvero poco in termini di elementi del DOM: saranno sufficienti un wrapper che funga da maschera con dei box al suo interno, e due pulsanti di navigazione (avanti ed indietro):

<div id="slider">
	<div class="wrapper">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">4</div>
	</div>
	<a href="javascript:void(0);" class="prev">Prev</a> | <a href="javascript:void(0);" class="next">Next</a>
</div>

Il codice CSS, il gioco delle maschere

Riutilizzando il sistema di maschere già visto per la realizzazione del jQuery News Slider, implementiamo il nostro CSS. Come sempre, quello che riporto è a scopo puramente illustrativo, mi auguro invece che la vostra creatività si sbizzarrisca per realizzare qualcosa di stupefacente!

#slider {
	position:relative;
	width:420px;
	margin-left:100px;
	background:#CCC;
	padding:20px;
	height:200px;
	overflow:hidden;
	}
#slider .wrapper {
	height:200px;
	position:relative;
	width:870px;
	overflow:hidden;
	}
#slider .wrapper .box {
	background:red;
	width:200px;
	height:200px;
	float:left;
	margin:0 10px;
	}
#slider .wrapper .box:first-child {
	margin-left:0;
	}

E’ l’ora di jQuery! Animiamo la rotazione

Il codice, che ora spieghiamo, è il seguente:

$(function(){
	$("#slider .next").click(function(){
		$("#slider .wrapper .box:first").appendTo("#slider .wrapper");
	});	
	$("#slider .prev").click(function(){
		$("#slider .wrapper .box:last").prependTo("#slider .wrapper");
	});	
});

Come possiamo vedere fondamentalmente utilizziamo una riga di codice, che poi ripetiamo per il pulsante next e prev. Grazie alla combinazione delle funzioni appendTo() & prependTo() e dei selettori :first e :last realizziamo la nostra animazione. Le funzioni citate non fanno altro che prelevare l’elemento del DOM selezionato e spostarlo fisicamente all’inizio o alla fine del contenitore in questione (.wrapper). I selettori invece ci indicano quale elemento targetizzare. Nel nostro caso il primo o l’ultimo. E così, con queste semplicissime righe, il gioco è fatto. Stupendo no?

Articoli correlati:

1. Realizzare un accordion jQuery in 5 righe di codice!
2. jQuery News Slider – gleenk spotSlider v1.0
3. jQuery per far scorrere le ultime news in 4 righe!

Ci tengo a premettere che non intendo approfondire la tematica  dal punto di vista della programmazione pura, non rientrando nelle mie competenze specifiche, bensì è mio intento indicare un sistema generale e semplice per realizzare un Widget in maniera rapida ed alla portata di tutti, derivato dalla lettura di alcune risorse online e cartacee.

Il nostro widget nel file functions

Il codice che vediamo va inserito unicamente nel file functions.php del nostro tema. Quello che andremo a fare è realizzare un semplicissimo widget con un titolo, e che stampi una frase. Il nostro widget sarà poi visibile dall’apposito pannello di WordPress e trascinabile in qualsivoglia sidebar!

La struttura funzionale

< ?php 
class myWidget extends WP_Widget {
 
	function myWidget() {
	}
	function widget( $args, $instance ) {
	}
	function update( $new_instance, $old_instance ) {
	}
	function form( $instance ) {
	}
}
function my_register_widgets() {
	register_widget( 'myWidget' );
}
add_action( 'widgets_init', 'my_register_widgets' );
?>

Quella che possiamo vedere qui sopra è la struttura di base che permette al nostro widget di essere riconosciuto e mostrato nel backend di wordpress. Tuttavia così è privo di qualsiasi funzionalità. Sottolineo solo alcuni aspetti che a mio avviso possono interessare. Innanzitutto quello che stiamo andando a fare è estendere la class WP_Widget, ovvero la classe che permette a WP di costruire i widget. In seguito poi abbiamo 4 metodi (funzioni) che permettono di indicare il nome del widget, di eseguirlo realmente, di effettuare correttamente le operazioni di salvataggio e di gestire il campo “Titolo” che può essere modificato. Le 4 funzionalità appena elencate fanno riferimento a function myWidget(), function widget(), function update() e function form().
Infine con la funzione my_register_widgets() (che potete chiamare a vostro piacimento) andiamo a registrare a tutti gli effetti il nostro widget perchè compaia nel backend ed infine lo istanziamo usando add_action().

L’esempio completo e funzionante

< ?php 
class myWidget extends WP_Widget {
	function myWidget() {
		parent::__construct( false, 'Il mio Widget' );
	}
	function widget( $args, $instance ) {
		extract($args);
		echo $before_widget;
		echo $before_title.$instance['title'].$after_title;
 
		//DA QUI INIZIA IL WIDGET VERO E PROPRIO
		echo "Ciao Wordpress";
		//FINE WIDGET
 
		echo $after_widget;
	}
	function update( $new_instance, $old_instance ) {
		return $new_instance;
	}
	function form( $instance ) {
		$title = esc_attr($instance['title']); ?>
		<p><label for="<?php echo $this->get_field_id('title');?>">
		Titolo: <input class="widefat" id="<?php echo $this-/>get_field_id('title');?>" name="< ?php echo $this->get_field_name('title');?>" type="text" value="< ?php echo $title; ?>" />
		</label></p>
		< ?php
	}
}
 
function my_register_widgets() {
	register_widget( 'myWidget' );
}
 
add_action( 'widgets_init', 'my_register_widgets' );
?>

Che si mostrerà così nel backend:

Come già anticipato non è mia competenza addentrarmi troppo nel mondo della programmazione (in particolare ad oggetti in questo caso) quindi lascio al tuo approfondimento personale lo studio di ciò che avviene in ogni passaggio. Ad ogni modo, con il codice sopra proposto in mano, sarà sufficiente (qualora non intendiate fornire ulteriori opzioni modificabili da backend) scrivere il vostro codice php normalmente al posto di:

//DA QUI INIZIA IL WIDGET VERO E PROPRIO
    echo "Ciao Wordpress";
//FINE WIDGET

Potrete infatti inserirei qui tutto ciò che vi pare, ad esempio usando query_post() potreste estrarre alcuni particolari contenuti e così via. Insomma, la struttura funzionale è questa, poi il cuore dovrete farlo pulsare voi

Articoli correlati:

1. Paginazione di categorie personalizzate in WordPress
2. Email di spam in WordPress? Prevenire si può.
3. WordPress Loop Snippets – Partire col piede giusto

Se però abbiamo l’esigenza di avere il video in pagina “nascosto”, siamo costretti a ricorrere ad altri metodi. Ed ecco che, navigando in giro per il web, scopriamo come sia possibile integrare il noto lettore Flowplayer al tanto amato Fancybox. Nel momento in cui scrivo questo articolo garantisco sulla compatibilità totale dei 2 script (in particolare Flowplayer funziona sia con la versione 1.3 che con la versione 2.0+ di Fancybox). L’unico accorgimento da prendere nel caso si utilizzino versioni di Fancybox differenti, è quello di controllare le funzioni di callback che vengono messe a disposizione.

Procuriamoci gli script

Per prima cosa, inevitabilmente, scarichiamo Fancybox e Fancyplayer ai link seguenti:
Fancybox: http://fancyapps.com/fancybox/
Fancyplayer (free): http://flowplayer.org/download/index.html

Dopodichè prepariamo la nostra cartella in cui lavoreremo utilizzando la struttura seguente:

Prepariamo il codice html da utilizzare

Prima di tutto includiamo il css di Fancybox (oltre ad un nostro eventuale foglio stile), jQuery ed i file .js che ci servono:

<link href="fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css">
</link><link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="flowplayer/flowplayer-3.2.6.min.js"></script>
</link>

Fatto questo prepariamo la semplicissima struttura html:

<div id="player" data-url="http://www.gleenk.com/demo/jquery/fancybox-flowplayer/Talbot%20Bay%20-%20Australia%20-%20BBC.flv"></div>
<a id="play-video" href="#player">Play video</a>

Come vediamo sarà fondamentale avere un attributo in cui inserire l’url dove si trova il video: per farlo ci siamo avvalsi della proprieta HTML5 data-nome, dove nome è qualsiasi cosa si voglia. Utilizzando jQuery non avremo alcuna difficoltà ad andare a “pescare” questo valore. Vi anticipo fin da subito che non avrete problemi di compatibilità cross-browser.
Inoltre impostiamo l’href del link con il medesimo nome dell’ID del contenitore del video.

jQuery in azione

A questo punto non ci resta che scrivere il codice che realizzerà la magia:

var url = $("#player").attr("data-url");
	$("a#play-video").fancybox({
		 'scrolling': false,
		 'titleShow': false,
		 'padding'  : 0,
		 'beforeLoad'  : function() {
			 $("#player").show();
			 $f("player", "flowplayer/flowplayer-3.2.7.swf", url);
		 },
		 'afterClose'  : function() {
			 $("#player").hide();
			 $f().unload();
		 }
	});

E’ bene sottolineare brevemente alcuni punti. Nel caso che vedete sopra abbiamo utilizzato una variabile url per memorizzare il percorso del video. In questo modo, se avessimo in pagina diversi video, utilizzando opportunamente “this” in jQuery potremmo prelevare il video che ci interessa. La variabile url verrebbe infatti cambiata ad ogni click. (Per farlo ricordiamoci di utilizzare delle classi e non ID come nell’esempio).
Infine è bene precisare che scrolling, titleShow, padding sono proprietà di Fancybox che servono per nascondere spazi, scritte e scrollbar. beforeLoad e afterClose sono invece le 2 callback di cui parlavamo all’inizio. Sono due funzioni che agiscono prima del caricamento del video e dopo. Saranno queste quelle per cui accertarsi che la sintassi non sia cambiata nel corso di future versioni!

Compatibilità con i browser

Il seguente sistema è stato testato e ne è stata accertata la funzionalità sui seguenti browser:
• Mozilla Firefox (qualsiasi versione moderna)
• Chrome (qualsiasi versione moderna)
• Opera (qualsiasi versione moderna)
• Internet Explorer 7+

Articoli correlati:

1. HTML5 tag video
2. Usare ‘$’ invece di ‘jQuery’ in WordPress
3. Stilizzare campi input file con jQuery