In questo articolo, partendo da quanto fatto nel precedente articolo, aggiungeremo un form alla nostra pagina opzioni dandogli uno stile coordinato con l’interfaccia di amministrazione di WordPress. Per fare questo installeremo un plugin che ci permetterà di copiare il codice HTML necessario. Il plugin in questione è WordPress-Admin-Style, potete scaricare il file zip installabile da questo link . Una volta installato ed attivato il plugin, nel menu di WP avrete una voce “Admin Style” che vi permetterà di accedere a del codice HTML e PHP, da copiare/incollare nei vostri progetti, nella fattispecie nella pagina opzioni del nostro plugin.
La nostra pagina opzioni avrà un layout a 2 colonne, quindi copieremo ed incolleremo il codice che troverete in “Admin Style” -> “2 Column Layout” e lo incolleremo in un nuovo file “options-page-wrapper.php”, nel nostro plugin, in una nuova cartella “inc”. La struttura sarà la seguente:
Struttura plugin
La nostra pagina opzioni conterrà un form con un unico campo “deved_footer” che useremo per salvare il testo da includere nel footer del nostro sito web. Ecco il codice di “inc/options-page-wrapper.php”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<div class="wrap"> <div id="icon-options-general" class="icon32"></div> <h2>Deved Options Plugin</h2> <div id="poststuff"> <div id="post-body" class="metabox-holder columns-2"> <!-- main content --> <div id="post-body-content"> <div class="meta-box-sortables ui-sortable"> <div class="postbox"> <h3><span>Options</span></h3> <div class="inside"> <form method="post" action=""> <table class="form-table"> <tr> <td> <label for="deved_footer">Deved footer text</label> </td> <td> <input name="deved_footer" id="deved_footer" type="text" value="" class="regular-text" /> </td> </tr> </table> <p> <input class="button-primary" type="submit" name="deved_footer_submit" value="Save" /> </p> </form> </div> <!-- .inside --> </div> <!-- .postbox --> <div class="postbox"> <h3><span>Lorem ipsum</span></h3> <div class="inside"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget adipiscing lorem. Morbi a erat id odio adipiscing venenatis a nec urna.</p> </div> <!-- .inside --> </div> <!-- .postbox --> </div> <!-- .meta-box-sortables .ui-sortable --> </div> <!-- post-body-content --> <!-- sidebar --> <div id="postbox-container-1" class="postbox-container"> <div class="meta-box-sortables"> <div class="postbox"> <h3><span>Lorem Ipsum</span></h3> <div class="inside"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget adipiscing lorem. Morbi a erat id odio adipiscing venenatis a nec urna.</p> </div> <!-- .inside --> </div> <!-- .postbox --> </div> <!-- .meta-box-sortables --> </div> <!-- #postbox-container-1 .postbox-container --> </div> <!-- #post-body .metabox-holder .columns-2 --> <br class="clear"> </div> <!-- #poststuff --> </div> <!-- .wrap --> |
Per visualizzare questa pagina è necessario modificare il file principale del nostro plugin, “deved-options.php”, includendo il file appena creato con require( 'inc/options-page-wrapper.php' );. Il codice completo sarà:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?php /* * Plugin Name: Deved Plugin * Plugin URI: http://www.deved.it/ * Description: a simple plugin to manage options * Version: 1.0 * Author: Salvatore Guarino * Author URI: http://www.salgua.com * License: GPL2 * */ /* * Add a link to our plugin in the admin menu * under 'Settings > Deved Options' * */ function deved_options_menu() { /* * Use the add_options_page function * add_options_page( $page_title, $menu_title, $capability, $menu-slug, $function ) * */ add_options_page( 'Official Deved Options Plugin', 'Deved Options', 'manage_options', 'deved-options', 'deved_options_page' ); } add_action( 'admin_menu', 'deved_options_menu' ); function deved_options_page() { if( !current_user_can( 'manage_options' ) ) { wp_die( 'I tuoi permessi non sono sufficienti per visualizzare la pagina' ); } require( 'inc/options-page-wrapper.php' ); } ?> |
Adesso, accedendo ad “impostazioni-> Deved Options” vedrete la pagina opzioni con il form per il salvataggio del footer con uno stile perfettamente in linea con l’interfaccia di amministrazione di wordpress. Se tutto è andato bene dovreste ottenere questo risultato:
Deved Options Screenshot
Cliccando sul pulsante salva ovviamente non succede nulla. Vedremo come rendere funzionale il form nel prossimo articolo!