Come creare un widget per WordPress

Pubblicato in data 22 Agosto 2019 Categoria Consigli WordPress

creare wordpress widget

Probabilmente hai sempre usato i widget in WordPress come modi pratici per personalizzare determinate aree del tuo sito web. A volte fanno esattamente ciò di cui hai bisogno, ma a volte potresti volere un aspetto o una funzionalità leggermente diversi. Fortunatamente, è possibile creare widget per WordPress personalizzati. Questi oggetti PHP possono essere sviluppati da zero e implementati sul tuo sito o raccolti in un plugin per l’utilizzo in più temi. In entrambi i casi, creare i tuoi widget per WordPress non è così difficile come ti aspetteresti.

In questo articolo, analizzeremo come sviluppare i tuoi widget personalizzati e analizzeremo a cosa serviranno i tuoi widget e di cosa avrai bisogno prima. Iniziamo!

 

Determina a cosa serve il tuo widget

Ci sono alcune cose a cui devi pensare prima di iniziare a mettere insieme il tuo primo widget per WordPress personalizzato. Pianificare in anticipo ti aiuterà a creare la tua parte di codice di nicchia in modo più efficace.

I widget possono essere inseriti solo in aree pronte per i widget di un sito WordPress, dovrai quindi assicurarti di sapere esattamente dove verrà implementato il tuo widget e quale sarà il suo scopo. Dovresti essere in grado di individuare ciò che renderà unico il tuo widget, poiché ciò ti aiuterà a pianificare meglio il suo design.

A seconda del tema che stai utilizzando, i widget di solito possono essere posizionati in barre laterali (sidebar), intestazioni (header) e piè di pagina (footer):

widget di wordpress
A volte ci sono più opzioni per una o più di queste aree (come una “Sidebar 1” e “Sidebar 2”, per esempio). Indipendentemente da dove si trova, un widget utilizza essenzialmente la programmazione di oggetti PHP per produrre un pezzo di HTML per la visualizzazione front-end e l’amministrazione back-end.

Poiché regolerai la classe WP_Widget sul tuo sito per apportare modifiche personalizzate, ti consigliamo di finalizzare il piano per il tuo widget prima di immergerti. Se ci sono altri elementi nel tuo widget, come una funzione del modulo di contatto o un feed di dati, assicurati di avere tutte le informazioni extra necessarie prima di iniziare.

 

Di cosa ho bisogno? Inizia con il codice di base per un widget.

Esistono due modi principali per sviluppare un widget personalizzato : puoi creare un plugin o puoi incollare il codice del tuo widget direttamente nel tuo file functions.php.

Quando scegli quest’ultima opzione, il tuo widget funzionerà solo con il tuo tema attuale. Nella maggior parte dei casi la scelta migliore è quella di utilizzare un plugin personalizzato, che ti consentirà di utilizzare il widget con qualsiasi tema.

Avrai bisogno di un codice di base del widget WordPress, di un editor di testo per la modifica del codice, dell’accesso alla dashboard di amministrazione di WordPress e un client SFTP (Secure File Transfer Protocol) per accedere direttamente ai file del tuo sito. Dopo aver preparato tutti gli ingredienti necessari, sarai pronto per creare un widget per WordPress.

 

Come iniziare a creare il tuo widget WordPress personalizzato (in 3 step)

Una volta deciso quale sarà lo scopo e la funzione del tuo widget, puoi iniziare a sviluppare il codice. Ti consigliamo di studiare le basi delle classi e degli oggetti in PHP5, nonché l’anatomia di un widget.

Per iniziare, ti consigliamo di impostare una nuova cartella per contenere i file del tuo widget. Inserisci la tua nuova cartella nella directory wp-content / plugins / e dagli un nome (nel nostro caso nuovo-plugin) :

cartelle con contenuto wordpress
Ora hai un’area di gestione temporanea per i file di codice del tuo nuovo widget.

Step 1: utilizza un codice di base per formattare il widget

Puoi partire da zero se lo desideri ma il modo più semplice per iniziare è utilizzare un codice di base ben scritto. Puoi trovare la classe WP_Widget nella directory dei file del tuo sito WordPress, situata in wp-Includes / class-wp-widget.php.

Per creare il tuo widget WordPress personalizzato, estendi la classe esistente per eseguire nuove funzioni. Puoi anche trovare il codice di base del widget su GitHub. Ci sono molti programmatori disposti a condividere il loro codice ma assicurati di controllare ciò che stai utilizzando e assicurarti che soddisfi gli standard di codifica di WordPress.

Una volta che hai il tuo codice di base, dovrai inserirlo nel file che hai appena creato, in modo che WordPress registri il tuo widget:

// register Mio_Widget
add_action( 'widgets_init', function(){
 register_widget( 'Mio_Widget' );
});

Il codice di registrazione è semplice e deve essere incollato direttamente nel file del tuo widget.

Step 2: personalizza il tuo widget

A questo punto, puoi iniziare a personalizzare il tuo widget per WordPress. Naturalmente, il modo in cui lo fai varierà a seconda dei tuoi obiettivi. Tuttavia, ci sono alcune nozioni di base con cui dovrai prima familiarizzare, soprattutto se sei nuovo allo sviluppo.

Un concetto che dovrai capire sono gli hook di WordPress che ti consentono di “agganciarti” al codice di base di WordPress e attuare una determinata funzione in un determinato momento.

Esistono quattro elementi principali nella classe widget con cui dovrai lavorare:

  1. Costruct: imposta l’aspetto del widget nel pannello di amministrazione.
  2. Widget: elabora le tue funzioni e visualizza il codice HTML sul front-end del tuo sito.
  3. Form: puoi impostare i campi form, per recuperare i valori delle opzioni dal database del tuo widget nel pannello di amministrazione.
  4. Update: le opzioni del tuo widget vengono salvate nel database.

Anche se il tuo widget non utilizza i campi form o non ha opzioni che devono essere aggiornate al database, è comunque buona prassi di programmazione includere il codice segnaposto per ciascun elemento nella struttura del tuo widget.

Step 3: trasforma il tuo widget in un plugin personalizzato

Dopo aver creato le specifiche del tuo widget, vorrai assicurarti di poterlo utilizzare come un plugin. Per farlo, dovrai includere un codice di intestazione che indichi a WordPress come trattare questo nuovo pezzo di codice.

Nella parte superiore del file del tuo widget, puoi inserire il seguente codice:

<?php
/*
Plugin Name: Nuovo-Widget
Plugin URI: http://wordpress.org/extend/plugins/#
Description: Widget di esempio 
Author: Il tuo nome
Version: 1.0
Author URI: http://example.com/
*/

Dopo aver aggiunto questo codice, salva il file e carica le modifiche sul tuo sito, sarai in grado di accedere alla dashboard di WordPress e trovare il plugin nel menu Plugin:

widget plugin wordpress
A questo punto, puoi attivare il plugin ed accedere alle sue impostazioni nel menu Aspetto> Widget in WordPress.

Non ti resta che iniziare a utilizzare il widget appena creato!