Share
Creare temi da regalare o vendere è fantastico, ma non tutti quelli che usano il tuo tema avranno una solida conoscenza di HTML / CSS. Fornire il tuo tema con una pagina delle opzioni rende più semplice per gli utenti non tecnici apportare modifiche ai temi senza sporcarsi le mani con il codice. Ti mostrerò come crearne uno da zero!
Prima di iniziare, per cosa ci stiamo davvero sforzando? Che cosa renderemo personalizzabili sul nostro tema? Bene, questo tutorial si concentrerà principalmente sul lato programmatico, ma per cambiare qualcosa sul layout, avremo bisogno di avere qualche idea di design anche nelle nostre maniche. Ecco cosa abbiamo:
Ci sono molti elementi modificabili che potremmo aggiungere a un tema, ma dopo il tutorial di oggi che illustra come implementare le cinque funzionalità elencate sopra, dovresti avere un'idea di come creare la tua pagina delle opzioni.
Ci concentreremo interamente sulla pagina delle opzioni prima di iniziare a cambiare il tema. Per prima cosa, abbiamo bisogno di un posto dove mettere tutto il nostro codice che gestirà la pagina delle opzioni. Tutto questo codice risiederà in un file chiamato functions.php, che entrerà nella nostra cartella dei temi. Quindi, se il nostro tema è chiamato 'esempio', allora il percorso del nostro file di funzioni sarebbe wp-content / themes / es / functions.php.
Non abbiamo bisogno di dire a WordPress di includere il nostro functions.php file, viene chiamato automaticamente durante il ciclo di esecuzione di WordPress.
Quindi per prima cosa dobbiamo creare la pagina delle opzioni vuote, la tela per il nostro lavoro. Per fare ciò, dobbiamo informare WordPress sulla nuova pagina delle opzioni che desideriamo creare. Realizziamo questo compito usando le azioni. Le azioni vengono chiamate in un momento specifico nell'esecuzione di WordPress; quindi, ad esempio, quando viene creato il menu nel dashboard, l'azione admin_menu è chiamato. Possiamo legare le funzioni a queste azioni; in modo che possiamo eseguire le nostre funzioni in momenti specifici. Ecco le funzioni di base di cui abbiamo bisogno per creare la nostra pagina delle opzioni.
La nostra prima funzione, themeoptions_admin_menu è semplicemente lì per aggiungere un link alla nostra pagina nella barra laterale dell'amministratore, dice anche a WordPress quale funzione chiamare per visualizzare la pagina che, nel nostro caso, è themeoptions_page ().
I parametri per add_theme_page () la funzione è la seguente:
Se hai attivato il tema, quindi, nel Temi menu a discesa, dovresti vedere il tuo nuovo link a una pagina delle opzioni che al momento è vuota. Ora abbiamo il quadro per la nostra pagina delle opzioni e possiamo iniziare a implementare i moduli, i campi e il back-end delle nostre opzioni.
Ok, quella pagina sembra un po 'sola; aggiungiamo il modulo e i campi con cui l'utente interagirà per apportare modifiche al tema. È importante notare che puoi personalizzare questa pagina come preferisci, anche aggiungendo le finestre di dialogo a schede, se lo desideri; ma per il nostro tutorial, utilizzeremo le classi predefinite utilizzate da WordPress. In questo modo ci risparmia il tempo di reinventare la ruota e la nostra pagina delle opzioni si fonde con il resto della dashboard.
Il codice per la nostra pagina dovrebbe risiedere nel nostro themeoptions_page () funzione, quindi aggiungeremo il nostro codice in questo modo;
function themeoptions_page () // ecco la funzione principale che genererà la nostra pagina delle opzioni?>Opzioni del tema
Per prima cosa creiamo il predefinito avvolgere classe per la pagina. Quindi, aggiungiamo un'intestazione rapida con un'icona predefinita. Infine, la nostra forma; abbiamo bisogno di un valore nascosto in modo che possiamo verificare se è stato inviato. Abbiamo anche bisogno di un pulsante che invii il modulo e, ancora una volta, usiamo una classe predefinita per questo. Ecco cosa abbiamo finora:
Ora abbiamo la nostra struttura di base. Quindi, se torniamo all'inizio di questo tutorial, abbiamo pianificato di implementare cinque opzioni.
function themeoptions_page () // ecco la funzione principale che genererà la nostra pagina delle opzioni?>Opzioni del tema
4. Aggiornamento del database
Finora abbiamo una pagina delle opzioni con un modulo che invia i dati a se stesso, tramite POST. Il prossimo passo logico è prendere i dati inviati e inserirli nel database di WordPress. Per fare ciò, creeremo una nuova funzione chiamata themeoptions_update (). Questa funzione sarà chiamata da themeoptions_page (); quindi aggiungi questo codice all'inizio themeoptions_page ();
if ($ _POST ['update_themeoptions'] == 'true') themeoptions_update ();Naturalmente, il prossimo passo è creare la funzione di aggiornamento. Ricorda, per il bene di questo tutorial, non sto aggiungendo la convalida o la disinfezione al mio codice. Quando crei un plugin, dovresti sempre controlla l'input dei tuoi utenti. Tuttavia è oltre lo scopo di questo tutorial. Ora puoi contare su WordPress per convalidare i tuoi suggerimenti, ma è meglio farlo tu stesso, per essere sicuro.
Ovunque nel functions.php file, aggiungi questo blocco di codice:
function themeoptions_update () // questo è il punto in cui la convalida dovrebbe andare update_option ('mytheme_colour', $ _POST ['color']); update_option ('mytheme_ad1image', $ _POST ['ad1image']); update_option ('mytheme_ad1url', $ _POST ['ad1url']); update_option ('mytheme_ad2image', $ _POST ['ad2image']); update_option ('mytheme_ad2url', $ _POST ['ad2url']); if ($ _POST ['display_sidebar'] == 'on') $ display = 'checked'; else $ display = "; update_option ('mytheme_display_sidebar', $ display); if ($ _POST ['display_search'] == 'on') $ display = 'checked'; else $ display ="; update_option ('mytheme_display_search', $ display); if ($ _POST ['display_twitter'] == 'on') $ display = 'checked'; else $ display = "; update_option ('mytheme_display_twitter', $ display); update_option ('mytheme_twitter_username', $ _POST ['twitter_username']);La funzione di aggiornamento, come suggerisce il nome, aggiorna un'opzione che è possibile memorizzare nel database. Se l'opzione non esiste, WordPress lo crea. Abbiamo preparato tutte le nostre opzioni con mytheme_, solo per assicurarci di non sovrascrivere le opzioni che potrebbero essere utilizzate da un altro plugin / tema.
Finora, abbiamo una pagina delle impostazioni che può salvare le nostre opzioni, tuttavia, quando premiamo invio, e le nostre opzioni sono memorizzate, il nostro modulo è vuoto quando lo ri-visitiamo. Questo perché abbiamo bisogno di caricare i nostri valori dal database.
5. Opzioni di recupero
Ora dobbiamo recuperare le nostre opzioni in modo da poter popolare il modulo delle impostazioni. Questo è facile, e lo faremo usando il get_option () funzione. Potremmo usare le variabili, ma per questo esempio, faremo semplicemente eco all'output della funzione dove dovrebbe andare nel modulo. Il nostro nuovo codice appare così;
function themeoptions_page () // ecco la funzione principale che genererà la nostra pagina delle opzioni if ($ _POST ['update_themeoptions'] == 'true') themeoptions_update (); // if (get_option () == "checked"?>Opzioni del tema
Così il gioco è fatto. Il back-end è stato ora completato. Siamo in grado di aggiornare le nostre opzioni nel database, quindi tutto ciò che resta da fare è far reagire il tema a questi cambiamenti nella pagina delle opzioni. Funziona in modo simile al modo in cui abbiamo aggiornato i campi delle opzioni: recuperiamo l'opzione e quindi la visualizziamo o la usiamo come condizionale per fare qualcos'altro. Iniziamo con il front-end.
6. Modifica del tema
Modifica dello schema dei colori
Questo si occuperà di CSS e così via, che non è ciò di cui tratta questo tutorial. Quindi analizzeremo come ti avvicineresti a questo. Uno dei modi migliori per farlo è quello di avere un foglio di stile predefinito che utilizza una combinazione di colori come il nero, quindi una serie di schemi di colori alternativi. Per esempio style.css potrebbe modellare il tuo layout in nero, ma incluso red.css DOPO aver incluso style.css.
Un consiglio utile CSS è quello di utilizzare il !importante etichetta. Utilizzare questo tag nei fogli di stile che modificano i colori del layout per garantire che tali proprietà vengano effettivamente utilizzate. Per poter effettivamente passare i fogli di stile, aggiungi questo codice al header.php file del tuo layout in cui il foglio di stile dovrebbe essere incluso:
Aggiunta di spot pubblicitari
Questa sezione ha lo scopo di mostrarti la teoria. Nella vita reale, probabilmente utilizzerai un plug-in o qualcosa del tipo "Compra Vendi Annunci". Quindi diciamo che abbiamo due punti in cui inserire le nostre inserzioni. Come sopra, semplicemente emettiamo l'opzione dove deve andare, in questo modo:
">">
Barra laterale opzionale
Questa volta, utilizzeremo l'opzione come condizionale per decidere se emettere o meno un blocco di codice, che in questo caso visualizzerebbe una barra laterale. Naturalmente, il layout dovrebbe essere ancora in grado di essere visualizzato correttamente se una barra laterale non è visibile; così che uno spetta a te. Il codice seguente verrà aggiunto ovunque tu di solito chiami la tua barra laterale, di solito il mio è chiamato da header.php.
if (get_option ('mytheme_display_sidebar') == 'checked') get_sidebar (); // o in alternativa ... if (get_option ('mytheme_display_sidebar') == 'checked') get_sidebar (); else / * mostra qualcos'altro * /Tweets recenti opzionali
Per questa piccola opzione, dovremo fare due cose. Se i tweet sono abilitati, dovremo prima visualizzare l'area in cui devono apparire i tweet, dovremo anche inserire un blocco di JavaScript prima di
Dobbiamo posizionare quanto segue in cui vogliamo effettivamente che vengano visualizzati i tweet:
Quindi dobbiamo inserire questo codice prima del tag, che probabilmente risiede in footer.php;
Mancia: perché non provare e aggiungere la propria opzione per cambiare il numero di tweet recuperati sopra?
Infine, arriviamo alla nostra casella di ricerca opzionale, che funziona esattamente come la nostra barra laterale. Usiamo l'opzione come codice condizionale e di visualizzazione in base alla scelta dell'utente.
Accentsconagua
; ?>)
">; ?>)
if (get_option ('mytheme_display_search') == 'checked') ?> Spero tu abbia imparato le basi su come creare una pagina di opzioni per il tuo tema e farlo funzionare correttamente. Ho provato a saltare alcuni dei bit noiosi, come il CSS effettivo e la convalida che dovrebbe essere in atto, principalmente perché era al di fuori dello scopo di questo tutorial.
Come al solito, se hai qualche domanda, lascia un commento qui sotto! Grazie per aver letto!
