Come creare una pagina di amministrazione personalizzata in WordPress Dashboard

Aggiornato: 30 giugno 2013 / Articolo di: Jerry Low

Quando WordPress ha svelato quello che era il suo tema standard, Kubrick, diversi anni fa, ha anche preso le parti di una nuova entusiasmante funzionalità. Quella caratteristica era il pannello di amministrazione del tema personalizzato, abilitato definendo funzioni e preferenze nel file "functions.php" specifico del tema. Negli anni che sono seguiti, la pagina delle opzioni del tema è stata purtroppo sottoutilizzata da molti designer di temi, ma in realtà è un ottimo modo per dare agli utenti il ​​controllo sull'aspetto del loro sito senza costringerli a installare un nuovo tema. Cose come l'immagine di sfondo del tema, il numero di colonne e persino i colori dei caratteri possono essere modificati utilizzando questo pannello di amministrazione personalizzato.

Il pannello di amministrazione stesso viene modificato riempiendo il file delle funzioni del tema con una serie di array PHP che definiscono valori personalizzati. Tali valori sono quindi inclusi nel modello e sono definiti in un pannello di amministrazione che consente agli utenti di definire visivamente le proprie preferenze di aspetto. L'intero processo è in realtà relativamente semplice una volta che il progettista del tema apprende come funziona un PHP e come può sfruttare quel pezzo di codice per consentire la presentazione personalizzata all'interno dei propri file modello.

Il processo in più fasi inizia tutte impostando alcune variabili del sito e definendo cosa deve essere personalizzato in questa nuova pagina di amministrazione.

Passo 1: Creazione e modifica della pagina di funzioni specifiche di PHP

Se hai sviluppato il tuo tema, è molto probabile che tu abbia creato un file Functions.php da abbinare ai file modello esistenti. Questa è un'opzione relativamente avanzata e la maggior parte dei designer semplicemente la salta del tutto. In questo caso, è essenziale aprire il client FTP preferito e puntarlo al seguente URL del server in cui risiedono i file del tema:

/ Public_html / wp-content / themes / LA-theme-CARTELLA /

Una volta all'interno di questa cartella, ricontrolla per assicurarti che non sia presente il file "functions.php", quindi utilizza il programma di modifica del testo per creare un nuovo file denominato "functions.php". Questo file può quindi essere salvato e caricato sul server tramite FTP. Può essere modificato direttamente sul server, eliminando la necessità del programma di modifica del testo.

Il primo passo per avere un pannello delle opzioni del tema valido definito nel file “functions.php” è definire due variabili nella parte superiore del documento. Queste variabili verranno utilizzate per visualizzare il nome del tema utilizzando il dashboard, nonché per identificare gli elementi del modulo e della selezione all'interno di quella pagina di amministrazione. Osserva il codice sottostante, posizionalo nella parte superiore del tuo documento "functions.php" e personalizzalo in base alle esigenze del tuo sito.

$ longname = "Tema di sviluppo del pannello di amministrazione";
$ shortcode = "apdt";

Queste variabili hanno scopi diversi. La variabile $ longname verrà utilizzata per stampare il nome del tema nel pannello delle opzioni di amministrazione effettive. Per questo motivo, si consiglia agli sviluppatori di assegnare il nome esatto del tema a questa variabile per eliminare la confusione tra gli utenti del tema. La variabile $ shortcode dovrebbe essere tutta in lettere minuscole senza punteggiatura, poiché verrà utilizzata per identificare gli elementi del modulo all'interno del codice stesso. Nell'esempio, è stato usato un acronimo semplice basato sul nome completo del tema; questo può essere personalizzato secondo i gusti di un utente.

Passo 2: definizione delle preferenze personalizzabili con gli array PHP

Innanzitutto, è importante dire al tema qual è il nome del pannello di amministrazione. Questo verrà stampato soprattutto sulle impostazioni potenziali e aiuta a promuovere la chiarezza di intenti per gli utenti inesperti. Questo viene fatto aggiungendo il seguente array al tag $ settings all'interno del file "functions.php":

$ settings = array (
array ("name" => $ longname. "Aspetto Impostazioni",
"Type" => "title"),

Successivamente, dobbiamo indicare che l'array pieno di opzioni è "aperto" o può essere modificato dall'input dell'utente. Questo viene fatto utilizzando un altro semplice array che appare proprio sotto la definizione del titolo della pagina. Assomiglia a questo:

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

Ora siamo liberi di iniziare a definire le opzioni di aspetto del tema, creando ciascuna di esse come un nuovo array. In questo esempio, definiremo il testo che viene inserito nel piè di pagina del tema. Per impostazione predefinita, il tema di esempio contiene un collegamento al sito Web dello sviluppatore del tema oltre a numerose informazioni sul controllo delle versioni. Ciò non è desiderabile da un gran numero di utenti di WordPress che preferirebbero inserire le proprie informazioni nel piè di pagina, tuttavia, abilitare questo controllo personalizzato salva loro la modifica manuale del file "footer.php". Ecco come si fa.

array (
"Name" => "Testo piè di pagina tema personalizzato",
"Desc" => "Questo è il testo visualizzato alla fine di ogni pagina contenuta in questo tema.",
"Id" => $ shortcode. "_ Custom_footer",
"Type" => "text",
"Std" => "Tema sperimentale v1.0. Sviluppato da John Doe. Altri temi qui. "),

L'array sopra consente all'utente di determinare il testo del piè di pagina standard del tema, ma i tag dell'array devono essere spiegati per descrivere meglio come funziona questo processo e cosa definisce ogni parte dell'array.

Nome: Si riferisce al nome della casella di testo vera e propria e non viene presentato agli utenti quando entrano nella pagina delle opzioni di amministrazione per il tema.

disc: Questa è una breve descrizione che accompagna l'impostazione personalizzata e che viene mostrata agli utenti.

ID: Utilizza il codice breve insieme a un'identificazione personalizzata del nome del modulo per presentare e personalizzare la casella di testo.

Tipologia: Definisce se l'elemento del modulo è una riga di testo, una casella di testo, un menu a discesa, un pulsante di opzione o una casella di controllo.

STD: Determina il valore predefinito dell'elemento selezionato. Per una casella di testo, questo determina il testo predefinito inserito in esso. Per caselle di controllo, pulsanti di opzione e caselle a discesa, questo determina quale opzione è selezionata per impostazione predefinita.

Passo 3: dire a WordPress di abilitare l'accesso alla pagina delle nuove opzioni

Anche se alla pagina delle opzioni è stato assegnato uno scopo utilizzando il file "functions.php" all'interno della cartella principale di un tema, deve ancora essere riconosciuta da WordPress o inclusa tra le molte altre pagine delle impostazioni all'interno della dashboard di WordPress. Questo perché la pagina delle opzioni del tema deve essere identificata nella pagina delle funzioni e deve essere detto dove andare (come elemento della barra laterale indipendente o all'interno del raggruppamento "Impostazioni"). Questo viene fatto utilizzando una funzione relativamente semplice che viene aggiunta al file "functions.php" sotto gli array di potenziali personalizzazioni:

function experimental_theme_save_values ​​() {
nome globale $ long, $ shortcode, $ settings;
if ($ _GET ['page'] == basename (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ imposta come valore $) {
update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); }
foreach ($ imposta come valore $) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); } altro {delete_option ($ value ['id']); }}
header ("Posizione: temi.php? page = functions.php & saved = true");
die;
} else if ('reset' == $ _REQUEST ['action']) {
foreach ($ imposta come valore $) {
opzione_eliminazione ($ valore ['id']); }
header ("Posizione: temi.php? page = functions.php & reset = true");
die;
}
}
add_menu_page ($ longname. "Appearance Settings", "". $ longname. "Appearance Settings", 'edit_themes', basename (__ FILE__), 'experiment_theme_save_values');

Questo pezzo di codice fa due cose. Innanzitutto, consente di salvare le impostazioni del tema tramite il pannello delle opzioni di amministrazione. In secondo luogo, posiziona un pulsante indipendente nella barra laterale della dashboard di WordPress che consente a un utente di fare clic su di esso e andare direttamente al pannello delle opzioni del tema. È etichettato "Impostazioni aspetto" proprio come la pagina stessa. La coerenza è la chiave per eliminare la confusione e indirizzare gli utenti alla pagina senza specificatamente dire loro di recarsi al pannello delle opzioni per personalizzare l'aspetto del tema.

Passo 4: aggiunta di messaggi di errore e chiusura del file PHP

Il passaggio finale al riempimento di tutti gli elementi del pannello delle opzioni del tema consiste nel definire i messaggi di errore che un utente può incontrare e quindi assicurarsi che gli elementi del modulo possano essere presentati nello stile WordPress predefinito all'interno della pagina delle opzioni. L'aggiunta dei messaggi di errore viene eseguita incollando questo codice nel file delle funzioni PHP:

function experimental_theme_save_values ​​() {
nome globale $ long, $ shortcode, $ settings;
if ($ _REQUEST ['saved']) echo '
". $ themename." le personalizzazioni dell'aspetto sono state salvate correttamente.
';
if ($ _REQUEST ['reset']) echo '
". $ themename." le personalizzazioni dell'aspetto sono state ripristinate con successo.
';

Sotto queste due righe di codice, la sezione PHP del file functions.php può essere chiusa usando il tag finale?>. Al di sotto di questo, verrà inserito il codice XHTML per modellare gli elementi utilizzando il foglio di stile dashboard di WordPress standard.

Passo 5: dare alla pagina delle opzioni un po 'di stile

Attualmente, gli utenti di WordPress Dashboard possono vedere la nuova pagina di errore ma non possono farci molto. Questo perché gli elementi del modulo e il foglio di stile non sono ancora stati inseriti nel file Functions.php per l'uso nell'interfaccia di amministrazione. Tutto sta per cambiare, poiché includiamo il foglio di stile e gli elementi del modulo predefiniti per l'uso da parte del nuovo pannello:

<div class = "wrap">
<h2> <? php echo $ longname; ? > Impostazioni </ h2>

<form method = "post" action = "options.php">

<? php break; caso 'testo':? >

<tr>
<td width = "20%" rowspan = "2 ″ valign =" middle "> <strong> <? php echo $ value ['name']; ? > </ strong> </ td>
<td width = "80%"> <input style = "width: 100%;" nome = "<? 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']); } altro {echo $ valore ['std']; }? > "/> </ Td>
</ tr>

<tr>
<td> <small> <? php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = "2 ″> </ td>
</ tr>

<? php break;}? >

<input type = "submit" value = "<? php _e ('Save Theme Settings')? > "/>

Questo codice viene incollato sotto il tag di chiusura del file delle funzioni PHP e può essere personalizzato per ogni tipo di modulo che un pannello delle opzioni del tema potrebbe includere. La variabile "case" può essere modificata da "testo" a cose come casella di testo, casella di controllo, selezione e titolo. Queste forme devono essere incluse, definite e stilizzate solo se vengono utilizzate dal tema. Altrimenti, la loro inclusione non è necessaria e quindi lasciare fuori dal file delle funzioni del tema si promuoverà l'efficienza e il codice pulito.

Passo 9: abilitazione dell'opzione personalizzata da visualizzare sul tema effettivo

Esistono due passaggi da eseguire per assicurarsi che eventuali modifiche siano visibili sui modelli pubblici di un tema. Il primo è inserire una variabile nel piè di pagina del tema che visualizzerà il copyright definito dall'utente e il testo di versione che abbiamo attivato nei passaggi precedenti di questo tutorial. Ciò avviene inserendo il seguente codice nell'area del copyright del piè di pagina:

<? php echo $ apdt_custom_footer; ? >

Questo testo chiama l'array personalizzato per il testo del piè di pagina definito in precedenza e, secondo l'istruzione "Echo", stampa quel testo nel piè di pagina. Questo tag può essere contenuto all'interno di qualsiasi tag XHTML che un utente ritenga opportuno, ma non verrà visualizzato senza una parte di codice aggiunta all'intestazione del sito.

Nell'intestazione, il tema deve essere istruito a cercare le opzioni definite dall'utente impostate nella dashboard di WordPress e deve conoscere le variabili definite nel file "functions.php" personalizzato in modo da poter stampare il loro contenuto sul sito web. Questo viene fatto inserendo la seguente variabile PHP nell'intestazione del sito web (in genere il file "header.php"):

<? php global $ settings;
foreach ($ imposta come valore $) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings ($ value ['id']); }
}
? >

Questo è tutto quello che c'è da fare. Ora, ogni opzione definita nel file Functions.php personalizzato può essere riflessa nell'aspetto della pagina semplicemente includendo una variabile PHP personalizzata in cui si suppone che le personalizzazioni e il contenuto designati abbiano effetto.

Passo 10: prova le nuove impostazioni e la pagina delle opzioni

Nessuno sforzo di sviluppo di WordPress è completamente completo fino a quando non è stato accuratamente testato per bug, errori ed errori accidentali nel codice PHP inserito nel file "functions.php". Detto questo, è ora di fare dei test! Accedi alla dashboard di WordPress e, se il tema su cui stai lavorando non è attualmente selezionato, assicurati di accedere alla categoria "Aspetto" nella barra laterale e attiva il tema pertinente.

Da lì, controlla alcune cose:

  1. Assicurati che il link delle impostazioni del tema appaia come una propria entità nella barra laterale sotto l'intestazione della categoria della barra laterale "Impostazioni".
  2. Assicurarsi che l'opzione di personalizzazione del testo del footer designato sia accessibile nel pannello di controllo delle opzioni personalizzate; modificare il contenuto predefinito del piè di pagina e salvare la preferenza. Assicurati di salvare senza errori.
  3. Visita il tuo vero sito web pubblico e assicurati che vengano visualizzate le modifiche apportate all'interno della Dashboard relative al contenuto del piè di pagina.
  4. Se tutto funziona correttamente, tira un sospiro di sollievo e goditi la tua prima pagina del pannello di controllo delle opzioni del tema WordPress.

A proposito di Jerry Low

Fondatore di WebHostingSecretRevealed.net (WHSR) - una recensione di hosting fidata e utilizzata dagli utenti di 100,000. Più di 15 anni di esperienza in web hosting, affiliate marketing e SEO. Collaboratore di ProBlogger.net, Business.com, SocialMediaToday.com e altro.