Creazione di widget WordPress personalizzati

Costruire widget WordPress è come costruire un plugin ma è più semplice e diretto. Tutto quello che devi fare è avere un singolo file in cui tutto il PHP va ed è più facile codificarlo di un plugin che può avere più di un file. Ci sono tre funzioni principali di un widget che possono essere suddivise in widget di, aggiornare e modulo.

  • funzione widget ()
  • aggiornamento della funzione ()
  • modulo di funzione ()

Struttura basilare

Lo schema di base del nostro widget è molto semplice e ci sono una serie di funzioni che è necessario conoscere. La struttura a osso nudo del nostro widget è qualcosa del genere:

 add_action ('widgets_init', 'register_my_widget'); // function per caricare la mia funzione widget register_my_widget ()  // funzione per registrare la mia classe widget My_Widget estende WP_Widget ()  // La funzione classe widget di esempio My_Widget ()  // Widget Settings function widget ()  // mostra la funzione widget update ()  // aggiorna la forma del widget form ()  // e ovviamente il modulo per le opzioni del widget

Passo 1

Prima di fare tutto ciò, prima caricheremo il nostro widget quando necessario con la funzione "widget_initQuesto è un hook di azione e puoi trovarne di più nel codice WordPress.

 add_action ('widgets_init', 'register_my_widget');

La prossima cosa che faremo è registrare il nostro widget in WordPress in modo che sia disponibile nella sezione dei widget.

 function register_my_widget () register_widget ('My_Widget'); 

Passo 2

Includeremo il nostro widget in una classe. Il nome della classe è importante! Una cosa che dovrebbe essere tenuta presente è che il nome della classe e il nome della funzione dovrebbero essere gli stessi.

 classe My_Widget estende WP_Widget 

Ora passeremo alcuni parametri di impostazione a questa classe. Ad esempio possiamo passare questa larghezza e altezza. Possiamo anche dare al nostro widget una piccola descrizione, se vogliamo, che è utile se si associa questo widget al tema commerciale.

 function My_Widget () function My_Widget () $ widget_ops = array ('classname' => 'example', 'description' => __ ('Un widget che visualizza il nome dell'autore', 'example')); $ control_ops = array ('width' => 300, 'height' => 350, 'id_base' => 'example-widget'); $ this-> WP_Widget ('esempio-widget', __ ('Esempio di widget', 'esempio'), $ widget_ops, $ control_ops); 

Ora che abbiamo completato i requisiti di base per il nostro widget, sposteremo la nostra attenzione sulle tre funzioni di cui abbiamo parlato in precedenza, quali sono le funzioni importanti oi blocchi principali del nostro widget!


Step 3 Function Widget ()

La prima funzione è correlata alla visualizzazione del nostro widget. Passeremo un paio di argomenti alla nostra funzione widget. Passeremo argomenti dal tema, che può essere un titolo e altri valori specifici. Successivamente stiamo passando la variabile di istanza, che è correlata alla classe della nostra funzione.

 widget di funzioni ($ args, $ istanza)

Dopodiché estrarremo i valori dall'argomento perché vogliamo che i valori siano disponibili localmente. Se non sai cosa è questa variabile locale, non preoccuparti per questo e aggiungi semplicemente questo passaggio!

 estratto ($ args);

In seguito, imposteremo il titolo e altri valori per il nostro widget, che possono essere modificati dall'utente nel menu dei widget. Stiamo anche includendo le variabili speciali come $ before_widget, $ after_widget. Questi valori sono gestiti dal tema.

 $ title = apply_filters ('widget_title', $ instance ['title']); $ nome = $ istanza ['nome']; $ show_info = isset ($ istanza ['show_info'])? $ istanza ['show_info']: false; echo $ before_widget; // Visualizza il titolo del widget if ($ title) echo $ before_title. $ titolo. $ After_title; // Visualizza il nome se ($ nome) printf ('

'. __ ('Ehi il loro marinaio! Il mio nome è% 1 $ s.', 'Esempio'). '

', $ nome); if ($ show_info) printf ($ name); echo $ after_widget;

Passaggio 4 Funzione di aggiornamento ()

Il prossimo è la funzione di aggiornamento. Questa funzione prenderà le impostazioni dell'utente e le salverà. Aggiornerà semplicemente le impostazioni in base ai gusti dell'utente.

 aggiornamento della funzione ($ nuova_instance, $ vecchia_instance) $ istanza = $ vecchia_instance; // Rimuovi tag da titolo e nome per rimuovere istanza $ $ ['title'] = strip_tags ($ new_instance ['title']); $ instance ['name'] = strip_tags ($ new_instance ['name']); $ istanza ['show_info'] = $ new_instance ['show_info']; restituire $ istanza; 

Una cosa da notare qui è che stiamo estrapolando i valori in modo che qualsiasi XHTML possa essere rimosso dal testo che, in parole semplici, potrebbe influire sul funzionamento del nostro widget.


Step 5 Form Function ()

Il prossimo passo delineerà la creazione del modulo che fungerà da riquadro di input. Ciò includerà le impostazioni e i valori definiti dall'utente. La funzione del modulo può includere checkbox, caselle di inserimento del testo ecc.

Prima di creare questi campi di input, dovremo decidere cosa mostrare quando l'utente non seleziona nulla dal widget. Per fare questo passeremo alcuni valori predefiniti come titolo, descrizione ecc.

 // Imposta alcune impostazioni del widget predefinito. $ defaults = array ('title' => __ ('Esempio', 'esempio'), 'nome' => __ ('Bilal Shaheen', 'esempio'), 'show_info' => true); $ istanza = wp_parse_args ((array) $ istanza, $ defaults); ?>

Ora creeremo la casella di testo di input. Includeremo queste opzioni all'interno del tag che contiene il paragrafo.

 // Titolo widget: immissione di testo 

//L'immissione di testo

// Checkbox

name ="get_field_name ('show_info'); ?> "/>

Conclusione

E questo è tutto. Ti sei appena creato un widget molto carino e semplice che mostra il nome dell'autore del blog. Inoltre offre all'utente la possibilità di mostrarlo pubblicamente al pubblico o meno. Salva il codice in un file PHP e caricalo nella directory dei temi. Chiamalo nel tuo functions.php. Successivamente, vai al pannello dei tuoi widget e vedrai il widget appena creato.

Tutto il codice è incluso nel file di download in modo che sia più facile copiare e incollare. Divertiti!