Creare una pagina di opzioni tema per WordPress

Oggi analizzeremo qualcosa di davvero “raro” dato che esistono molte poche guide online (solo in inglese), ovvero creeremo una perfetta pagina di opzioni tema WordPress per i nostri clienti, personalizzata e davvero professionale.

Iniziamo con una nota, per capire appieno la guida si richiede una conoscenza MINIMA di WordPress e un discreta conoscenza di PHP. Ovviamente se avete problemi o domande potete commentare sotto l’articolo 😉

DOWNLOAD SORGENTE

Creiamo i campi personalizzati

Come ogni progetto php che si rispetti (lo so sono maniaco di queste cose), anche questo lo farò iniziare con le variabili, che potranno essere facilmente richiamate e modificare rendendo tutto il progetto più snello e facile.

Quali variabili dobbiamo tenere in considerazione? Bhè ad esempio il nome del nostro sito/brand, un diminutivo dello stesso che potrà essere usato per richiamare i vari campi nel frontend, e per ultimo le opzioni vere e proprie.

Il codice che posterò da ora in poi andrà posizionato dentro il file functions.php (anche se sappiate che è possibile creare anche una sottodirectory vera e propria per l’interfaccia admin, ma questa è un’altra storia..).

<?php  //inizio pagina functions.php

// ==========================//
//             Opzioni Tema v2.0 di Riccardo Mel   -  targetweb.it   -           //
// ==========================//

/*Variabili e campi*/

$themename = "Nome Tuo Sito";  //nome esteso
$shortname = "af";  //nome contratto
$options = array ( //inizio array opzioni

Come vedete per le opzioni ho iniziato un array. Per chi non ha basi di php l’array è una sorta di “contenitore a celle” dove possono venire immessi diversi dati (in diversi modi). i dati possono essere poi richiamati facilmente grazie a un id che va specificato in fase di realizzazione.

Continuiamo il nostro codice:

array( "name" => "Configurazione Generale",
	"type" => "title"),

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

array( "name" => "Messaggio Alto",
	"desc" => "Scrivi qui il messaggio in alto alla pagina.",
	"id" => $shortname."_testo_up",
	"type" => "text",
	"std" => ""),

array( "name" => "Testo Footer",
	"desc" => "Scrivi qui il messaggio per il tuo pie di pagina.",
	"id" => $shortname."_testo_footer",
	"type" => "textarea",
	"std" => ""),

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

array( "name" => "Configurazione Avanzata",
	"type" => "title"),

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

array( "name" => "Favicon",
    "desc" => "Inserisci il percorso alla tua favicon qui , !IMPO non toccare!",
    "id" => $shortname."_favicon",
    "type" => "text",
    "std" => get_bloginfo('url') ."/favicon.ico"), 

array( "name" => "Google Analytics",
    "desc" => "Codice per le statistiche di visitatori controlla sul sito http://www.google.it/intl/it_ALL/analytics/ le tue statistiche!",
    "id" => $shortname."_stat",
    "type" => "textarea",
    "std" => ""), 

array( "type" => "close")

);

Esaminiamo il codice appena scritto:

array( "name" => "Configurazione Generale",
	"type" => "title"),

Questo crea un array destinato per il titolo. Ho pensato a questa soluzione per una questione di stilizzazione futura (via css).

array( "type" => "open"), //occhio alla virgola!

Qui si apre l’array principale delle varie opzioni.

array( "name" => "Messaggio Alto",
	"desc" => "Scrivi qui il messaggio in alto alla pagina.",
	"id" => $shortname."_testo_up",
	"type" => "text",
	"std" => ""),

Con questo array si definisce l’opzione da modificare. Nel nostro caso il Messaggio alto nell’header del sito.

desc = Specifica una descrizione con linee guida alla modifica

id = la sezione più importante dell’array ci servirà per richiamare il contenuto dello stesso all’interno del sito

type= tipo di array, testo, input, checkbox textarea etc

std = acronimo di standard serve per impostare un percorso, o un valore di default (esempio: percorso alla favicon di base etc ).

Nota. E’ possibile specificare anche le dimensioni dei campi usando i parametri rows e cols

array( "type" => "close")
);

Questo chiude l’array delle opzioni. Come vedete dal codice postato sopra è preferibile dividere le varie opzioni per tipo usando l’array “title” in questo modo potremo specificare “opzioni generali” opzioni avanzate etc.

Programmiamo in nostro “motore”

Come ogni progetto che si rispetti in php anche questo ha bisogno di un “motore” che, una volta si sia premuto il pulsante “salva” aggiorni le nostre opzioni e restituisca un messaggio di conferma. Ecco il codice completo (dopo il dettaglio):

function mytheme_add_admin() {

global $themename, $shortname, $options; //recupero opzioni, nome tema e shortname

if ( $_GET['page'] == basename(__FILE__) ) {

if ( 'save' == $_REQUEST['action'] ) {  //azione per quando si salva

foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }

echo '<div id="message" class="updated fade"><p><strong>Grazie, '.$themename.' modifiche salvate con successo.</strong></p></div>';  //messaggio dopo salvataggio

} else if( 'reset' == $_REQUEST['action'] ) {

foreach ($options as $value) {
delete_option( $value['id'] ); }

if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>Grazie, '.$themename.' valori resettati con successo.</strong></p></div>';  //messaggio dopo reset valori

}
  }

add_theme_page($themename." Options", "".$themename." Tema", 'edit_themes', basename(__FILE__), 'mytheme_admin');  //creo il menu a sinistra sotto la sezione "aspetto" di WordPress

}

Ecco il dettaglio:

global $themename, $shortname, $options;

Recupero opzioni, nome tema e shortname.

if ( $_GET['page'] == basename(__FILE__) ) {

if ( 'save' == $_REQUEST['action'] ) {  //azione per quando si salva

foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }

echo '<div id="message" class="updated fade"><p><strong>Grazie, '.$themename.' modifiche salvate con successo.</strong></p></div>';  //messaggio dopo salvataggio

} else if( 'reset' == $_REQUEST['action'] ) {

foreach ($options as $value) {
delete_option( $value['id'] ); }

if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>Grazie, '.$themename.' valori resettati con successo.</strong></p></div>';  //messaggio dopo reset valori

}
}

Esegue, nel caso venga cliccato su salva o reset, l’aggiornamento delle opzioni negli array e nel sito. Restituisce “grazie modifiche effettuate con successo”, o “valori resettati con successo” con effetto fade molto gradevole. Ho preferito questa soluzione, molte guide online fanno il redirect usando header location, ma io preferisco così, molti meno problemi ed effetto assicurato.

add_theme_page($themename." Options", "".$themename." Tema", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}

Infine con questo pezzo di codice creo il menu a sinistra sotto la sezione “aspetto” di WordPress.

Diamo un tocco di stile al pannello

//stile pagina 

function mytheme_admin() {

global $themename, $shortname, $options;

?>
<div class="wrap">
<h2><?php echo $themename; ?> Gestione Tema</h2>  

<form method="post">

<?php foreach ($options as $value) {
switch ( $value['type'] ) {

case "open":
?>
<table width="100%" border="0" style="background-color:#eef5fb; padding:10px;">

<?php break;

case "close":
?>

</table><br />

<?php break;

case "title":
?>
<table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr>
<td colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>

<?php break;

case 'text':
?>

<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php
break;

case 'textarea':
?>

<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>

</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php
break;

case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php
break;

case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php break;

}
  }
?>

<p class="submit">
<input name="save" type="submit" value="Salva Modifiche" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>

<?php
}

add_action('admin_menu', 'mytheme_add_admin');

Non mi addentro troppo in questo codice, sappiate che serve per dare lo stile al vostro pannello admin. Come vedete ho usato il comando case break di php per stilizzare i vari campi,valori in un’unica botta. In pratica per chi non mastica php, viene analizzato ogni “caso” e viene applicato il relativo stile.

<p class="submit">
 <input name="save" type="submit" value="Salva Modifiche" />
   <input type="hidden" name="action" value="save" />
</p>
  </form>
   <form method="post">
     <p class="submit">
       <input name="reset" type="submit" value="Reset" />
      <input type="hidden" name="action" value="reset" />
     </p>
   </form>

Infine, questo form crea i campi “invia” e “reset” visibili all’utente finale.

Ok adesso pensiamo al frontend

Ora dobbiamo posizionare delle “briciole di pane” nell’elemento che vogliamo modificare all’interno del nostro template. Ma prima una cosa molto importante, che non tutti spiegano, inserito questo codice in cima alla pagina che conterrà degli elementi da modificare via pannello amministrativo:

<?php
//rende possibile la comunicazione fra il pannello admin e l'interfaccia user
global $options;
foreach ($options as $value) {
    if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
    else { $$value['id'] = get_option( $value['id'] ); }
    }
?>

Come scritto nel commento questo codice rende possibile la modifica degli elementi facendo “comunicare” il pannello creato con il nostro tema.

A questo punto ci basterà posizionare questo codice per richiamare quello scritto e salvato nel nostro pannello:

<?php echo $af_testo_up; ?> //mostra il testo up specificato nel pannello

In questo caso il codice mostra il testo up (occhio agli id che avete usato!) specificato nel pannello admin.

Per le statistiche ad esempio, usato questo codice:

<?php echo $af_stat; ?>

E così via con tutti gli altri parametri immessi nel nostro pannello.

Nel caso voi abbiate impostato dei checkbox o spunte, procedete incollando questo codice:

<?if ($trg_breadcrumb_disattivato == "false") { ?>
<!--NON FARE NULLA-->
<? } else { ?>
<!--VISUALIZZA BREADCRUMB-->
<? } ?>

Ecco fatto! Mi raccomando tutto il codice scritto nell’articolo va inserito dentro il file functions.php nella cartella del vostro tema. Se ti va puoi scaricare il file function.php che ti serve completo QUI.

Info articolo:

Ultima modifica: 12/07/2011

Versione: 2.0

Copyright: Mel Riccardo Targetweb.it – lasciate un riferimento al sito nel functions.php

———————–>

 Mi raccomando condividete e segnalate l’articolo sui vostri social network e fate passa parola per condividere la conoscenza! Un commento mi sembra d’obbligo se usate questo pannello o vi è servito l’articolo.