Creare una pagina di opzioni tema per WordPress

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 😉

pannello-gestione-tema-wordpress

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.

  1. Wow, articolo da paura questo, complimenti, non ho testato ma sono sicuro funzioni 😛

    Ps: cliccando il link per il download non succede nulla oltre all’apertura di una nuova scheda, dovresti correggere.

  2. Si scusa ho rimediato 😉

    funziona tutto testo al 100% ho deciso di fare la guida perchè non se ne parla molto ma questo è un aspetto molto interessante di WordPress… sopratutto se lo usi “commercialmente” per clienti. Quasi la totalità degli articoli in rete tra l’altro non funzionano correttamente perchè hanno adottato altri metodi (tipo abuso di header location etc).

    Ciao!

  3. Ciao Riccardo, innanzitutto complimenti per la guida, avevo però una domanda da profano di php:

    invece che inserire il codice in functions.php si potrebbe farlo in un’altra pagina, ad esempio opzioni-tema.php e poi scrivere

    require_once (get_template_directory().’/opzioni-tema.php’);

    ?

  4. Ciao Riccardo,
    premesso che sono un neofita del php, devo dirti che la guida è davvero interessante ed è davvero rara. Io però ho un problema. Vorrei utilizzare le opzioni del tema per modificare l’id di categoria per un loop.

    Dopo aver richiamato gli array delle categorie disponibili nella parte relativa agli array delle opzioni del tema ho inserito:

    array( “name” => “Categories”,
    “desc” => “Select a category for 1.”,
    “id” => $shortname.”_cat”,
    “std” => “1”,
    “type” => “select”,
    “options” => $mym_categories), // id categoria

    Fin qui tutto bene. Vado nel pannello admin, in un menu a discesa mi dà le diverse categorie disponibili, seleziono quella che mi interessa e salvo.
    Il problema sorge nel richiamare l’ID della categoria prescelta.

    Nella pagina interessata ho inserito quanto serve:

    $mym_cat, ‘showposts’ => 1 )); ?>
    have_posts()) : $my_query->the_post(); ?>

    Questo è il problema. Non mi restituisce alcun valore. Mi dirai: senza echo. Ma sappiamo bene che non posso inserire un echo, altrimenti mi dà parser error T_ECHO.

    Ho provato a inglobare il tutto in una funzione che poi ho richiamato all’interno dell’array della query (es. WP_Query(array(‘cat’ => mycatid() ecc. ecc.). Ebbene funziona, con l’unico difetto: anziché inserire il valore nel ciclo, me lo stampa a video. E non riesco a capire dove sbaglio.

    Ah, se puoi vorrei anche – se è possibile – un suggerimento su come posso nel pannello admin scegliere da menu a tendina la categoria visualizzando il nome della categoria e poi nella pagina stampare l’ID della categoria anziché il nome quando salvo. Se non è troppo complicato, ovviamente!

    Ti ringrazio per l’aiuto! 😉

    D.

  5. Ciao,
    molto chiaro il tuo articolo, ma sono io che non sono capace, sono alle prime armi con la realizzazione di temi e cose del genere.
    Questo codice ?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'] ); }
    }
    ?>

    dove va inserito?

  6. Ciao e grazie del tutorial era un po’ che stavo cercando di capire come funzionasse la pagina opzioni dei temi wordpress.
    Funziona tutto alla perfezione 😉

  7. Ciao Riccardo, complimenti per l’articolo veramente interessante, ma mettiamo il caso che vorrei caricare un immagine direttamente dall opzione del tema, nell array ci sarà un tipo upload, come faccio a caricare l’ immagine, sfruttando la funzione nel caso break upload 😕

    Grazie in anticipo e complimenti ancora

  8. Ciao, e grazie mille per questa guida. Purtroppo non so programmare in php, ma solo manovrare un po’ il codice. Ho due problemi:
    1. ho creato un id _titolo1 e id _testo1 e ho inserito nella pagina dove devono comparire, rispettivamente
    <div id="box1"

    solo che all’esterno non visualizzo nulla
    2. se volessi che questo box composto da titolo e descrizione prendesse il titolo e una parte del testo di una pagina, che comparirà nel pannello delle opzioni tramite un menu a tendina, che codice devo inserire?
    Grazie mille per il tuo aiuto

      1. Grazie, ma sono riuscita a creare un tema all’80% in una settimana e senza saper programmare, quindi vorrei imparare altro e non utilizzare prodotti pronti.
        Grazie mille per il tuo aiuto comunque, questo tutorial mi ha aiutata moltissimo.

  9. Ciao,
    ho utilizzato e trovato molto utile la tua guida, cmq vorrei segnalarti due accorgimenti.
    Il primo è che dovrebbe mancare la chiusura del div principale , ma potrei averlo cancellato per sbaglio, magari controlla.

    Poi sarebbe comodo fare lo stripslashed dei textarea nel caso siano inseriti gli apici.

    Uhm altro non mi viene in mente, per il resto tutto ottimo, grazie 😉

  10. Ciao,
    sto cercando di creare una pagina tema ma prendendo il tuo sorgente e mettendolo nel mio file php non funziona, mi appare solo il bottone del salva e del reset.
    Partendo dal fatto che sono ancora un noob del php, sapresti dirmi cosa potrebbe essere? Ho preso il codice di sana pianta 🙂

  11. ciao,
    Complimenti per la guida ; la cercavo da tempo per personalizzare i miei temi di themeforest. Volevo chiederti una cosa , in caso voglia inserire un opzione di upload (ad es, per dare la possibilità all’utente di caricare logo nella specifica posizione ecc) come dovrei fare?

  12. Ciao!
    Grande guida! Ho solo un problema. Ho provato ad inserire un campo di testo che mi modifica direttamente un box in una pagina specifica, solo che quando inserisco il testo e clicco su “salva modifiche”, la textarea rimane vuota e nel sito non compare il testo inserito. Come posso risolvere?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.