Come creare un plugin widget per WordPress

WordPress è un fantastico sistema di gestione dei contenuti con molte fantastiche funzionalità come i widget. In questo tutorial, ti spiegherò come creare i tuoi widget in un piccolo plug-in. Questo post coprirà alcuni punti extra che devi capire prima di creare il widget stesso. Eccoci qui!


Passaggio 1: crea il tuo plugin widget

Di recente ho creato un plug-in chiamato “Bundle di widget per freelancer” e alcune persone mi hanno chiesto come creare un plug-in di questo tipo, quindi ho deciso di scrivere questo post. Il primo passo è la creazione del plugin. E come vedrai, non è la parte più difficile. Un plug-in è un codice aggiuntivo aggiunto a WordPress dopo averlo attivato. WordPress crea un ciclo attraverso una cartella per recuperare tutti i plugin disponibili ed elencarli nel back office. Per creare il tuo plug-in, avrai bisogno di un editor come Coda (Mac) o Dreamweaver (PC e Mac). Ti consiglio di creare il tuo plugin in un’installazione locale di WordPress, farlo su un server live può causare alcuni problemi se commetti un errore. Quindi, per favore, attendi di testare il nostro plugin prima di inserire il tuo hosting.

Apri ora la cartella wp-content / plugins. Questo è dove aggiungerai il tuo plugin. Crea una nuova directory e chiamala “widget-plugin” (in realtà, questo nome può essere quello che vuoi). Anche se il nostro plugin avrà un solo file, è sempre meglio usare una cartella per ogni plugin. Nella tua directory, crea un nuovo file chiamato “widget-plugin.php” (anche questo nome può essere cambiato) e aprilo. Ora stiamo per aggiungere le nostre prime righe di codice. La definizione di un plugin in WordPress segue alcune regole che puoi leggere qui sul codice. Ecco come WordPress definisce un plugin:

Quindi, dobbiamo modificare questo codice per adattarlo alle nostre esigenze:

Salva il tuo file. Aggiungendo solo codice al nostro file widget-plugin.php abbiamo creato un plugin! Bene, per ora il plugin non fa nulla, ma WordPress lo riconosce. Per accertarti che sia il caso, vai alla tua amministrazione e vai nel menu "Plugin". Se il tuo plug-in appare nell'elenco dei plug-in, sei a posto, altrimenti assicurati di aver seguito le mie istruzioni e riprova. Ora puoi attivare il plugin.

Passaggio 2: creare il widget

Ora creeremo il widget stesso. Questo widget sarà una classe PHP che estende la classe principale di WordPress WP_Widget. Fondamentalmente, il nostro widget sarà definito in questo modo:

// La classe del widget
la classe My_Custom_Widget estende WP_Widget {

// Costruttore principale
funzione pubblica __construct () {
/ * ... * /
}

// Il modulo del widget (per il backend)
modulo di funzione pubblica ($ instance) {
/ * ... * /
}

// Aggiorna le impostazioni del widget
aggiornamento della funzione pubblica ($ new_instance, $ old_instance) {
/ * ... * /
}

// Visualizza il widget
widget di funzione pubblica ($ args, $ instance) {
/ * ... * /
}

}

// Registra il widget
funzione my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Questo codice fornisce a WordPress tutte le informazioni necessarie al sistema per poter utilizzare il widget:

  1. Il costruttore, per avviare il widget
  2. Il funzione form () per creare il modulo widget nell'amministrazione
  3. Il funzione update (), per salvare i dati del widget durante l'edizione
  4. E il funzione widget () per visualizzare il contenuto del widget sul front-end

1 - Il costruttore

Il costruttore è la parte del codice che definisce il nome del widget e gli argomenti principali, di seguito è riportato un esempio di come potrebbe apparire.

// Costruttore principale
funzione pubblica __construct () {
parent :: __ construct (
'My_custom_widget',
__ ('Il mio widget personalizzato', 'text_domain'),
Vettore(
'ustom_selective_refresh '=> true,
)
);
}

Si prega di non utilizzare __ () attorno al nome del widget, questa funzione è utilizzata da WordPress per la traduzione. Ti consiglio davvero di usare sempre queste funzioni, per rendere il tuo tema completamente traducibile. E l'uso del parametro "personalizza_selettiva_frutta" consente di aggiornare il widget Aspetto> Personalizza quando si modifica il widget, quindi invece di aggiornare l'intera pagina solo il widget viene aggiornato quando si apportano modifiche.

2 - La funzione form ()

Questa funzione è quella che crea le impostazioni del modulo widget nell'area di amministrazione di WordPress (in Aspetto> Widget o Aspetto> Personalizza> Widget). Questo è dove inserirai i tuoi dati per essere visualizzati sul sito web. Spiegherò quindi come aggiungere campi di testo, aree di testo, selezionare caselle e caselle di controllo alle impostazioni del modulo del widget.

// Il modulo del widget (per il backend)
modulo di funzione pubblica ($ instance) {

// Imposta i valori predefiniti del widget
$ defaults = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analizza le impostazioni correnti con i valori predefiniti
extract (wp_parse_args ((array) $ instance, $ defaults)); ?>


/>

Questo codice aggiunge semplicemente 5 campi al widget (titolo, testo, area di testo, seleziona e casella di controllo). Quindi prima definisci i valori predefiniti per il tuo widget, quindi la funzione successiva analizza le impostazioni correnti definite / salvate per il tuo widget con i valori predefiniti (quindi tutte le impostazioni che non esistono tornano ai valori predefiniti, come quando aggiungi un widget a la tua barra laterale). E l'ultimo è l'html per ogni campo. Si noti l'uso di esc_attr () quando si aggiungono i campi del modulo, questo per motivi di sicurezza. Ogni volta che fai eco a una variabile definita dall'utente sul tuo sito, devi assicurarti che sia prima disinfettata.

3 - La funzione update ()

La funzione update () è davvero semplice. Poiché gli sviluppatori principali di WordPress hanno aggiunto un'API per widget davvero potente, dobbiamo solo aggiungere questo codice per aggiornare ogni campo:

// Aggiorna le impostazioni del widget
aggiornamento della funzione pubblica ($ new_instance, $ old_instance) {
$ instance = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: falso;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['seleziona']): '';
restituisce $ instance;
}

Come puoi vedere, tutto ciò che dobbiamo fare è controllare ogni impostazione e, se non è vuota, salvarla nel database. Si noti l'uso delle funzioni wp_strip_all_tags () e wp_kses_post (), che vengono utilizzate per disinfettare i dati prima che vengano aggiunti al database. Ogni volta che si inserisce QUALSIASI contenuto inviato dall'utente in un database, è necessario assicurarsi che non contenga alcun codice dannoso. La prima funzione wp_strip_all_tags rimuove tutto tranne il testo di base in modo da poterlo utilizzare per tutti i campi in cui il valore finale è una stringa e la seconda funzione wp_kses_post () è la stessa funzione utilizzata per il contenuto dei post e rimuove tutti i tag oltre ai collegamenti html di base come , campate, div, immagini, ecc.

4 - La funzione widget ()

La funzione widget () è quella che produrrà il contenuto sul sito Web. È ciò che vedranno i tuoi visitatori. Questa funzione può essere personalizzata per includere classi CSS e tag specifici per adattarsi perfettamente alla visualizzazione del tema. Ecco il codice (per favore, non che questo codice possa essere modificato facilmente per adattarlo alle tue esigenze):

// Visualizza il widget
widget di funzione pubblica ($ args, $ instance) {

extract ($ args);

// Controlla le opzioni del widget
$ title = isset ($ instance ['title'])? apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text'])? $ instance ['text']: '';
$ textarea = isset ($ instance ['textarea'])? $ instance ['textarea']: '';
$ select = isset ($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! vuoto ($ instance ['checkbox'])? $ instance ['checkbox']: false;

// Hook prima di WordPress core (inclusione sempre)
echo $ before_widget;

// Visualizza il widget
eco '
'; // Visualizza il titolo del widget, se definito if ($ title) { echo $ before_title. $ title. $ After_title; } // Visualizza il campo di testo if ($ text) { eco '

'. $ testo. '

'; } // Visualizza il campo textarea if ($ textarea) { eco '

'. $ textarea. '

'; } // Visualizza il campo di selezione if ($ select) { eco '

'. $ seleziona. '

'; } // Visualizza qualcosa se la casella di controllo è vera if ($ checkbox) { eco '

Qualcosa di fantastico

'; } eco '
'; // Hook after_widget core di WordPress (includere sempre) echo $ after_widget; }

Questo codice non è complesso, tutto quello che devi ricordare è controllare se è impostata una variabile, se non lo fai e se vuoi stamparla, riceverai un messaggio di errore.

Il codice completo del plugin per widget

Ora, se hai seguito correttamente il tuo plugin, ora dovrebbe essere perfettamente funzionante e puoi personalizzarlo in base alle tue esigenze. Se non hai seguito la guida o desideri ricontrollare il codice, puoi visitare la pagina di Github per visualizzare il codice completo.

Visualizza il codice completo su Github

Conclusione

Abbiamo visto che la creazione di un widget all'interno di un plug-in è molto interessante, ora devi sapere come creare un semplice plug-in contenente un widget con diversi tipi di campi e hai imparato ad andare un po 'oltre utilizzando tecniche avanzate per personalizzare il widget. Congratulazioni, hai fatto un ottimo lavoro!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map