Cosa è un widget

Un widget wordpress è un’applicazione per wordpress che permette di aggiungere nuove funzionalità o caratteristiche grafiche. Il successo dei widget è dovuto al fatto che il loro utilizzo non presuppone nessuna conoscenza di programmazione php.

Un widget per comodità nell’installazione è sempre racchiuso in un plugin. Spesso rappresenta il centro del componente aggiuntivo, altre volte integra le caratteristiche di un altro plugin, come nel caso di Formidable Forms, dove il widget si occupa solo di mostrare il form di contatti nella sidebar.

Una volta installato un nuovo widget può essere attivato nella pagina aspetto>widget semplicemente effettuando un drag and drop verso la sidebar o un altra regione predisposta del tema. Ogni widget può essere controllato dal form delle opzioni, ad esempio completando campi di testo o inserendo delle immagini.

widget-testo

Esempio di semplice widget wordpress per inserire del testo

Aree attive

Ogni tema asseconda di come è organizzato possiede differenti aree che possono ospitare i widget. Queste zone non sempre corrispondono alla sidebar, ma possono trovarsi in qualsiasi parte della pagina come nel footer o nell’header. Per aggiungere una nuova area attiva è necessario modificare il tema (vedi funzione register_sidebar()).

Registrazione di una sidebar

Ecco un esempio di codice per la registrazione di una sidebar. Nelle funzioni del tema scriviamo

add_action( 'widgets_init', 'isw_register_sidebars' );

function isw_register_sidebars() {
	register_sidebar(
		array(
			'id' => 'secondaria',
			'name' => __( 'Sidebar secondaria' ),
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);
}

nuova sidebar per widget worpress

Inserimento della sidebar nel tema

Inseriamo la sidebar in un file template. Usiamo la funzione dynamic_sidebar() passando l’id della sidebar, nel nostro caso ‘secondaria’, definito con register_sidebar().

<?php if(is_active_sidebar('secondaria')) : ?>
    <div id="secondaria">
        <ul>
           <?php dynamic_sidebar('secondaria'); ?>
       </ul>
    </div>
<?php endif; ?>

 

Mostrare un widget all’esterno di una sidebar

È possibile mostrare il contenuto di un widget all’esterno della sidebar attraverso la funzione the_widget(). La funzione accetta tre parametri di cui solo il primo è obbligatorio e corrisponde al nome della classe con cui è stato definito il widget. Ecco l’elenco delle classi per i widget predefiniti di ogni installazione di worpdress:

WP_Widget_Archives – Archivi
WP_Widget_Calendar — Calendario
WP_Widget_Categories — Categorie
WP_Widget_Links – Links
WP_Widget_Meta – Meta
WP_Widget_Pages – Pagine
WP_Widget_Recent_Comments – Commenti recenti
WP_Widget_Recent_Posts – Articoli recenti
WP_Widget_RSS – RSS
WP_Widget_Search – Form di ricerca
WP_Widget_Tag_Cloud – Tag Cloud
WP_Widget_Text – widget di testo
WP_Nav_Menu_Widget

Gli altri parametri sono:
$instance: (array/testo) possiamo passare le opzioni del widget. Ad esempio il numero di articoli recenti da mostrare.
$args: un array di opzioni con cui modificare la visualizzazione html. Ad esempio permette di specificare un tag html da mostrare prima o dopo il widget.
 

Applicare stili css ai widget

Per modificare l’aspetto dei widget, se non possiamo intervenire direttamente nel form delle opzioni, è necessario studiare l’html del contenuto del widget e intervenire con i css. Per facilitare questo procedimento possiamo utilizzare il pluigin Widget CSS Classes (vedi link nell’elenco in basso) per inserire classi css personalizzate.

Anatomia di un widget wordpress

Se abbiamo deciso di imparare a creare un widget come prima cosa è bene consultare la pagina del codex relativa alle widget api. È necessario avere un minimo di conoscenza di php e in particolare in programmazione orientata agli oggetti, infatti mentre per i plugin possiamo decidere anche di utilizzare un approccio procedurale alla programmazione, nel caso dei widget siamo costretti ad usare le classi e gli oggetti.

Per creare un widget wordpress è necessario estendere la classe WP_Widget e alcune delle sue funzioni.

<?php

class My_Widget extends WP_Widget {

	public function __construct() {
		// inizializzazione del widget
	}

	public function widget( $args, $instance ) {
		// output del contenuto
	}

	public function form( $instance ) {
		// gestisce il form delle opzioni in aspetto>widget
	}

	public function update( $new_instance, $old_instance ) {
		// processo di aggiornamento delle opzioni nel database
	}
}

Spieghiamo velocemente il ruolo ogni metodo ha nel funzionamento del widget :

__construct() inizializza il widget all’interno del cms

widget() responsabile di ciò che vediamo nel frontend in quanto genera il contenuto del widget

update() serve per aggiornare le opzioni del widget che sono memorizzate nel database. Riceve i dati dal form delle opzioni.

Lista di Widget WordPress gratuiti

Per concludere vediamo un elenco tra i migliori widget  wordpres free utili a risolvere problemi comuni che incontriamo duranti la creazione di un blog. Questi si aggiungono ai widget presenti di default in ogni installazione del cms (widget di testo, funzione cerca, archivi, articoli recenti, categorie ecc…)

Widget che interessano le pagine

Feature a Page Widget: permette di mostrare una pagina nella sidebar. Attraverso un menu a tendina scegliamo una pagina già pubblicata. Automaticamente saranno importati il campo riassunto e l’immagine in evidenza. Prima di salvare possiamo scegliere la posizione dell’immagine rispetto al testo.

Flexi pages: crea un elenco delle pagine create nel blog. Possiamo scegliere quali pagine escludere o includere, con quale criterio ordinare le pagine, se mostrare la gerarchia con pagine e sottopagine.

Black studio tinymce widget: permette di disegnare il contenuto del widget direttamente attraverso un editor visuale Tinymce, identico a quello usato per le pagine o i post.

Inserimento di altri tipi di contenuto

Google maps widget: consente di creare facilmente mappe google. Possiamo scegliere dimensioni, livello di zoom, indirizzo, testo da inserire sopra e sotto la mappa e altre opzioni.

Image Widget: semplice widget wordpress per l’inserimento di un’immagine nella sidebar. Permette di inserire un titolo, il testo alternativo (attributo alt), una didascalia, il target_ (eventuale apertura in altra finestra o tab), dimensioni e allineamento dell’immagine.

Video Sidebar Widgets: utilizzabile anche nei post e nelle pagine grazie a uno shortcode. Da la possibilità di inserire fino a 5 video da Youtube, Vimeo o altri siti. Ad ogni caricamento di pagina sarà visualizzato un video random. Per inserire i video bisogna inserire l’ID prelevato dall’url originale. È possibile impostare anche l’autoplay.

Widget per liste di categorie, tag, post

WP Most Popular: il plugin tiene traccia delle visite ai post e mostra nel tema un elenco dei post più popolari. È possibile mostrare i post più popolari dell’ultima settimana, 30 giorni, o di sempre.

Yet Another Related Posts Plugin (YARPP): mostra pagine, articoli e custom post type correlati al contenuto visualizzato. Prima di inserire il widget nella sidebar è necessario andare nella pagina impostazioni>YARP  e inserire le opzioni di affinità che legano articoli simili, e le opzioni di visualizzazione.

Widget che modificano il comportamento di altri widget

Widget Logic: aggiunge un campo di testo sotto ogni widget, in cui possiamo specificare, attraverso tag condizionali o altro codice php, in quali pagine il widget deve comparire.

Display Widgets: otteniamo lo stesso risultato del precedente widget ma è più semplice da utilizzare. Per ogni widget avremo un un elenco di tutte le pagine, categorie ecc.. in cui selezionare tramite check box dove il widget non dovrà comparire.

Widget CSS Classes: aggiunge un campo per l’inserimento di classi css personalizzate che ci permettono di modificare più facilmente l’aspetto di ogni widget.

Gestione dei social media

Facebook Widget: inserisce un box della pagina Facebook con i like e se vogliamo le immagini profilo degli utenti. È possibile sfruttare uno shortcode per l’inserimento del box nei post o pagine.

Social Media Widget: inserisce il link alle nostre pagine sui social network. Tante opzioni disponibili, diversi set di icone.

Social Media Feather: le impostazione generali le troviamo sotto impostazioni>social media. Nel pannello dei widget possiamo inserire distintamente un box per la condivisione della pagina, e un box per i follow.

Vari form da inserire nella sidebar

Login With Ajax: permette l’autenticazione o la registrazione degli utenti senza aggiornamento della pagina.

Formidable Forms: plugin per la creazione di form di contatto. Permette l’inserimento dei form nella sidebar tramite widget.

Subscribe2: plugin per la creazione di newsletter che contiene anche un widget per l’inserimento del form per l’iscrizione.

Collezioni di Widget

Gabfire Widget Pack: unico plugin che contiene una collezione di widget popolari.

SiteOrigin Widgets Bundle: serie di widget proprietari utili, tra cui un widget per google maps, uno per uno slider di immagini e video.


  inStileWeb.com
blog comments powered by Disqus