Dopo aver creato nella prima parte la pagina attraverso cui gestire le opzioni,  proviamo a creare la prima opzione del tema, ovvero la possibilità di  inserire del testo personalizzato.

NOTA: Per questo e i seguenti esempi userò come riferimento il tema di default di Wordpress, cosicché ognuno possa seguire le istruzioni più facilmente. Tutti gli esempi possono poi essere facilmente implementati in ogni tema per Wordpress.

Apri nuovamente il file menu-opzioni.php, continueremo a lavorare sulla base del codice creato nella prima parte della guida.

Prima di creare le opzioni, è necessario creare una tabella nel database dove Wordpress salvi le opzioni da noi selezionate. Per fare questo aggiungi il seguente codice all’interno della funzione creazione_menu creata in precedenza:

add_action('admin_init', 'registra_opzioni');

Questo codice dice a Wordpress che tramite la funzione registra_opzioni andremo ad aggiungere delle nuove opzioni ad admin_init, una funzione da cui dipendono le opzioni del pannello di amministrazione.

La funzione creazione_menu risulterà quindi come segue:

<?php

function creazione_menu() {

add_submenu_page('themes.php', 'Opzioni per il tema', 'Opzioni', 'administrator', __FILE__, 'funzione_opzioni');

add_action('admin_init', 'registra_opzioni');

}
?>

Ora dobbiamo creare la funzione registra_opzioni. Lo possiamo fare aggiungendo il seguente codice dopo la funzione creazione_menu:

<?php

function registra_opzioni() {

register_setting('gruppo-opzioni', 'aggiungi-testo' );

}

?>

Nel codice appena inserito viene utilizzata la funzione register_settings tramite cui viene detto a Wordpress di creare un nuovo gruppo di opzioni (gruppo-opzioni) e di aggiungervi il valore relativo alla prima opzione di aggiunta testo che andremo a creare nel passo successivo (aggiungi-testo).

Finalmente possiamo creare la prima opzione per l’inserimento di testo tramite il seguente codice, da aggiungere tra il tag [h2]Pagina opzioni[/h2] e prima del [div] di chiusura creato in precedenza:

<form action="options.php" method="post">

	<?php settings_fields('gruppo-opzioni'); ?>

<!-- OPZIONE AGGIUNTI TESTO -->

	<table class="form-table">
		<tr>
			<th scope="row">Aggiungi testo</th>
			<td>
			<textarea name="aggiungi-testo"><?php echo get_option('aggiungi-testo'); ?></textarea>
			</td>
			</tr>
	</table>

<p class="submit">
	<input type="submit" value="<?php _e('Salva'); ?>">
</p>	

</form>

Il codice utlizzato è ovviamente un form per permette di inserire ed inviare al database le informazioni che vogliamo aggiungre o modificare.

La struttura utilizzata è a tabelle per corrispondere a quella di Wordpress, anche le classi che ho utilizzate sono quelle che Wordpress utilizza, in questo modo lo stile della pagina sarà impostato automaticamente come quello generale del pannello di amministrazione.

Dalla prima riga di codice puoi vedere che il form invia tutte le informazioni al file options.php, il quale gestisce le varie opzioni di Worpdress.

Tramite settings_fileds è stato semplicemente richiamato il  gruppo di opzioni creato con la funzione registra_opzioni nel quale dovranno verranno salvati i valori selezionati.

Il tipo di form utilizzato è ad una riga tramite il tag input, se avete bisogno di più righe per l’inserimento del testo, in base all’uso che ne dovete fare, è ovviamente possibile utilizzare il tag textarea.

Le uniche due cose a cui bisogna prestare attezione sono l’attributo name e value all’interno che devono corrispondere al valore inserito in register_settings per l’opzione creata, in questo caso “aggiungi-testo”.

Tramite la funzione get_option, relativa al tag value, Wordpress controlla se l’opzione è già stata creata e salvata e eventualmente lo riporta nella casella di testo.

Salva dunque il file (puoi scaricare qui il file con il codice completo finora creato ) e accedi al pannello di amministrazione, la nuova opzione sarà presente nel menu delle opzioni.

Per visualizzare il testo inserito tramite la pagina delle opzioni basterà ora richiamare il contenuto dell’opzione salvata dall’interno del database tramite la funzione echo collegata all’opzione desiderata, come nel seguente esempio:

<?php echo get_option('aggiungi-testo’) ?>

Per fare un esempio reale apriamo il file sidebar.php del tema default die Wordpress con un editor.

Subito dopo l’inizio del primo div con id “sidebar” aggiungiamo il seguente codice:

<h2><?php echo get_option('aggiungi-testo'); ?></h2>

Salva e torna alla pagina delle opzioni del pannello di amministrazione. Inserisci nella casella creata un testo a tua scelta (io ho inserito un breve messaggio di benvenuto) e premi salva, il testo salvato in Wordpress rimarrà nella casella come riferimento

Ricaricando la pagina principale di Wordpress e nella barra laterale comparirà il messaggio da te inserito, come nel seguente esempio:

Lo spazio dedicato al testo dovrebbe ovviamente ancora essere modificato e personalizzato tramite i CSS per adeguarsi al tema, ma per lo scopo di questa guida è solo importante capire il funzionamento delle opzioni.

Questo esempio è solo uno degli innumerevoli modi in cui può essere implementata questa opzione di inserimento del testo, ecco altri esempi che mi vengono in mente:

-          Creare un messaggio di benvenuto modificabile in base a eventi.

-          Aggiungere codice di Google Analytics

-          Aggiungere codice di Feedburner

-          Aggiungere i dati di contatto in una pagina

Qui ancora il file menu-options.php con il codice completo finora creato da scaricare.

Nella terza parte di questa guida su come creare una pagina delle opzioni per un tema Wordpress ti mostrerò come scegliere tra due fogli di stile differenti con un solo click.

Infatti trovato il luogo o la zona in Google Maps che vuoi mostrare nel tuo articolo o pagina, basta premere sul pulsante “Link” in alto a destra e copiare il secondo codice (quello sotto la scritta “Paste HTML to embed in website”) per inserire automaticamente una mappa già posizionata sul luogo che vuoi visualizzare nell’articolo.

Se osservi il codice ifram puoi inoltre modificare la larghezza (width) e l’altezza (height) della mappa, per poterla adattare perfettamente al tema del tuo sito o blog.

Ecco dove mi trovo mentre sto scrivendo questo articolo:

Per nascondere l’accesso ad alcuni menu puoi utilizzare il seguente codice, da aggiungere all’interno del file functions.php del tuo tema (se non esiste crealo con un editor di testo):

function remove_menus () {
global $menu;
$restricted = array(__('Dashboard'), __('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));
	end ($menu);
	while (prev($menu)){
		$value = explode(' ',$menu[key($menu)][0]);
		if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
	}
}
add_action('admin_menu', 'remove_menus');

Per aggiungere o rimuovere i menu che vengono visualizzati nel pannello di amminstrazione, modifica l’array $restricted togliendo o aggiungendo i nomi relativi ai menu.

Fonte: wprecipes.com

Per fare in modo che i dati vengano raccolti in ogni pagina del tuo sito deve venire inserito un cosiddetto “tracking-code” (codice di tracciamento) che permette ad Analytics di raccogliere ed elaborare le varie statistiche dei tuoi visitatori.

Per inserire questo codice è possibile utilizzare uno dei vari plugins (come per esempio Google Analyticator), ma oggi ti voglio presentare una soluzione molto più semplice.

All’interno del file functions.php del tuo tema (se non esiste crealo con un editor di testo) inserisci il seguente codice:

<?php
add_action('wp_footer', 'ga');

function ga() { ?>
    // Inserisci il tuo ID di Google Analyitcs qui
<?php } ?>

Non dimenticare di inserire il tuo codice identificato di Google Analytics nella penultima riga.

Fonte: wprecipes.com

Per effettuare questa semplice modifica, aggiungi il seguente codice all’interno del file functions.php del tuo tema (se non esiste crealo con un editor di testo):

function remove_footer_admin () {
    echo "Il tuo testo personalizzato";
} 

add_filter('admin_footer_text', 'remove_footer_admin');

Fonte: wprecipes.com

Nei browser viene visualizzata vicino alla barra degli indirizzi, nelle tab e nei segnalibri (per chi usa Firefox) o nei preferiti (per chi usa Internet Explorer).

Un favicon è un ottimo modo per distinguere il “brand” del tuo sito o blog in maniera ancora più marcata e renderlo unico.

Un favicon è solitamente un immagine di grandezza 16 x 16 pixels ed è salvata in formato ICO con il nome favicon.ico nella cartella principale del suo sito web.

Per creare un favicon puoi creare l’immagine con un programma di grafica come Photoshop o GIMP oppure utilizzare un’immagine già esistente e ridurla con un servizio online come per esempio http://www.favicon.co.uk/.

Per aggiungere un favicon al tuo sito in Wordpress carica l’immagine con un programma FTP nella cartella principale del tuo sito web o blog.

Apri ora il file contentente i tag “head” del tuo tema (può essere il file header.php o index.php), e inserisci la segente linea di codice dopo il tag :

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

Dopo aver ricaricato la pagina (eventualmente libera la cache e riavvia il browser) vedrai visualizzato il favicon vicino al titolo.

Può però capitare che la procedura non funzioni correttamente e che Wordpress rimanga “incastrato” nella modalità di mantenimento, mostrandoti sia nella pagina del sito che in quella del pannello di amministrazione il messaggio di avviso “Briefly unavailable for scheduled maintenance. Check back in a minute“ e bloccando ogni altra azione.

Se sei in questa situazione, innanzitutto, niente panico!

Quando Wordpress installa o aggiorna un nuovo componente crea nella cartella di root dove hai installato Wordpress un file chiamato .maintenance che blocca tutti i processi e visualizza il messaggio di mantenimento.

Per far tornare tutto alla normalità basta semplicemente che tu acceda con un programma FTP alla cartella dove hai installato Wordpress e cancelli il suddetto file.

Ho quindi cercato di raccogliere alcune possibilità su come rendere Wordpress più facile ai propri clienti.

1. Installazione di prova

Una soluzione efficace è far abituare i clienti ad utilizzare Wordpress attraverso una versione di prova del sito, mentre si stanno ancora completando le ultime modifiche.

Attraverso una installazione in locale sui computer del cliente, questo può provare a scrivere e pubblicare un articolo, modificare una pagina o inserire un’immagine, ma soprattutto sbagliare senza la paura di mandare in crash tutto il sito o di pubblicare qualcosa per sbaglio.

In questo modo potrà imparare direttamente dai propri errori e dopo pochi giorni sentirsi a proprio agio con tutte le funzioni di Wordpress.

2. Insegnamento diretto

Il metodo più comune per introdurre un cliente all’uso di Wordpress rimane ancora quello di sedersi insieme davanti al computer e con molta pazienza mostrare tutte le funzioni dell’interfaccia.

Se hai la possibilità di incontrarti personalmente con il cliente questa è forse il miglior modo perché ogni dubbio può essere subito risolto.

Sedetevi insieme in ufficio, al bar o in qualunque posto dove potete parlare e discutere senza essere disturbati per qualche ora e diventa un piccolo insegnante di tutti i segreti di Wordpress che servono per gestire un sito.

3. Plugins di semplificazione

Se hai paura che il tuo cliente possa combinare qualche danno provando le opzioni del pannello di amministrazione, una soluzione può essere togliere del tutto le funzioni “pericolose” e semplificare la pubblicazione di articoli o pagine.

Una possibilità e tramite l’installazione di un plugin come WPlite che permette di nascondere a scelta qualunque elemento o sezione del pannello di controllo, lasciando solamente quello che il cliente dovrà veramente utilizzare per gestire il sito.

4. Tabelle riassuntive (Stylesheet)

Siccome Wordpress ha molte funzioni, è facile dimenticarsi come si modificano i tag o come cambiare i permalinks.

Una soluzione può essere la creazione di cartoncini o tabelle riassuntive da consegnare al cliente dove raccogliere le procedure per eseguire tutte le funzioni utili per la gestione del sito con Wordpress.

In questo modo renderai felici tutti quei clienti che amano ancora avere tutto in formato cartaceo e dall’altra parte risparmierai chiamate alle 3 del mattino da parte del tuo cliente che non sa più come inserire un link o rispondere ad un commento.

5. Lezioni video

Se hai un po’ di tempo libero puoi infine creare delle lezioni video dove mostrare direttamente quale azione deve essere fatta direttamente nel pannello di amministrazione per gestire un blog o un sito con Wordpress.

Brevi video specifici anche per semplici attività in Wordpress, come moderare un commento, inserire un video o installare un plugin, possono essere un vero aiuto per chi non ha molta esperienza e una visione rapida possono salvare da molti grattacapi.

Quali di questi metodi usi per spiegare ai tuoi clienti il funzionamento di Wordpress? E quale ti sembra più efficace?

Personalmente trovo che utilizzare un po’ di ognuno di questi metodi crei il mix migliore per rendere i clienti dei veri esperti di Wordpress, e tu?

Oggi ti voglio mostrare un modo semplice ed efficace per disporre i tuoi articoli su più colonne.

Copia & incolla semplicemente il seguente codice nel file functions.php del tuo tema (se non esiste crealo semplicemente con un editor di testo) e ogni volta che all’interno di un tuo articolo inserirai il tag h2 verrà creata una nuova colonna:

function my_multi_col($content){
$columns = explode('<h2>', $content);

$i = 0;

	foreach ($columns as $column){
	if (($i % 2) == 0){
		$return .= '<div class="content_left">' . "\n";
		if ($i > 1){
		$return .= "<h2>";
	} else{
		$return .= '<div class="content_right">' . "\n <h2>";
	}
		$return .= $column;
		$return .= '</p></div>';
		$i++;
	}

	if(isset($columns[1])){
	    $content = wpautop($return);
	}else{
	    $content = wpautop($content);
	}
	echo $content;
}
add_filter('the_content', 'my_multi_col');

Infine non dimenticare di inserire il seguente codice nel file style.css (o il tuo foglio di stile relativo):

   .content_right, .content_left{
      float:left;
   width:45%;
   }

   .content_left{
     padding-right:5%;
    }

Usando la tecnologia di compressione zlib puoi sfruttare le funzionalità di PHP e ridurre il tempo di caricamento e aumentare la velocità di presentazione del tuo blog.

Prima di tutto, crea un file chiamato “test.php” e inserisci il seguente codice (poi caricalo nella directory principale del tuo blog):

<?php phpinfo(); ?>

Assicurati che la funzione “zlib” sia attivata sul server del tuo host, altrimenti mettiti in contatto con esso e falla attivare.

Ora inserisci il seguente codice nell’intestazione del tuo blog (sopra il DOCTYPE):

<?php
ini_set('zlib.output_compression', 'On');
ini_set('zlib.output_compression_level', '1');
?>

Ecco tutto! Ora controllare sul sito port80software.com che il tuo blog sia stato compresso in modo corretto.

Fonte: wprecipes.com