Come creare una pagina di amministrazione personalizzata in WordPress Dashboard

Articolo scritto da:
  • Articoli consigliati
  • Aggiornato: Jun 30, 2013

Quando WordPress ha svelato quello che era il suo tema standard, Kubrick, diversi anni fa, ha anche ripreso 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 tristemente sottoutilizzata da molti progettisti di temi, ma in realtà è un ottimo modo per dare agli utenti il ​​controllo sull'aspetto del loro sito senza forzarli 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 cambiate usando 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 accertarti che non sia presente alcun file "Functions.php" e quindi utilizza il tuo programma di modifica del testo per creare un nuovo file chiamato "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 di 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 la Dashboard, nonché per identificare gli elementi di modulo e selezione all'interno di quella pagina di amministrazione. Osserva il codice in basso, posizionalo nella parte superiore del 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 come si chiama il pannello di amministrazione. Questo sarà stampato soprattutto con le potenziali impostazioni e aiuta a favorire la chiarezza degli scopi per gli utenti alle prime armi. Questo viene fatto aggiungendo il seguente array al tag $ settings all'interno del file "Functions.php":

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

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

array ("tipo" => "aperto"),

Ora siamo liberi di iniziare a definire le opzioni di aspetto del tema, ognuna delle quali viene creata 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 nonché informazioni sulla versione. Ciò non è desiderabile da un gran numero di utenti WordPress che preferirebbero inserire le proprie informazioni nel piè di pagina, tuttavia, abilitando questo controllo personalizzato si salva la modifica manuale del file "footer.php". Ecco come è fatto.

array (
"Name" => "Testo del piè di pagina del tema personalizzato",
"Desc" => "Questo è il testo visualizzato alla fine di ogni pagina contenuta in questo tema.",
"Id" => $ shortcode. "_ Custom_footer",
"Tipo" => "testo",
"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, non è ancora stato riconosciuto da WordPress o incluso tra le molte altre 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 indicato dove andare (come elemento della barra laterale indipendente o all'interno del raggruppamento "Impostazioni"). Questo viene fatto usando 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']]); } else {delete_option ($ value ['id']); }}
header ("Posizione: themes.php? page = funzioni.php e salvato = vero");
die;
} else if ('reset' == $ _REQUEST ['action']) {
foreach ($ imposta come valore $) {
delete_option ($ value ['id']); }
header (“Posizione: themes.php? page = Functions.php & reset = true”);
die;
}
}
add_menu_page ($ longname. ”Impostazioni dell'aspetto”, “”. $ longname. ”Impostazioni dell'aspetto”, 'edit_themes', basename (__ FILE__), 'experimental_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, inserisce 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 dire loro in modo specifico di accedere 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 ['salvato']) echo '
'$ THEMENAME.' le personalizzazioni dell'aspetto sono state salvate correttamente.
';
if ($ _REQUEST ['reset']) echo '
'$ THEMENAME.' le personalizzazioni dell'aspetto sono state ripristinate correttamente.
';

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

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%" rowpan = "2 ″ valign =" middle "> <strong> <? php echo $ value ['name']; ? > </ strong> </ td>
<td width = "80%"> <input style = "width: 100%;" 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"> </ td>
</ tr>

<? php break;}? >

<input type = "submit” value = ”<? php _e ('Salva impostazioni tema')? > "/>

Questo codice viene incollato sotto il tag di chiusura del file delle funzioni di PHP e può essere personalizzato per ogni tipo di modulo che potrebbe includere un pannello di opzioni del tema. La variabile "case" può essere cambiata da "text" a cose come la casella di testo, la casella di controllo, la selezione e il titolo. Queste forme devono essere incluse, definite e definite solo se utilizzate dal tema. Altrimenti, la loro inclusione non è necessaria e lasciare quindi fuori dal file delle funzioni del tema 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 che era stato definito in precedenza e, per l'istruzione "Eco", stampa quel testo nel piè di pagina. Questo tag può essere contenuto in qualsiasi tag XHTML che un utente ritiene opportuno, ma non verrà visualizzato senza un pezzo di codice aggiunto all'intestazione del sito.

Nell'intestazione, il tema deve essere istruito per cercare le opzioni definite dall'utente che sono impostate all'interno di WordPress Dashboard e deve conoscere le variabili che sono definite nel file "functions.php" personalizzato in modo che possa stampare il loro contenuto sul sito web. Questo viene fatto posizionando la seguente variabile PHP nell'intestazione del sito web (tipicamente 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 è completo fino a quando non è stato accuratamente testato per bug, errori ed errori accidentali nel codice PHP inserito nel file "Functions.php". Detto questo, è tempo di fare i test! Accedi alla dashboard di WordPress e, se il tema su cui hai lavorato non è attualmente selezionato, assicurati di passare alla categoria "Aspetto" nella barra laterale e attivare il tema pertinente.

Da lì, controlla alcune cose:

  1. Assicurati che il collegamento alle impostazioni del tema sia visualizzato come entità propria 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.