Per rendere i nostri articoli un po’ meno noiosi, WordPress ci permette da sempre di aggiungere al testo tutta una serie di smiley (cioè delle faccine), semplicemente scrivendo determinate combinazioni di caratteri.
Ma cosa fare se il set predefinito di faccine non ci soddisfa più e non ci accontentiamo neanche di quelli offerti dai vari plugin in circolazione? La soluzione più ovvia è quella di impostare manualmente un nostro set di smiley completamente personalizzato. Vediamo dunque come procedere.

Copiare le immagini

Per prima cosa procuriamoci un set di faccine che ci piaccia; dovranno avere (preferibilmente) le dimensioni di 16X16 pixel. Ce ne sono a centinaia su Internet, basta fare una breve ricerca con Google per avere l’imbarazzo della scelta.

Adesso entriamo nella cartella in cui è installato WordPress e spostiamoci in /wp-includes/images/smilies. Questa è la cartella in cui WordPress tiene le icone di default ed è qui dove andremo ad incollare le nostre nuove faccine.

Arrivati a questo punto, abbiamo aggiunto le immagini, ma quasi sicuramente non funzioneranno perché saranno in numero diverso rispetto alle precedenti e avranno nomi altrettanto diversi.

Il file di configurazione

Apriamo dunque il file functions.php che si trova in /wp-includes/.
Si tratta di un file molto lungo, sarà quindi necessaria una ricerca con la keyword “smiley” per raggiungere il punto che ci interessa (nel mio caso era intorno alla righa numero 2620) in cui troviamo scritto tra i commenti una cosa del genere:

/**
* Convert smiley code to the icon graphic file equivalent.
*
[...]

Poco sotto troviamo finalmente elencate le combinazioni di caratteri che richiamano le faccine e il corrispettivo nome del file immagine che le rappresenta (ovviamente si dà per scontato che l’immagine si trovi in /wp-includes/images/smilies).

	if ( !isset( $wpsmiliestrans ) ) {
		$wpsmiliestrans = array(
		':mrgreen:' => 'icon_mrgreen.gif',
		':neutral:' => 'icon_neutral.gif',
		':twisted:' => 'icon_twisted.gif',
		  ':arrow:' => 'icon_arrow.gif',
		  ':shock:' => 'icon_eek.gif',
		  ':smile:' => 'icon_smile.gif',
		    ':???:' => 'icon_confused.gif',
		   ':cool:' => 'icon_cool.gif',
		   ':evil:' => 'icon_evil.gif',
		   ':grin:' => 'icon_biggrin.gif',
		   ':idea:' => 'icon_idea.gif',
		   ':oops:' => 'icon_redface.gif',
		   ':razz:' => 'icon_razz.gif',
		   ':roll:' => 'icon_rolleyes.gif',
		   ':wink:' => 'icon_wink.gif',
		    ':cry:' => 'icon_cry.gif',
		    ':eek:' => 'icon_surprised.gif',
		    ':lol:' => 'icon_lol.gif',
		    ':mad:' => 'icon_mad.gif',
		    ':sad:' => 'icon_sad.gif',
		      '8-)' => 'icon_cool.gif',
		      '8-O' => 'icon_eek.gif',
		      ':-(' => 'icon_sad.gif',
		      ':-)' => 'icon_smile.gif',
		      ':-?' => 'icon_confused.gif',
		      ':-D' => 'icon_biggrin.gif',
		      ':-P' => 'icon_razz.gif',
		      ':-o' => 'icon_surprised.gif',
		      ':-x' => 'icon_mad.gif',
		      ':-|' => 'icon_neutral.gif',
		      ';-)' => 'icon_wink.gif',
		       '8)' => 'icon_cool.gif',
		       '8O' => 'icon_eek.gif',
		       ':(' => 'icon_sad.gif',
		       ':)' => 'icon_smile.gif',
		       ':?' => 'icon_confused.gif',
		       ':D' => 'icon_biggrin.gif',
		       ':P' => 'icon_razz.gif',
		       ':o' => 'icon_surprised.gif',
		       ':x' => 'icon_mad.gif',
		       ':|' => 'icon_neutral.gif',
		       ';)' => 'icon_wink.gif',
		      ':!:' => 'icon_exclaim.gif',
		      ':?:' => 'icon_question.gif',
		);
	}

Ora non ci resta che sbizzarrirci quanto vogliamo, aggiungendo, togliendo scorciatoie o più semplicemente rinominando le immagini che abbiamo modificato.

NOTA: poiché si tratta di un file di sistema di WordPress, è bene crearsi una copia di backup prima di apportare qualsiasi modifica, se non sappiamo bene ciò che stiamo facendo.

NOTA2: Poiché appunto si tratta di file di sistema di WordPress, quando andrete ad aggiornare il vostro CMS, questi file verranno sostituiti con quelli di default e dovrete eseguire nuovamente tutto il procedimento.

Per finire vi lascio con un po’ di smiley del set che ho scelto…

…e la tabella che indica le combinazioni di caratteri e le corrispettive faccine, per chi può interessare.

Articoli correlati:

1. Sostituire i font con Cufón

Con questo tutorial ti spiegherò come realizzare un form, da usare nella tua pagina contatti, per l’invio di email tramite ajax (quindi senza bisogno di ricaricare la pagina) con tanto di validazione dei dati inseriti.

Caratteristiche

1. Ogni campo ha dei dati predefiniti che vengono cancellati quando questo ottiene il “focus”
2. Se l’utente non inserisce dei dati obbligatori o un indirizzo email valido, lo script notifica l’errore evidenziando in rosso i campi errati.
3. L’email viene inviata tramite ajax e restituisce un messaggio di notifica al termine dell’operazione
4. L’invio dell’email deve poter funzionare anche con javascript disabilitati.

Per avere un idea più chiara di ciò che andremo a creare, ecco una demo funzionante del “prodotto finito”.

LINK DEMO

Preparazione

Per iniziare avrai bisogno di una pagina html “di base”.

<!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"/>

		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
		<script type="text/javascript" src="contatti.js"></script>

		<title>Contatti</title>
	</head>
	<body>

	</body>
</html>

Notare l’inclusione della libreria jquery (direttamente dai server Google ), di uno style.css e del contatti.js che sarà lo script con cui lavoreremo maggiormente.

Aggiunta del contenuto

Per adesso non abbiamo scritto nulla, perciò prosegui con l’inserimento di un po’ di contenuto. I campi nome, e-mail, testo sono indispensabili e perchè no, anche un campo non obbligatorio per aggiungere un eventuale proprio sito web, oltre che ovviamente il pulsante di invio; il tutto incluso nel canonico <form> che  punta ad un certo inviaemail.php.

<form method="post" name="contatti" id="contatti" action="inviaemail.php">
	<div id="contact_area">
		<h2>Contattaci direttamente via email</h2>

		<input type="text" name="name" id="name" class="form" value="Nome*" />

		<input type="text" name="email" id="email" class="form" value="e-Mail*" />

		<input type="text" name="sito" id="sito" class="form" value="Sito Web" />

		<textarea name="message" id="testo" class="form" rows="12" cols="" >Testo*</textarea>

		<div>
			<input type="submit" name="submit" id="invia" value="Invia"/>
			<img src="load.gif" alt="load" id="load_img" />
			<span id="result"></span>
		</div>
	</div>
</form>

Sono da segnalare gli ID che corrispondono esattamente ai name dei vari campi (questo ci tornerà molto utile per la gestione dai dati da php in caso di javascript disabilitati), la presenza di un immagine di caricamento accanto al pulsante e uno span con ID result al momento vuoto. La classe form come anche l’ID contact_area sono del tutto arbitrari, servono solo a facilitare il lavoro sul CSS.

Un po’ di stile CSS

Se provi a visualizzare questa pagina nel browser il risultato non sarà certo dei migliori.

Senza perdere altro tempo aggiungi un po’ di stile in un nuovo file CSS che dovrai chiamare style.css come indicato nell’head dell’HTML.

body {
	margin: 0;
	background: #ddd;
	color: #000;
}

h2 {
	font: bold 22px verdana;
	color: #333;
}

#contact_area  {
	width: 500px;
	margin: 0 auto;
}

.form {
	margin: 0 0 10px 0;
	width: 500px;
	font: normal 13px verdana;
	border: 1px solid #aaa;
	background: #eee;
	padding: 6px 10px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#invia {
	font: normal 16px verdana;
	border: 1px solid #aaa;
	background: #c9c9c9;
	padding: 2px 10px;
	margin: 0 10px 0 0;
	cursor: pointer;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#load_img {
	display: none;
	line-height: 26px;
}

.error {
	border: 1px solid #ff5c5c
}

.fail {
	color: #F80000
}

.success {
	color: #009600
}

Non ho alcuna intensione di soffermarmi sui vari accorgimenti usati nel CSS, ma devo far notare che abbiamo nascosto l’immagine di caricamento (linea 40) ed aggiunto le classi error, fail, success il cui scopo sarà più chiaro in seguito.

Direi senza alcun dubbio che l’aspetto è migliorato .

Aggiunta del motore (jquery)

Ora che hai tutto pronto, entriamo nel vivo della programmazione jquery. Crea il file contatti.js e aggiungi queste prime linee di codice.

$().ready(function(){

	//variabili globali
	var name = $("#name");
	var nameText = $(name).val();
	var email = $("#email");
	var emailText = $(email).val();
	var sito = $("#sito");
	var sitoText = $(sito).val();
	var message = $("#testo");
	var messageText = $(message).val();

});

Per adesso abbiamo solo dichiarato alcune variabili globali che useremo da quì in avanti. In particolare, abbiamo assegnato una variabile ad ogni campo della pagina HTML e ne abbiamo salvato il contenuto in un’altra variabile.

Per esempio, il campo con ID name, sarà indicato d’ora in poi semplicemente con “name” ed il suo contenuto predefinito, quello che possiede nel momento in cui la pagina viene caricata  (in questo caso “Nome*“), verrà memorizzato nella variabile nameText.

Gestione dei valori di default nei singoli campi

Per far sì che i valori dei campi si azzerino quando ricevono il focus e tornino come predefiniti se non viene inserito alcun dato, aggiungi queste semplici funzioni.

	//name
	name.focus(function(){
		if($(this).val() == nameText) $(this).val("");
	});
	name.blur(function(){
		if($(this).val() == "") $(this).val(nameText);
	});
	//email
	email.focus(function(){
		if($(this).val() == emailText) $(this).val("");
	});
	email.blur(function(){
		if($(this).val() == "") $(this).val(emailText);
	});
	//Sito web
	sito.focus(function(){
		if($(this).val() == sitoText) $(this).val("");
	});
	sito.blur(function(){
		if($(this).val() == "") $(this).val(sitoText);
	});
	//message
	message.focus(function(){
		if($(this).val() == messageText) $(this).val("");
	});
	message.blur(function(){
		if($(this).val() == "") $(this).val(messageText);
	});

In tal modo, quando viene selezionato (.focus) un certo campo, la funzione ne azzera il contenuto se questo corrisponde a quello predefinito nell’HTML e quando il focus viene perso (.blur), se l’utente non ha aggiunto alcunchè, lasciando il campo vuoto, ne ripristina il valore predefinito.

Validazione dei contenuti

Per eseguire la validazione dei dati inseriti dall’utente, creeremo una funzione apposita per ogni campo che ne valuti la correttezza secondo criteri del tutto arbitrari. In questo caso, abbiamo imposto una lunghezza minima di nome utente e testo dell’email a 4 caratteri, mentre l’email dovrà rispettare la canonica forma [qualcosa]@[qualcosa].[qualcosa] .

function validateEmail(){
		var a = $("#email").val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		if(filter.test(a)){
			$("#email").removeClass("error");
			return true;
		}
		else{
			$("#email").addClass("error");
			return false;
		}
	}
	function validateName(){
		if((name.val().length < 4) || (name.val() == nameText)){
			name.addClass("error");
			return false;
		}
		else{
			name.removeClass("error");
			return true;
		}
	}
	function validateMessage(){
		if((message.val().length < 4) || (message.val() == messageText)){
			message.addClass("error");
			return false;
		}
		else{
			message.removeClass("error");
			return true;
		}
	}	

Per il controllo sulla lunghezza di un campo abbiamo usato la funzione .lenght che restituisce il numero di caratteri di una stringa; la validazione dell’email è invece un po’ più complessa poiché fa uso di una regex confrontata alla stringa con la funzione .test(), quindi prendila pure per buona .

Un ulteriore controllo è stato eseguito sui campi testo e nome che non devono essere uguali a quelli preimpostati (linee 14 e 24), infatti, essendo “Nome*” e “Testo*” di per sé due stringhe più lunghe di 4 caratteri, verrebbe vanificata la validazione.

Notare inoltre, che ciascuna funzione restituisce false e aggiunge una classe error a quel campo, se la validazione ha avuto esito negativo; altrimenti, restituisce true e toglie la classe error (nel caso sia stata precedentemente applicata).

Passaggio dei dati con Ajax

Adesso non resta che inviare i dati al php tramite ajax.

	$("#contatti").submit(function(){
		if(!validateName() | !validateEmail() | !validateMessage()){
			return false;
		}
		else {
			//Invia email con ajax
		}
	});

Prendiamo il click sul pulsante invia (o meglio il submit del form con id contatti) come evento da cui partire e quindi sottoporre i dati alla validazione.

       else {
			$('#load_img').fadeIn();
			$.ajax({
				type: 'post',
				url: 'inviaemail.php',
				data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(),

                                //.........

			}); // end ajax
			return false;
		}

Se la validazione viene superata: faccio apparire l’immagine di caricamento con un effetto fade in (linea 2) e poi, con metodo POST (linea 4), invio al file inviaemail.php, che si trova nella stessa cartella (linea 5), i dati contenuti all’interno dei vari campi, assegnando ad ognuno una variabile da far gestire al php (linea 6).

Prima di proseguire devi però sapere come è strutturato il  file inviaemail.php.

Invio dell’email con PHP

La parte php è piuttosto semplice.

<?php

	$mailTo = 'tuaemail@qualcosa.boh';

?>

Assegno alla variabile mailTo il mio indirizzo email dove voglio ricevere tutti i messaggi del contact form.

	$name = htmlspecialchars($_POST['name']);
	$mailFrom = htmlspecialchars($_POST['email']);
	$siteurl = htmlspecialchars($_POST['site']);
	$message_text = htmlspecialchars($_POST['message']);
	$subject = 'Messaggio dal contact form';

Prendo le variabili che mi ha precedentemente inviato ajax con metodo POST, le sottopongo alla funzione del php htmlspecialchars per correggere eventuali caratteri speciali e ne passo il contenuto in altrettante variabili php. Aggiungo anche un oggetto all’email, che mi faccia capire di cosa si tratta quando me la ritroverò nella casella di posta.

Aggiornato. Perché l’email risulti leggibile, è bene far in modo che appaia nel formato HTML. Aggiungo dunque una variabile headers con queste informazioni.

	$headers = 'Content-type: text/html; charset=UTF-8' . "\r\n";
	$headers .= 'From: '.$mailFrom;

La presenza del parametro From inoltre, evita che l’email appaia nella casella spam di certi servizi webmail tipo GMail.

	$message =  "<html>
					<head>
						<title> $subject </title>
					</head>
				<body>
					<p>----------------------------------------</p>
					<b>Nome Utente:</b> $name<br />
					<b>e-Mail:</b> $mailFrom<br />
					<b>Sito:</b> $siteurl<br />
					<b>Testo della richiesta:</b><br />
					<p>$message_text</p>
					<p>----------------------------------------</p>
				</body>
				</html>";

Riunisco tutti i dati in un’ulteriore variabile message, in modo da comporre effettivamente il testo del messaggio di posta che riceverò. Notare la presenza di tutti i canonici tag HTML.

	if (mail($mailTo, $subject, $message, $headers))
		echo "email inviata!";
	else {
		echo "Errore";
	}

Con il comando mail() viene inviata effettivamente l’email e se non ci sono stati errori da parte del server in quest’ultima operazione, scrive il messaggio “email inviata!“; altrimenti scrive “Errore“.

Completamento del codice ajax

Adesso che sai cosa succede dal lato php, torniamo al nostro ajax.

		else {
			$('#load_img').fadeIn();
			$.ajax({
				type: 'post',
				url: 'inviaemail.php',
				data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(),
				success: function(results) {
					$('#load_img').fadeOut(function() {
						if(results == "email inviata!") {
							$('#result').html("<span class='success'>e-Mail inviata correttamente</span>");
							$(name).val(nameText);
							$(email).val(emailText);
							$(sito).val(sitoText);
							$(message).val(messageText);
						}
						else
							$('#result').html("<span class='fail'>Errore</span>")
					});
				}
			}); // end ajax
			return false;
		}

Dopo l’invio dei dati al php alla riga 6, siamo pronti a ricevere il risultato dell’operazione e salvarlo in una variabile qualsiasi che abbiamo chiamato result.

Nascondiamo l’immagine di caricamento (linea 8 ) e se il risultato del php corrisponde a ciò che avevamo scritto col comando echo, significa che l’email è stata inviata e possiamo dunque scrivere sulla pagina HTML (dentro a quell’inutilizzato span con id results) una notifica di operazione completata con successo; dato che l’email è stata inviata, possiamo anche riazzerare i campi ai valori predefiniti.
Se c’è stato un problema sul php, mostreremo invece un messaggio di errore.

Con i javascript disabilitati?

Nel caso si tenti di inviare un email con i javascript disabilitati, non ci sarà alcun tipo di controllo sulla validazione dei dati, ma l’email verrà comunque inviata, poiché le variabili che abbiamo preso con metodo POST nel php corrispondono esattamente ai parametri name=”" assegnati  nell’HTML  ai vari campi.

Inviando l’email senza javascript, vieni rimandato alla pagina inviaemail.php contenente la sola scritta “email inviata!” oppure “Errore” nel caso si siano verificati o no errori sul php.

Conclusioni

Sperando che ti sia stato di aiuto, ti lascio i link per la demo ed il download del pacchetto completo.

Per qualsiasi tipo di osservazione o critica, un commento è sempre bene accetto!

LINK DEMO link download

Articoli correlati:

1. Creare un anteprima dinamica dei commenti
2. Primi passi con jQuery – 3
3. Primi passi con jQuery – 2

Come primo nostro progetto, siamo lieti di presentare HTML SpecialChar Encoder.
Si tratta di una “Web App” piuttosto semplice che Codifica e Decodifica tutti i caratteri HTML che gli vengono fatti processare.

Che cosa significa?

Quando inserite direttamente nell’HTML dei caratteri speciali tipo le parentesi angolari, vocali accentate e altri simboli particolari, succede che o non vengono visualizzati perchè interpretati dal browser come tag HTML, oppure al loro posto appaiono dei simboli, tipo dei punti interrogativi (variano da browser a browser), che stanno a indicare che il carattere non è stato riconosciuto.

Come si usa

Tutto ciò che dovete fare è andare alla pagina http://www.bittrack.it/project/htmlchars/ immettere nell’area di testo ciò che volete codificare e premere “Codifica“.

Immediatamente riceverete il testo correttamente codificato e pronto per essere copiato.

Qui di seguito sono indicati degli esempi di input e il corrispettivo output generato da HTML SpecialChar Encoder:

Input:
<a href="http://www.bittrack.it"> Home</a>
Output:
&lt;a href=&#34;http://www.bittrack.it&#34;&gt; Home&lt;/a&gt;

Input:
& à è ì ò ù < >
Output:
&amp; &agrave; &egrave; &igrave; &ograve; &ugrave; &lt; &gt;

Anche se più raramente, può capitare di aver bisogno dell’operazione inversa, per questo è stata  implementata l’opzione Decodifica che esegue esattamente il processo inverso.

Se trovate che sia un’applicazione utile, perché non aggiungerla tra i preferiti?!

In ogni caso ci aspettiamo un vostro feedback nei commenti!

Note tecniche

L’applicazione usa ajax per richiamare uno script php, perciò non può funzionare con i javascript disabilitati.

Changelog

05/10/09 Resa pubblica la versione 1.0

Articoli correlati:

1. Creare un ajax contact form con validazione dei dati
2. Creare un anteprima dinamica dei commenti
3. Primi passi con jQuery – 3