Guida alla sviluppo di plugin per wordpress: il pannello di amministrazione (2/3)

Nel precedente articolo abbiamo iniziato ad impostare il pannello di amministrazione del nostro plugin. Abbiamo creato delle opzioni di default, abbiamo registrato queste opzioni e per finire abbiamo aggiunto una nuova voce di menù all’interno della sezione Impostazioni che rimanda alla pagina che ci permetterà di modificare le opzioni che é proprio quello che stiamo per sviluppare. Sei pronto?

Come sviluppare il form per la gestione delle opzioni?

Lavoreremo ora sulla funzione ylb_update_option_form() che nell’articolo precedente avevamo lasciato provvisoriamente così come mostrato qui sotto:

function ylb_update_options_form()
{
    ?>
        <h1>Pagina delle impostazioni di Yourinspiration License Box</h1>
    <?php
}

Ora rimuoviamo pure il titolo provvisorio ed iniziamo ad impostare il markup secondo gli standard di WordPress.
Innanzitutto la pagina va contenuta in un elemento con classe wrap. In seguito inseriamo l’icona standard delle pagine di gestione delle opzioni e scriviamo il titolo, in questo modo:

<div class="wrap">
    <div class="icon32" id="icon-options-general"><br /></div>
    <h2>Configurazione di License Box</h2>

Ora possiamo dichiarare il form che punterà alla pagina options.php e utilizzerà il metodo post.

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

Subito dopo la dichiarazione del form dovremo scrivere questo:

<?php settings_fields('ylb_options_group'); ?>

Ricordi nel precedente articolo quando abbiamo registrato le opzioni del nostro plugin in un unico gruppo (ylb_options_group)? Ora, grazie alla funzione settings_fields – alla quale passeremo come parametro il nome del gruppo – WordPress può inserire nel form una serie di informazioni indispensabili affinché i dati possano essere aggiornati correttamente.

Continuiamo ora con lo sviluppo del form dichiarando una tabella con classe form table:

<table class="form-table">
       <tbody>

Il campo per la gestione del colore di background

Vediamo ora tutta la riga della prima opzione (il colore di background del box):

<tr valign="top">
    <th scope="row">
        <label for="ylb_box_bg_color">Colore del Box:</label>
    </th>
    <td>
        #<input type="text" id="ylb_box_bg_color" value="<?php echo get_option('ylb_box_bg_color'); ?>" name="ylb_box_bg_color" />
           <span class="description"></span>
    </td>
</tr>

Dunque il label del campo va inserito nella prima cella della riga che avrà scope=row.
In seguito possiamo dichiarare il campo di input. Come vedi, recuperare il valore dell’opzione é molto semplice, basta utilizzare la funzione get_option passando come parametro il nome dell’opzione. In questo caso la utilizziamo per valorizzare l’attributo value.
L’attributo name deve avere lo stesso nome dell’opzione.
Nello span con classe description possiamo inserire una nota descrittiva a proposito dell’opzione.

Avremmo anche potuto utilizzare il color-picker che WordPress mette a disposizione nativamente. Ho preferito evitare di mettere ulteriore carne al fuoco (ce n’é già abbastanza). Se comunque vuoi approfondire questo punto puoi leggere questo tutorial.

Come controllare l’effetto di chiusura del box?

Al momento il nostro box si chiude con un effetto slideUp. Quello che vogliamo fare é dare la possibilità di scegliere l’effetto desiderato. Nel nostro esempio aggiungeremo ancora un solo effetto (fadeOut).

Per farlo ci serviremo di una select che imposteremo così:

<tr valign="top">
    <th scope="row">
        <label for="ylb_close_box_effect">Effetto di chiusura del box</label>
    </th>
    <td>
        <select id="ylb_close_box_effect" name="ylb_close_box_effect">
            <option value="slideup">Slide Up </option>
            <option value="fadeout" >Fade Out </option>
        </select>
        <span class="description"></span>
    </td>
</tr>

In questo modo però non viene mostrata l’opzione corrente. Dovremo verificare con una struttura di controllo quale sia l’opzione corrente ed inserire selected=”selected” nel tag option corrispondente.

E invece no. WordPress consiglia come best practice di utilizzare la funzione selected, che passa due argomenti. Se i due argomenti sono uguali, ritornerà selected=”selected”

Quindi possiamo modificare le option in questo modo

<option value="slideup" <?php selected(get_option('ylb_close_box_effect'), "slideup"); ?>>Slide Up </option>
<option value="fadeout" <?php selected(get_option('ylb_close_box_effect'), "fadeout"); ?>>Fade Out </option>

Come inserire il testo della licenza?

Beh, giunti a questo punto non dovresti avere nessuna difficoltà ad impostare la textarea per l’inserimento del testo della licenza.

<tr valign="top">
    <th scope="row">
        <label for="ylb_license_content">Testo della licenza</label>
    </th>
    <td>
        <textarea id="ylb_license_content" name="ylb_license_content" style="width:400px; height:200px"><?php echo get_option('ylb_license_content'); ?></textarea>
        <span class="description"></span>
    </td>
</tr>

E ora completiamo inserendo il bottone di invio:

                    <tr valign="top">
                        <th scope="row"></th>
                            <td>
                                <p>
                                    <input type="submit" class="button-primary" id="submit" name="submit" value="<?php _e('Save Changes') ?>" />
                                </p>
                            </td>
                    </tr>
                </tbody>
            </table>

        </form>
    </div>

La funzione completa.

function ylb_update_options_form()
{
    ?>
    <div class="wrap">
        <div class="icon32" id="icon-options-general"><br /></div>
        <h2>Configurazione di License Box</h2>
        <p>&nbsp;</p>
        <form method="post" action="options.php">
            <?php settings_fields('ylb_options_group'); ?>
            <table>
                <tbody>
                    <tr valign="top">
                    <th scope="row"><label for="ylb_box_bg_color">Colore del Box:</label></th>
                        <td>
                            #<input type="text" id="ylb_box_bg_color" value="<?php echo get_option('ylb_box_bg_color'); ?>" name="ylb_box_bg_color" />
                            <span class="description"></span>
                        </td>
                    </tr>
                    <tr valign="top">
                        <th scope="row"><label for="ylb_close_box_effect">Effetto di chiusura del box</label></th>
                            <td>
                                <select id="ylb_close_box_effect" name="ylb_close_box_effect">
                                    <option value="slideup" <?php selected(get_option('ylb_close_box_effect'), "slideup"); ?>>Slide Up </option>
                                    <option value="fadeout" <?php selected(get_option('ylb_close_box_effect'), "fadeout"); ?>>Fade Out </option>
                                </select>
                                <span class="description"></span>
                            </td>
                    </tr>

                    <tr valign="top">
                        <th scope="row"><label for="ylb_license_content">Testo della licenza</label></th>
                            <td>
                                <textarea id="ylb_license_content" name="ylb_license_content" style="width:400px; height:200px"><?php echo get_option('ylb_license_content'); ?></textarea>
                                <span class="description"></span>
                            </td>
                    </tr>
                    <tr valign="top">
                        <th scope="row"></th>
                            <td>
                                <p>
                                    <input type="submit" class="button-primary" id="submit" name="submit" value="<?php _e('Save Changes') ?>" />
                                </p>
                            </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
    <?php
}

Ed il suo risultato

A questo punto puoi provare a modificare i parametri e constatare che dopo il salvataggio vengono correttamente aggiornati nel database.

Come rendere dinamico il testo della licenza

Anche in questo caso non dovresti avere nessuna difficoltà a rendere dinamico il testo della licenza. Sarà infatti sufficiente sostituire il testo statico con get_option(‘ylb_license_content’) all’interno della funzione ylb_output_license_box, in questo modo:

function ylb_output_license_box($content)
{

    $return = $content;
    $return .= '<div class="ylb-container">
    <p>' . get_option(‘ylb_license_content’) . '</p>
    <p><a href="#" class="ylb-close">chiudi</a></p>
    </div>';
    return $return;
}

Sul rendere dinamico il css ed il javascript dovremo invece fare qualche ragionamento in più e lo faremo nel prossimo tutorial.

Conclusione

In questo denso articolo abbiamo finalmente svilupparo il form che ci permette di modificare le opzioni del plugin e abbiamo reso dinamico il contenuto del box della licenza. Nel prossimo tutorial ci occuperemo di rendere dinamico il css ed il javascript in modo da dar vita alle rimanenti due opzioni.

Capitoli di questa guida

  1. Introduzione
  2. Gli strumenti di base
  3. La gestione degli script
  4. Il pannello di amministrazione (1/3)
  5. Il pannello di amministrazione (2/3)
  6. Il pannello di amministrazione (3/3)
  7. Condividere il plugin
Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

21 commenti

Trackback e pingback

  1. Raccolta di articoli della settimana 23/10/2011 | Saverio Gravagnola
    [...] allo sviluppo di plugin per wordpress: il pannello di amministrazione (2/3) (Your Inspiration [...]
  2. Guida alla sviluppo di plugin per wordpress: il pannello di amministrazione (3/3) | Your Inspiration Web
    [...] precedente articolo ci siamo lasciati con il plugin quasi completamente funzionante. Rimane solo da dare vita alle [...]
  3. Guida allo sviluppo di plugin per wordpress: Gli strumenti di base | Your Inspiration Web
    [...] Il pannello di amministrazione (2/3) [...]
  4. Guida allo sviluppo di plugin per wordpress: La gestione degli script | Your Inspiration Web
    [...] Il pannello di amministrazione (2/3) [...]
  5. Guida alla sviluppo di plugin per wordpress: il pannello di amministrazione (1/3) | Your Inspiration Web
    [...] Il pannello di amministrazione (2/3) [...]
  6. Guida allo sviluppo di plugin per wordpress: Introduzione | Your Inspiration Web
    [...] Il pannello di amministrazione (2/3) [...]