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 🙂
Commenti
ciao,
complimenti per la guida l’ho trovata molto interessante e ben fatta!
volevo chiederti come posso fare per inserire il color picker?
grazie
Scusami il download non va e possibile avere la cartella download???