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