Questa è la seconda parte della guida su come creare una pagina delle opzioni per un tema WordPress.
Dopo aver creato nella prima parte la pagina attraverso cui gestire le opzioni, proviamo a creare la prima opzione del tema WordPress, ovvero la possibilità di inserire del testo personalizzato.
Tema WordPress #2: Creare la pagina delle opzioni ed inserire testo personalizzato
NOTA: Per questo e i seguenti esempi userò come riferimento il tema di default di WordPress, cosicché ognuno possa seguire le istruzioni più facilmente. Tutti gli esempi possono poi essere facilmente implementati in ogni tema WordPress.
Apri nuovamente il file menu-opzioni.php, continueremo a lavorare sulla base del codice creato nella prima parte della guida.
Prima di creare le opzioni del tema WordPress, è necessario creare una tabella nel database dove WordPress salvi le opzioni da noi selezionate. Per fare questo aggiungi il seguente codice all’interno della funzione creazione_menu creata in precedenza:
add_action('admin_init', 'registra_opzioni');Questo codice dice a WordPress che tramite la funzione registra_opzioni andremo ad aggiungere delle nuove opzioni ad admin_init, una funzione da cui dipendono le opzioni del pannello di amministrazione.
La funzione creazione_menu risulterà quindi come segue:
<?php
function creazione_menu() {
add_submenu_page('themes.php', 'Opzioni per il tema', 'Opzioni', 'administrator', __FILE__, 'funzione_opzioni');
add_action('admin_init', 'registra_opzioni');
}
?>Ora dobbiamo creare la funzione registra_opzioni. Lo possiamo fare aggiungendo il seguente codice dopo la funzione creazione_menu:
<?php
function registra_opzioni() {
register_setting('gruppo-opzioni', 'aggiungi-testo' );
}
?>Nel codice appena inserito viene utilizzata la funzione register_settings tramite cui viene detto a WordPress di creare un nuovo gruppo di opzioni (gruppo-opzioni) e di aggiungervi il valore relativo alla prima opzione di aggiunta testo che andremo a creare nel passo successivo (aggiungi-testo).
Finalmente possiamo creare la prima opzione per l’inserimento di testo tramite il seguente codice, da aggiungere tra il tag [h2]Pagina opzioni[/h2] e prima del [div] di chiusura creato in precedenza:
<form action="options.php" method="post">
<?php settings_fields('gruppo-opzioni'); ?>
<!-- OPZIONE AGGIUNTI TESTO -->
<table class="form-table">
<tr>
<th scope="row">Aggiungi testo</th>
<td>
<textarea name="aggiungi-testo"><?php echo get_option('aggiungi-testo'); ?></textarea>
</td>
</tr>
</table>
<p class="submit">
<input type="submit" value="<?php _e('Salva'); ?>">
</p>
</form>Il codice utlizzato è ovviamente un form per permette di inserire ed inviare al database le informazioni che vogliamo aggiungre o modificare.
La struttura utilizzata è a tabelle per corrispondere a quella di WordPress, anche le classi che ho utilizzate sono quelle che WordPress utilizza, in questo modo lo stile della pagina sarà impostato automaticamente come quello generale del pannello di amministrazione.
Dalla prima riga di codice puoi vedere che il form invia tutte le informazioni al file options.php, il quale gestisce le varie opzioni di Worpdress.
Tramite settings_fileds è stato semplicemente richiamato il gruppo di opzioni creato con la funzione registra_opzioni nel quale dovranno verranno salvati i valori selezionati.
Il tipo di form utilizzato è ad una riga tramite il tag input, se avete bisogno di più righe per l’inserimento del testo, in base all’uso che ne dovete fare, è ovviamente possibile utilizzare il tag textarea.
Le uniche due cose a cui bisogna prestare attezione sono l’attributo name e value all’interno che devono corrispondere al valore inserito in register_settings per l’opzione creata, in questo caso “aggiungi-testo”.
Tramite la funzione get_option, relativa al tag value, WordPress controlla se l’opzione è già stata creata e salvata e eventualmente lo riporta nella casella di testo.
Salva dunque il file e accedi al pannello di amministrazione, la nuova opzione sarà presente nel menu delle opzioni.
Per visualizzare il testo inserito tramite la pagina delle opzioni basterà ora richiamare il contenuto dell’opzione salvata dall’interno del database tramite la funzione echo collegata all’opzione desiderata, come nel seguente esempio:
<?php echo get_option('aggiungi-testo’) ?>Per fare un esempio reale apriamo il file sidebar.php del tema default die WordPress con un editor.
Subito dopo l’inizio del primo div con id “sidebar” aggiungiamo il seguente codice:
<h2><?php echo get_option('aggiungi-testo'); ?></h2>Salva e torna alla pagina delle opzioni del pannello di amministrazione. Inserisci nella casella creata un testo a tua scelta (io ho inserito un breve messaggio di benvenuto) e premi salva, il testo salvato in WordPress rimarrà nella casella come riferimento
Ricaricando la pagina principale di WordPress e nella barra laterale comparirà il messaggio da te inserito, come nel seguente esempio:
Lo spazio dedicato al testo dovrebbe ovviamente ancora essere modificato e personalizzato tramite i CSS per adeguarsi al tema, ma per lo scopo di questa guida è solo importante capire il funzionamento delle opzioni.
Questo esempio è solo uno degli innumerevoli modi in cui può essere implementata questa opzione di inserimento del testo, ecco altri esempi che mi vengono in mente:
– Creare un messaggio di benvenuto modificabile in base a eventi.
– Aggiungere codice di Google Analytics
– Aggiungere codice di Feedburner
– Aggiungere i dati di contatto in una pagina
Nella terza parte di questa guida su come creare una pagina delle opzioni per un tema WordPress ti mostrerò come scegliere tra due fogli di stile differenti con un solo click.
