xr:d:DAFZ08eXPuc:7,j:46536872311,t:23020620
Come fare un semplice plugin da zero
Come fare un semplice plugin da zero

Video tutorial


Un plugin da zero! Facciamo un vero plugin adesso. Uno di quelli che si installano su siti WordPress e funzionano. Funzionano davvero.

Creazione cartella del plugin

Nella cartella wp-contents/plugins andiamo a creare una nuova cartella chiamata "PluginTest", così diamo a questo plugin un nome ovvio ma sensato e creiamo al suo interno il file index.php che per il momento conterrà le seguenti righe che servono a spiegare a WordPress che questo è un plugin, e che si chiama PluginTest (e poco altro, la versione e la licenza).

<?php
/*
Plugin Name: PluginTest
Description: PluginTest
Version: 0.1
License: MIT - https://opensource.org/licenses/mit-license.php
*/

Plugin per mostrare un testo in alto nel sito web

Da qui in poi inizia il vero codice del plugin.

Aggiungere un pannello di configurazione nel wp-admin

Incolliamo le successive righe di codice proprio sotto a quelle precedenti, per creare una voce nel menu a sinistra nel /wp-admin. Così anche il nostro semplice plugin sembrerà bello come tutti gli altri.

add_action('admin_menu', 'droswavosw_create_menu');

function droswavosw_create_menu() {
    add_menu_page('PluginTest', 'PluginTest', 'administrator', __FILE__, 'droswavosw_settings_page' , plugins_url('/images/icon.png', __FILE__) );
add_submenu_page(__FILE__, 'PluginTest', 'PluginTest', 'administrator', 'PluginTest', 'droswavosw_pnl_form_settings_page');
    add_action( 'admin_init', 'register_pnl_form_droswavosw_settings' );
}

E da qui arriviamo a creare il pannello di configurazione: questa voce di menu dovrà pur puntare ad una pagina! Nel pannello andiamo ad inserire una textarea per digitare un testo da mostrare in alto in tutte le pagine del sito.

Stiamo facendo un semplice plugin di esempio, ma può essere utile per mettere una comunicazione importante e temporanea. Quindi incolliamo le seguenti righe proprio di seguito.

function register_pnl_form_droswavosw_settings() {
    register_setting( 'droswavosw_pnl_form_settings_page', 'campo_di_test' );
}

function droswavosw_pnl_form_settings_page() {?>
    <div class="wrap">
        <h1>PluginTest setup</h1>
    </div>
    <form method="post" action="options.php">
        <?php settings_fields( 'droswavosw_pnl_form_settings_page' ); ?>
        <?php do_settings_sections( 'droswavosw_pnl_form_settings_page' ); ?>
        <table class="form-table admin_shop_table">
            <tr valign="top">
                <td><textarea style="width:100%" name="campo_di_test"><?php echo get_option('campo_di_test')?></textarea></td>
            </tr>
        </table>
        <?php submit_button(); ?>
    </form><?php
}

Il bottone per salvare, è la riga che contiene submit_button(); la penultima.

Mostrare nel sito il messaggio salvato nel pannello

Vogliamo che il messaggio salvato nel pannello venga mostrato in tutte le pagine del sito. Si può fare in diversi modi, ma dobbiamo pur sceglierne uno, giusto?

Quindi lo faremo richiamando una funzione associata ad un gancio (hook) chiamato wp_head. Per approfondire questo magnifico strumento (gli hook) consiglio di dare una letta alla documentazione ufficiale di WordPress ma in due parole possiamo dire che WordPress ha disseminato il sistema di punti sui quali agganciare una funzione: la stampa di un testo o di un'immagine, di un titolo e molto altro (leggete per approfondire).

add_action( 'wp_head', 'print_plugin_test_message' );
function print_plugin_test_message(){
   echo get_option('campo_di_test');
}

Attivare il nostro nuovo plugin di esempio

Proviamo il nostro nuovo semplce plugin? Andiamo nella sezione Plugins in /wp-admin e lo troviamo nella lista: apparirà più o meno così:

Lo attiviamo e notiamo in basso a sinistra la voce "PluginTest".

In futuro potremo aggiungere un'icona, ma per il momento ci accontentiamo. Clicchiamo su questa voce e accediamo al pannello appena creato.

Scriviamo il messaggio che vogliamo: ad esempio <div style="text-align:center">Grande promozione di test</div>

Clicchiamo il bottone "Salva le modifiche": il messaggio apparirà in tutte le pagine del sito, in alto.

Avrebbe senso mettere un bottone o un checkbox per abilitare/disabilitare questa funzione, ma cerchiamo di restare sul semplice con un solo campo di testo, e un bottone per salvare.

Lascia un commento