Stai pensando di creare un widget per WordPress? Probabilmente hai sempre usato i widget di 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 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 widget WordPress non è così difficile come ti aspetteresti.
In questo articolo, analizzeremo come creare widget per WordPress personalizzati e analizzeremo a cosa serviranno i tuoi widget e di cosa avrai bisogno prima di iniziare a creare il tuo widget per WordPress.
Iniziamo!
Determina a cosa servirà il widget che vuoi creare
Ci sono alcune cose a cui devi pensare prima di iniziare a creare il tuo widget per WordPress personalizzato. Pianificare in anticipo ti aiuterà a creare la tua parte di codice 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 anche individuare ciò che renderà unico il tuo widget poiché ti aiuterà a pianificarne meglio il suo design.
A seconda del tema che stai utilizzando, i widget possono essere posizionati nelle barre laterali (sidebar), intestazioni (header) e piè di pagina (footer):
A volte ci sono più opzioni per una o più di queste aree (“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.
Inizia con il codice di base per creare il widget WordPress
Esistono due modi principali per sviluppare un widget WordPress personalizzato : puoi creare un plugin o puoi incollare il codice del tuo widget direttamente nel tuo file functions.php.
Se 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 widget 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 scrivere 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 creare una nuova cartella che conterrà i file del tuo widget.
Crea la tua nuova cartella nella directory wp-content/plugins/ e dagli un nome (nel nostro caso nuovo-plugin) :
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 widget per WordPress estendi la classe esistente per eseguire nuove funzioni. Puoi trovare anche 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 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. 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 attivare una determinata funzione in un determinato momento.
Esistono quattro elementi principali nella classe widget con cui dovrai lavorare:
- Costruct: imposta l’aspetto del widget nel pannello di amministrazione.
- Widget: elabora le tue funzioni e visualizza il codice HTML sul front-end del tuo sito.
- Form: puoi impostare i campi form, per recuperare i valori delle opzioni dal database del tuo widget nel pannello di amministrazione.
- 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 nel 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 snippet 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 Quando accederai alla dashboard di WordPress troverai il tuo plugin nel menu Plugin:
A questo punto, puoi attivare il plugin ed accedere alle impostazioni nel menu Aspetto> Widget nella Dashboard di WordPress.
Non ti resta che iniziare a utilizzare il widget appena creato!
