WordPress Option Panel – Conclusione

Nella precedente lezione abbiamo visto come aggiungere i campi e come salvare i valori inseriti, oltre ad integrare la libreria jQuery UI, oggi andremo ad ottimizzare ed alleggerire il codice, rendendo più semplice l’inserimento e la gestione dei campi del form.

Per prima cosa apriamo il file core.php e cancelliamo tutto ciò che si trova dopo

wp_enqueue_script('jquery');

e sostituiamolo con:

require_once dirname(__FILE__) . '/panel.php';

Come avrete intuito sarà necessario creare un’altro file, chiamato panel.php, nella stessa cartella di core.php, al suo interno aggiungiamo:

$panel = array (

	array( "name" => "Navigazione",
	       "type" => "navigazione",
	       "item" => array( "Tab1" => "Tab1" , "Tab2" => "Tab2" ),   
	),	
		   
	array( "name" => "Tab1",
	       "type" => "tab",
	),
	
	array( "name" => "Url Logo",
	       "id" => "logo",
	       "type" => "text",
	       "std" => ""
	),
	
	array( "name" => "Codice Analytics",
	       "id" => "analytics",
	       "type" => "textarea",
	       "std" => ""
	),
	
	array( "type" => "endtab"),
	
	array( "name" => "Tab2",
	       "type" => "tab",
	),
	
	array( "name" => "Url Facebook",
	       "id" => "facebook",
	       "type" => "text",
	       "std" => ""
	),
	
	array( "name" => "Stile",
	       "id" => "stile",
	       "type" => "select",
	       "options" => array(
		   "Dark" => "Dark",
	   	   "Light" => "Light",
	   	   "Minimal" => "Minimal",
	   	   "Black" => "Black",
	   	   "Blue" => "Blue",
	   	   "Brown" => "Brown",
		   "Cyan" => "Cyan",
	   	   "Green" => "Green",
	   	   "Orange" => "Orange",
	   	   "Pink" => "Pink",
	   	   "Red" => "Red",
	   	   "Yellow" => "Yellow",
		   ),
	       "std" => ""),
	

        array( "type" => "endtab"),

	array( "type" => "endnav"),
	
);

	if ($_POST["invia"] == "Salva")

	{
				

		foreach ($panel as $element ) 
	
		{
			update_option($element['id'], $_POST[$element['id']]);
		}
		
	}

require_once dirname(__FILE__) . '/function.php'; 

Non spaventatevi da tutto questo codice :), in realtà è molto semplice, ho suddiviso e racchiuso ogni parte del pannello in un array, nel primo, Navigazione, è presente il menù di navigazione del form. Se in futuro vorremo aggiungere nuove voci basterà modificare l’array interno item.
Ad esempio:

"item" => array( "Tab1" => "Generali" , "Tab2" => "Testata" , "Tab3" => "Colori" , "Tab4" => "Fonts")

In ogni array sono presenti elementi in comune, type indica il tipo di elemento, id l’id univoco del valore mentre std serve per indicare un eventuale valore di default del campo nel caso non sia salvato all’interno del database.

Ogni tab inizierà con il seguente array:

	array( "name" => "Tab1",
	       "type" => "tab",
	)

e terminerà con:

	array( "type" => "endtab"),

Ricordiamoci di utilizzare, come nome del tab, lo stesso inserito in item nel precedente array. Mentre gli array che gestiscono i campi del form andranno aggiunti tra i due indicati in precedenza:

	array( "name" => "Campo1",
	       "id" => "campo1",
	       "type" => "text",
	       "std" => ""
	),

	array( "name" => "Campo2",
	       "id" => "campo2",
	       "type" => "textarea",
	       "std" => ""
	),

L’ultimo array che andremo ad inserire sarà endnav, utile per chiudere il form ed il div tabs:

	array( "type" => "endnav"),

Il salvataggio delle opzioni è simile a quello già visto nella precedente lezione. L’unica differenza è il non dover aggiungere tutti i campi da memorizzare ma basterà solo aggiungere:

update_option($element['id'], $_POST[$element['id']]);

Ora dobbiamo creare il secondo file, function.php, che gestirà la visualizzazione dei campi:

	foreach ($panel as $element) {

		switch ( $element['type'] ) { 
		
			case 'navigazione': ?>
	
    			<h2> Impostazioni Generali </h2>

				<div id="tabs">
                
                <ul>
                
					<?php 
                    
                    foreach ($element['item'] as $option) {
                        echo "<li><a href='#".str_replace(" ", "", $option)."'>".$option."</a></li>";
                    }
                    ?>
               
                </ul>
              
                <form method="post">

                <?php	
			
			break;
			
			case 'tab': ?>
			
            	<div id="<?php echo $element['name']; ?>">
                
            <?php	
			
			break;
			
			case 'endtab': ?>
            	
                <div style="clear:both"></div>
                <input name="invia" type="submit" value="Salva" class="button" />
			
            	</div>
                
            <?php	
			
			break;
			
			case 'endnav': ?>
            	
                </form>
            	</div>
                
            <?php	
			
			break;
			
			case 'text': ?>
		
				 <p> 
                 <label for="bl_custom_style" style="width:30%; float:left"> <?php echo $element['name']; ?> </label>
   				 <input name="<?php echo $element['id']; ?>" id="<?php echo $element['id']; ?>" type="<?php echo $element['type']; ?>" style="width:50%; margin:0 15px; float:left" value="<?php if ( get_option($element['id']) != "") { echo get_option($element['id']); } else { echo $element['std']; } ?>" />
                 </p>
		
		
            <?php	
			
			break;
			
			case 'textarea': ?>
		
				 <p> 
                 
                 <label for="bl_custom_style" style="width:30%; float:left"> <?php echo $element['name']; ?> </label>
                 
				 <textarea name="<?php echo $element['id']; ?>" id="<?php echo $element['id']; ?>" type="<?php echo $element['type']; ?>" cols="" rows="" style="width:50%; margin:0 15px;float:left"><?php if ( get_option($element['id']) != "") { echo get_option($element['id']); } else { echo $element['std']; } ?></textarea>

                 </p>
		
		
            <?php	
			
			
			break;
			
			case 'textarea': ?>
		
				 <p> 
                 
                 <label for="bl_custom_style" style="width:30%; float:left"> <?php echo $element['name']; ?> </label>
                 
				 <textarea name="<?php echo $element['id']; ?>" id="<?php echo $element['id']; ?>" type="<?php echo $element['type']; ?>" cols="" rows="" style="width:50%; margin:0 15px;float:left"><?php if ( get_option($element['id']) != "") { echo get_option($element['id']); } else { echo $element['std']; } ?></textarea>

                 </p>
		
		
            <?php	
			
			break;
			
			case 'select': ?>
		
				<label for="<?php echo $element['id']; ?>" style="width:30%; float:left"><?php echo $element['name']; ?></label>
		
				<select name="<?php echo $element['id']; ?>" id="<?php echo $element['id']; ?>" style="width:50%; margin:0 15px;float:left"> 
							
				<?php foreach ($element['options'] as $val => $option ) { ?>  
							
				<option <?php if ( get_option($element['id']) == $val) { echo 'selected="selected"'; } ?> value="<?php echo $val; ?>"><?php echo $option; ?></option>
				
				<?php } ?>  
                
				</select>  
			
            <?php	

			break;

		}
	}

Come potete vedere è presente un ciclo foreach, seguito dall’istruzione Php switch. Ogni blocco è gestito tramite l’operatore case ed interrotto utilizzando break. All’interno di ogni blocco è presente il codice php ed html utilizzato per gestire l’elemento selezionato. Per esempio il primo blocco, navigazione, contiene la parte iniziale che abbiamo visto la volta precedente quando abbiamo integrato jQuery UI, altri blocchi contengono tag di apertura e chiusura dei div utilizzati o del form, altri ancora i campi del form, quindi input di testo e le aree di testo.

Questo codice interagisce con l’array $panel, quindi possiamo selezionare un elemento interno scrivendo $element[‘nomeelemento’] invece, se vogliamo visualizzare il valore del campo memorizzato nel database all’interno del form, dobbiamo utilizzare, come visto in precedenza, la funzione WordPress get_option, con una piccola modifica:

get_option($element['id']);

Sembra complicato ma, in questo modo, sarà estremamente semplice aggiungere o rimuovere nuovi campi o nuovi tabs nel nostro form di amministrazione. Basterà modificare, come descritto prima, il file panel.php

Ecco un’anteprima del form

Di seguito il link per scaricare l’intera cartella admin e, volendo, integrarla con il vostro tema, ricordandosi di integrarla al file functions.php del tema utilizzato.

A presto 🙂

WordPress Option Panel – Ottimizziamo il codice

Ciao a tutti, nella scorsa lezione abbiamo visto come realizzare un rudimentale pannello di amministrazione per il nostro tema, nella lezione di oggi andremo ad ottimizzare il codice scritto in precedenza integrando la libreria jQuery UI

Per prima cosa, facciamo un pò di ordine, fino ad ora abbiamo scritto tutto il codice necessario direttamente nel file function.php, vediamo come spostare il tutto in un’unica cartella “admin” (potete chiamare questa cartella con qualsiasi nome vogliate).

Per prima cosa creiamo la cartella “admin“, all’interno di “wp-content/themes/wip_theme” ed aggiungiamo il file “core.php” in cui andremo a spostare tutto il codice scritto nella scorsa lezione, ovvero:

function themeoption()
{ 

echo "<h2> Amministrazione </h2>";

if ($_POST["invia"] == "Salva")
	
	{
		
		update_option("logo_url", $_POST["logo"]);
		update_option("titolo", $_POST["titolo"]);
		update_option("analytics", $_POST["analytics"]);
		
		echo "Opzioni salvate con successo";
		
	}
		
?>

<form method="post">

<p> <label style="width:30%; display:inline-block "> Url logo</label>
<input name="logo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("logo_url");?>" /> </p>
<p> <label style="width:30%; display:inline-block "> Titolo sito </label>
<input name="titolo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("titolo");?>"/> </p>
<p> <label style="width:30%; display:inline-block "> Google analytics </label>
<textarea name="analytics" style="width:50%; margin:0 15px"><?php echo get_option("analytics");?></textarea> </p>
<input name="invia" type="submit" value="Salva" class="button" />

</form>

<?php

}

Al suo posto, in function.php, aggiungiamo:

require_once dirname(__FILE__) . '/admin/core.php';

Successivamente scarichiamo la libreria jQuery UI, selezionando come tema “Redmond” (o qualsiasi altro tema voi vogliate) e copiate le due cartelle “js” e “css” all’interno della cartella principale “admin“.

Andiamo a caricare la libreria appena scaricata con le funzioni wp_enqueue_script e wp_enqueue_style scrivendo, dopo “function themeoption() { “, il seguente codice:

$file_dir = get_bloginfo('template_directory')."/admin";
wp_enqueue_script( 'jquery-ui-1.10.0.custom.min', $file_dir.'/js/jquery-ui-1.10.0.custom.min.js',array('jquery'),'1.10.0',true );
wp_enqueue_style ( 'jquery-ui-1.8.23.custom', $file_dir.'/css/redmond/jquery-ui-1.10.0.custom.min.css' );
wp_enqueue_script( 'jquery.custom', $file_dir.'/js/jquery.custom.js',array('jquery'),'1.10.0',true );
	 
wp_deregister_script('jquery'); 
wp_enqueue_script( 'jquery', $file_dir.'/js/jquery-1.9.0.js',array('jquery'),'1.9.0',true );
wp_enqueue_script('jquery');

Per il corretto funzionamento di jQuery UI, è necessario aggiungere questo codice all’interno di un nuovo file che chiameremo jquery.custom.js, dentro la cartella js

jQuery(function() {
    jQuery( "#tabs" ).tabs();
});

Sostituiamo il vecchio form scritto in precedenza con :

<div id="tabs">

  <ul>
    <li><a href="#tabs-1">Generale</a></li>
    <li><a href="#tabs-2">Header</a></li>
    <li><a href="#tabs-3">Seo</a></li>
  </ul>
 
<form method="post">

  <div id="tabs-1">
  
    <p> <label style="width:30%; display:inline-block "> Titolo sito </label>
    <input name="titolo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("titolo");?>"/> </p>
    <input name="invia" type="submit" value="Salva" class="button" />

  </div>
  <div id="tabs-2">
  
    <p> <label style="width:30%; display:inline-block "> Url logo</label>
    <input name="logo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("logo_url");?>" /> </p>
    <input name="invia" type="submit" value="Salva" class="button" />
    
  </div>
  <div id="tabs-3">
  
    <p> <label style="width:30%; display:inline-block "> Google analytics </label>
    <textarea name="analytics" style="width:50%; margin:0 15px"><?php echo get_option("analytics");?></textarea> </p>
    <input name="invia" type="submit" value="Salva" class="button" />
    
  </div>
  
</form>

</div>

Ecco il codice completo della lezione di oggi

function add_menu()
{
	add_menu_page("Amministrazione", "Theme Options", 'administrator',  'theme-option', 'themeoption', '' ,61  );
}

add_action('admin_menu', 'add_menu'); 

function themeoption()
{ 
	 $file_dir = get_bloginfo('template_directory')."/admin";
	 wp_enqueue_script( 'jquery-ui-1.10.0.custom.min', $file_dir.'/js/jquery-ui-1.10.0.custom.min.js',array('jquery'),'1.10.0',true );
	 wp_enqueue_style ( 'jquery-ui-1.8.23.custom', $file_dir.'/css/redmond/jquery-ui-1.10.0.custom.min.css' );
	 wp_enqueue_script( 'jquery.custom', $file_dir.'/js/jquery.custom.js',array('jquery'),'1.10.0',true );
	 
	 wp_deregister_script('jquery'); 
	 wp_enqueue_script( 'jquery', $file_dir.'/js/jquery-1.9.0.js',array('jquery'),'1.9.0',true );
	 wp_enqueue_script('jquery');

echo "<h2> Amministrazione </h2>";

if ($_POST["invia"] == "Salva")
	
	{
		
		update_option("logo_url", $_POST["logo"]);
		update_option("titolo", $_POST["titolo"]);
		update_option("analytics", $_POST["analytics"]);
		
		echo "Opzioni salvate con successo";
		
	}
		
?>


<div id="tabs">

  <ul>
    <li><a href="#tabs-1">Generale</a></li>
    <li><a href="#tabs-2">Header</a></li>
    <li><a href="#tabs-3">Seo</a></li>
  </ul>
 
<form method="post">

  <div id="tabs-1">
  
    <p> <label style="width:30%; display:inline-block "> Titolo sito </label>
    <input name="titolo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("titolo");?>"/> </p>
    <input name="invia" type="submit" value="Salva" class="button" />

  </div>
  <div id="tabs-2">
  
    <p> <label style="width:30%; display:inline-block "> Url logo</label>
    <input name="logo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("logo_url");?>" /> </p>
    <input name="invia" type="submit" value="Salva" class="button" />
    
  </div>
  <div id="tabs-3">
  
    <p> <label style="width:30%; display:inline-block "> Google analytics </label>
    <textarea name="analytics" style="width:50%; margin:0 15px"><?php echo get_option("analytics");?></textarea> </p>
    <input name="invia" type="submit" value="Salva" class="button" />
    
  </div>
  
</form>

</div>


<?php

}

?>

Ed ecco il risultato.

I campi del form sono quelli aggiunti nella precedente lezione, nella prossima lezione andremo a migliorare ulteriormente questo pannello, così da rendere il codice più leggero e l’aggiunta di nuovi campi più semplice.
Alla prossima lezione

WordPress Option Panel – Salvataggio delle opzioni

Torno finalmente, dopo una lunga pausa, ad aggiornare il blog con una nuova lezione dedicata alla creazione del pannello di opzioni per un tema WordPress. Nella precedente lezione abbiamo visto come creare una pagina vuota e collegarla al menù amministrativo del nostro CMS preferito, oggi vedremo come creare il pannello vero e proprio e salvare i dati nel database. Apriamo il file function.php , troveremo ciò che abbiamo scritto in precedenza. (Per comodità ho eliminato la parte relativa alla seconda pagina, eventualmente sarà reintegrata in futuro)

function add_menu()
{
	add_menu_page("Amministrazione", "Theme Options", 'administrator',  'theme-option', 'themeoption', '' ,61  );
}

add_action('admin_menu', 'add_menu'); 

function themeoption()
{ 
echo "<h2> Amministrazione </h2>";
}

E sostituiamo la funzione themeoption con:

function themeoption()
{ 
echo "<h2> Amministrazione </h2>";

?>

<form method="post">

<p> <label style="width:30%; display:inline-block "> Url logo</label>
<input name="logo" type="text" style="width:50%; margin:0 15px" /> </p>
<p> <label style="width:30%; display:inline-block "> Titolo sito </label>
<input name="titolo" type="text" style="width:50%; margin:0 15px" /> </p>
<p> <label style="width:30%; display:inline-block "> Google analytics </label>
<textarea name="analytics" style="width:50%; margin:0 15px"></textarea> </p>
<input name="invia" type="submit" value="Salva" class="button" />

</form>

<?php
}

Adesso andiamo nell’amministrazione di WordPress:

Abbiamo aggiunto un semplice form con tre campi, cliccando su Salva non succederà nulla ovviamente, questo perché dobbiamo ancora aggiungere la parte di codice che elabora e memorizza i dati inseriti. Per fare questo ci vengono incontro le seguenti funzioni

1. add_option
2. update_option
3. get_option
4. delete_option

Il loro funzionamento è abbastanza semplice, con add_option e/o update_option, serve per creare un campo all’interno della tabella wp_options del database di WordPress, con la funzione get_option serve per leggere il valore memorizzato e con delete_option serve per cancellare dal database il campo non più necessario.

function themeoption()
{ 

echo "<h2> Amministrazione </h2>";

if ($_POST["invia"] == "Salva")
	
	{
		
		update_option("logo_url", $_POST["logo"]);
		update_option("titolo", $_POST["titolo"]);
		update_option("analytics", $_POST["analytics"]);
		
		echo "Opzioni salvate con successo";
		
	}
		
?>

<form method="post">

<p> <label style="width:30%; display:inline-block "> Url logo</label>
<input name="logo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("logo_url");?>" /> </p>
<p> <label style="width:30%; display:inline-block "> Titolo sito </label>
<input name="titolo" type="text" style="width:50%; margin:0 15px" value="<?php echo get_option("titolo");?>"/> </p>
<p> <label style="width:30%; display:inline-block "> Google analytics </label>
<textarea name="analytics" style="width:50%; margin:0 15px"><?php echo get_option("analytics");?></textarea> </p>
<input name="invia" type="submit" value="Salva" class="button" />

</form>

<?php

}

Il controllo sul pulsante Salva all’inizio è necessario, prima di elaborare i dati inseriti, altrimenti rischiamo di cancellare le opzioni memorizzate, ogni volta che apriamo o aggiorniamo la pagina. Successivamente, grazie a update_option, creiamo il campo logo_url, memorizzando il il valore inserito. Infine, con get_option, recuperiamo i valori inseriti e li visualizziamo all’interno del form, quest’ultima funzione va utilizzata ogni volta che abbiamo bisogno di recuperare il dato memorizzato ed elaborarlo, a seconda delle nostre esigenze (ad esempio, se dobbiamo aggiungere il codice di Google Analytics, dobbiamo scrivere:

<?php echo get_option("analytics");?>

all’interno del file header.php oppure footer.php.

Ora, tornando nell’amministrazione di WordPress, troveremo il nostro pannello perfettamente funzionante.

Oggi abbiamo visto come creare un pannello di amministrazione funzionante, nella prossima lezione andremo ad ottimizzare il codice appena scritto.

Vi do appuntamento alla prossima lezione.