Come creare un widget dinamico in WordPress

I widget di WordPress possono aiutarti a rendere il tuo sito web dinamico e interagire efficacemente con i visitatori. Ci sono molti widget WordPress disponibili per l'uso. Ma la creazione di un widget WordPress personalizzato ti aiuta ad aggiungere il codice che preferisci al tuo sito Web WordPress.

Per lo più tutti i siti Web utilizzano il widget dinamico per migliorare l'esperienza dell'utente e per altri scopi. Puoi creare moduli di contatto, moduli di accesso, schede di abbonamento, monitoraggio in tempo reale e tante altre funzionalità al tuo sito Web con i widget di WordPress.

Creare un widget è facile e questo post te lo renderà più facile. Quindi, senza perdere tempo, iniziamo a creare widget dinamici in WordPress.

 

Come creare un widget dinamico in WordPress

In questo post tratteremo questo argomento in tre parti principali.

 

PARTE 1: Capire alcune cose prima di iniziare

Prima di imparare a creare un widget WordPress dinamico, devi sapere alcune cose.

Queste cose sono legate alle basi dei widget e al modo in cui i widget dinamici sono composti da WordPress. Non cercare di trascurare, ignorare o saltare questa parte, perché ti aiuterà molto.

Considera questa parte come l'elemento costitutivo. Tuttavia, se hai familiarità con i widget, la codifica, i plug-in, le funzioni, ecc. di WordPress, puoi saltarlo.

 

Che cos'è un widget WordPress?

Un widget WordPress è un piccolo blocco e questo blocco è posizionato da qualche parte nella tua pagina web WordPress.

Il widget può essere utilizzato per fornire ai tuoi visitatori un pezzo unico di contenuto e funzionalità senza codificare nulla. Un po' di codice WordPress sarà sufficiente per creare un widget.

I pop-up della casella di abbonamento, le notifiche, i pop-up dei moduli di contatto, gli aggiornamenti dei dati in tempo reale, ecc. sono alcuni widget comuni utilizzati dai webmaster di WordPress.

 

Widget statico

Un widget statico non ha interazione con gli utenti perché c'è solo una comunicazione unidirezionale. Viene utilizzato per fornire informazioni immutabili o raccogliere informazioni dagli utenti in modo semplice.

 

Widget dinamico

I widget dinamici interagiscono efficacemente con gli utenti e forniscono dati che vengono aggiornati utilizzando diverse API. Inoltre, questi widget raccolgono informazioni e le utilizzano in modo dinamico. Una funzione di automazione completa è presente nel widget dinamico.

 

pelle mista

La maggior parte dei siti Web in questi giorni utilizza una combinazione di widget statici e dinamici. In questi widget, forniscono informazioni statiche insieme a funzionalità dinamiche. 

 

Cose che devi sapere

Ora conosci il widget di WordPress e i suoi tipi. WordPress fornisce molti widget integrati ai suoi utenti. Ma se vuoi creare un widget WordPress personalizzato per il tuo sito potresti aver bisogno delle seguenti cose. 

 

Codifica di base

Devi avere familiarità con l'OOP di base (programmazione orientata agli oggetti) in PHP. 

 

Codice originale di backup

Tieni presente che giocherai con il tuo codice WordPress. Per evitare qualsiasi problema, devi eseguire il backup del codice WordPress originale.

 

Posizionamento del codice

I widget di WordPress saranno sviluppati con codici, ma dove verranno inseriti questi codici? Puoi inserire un codice widget nei temi di WordPress functions.php file. Questi widget saranno attivi quando avrai il tema attivo.

 

Nozioni di base sui widget di WordPress

WordPress fornisce il  Widget_WP  classe per creare widget dinamici. Dobbiamo estendere questa classe aggiungendo più funzioni secondo il nostro requisito per creare un widget WordPress dinamico. Di seguito sono elencate le quattro funzioni di base che possiamo aggiungere a   Widget_WP   classe.

• Funzione costruttore.
• Per visualizzare il contenuto del widget creiamo il  widget funzione.
• Per aggiornare le impostazioni di un widget utilizziamo il  Aggiornanento funzione.
• Per raccogliere informazioni dagli utenti utilizziamo il  Modulo funzione.

In un widget dinamico, utilizzeremo alcune di queste quattro funzioni del widget. Successivamente, registreremo il nostro widget utilizzando  registro_widget. 

 

PARTE 2: creiamo un widget dinamico per WordPress

La creazione di un widget dinamico per WordPress è un processo lungo. Forse sembrerà una cosa complessa se lo fai per la prima volta, ma l'abbiamo reso semplice per te.

Abbiamo diviso l'intero processo in quattro semplici passaggi. Segui questi quattro semplici passaggi per creare un widget dinamico per WordPress.

 

PASSO 1: Crea un plugin vuoto

Il primo passo è creare un plugin vuoto per il nostro widget WordPress, questo passaggio è semplice e facile. Potresti averlo visto prima se hai mai creato plugin o widget.

Stiamo creando un plug-in perché aggiungeremo un widget in questo plug-in e quindi aggiungeremo quel plug-in al nostro sito WordPress.

Per farlo devi andare su  /wp-content/plugin/. Durante la creazione di quel plugin per il tuo sito WordPress, dovrai aggiungere una nuova directory e quindi nominarla di conseguenza.

Puoi nominarlo come vuoi. Nella tua directory, dovrai creare il   indice.php.   Questo file di indice avrà il seguente codice di esempio.

Tutti i dettagli sopra menzionati nel plug-in vuoto verranno utilizzati da WordPress per mostrarti i dettagli del tuo plug-in nel pannello di amministrazione. Dopo aver aggiunto questo codice per creare un plugin vuoto. Lo vedrai nel tuo pannello di amministrazione di WordPress. Ora devi attivare questo plugin.

 

FASE 2: Crea un codice widget di esempio

Il secondo passaggio consiste nel creare un codice widget di esempio. Useremo le quattro funzioni di base per estendere l'usabilità del  Widget_WP  classe.

class Esempio_Widget estende WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // Crea il widget di esempio } } // Registra la funzione widget register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action( 'widgets_init', 'register_sample_widget' );

Nella sezione del codice sopra, puoi vedere che  Widget_WP viene esteso con l'uso della funzione costrutto. E nell'ultima parte del blocco, puoi vedere come abbiamo registrato il nostro widget di esempio con  registro_widget. 

Dopo aver creato e registrato il widget di esempio, dobbiamo aggiungere funzioni dinamiche ad esso. Possiamo usare  widget,  formare, ed  Aggiornanento funzioni ad esso secondo il nostro requisito.

SUGGERIMENTO BONUS: Per aggiungere dettagli di stile puoi usare CSS  Classe.   Può essere aggiunto al DOM HTML e stilizzerà la visualizzazione dell'intero widget. 

 

PASSO 3: Aggiungi widget alla pagina

Dopo aver finito con la parte di codifica. Puoi aggiungere il widget alla tua pagina. Ricorda che non abbiamo ancora aggiunto alcuna informazione dinamica o fonte di dati nel nostro widget.

Per renderlo dinamico dobbiamo aggiungere una fonte di informazioni dinamica. Lo faremo nel passaggio successivo. Per ora, aggiungeremo questo widget personalizzato appena creato alla pagina del sito WordPress.

Per aggiungerlo alla pagina devi tornare al pannello di amministrazione di WordPress. Lì dovrai andare al Forma opzione nella barra laterale. Vai a Aspetto>Widget.

Qui puoi aggiungere il tuo widget in qualsiasi punto della pagina come intestazione, piè di pagina, barra laterale, ecc.

 

PASSO 4: Aggiungi dati dinamici al widget

Ora più della metà del processo è completato. È il momento di aggiungere dati dinamici al tuo widget. Puoi ottenere dati dinamici da qualsiasi fonte.

Ad esempio, se stai creando un widget per mostrare casi COVID-19 in tempo reale nel mondo, dovrai acquisire dati da un sito Web come l'OMS o un sito di media.

Ottieni l'URL delle informazioni e aggiungi il  API Key ad esso. Ora usando il widget funzione insieme all'istruzione "GET" è possibile ottenere i dettagli in tempo reale del COVID-19 (secondo l'esempio).  

API Key insieme alla richiesta "GET" acquisirà e visualizzerà i dati o le informazioni nel tuo widget. Ottieni aiuto con le stringhe e le variabili JSON per ottenere i dati aggiornati nel tuo widget.

 

FASE 5: caricamento del plugin

Puoi visualizzare l'anteprima del tuo widget dopo aver aggiunto tutti i codici richiesti.

Ora l'ultimo passaggio è caricare il plug-in nel pannello di amministrazione di WordPress. Per questo, devi comprimere il plugin in un file zip. Ora vai a Plugin> Aggiungi nuovo> Carica plugin e carica il tuo plugin.

 

PARTE 3: Ottieni elementi, plugin, widget in un unico posto

Creare e aggiungere plugin, widget ed elementi sembra difficile? Non preoccuparti, la buona notizia è che al giorno d'oggi non devi fare nulla manualmente.

Ci sono molti Temi WordPress, plugin e widget disponibili. La maggior parte delle tue esigenze può essere soddisfatta con questi widget personalizzabili già pronti. Di seguito è riportata la migliore opzione disponibile.

 

Deep WordPress Theme

Il Deep Tema di WordPress fornito da The Webnus è una delle migliori opzioni per ottenere i temi, gli elementi, i plug-in premium di WordPress, ecc. Puoi utilizzare tutte queste cose per posizionare qualsiasi widget dinamico sul tuo sito Web WordPress. Di seguito sono riportate alcune delle migliori funzionalità che otterrai solo con il deep Tema WordPress di Webnus.

 

Potenziatore di velocità

I codici aggiuntivi sulle tue pagine influiscono sulla velocità di caricamento della pagina. Ma non ci sono codici extra da caricare con questo tema. Il che rende le tue pagine caricate più velocemente. Gli elementi CSS e JS vengono caricati nel codice sorgente della pagina. Quindi rende il caricamento più fluido con meno codice.

 

Super risposta

Otterrai un'esperienza utente migliorata sulle tue pagine web. L'esperienza utente avanzata ti aiuterà a fornire una funzionalità di risposta eccellente ai visitatori del tuo sito.

 

Facile da usare

Deep l'importatore di temi è molto facile e veloce da usare. Che ti aiuta a lavorare in modo molto comodo e conveniente durante l'importazione di temi sul tuo sito Web WordPress.

 

Prezzi autentici

Risparmierai molto quando usi il deep Tema WordPress di Webnus. Tutti i temi, i plugin sono disponibili a un prezzo genuino.

 

Riassumiamo!

In questo post, abbiamo imparato cos'è un widget WordPress dinamico e come crearlo.

Dall'aggiunta di dati alla creazione del widget di base, abbiamo coperto ogni aspetto dell'intero processo. Puoi facilmente creare un widget WordPress dinamico se segui i passaggi menzionati in questo post.

Inoltre, abbiamo appreso che è possibile ottenere plug-in, widget, elementi, ecc. già pronti da Webnus. Risparmierete tempo e denaro sia durante l'utilizzo del deep Tema WordPress di Webnus.