Creazione di una pagina di opzioni tema personalizzate per WordPress

Sia che tu stia sviluppando temi WordPress per te stesso, per un cliente o per vendere commercialmente, avere la possibilità di personalizzare aspetti del tuo tema tramite il pannello di controllo di WordPress rende il tuo tema infinitamente flessibile e molte volte più versatile e accattivante.

Fornendo agli utenti di back-end l'accesso a opzioni che altrimenti comporterebbero l'approfondimento nei file modello php per modificare layout, immagine logo, colori e qualsiasi numero di altre opzioni.

Un comodo pannello delle opzioni può essere aggiunto a qualsiasi tema tramite alcune facili aggiunte al file functions.php del tuo tema.

I metodi discussi qui si applicano solo a WordPress 2.8 o versioni successive. Sono disponibili numerosi altri tutorial se stai utilizzando una versione precedente di WordPress

Cosa rendere personalizzabile

Prima di fare qualsiasi codice, dobbiamo decidere quali elementi del tema vogliamo personalizzabili. Questo può essere qualsiasi cosa, da un elenco di combinazioni di colori selezionabili a un layout completamente nuovo per la tua home page. Per il nostro esempio, ho intenzione di mantenerlo semplice ma lo stesso metodo può essere ridimensionato a qualsiasi livello di personalizzazione che desideri.

Ci sono 3 elementi che consentiremo di personalizzare con questo tema:

1. Inserimento di testo per un paragrafo di introduzione sulla homepage.
2. L'URL del profilo Facebook dell'utente
3. Un'opzione per nascondere o mostrare il paragrafo di introduzione.

Creare il codice

A partire da WordPress 2.8, sono stati aggiunti numerosi hook per facilitare la creazione di menu di amministrazione personalizzati. Useremo alcuni di questi per creare il nostro menu di impostazioni del tema personalizzato per il backend di WordPress.

Il nostro primo blocco di codice chiama le funzioni per memorizzare i nostri nuovi valori di opzione nel database e avviare la visualizzazione del nostro codice HTML per la nostra pagina delle opzioni e creare la voce di menu "Opzioni tema" nel backend di WordPress.

Ora scriveremo la nostra funzione che contiene l'output effettivo della nostra pagina delle impostazioni del tema.

function theme_options_do_page() { global $select_options; if ( ! isset( $_REQUEST['settings-updated'] ) ) $_REQUEST['settings-updated'] = false; 

Qui mostreremo un'icona e un titolo per la pagina e un codice di conferma per l'utente per confermare che le loro impostazioni sono state salvate quando il modulo è stato inviato.

". __( 'Custom Theme Options', 'customtheme' ) . ""; ?>
 

Ora, creiamo il nostro modulo le opzioni del tema, recuperiamo i valori esistenti per ogni opzione e specificiamo il nome del gruppo di impostazioni.

Successivamente, aggiungiamo un po 'di codice per caricare un file remoto in grado di visualizzare informazioni aggiornate per l'utente del tema e collegamenti a forum di supporto, documenti di supporto o altri file di supporto.

Questo è un modo pratico per gli sviluppatori di temi per mantenere aggiornati i tuoi clienti tematici con le informazioni più recenti, includere il codice di tracciamento per vedere chi utilizza il tema per combattere la pirateria a tema, visualizzare annunci o offerte speciali, emettere avvisi sui bug di tema o su un numero qualsiasi di altri possibilità.

  Ora è il momento di visualizzare le nostre opzioni disponibili.  Innanzitutto, viene visualizzata una casella di controllo per specificare se visualizzare o meno il paragrafo introduttivo sul nostro tema. 
  Successivamente, viene visualizzato un input di testo per l'URL di Facebook dell'utente. 
  Andando avanti, mostriamo una textarea per il nostro testo di paragrafo introduttivo. 
 
 
<?php echo esc_textarea( $options['introtext'] ); ?>
 

Infine, mostriamo il pulsante di invio per il nostro modulo.

Ora dovremmo finire con una pagina di opzioni come questa.

Ora che abbiamo eliminato il lato amministratore, integriamo queste impostazioni personalizzate nel nostro tema. Ora disponiamo di 3 impostazioni: una casella di controllo che indica se visualizzare o meno il testo introduttivo, il testo di introduzione effettivo e il nostro URL di Facebook. Nel nostro file header.php, inseriremo queste impostazioni in un array chiamato $ options.

Ora, individueremo la parte del nostro modello in cui verrà inserito il testo introduttivo e analizzeremo se visualizzarlo o meno. Se vogliamo visualizzarlo, stampiamo il contenuto che è stato inserito nel nostro pannello di amministrazione personalizzato.

Ora, possiamo trovare dove vorremmo visualizzare un collegamento al nostro profilo Facebook e visualizzare i dati in modo simile. Questa volta, per prima cosa controlliamo se è stato inserito un valore. Se è stato inserito un valore, andiamo avanti e visualizziamo l'immagine dell'icona di Facebook.

" target="new">

Questi sono esempi molto semplici di come eseguire le opzioni personalizzate, ma tutto ciò che riguarda il tema può essere modificato in questo modo, quindi le possibilità sono infinite. Un pannello delle opzioni ben progettato può essere utilizzato come punto di vendita per il tuo tema e può rendere un tema molto ben progettato ancora più attraente e versatile.

Esempi di pannelli delle opzioni

Per ulteriori idee, consulta alcuni dei pannelli di opzioni degli sviluppatori di temi più popolari.

Templatic

Templatic i temi hanno una pagina delle opzioni molto chiara e concisa.

WooThemes

Un creatore di eccellenti temi WordPress, WooThemes 'pannello delle opzioni fornisce accesso a un numero di personalizzazioni, suddivise in sottosezioni utilizzando il proprio layout personalizzato.




FlexiThemes

Il pannello delle opzioni di FlexiPanel da FlexiThemes è un pannello di base, ma di facile utilizzo.

Tema Guerriero

I collegamenti chiari alla documentazione del tema coprono un'interfaccia a schede sul Tema Guerriero interfaccia delle opzioni.

ThemeShift

Un altro sgombro, ben progettato pagina delle opzioni che utilizza alcune opzioni jQuery molto belle per la selezione del colore del tema.

Temi kreative

Temi kreative è uno dei pochi sviluppatori di temi premium che mostra effettivamente schermate del pannello delle opzioni personalizzate per promuovere i loro temi. Il pannello delle opzioni è pulito, ben progettato e include collegamenti a documentazione, forum di supporto e il log delle modifiche per il tema corrente.

Layout personalizzati, Ajax, jQuery e oltre

Molti sviluppatori di temi premium dedicano molto tempo alla creazione di layout di stili personalizzati per la pagina delle opzioni. Mentre questo potrebbe farli risaltare dalla massa quando guardi una pagina di schermate, ritengo che ciò pregiudichi il WordPress UX. Ricorda, l'utente del tema potrebbe non essere molto sdolcinato e non vuoi che qualcuno stia ronzando attraverso il backend di WordPress per fermarsi improvvisamente e chiedersi perché l'interfaccia sia improvvisamente drasticamente diversa. Mantenere il tuo design coerente con il layout di amministrazione standard di WordPress è, a mio parere, l'opzione migliore.

È possibile scegliere di estendere ulteriormente il pannello delle opzioni integrando Ajax e jQuery in modo che le opzioni possano essere aggiornate senza dover aggiornare la pagina. Anche se questo è un piccolo aggiustamento, rende la pagina molto più elegante e raffinata senza potenzialmente confondere il tuo utente.

Alla fine, vuoi abbagliare il tuo utente con facilità d'uso. Il tuo obiettivo dovrebbe essere quello di far diventare il tuo tema il punto di partenza per il tuo sito web degli utenti. Più il tema è personalizzabile, più il tuo utente si sentirà come se fosse il "loro".

Che cosa trovi è un problema comune con i pannelli opzionali per i temi commerciali? Un pannello delle opzioni personalizzato ha mai influenzato la tua decisione nell'acquistare un tema WordPress?