Come sviluppare un widget complesso (1/3)

In questa serie di tre articoli, vedremo come sviluppare un widget WordPress di una certa complessità con caratteristiche piuttosto avanzate. Il widget che svilupperemo è un pretesto per vedere assieme due argomenti: L’accesso al database di WordPress e la localizzazione (ovvero la traduzione in più lingue).
Nel primo tutorial imposteremo il widget, nel secondo lavoreremo sui database ed infine nel terzo vedremo come localizzarlo.
Darò per scontato che tu abbia letto ed acquisito i tutorial sui plugin e quello sui widget, quindi in questa prima parte andrò piuttosto spedito.

Scenario

Svilupperemo un widget in grado di mostrarci gli ultimi post ed i post più commentati. Nel front-end queste due viste saranno mostrate grazie a delle tabs (come nella sidebar di YIW per i più commentati / in evidenza) realizzate con le UI di jQuery (fornite nativamente da WordPress).
Il risultato finale sarà simile a questo

Per seguire più agevolmente il tutorial, puoi scaricare il documento che svilupperemo.

Download

Warm Up

Nella cartella plugins di WordPress crea la cartella postPlus ed al suo interno il file post.plus.widget.php.

Crea l’intestazione del widget in questo modo:

/*
Plugin Name: PostPlus
Plugin Script: post.plus.widget.php
Description: This widget show the last post and the most commented post
Version: 1.0
License: GPL 3.0
Author: Maurizio Tarchini
*/

Estendi la classe WP_Widget e dichiara il metodo costruttore come abbiamo già visto.

class pp_post_plus_widget extends WP_Widget
{
    public function __construct()
{
        parent::WP_Widget( 'pp-post-plus', 'PostPlus', array('description' => 'Grazie a questo widget é possibile visualizzare una lista degli ultimi post e dei più commentati'));
    }

Il metodo form

Daremo la possibilità all’utente di configurare:

  • il titolo del widget
  • i titoli delle due tabs
  • il numero di ultimi post da mostrare
  • il numero di post più commentati da mostrare

Iniziamo dichiarando i valori di default.

public function form( $instance )
    {

        $defaults = array(
            'title' => 'PostPlus',
       'title_post' => 'Gli ultimi articoli',
            'num_post' => 5,
            'title_most_comment' => 'I più commentati',
            'num_most_comment' => 5
        );

E quindi dichiariamo il form così come abbiamo già visto in precedenza.

$instance = wp_parse_args( (array) $instance, $defaults ); ?>

        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">
                <strong>Titolo:</strong>
            </label>
            <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" />

        </p>
        <p>&nbsp;</p>
        <p>
            <label for="<?php echo $this->get_field_id( 'title_post' ); ?>">
                Titolo per "ultimi post":
            </label>
            <input type="text" id="<?php echo $this->get_field_id( 'title_post' ); ?>" name="<?php echo $this->get_field_name( 'title_post' ); ?>" value="<?php echo $instance['title_post']; ?>" />

        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'num_post' ); ?>">
                Numero di post da mostrare:
            </label>
            <input type="text" id="<?php echo $this->get_field_id( 'num_post' ); ?>" name="<?php echo $this->get_field_name( 'num_post' ); ?>" value="<?php echo $instance['num_post']; ?>" />

        </p>
            <p>
            <label for="<?php echo $this->get_field_id( 'title_most_comment' ); ?>">
                Titolo per "post più commentati":
            </label>
            <input type="text" id="<?php echo $this->get_field_id( 'title_most_comment' ); ?>" name="<?php echo $this->get_field_name( 'title_most_comment' ); ?>" value="<?php echo $instance['title_most_comment']; ?>" />

        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'num_most_comment' ); ?>">
                Numero di post da mostrare:
            </label>
            <input type="text" id="<?php echo $this->get_field_id( 'num_most_comment' ); ?>" name="<?php echo $this->get_field_name( 'num_most_comment' ); ?>" value="<?php echo $instance['num_most_comment']; ?>" />

        </p>
        <?php

    }

Il metodo update

Anche qui dichiariamo il metodo update così come abbiamo già visto.

public function update( $new_instance, $old_instance )
{

        $instance = $old_instance;

        $instance['title'] = strip_tags( $new_instance['title'] );

        $instance['title_post'] = strip_tags( $new_instance['title_post'] );

        $instance['num_post'] = strip_tags( $new_instance['num_post'] );

        $instance['title_most_comment'] = strip_tags( $new_instance['title_most_comment'] );

        $instance['num_most_comment'] = strip_tags( $new_instance['num_most_comment'] );

        return $instance;

    }

Il metodo widget

Come ho anticipato all’inizio, visualizzeremo il nostro widget con delle tabs implementate tramite jQuery. Quindi vediamo brevemente la procedura.

Markup

Il markup per creare delle tabs con le UI di jQuery deve avere questa struttura:

  • Un div contenitore all’interno del quale inserire
    • Una lista nella quale ogni elemento contiene un link. Questi link rappresenteranno la navigazione e fanno riferimento all’id delle rispettive sezioni di contenuto.
    • Le sezioni di contenuto saranno rappresentate da dei div con l’id corrispondente al link della navigazione.

Sembra molto complicato, ma basta guardare la pagina di demo (e visualizzare il codice) per capire immediatamente.

Javascript

Dovremo poi indicare che il nostro contenitore deve essere implementato come tabs. Lo faremo in modo semplicissimo con il metodo tabs(), in questo modo:

$(function() {
$( "#id_del_contenitore" ).tabs();
});

Naturalmente andrà inclusa la libreria jQuery, UI-tabs e tutte le sue dipendenze (ma come abbiamo visto, con WordPress è molto semplice).

Inoltre ci servirà il foglio di stile delle UI, senza il quale faremo ben poco. Iniziamo a procurarcelo.
Ti insegno un trucchetto: Visto che ci serve unicamente lo stile per le tabs, è inutile utilizzare il foglio di stile completo. Dunque:

  • Vai sulla pagina di download delle UI
  • Deseleziona tutto
  • Seleziona unicamente tabs (si selezioneranno automaticamente tutte le dipendenze)
  • Scegli un tema
  • Scarica il pacchetto, al suo interno troverai (cartella css) il foglio di stile contenente solo quello che serve per far funzionare le tabs.

Possiamo inoltre eliminare da questo documento tutta la parte relativa al framework delle icone, come pure la cartella immagini non ci serve.

Crea la cartella css all’interno della cartella del nostro plugin e copiaci il foglio di stile delle UI.

Siamo dunque pronti per scrivere il metodo widget.

public function widget( $args, $instance )
    {

        extract( $args );

        $title = apply_filters('widget_title', $instance['title'] );

        echo $before_widget;
        echo $before_title . $title . $after_title;
        ?>
            <div id="pp-tabs-container">
                <ul>
                    <li><a href="#pp-tab-1"><?php echo $instance['title_post']; ?></a></li>
                    <li><a href="#pp-tab-2"><?php echo $instance['title_most_comment']; ?></a></li>
                </ul>
                <div id="pp-tab-1">
                    <ul>
                        Qui verranno visualizzati gli ultimi post
                        <?php //$this->_getLastPost($instance); ?>
                    </ul>
                </div>
                <div id="pp-tab-2">
                    <ul>
                        Qui verranno visualizzati i post più commentati
                        <?php //$this->_getMostComment($instance); ?>
                    </ul>
                </div>
            </div>
        <?php
        echo $after_widget;

    }

Come puoi vedere ho dato al markup la giusta struttura per supportare le tabs di jQuery ed ho inserito dinamicamente i link della navigazione.

Per quello che concerne il contenuto, come vedi verrà inserito dai metodi _getLastPost() e _getMostComment() che fanno riferimento ai due metodi privati che svilupperemo nel prossimo articolo. Per il momento li lasceremo commentati.

Dare vita alle tabs

Dovremo ora creare il file nel quale passare il metodo tabs() al contenitore che nel nostro caso ha id pp-tabs-container.
Crea il file pp.jquery.tabs.js nella cartella del plugin.

jQuery(document).ready(function($){
    $('#pp-tabs-container').tabs();
});

Ora dovremo includere gli script ed il foglio di stile. Iniziamo con lo stabilire il percorso della cartella del plugin, in questo modo:

$location = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),'',plugin_basename(__FILE__));
define("PP_PLUGIN_FOLDER_URL", $location);

Ed ora includiamo scripts e foglio di stile. Come abbiamo visto nei tutorial sui plugin, per gli script basterà richiedere l’inclusione di pp.jquery.tabs.js passando come dipendenza unicamente jquery-UI-tabs. Questo basterà per richiedere l’inclusione e gestione automatica di jQuery e delle dipendenze necessarie.
Scriviamo tutto in una funzione che passeremo al gancio degli scripts in questo modo:

function pp_post_plus_enqueue_required_scripts()
{
wp_enqueue_script('pp-tabs', PP_PLUGIN_FOLDER_URL . 'pp.jquery.tabs.js', array('jquery-ui-tabs'));
wp_enqueue_style('pp-ui-style', PP_PLUGIN_FOLDER_URL . 'css/jquery.ui.custom.css');
}

add_action('wp_enqueue_scripts’, 'pp_post_plus_enqueue_required_scripts');

Ed ora non resta che registrare il widget.

function pp_post_plus_register_widget()
{
    register_widget( 'pp_post_plus_widget' );
}

add_action( 'widgets_init', 'pp_post_plus_register_widget' );

Ed il nostro plugin ora sarà visibile così:


Naturalmente potrai dargli l’aspetto che desideri lavorando sul foglio di stile.

Conclusione

In questo articolo abbiamo iniziato a predisporre il nostro widget. Nel prossimo capitolo vedremo come si comunica correttamente con il database di WordPress in modo da poter recuperare i dati necessari per visualizzare le informazioni che ci interessano.
A presto dunque e… fino a qui è tutto chiaro?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

8 commenti

Trackback e pingback

  1. Articoli settimana 19/02/2012 | Saverio Gravagnola
    [...] sviluppare un widget complesso (1/3) (Your Inspiration [...]
  2. Come sviluppare un widget complesso (2/3) | Your Inspiration Web
    [...] precedenete tutorial abbiamo iniziato a dare forma al widget che stiamo sviluppando. Le due tabs sono pronte per [...]

Lascia un Commento

Current day month ye@r *