Come trasformare Nivo Slider in un widget per WordPress?

In questo tutorial andremo a vedere come integrare Nivo Slider in un sito WordPress, trasformandolo in un widget. Potremo gestire tutte le funzionalità di questo plugin direttamente dall’amministrazione di WordPress senza dover, in futuro, mettere nuovamente mano al codice. Darò per scontato che tu abbia già seguito il corso sui widget scritto da Maurizio. Tutto pronto? Iniziamo!

Come ben sai i widget vengono utilizzati per la visualizzazione di contenuti dinamici all’interno della sidebar di WordPress, come gli ultimi commenti oppure le ultime news. Se non integrati nel tema utilizzato, vengono trattati come plugin, per questo la parte iniziale, ovvero l’intestazione, sarà identica a quella di un plugin, così come l’installazione e la gestione.

Per prima cosa creiamo una cartella, in wp-content->plugin, chiamata nivowidget più due sottocartelle js e css oltre al file principale core.php.

nivowidget-main

Successivamente scarichiamo il plugin jQuery dal sito ufficiale http://dev7studios.com/nivo-slider/ e copiamo, all’interno della cartella creata in precedenza, la cartella themes, il file nivo-slider.css in css ed il file jquery.nivo.slider.js in js.

nivowidget-folder

Apriamo core.php ed aggiungiamo l’intestazione del widget.

<?php
/*
Plugin Name: YIW Nivoslider
Description: Grazie a questo widget potrai utilizzare Nivo Slider all'interno del tuo sito in WordPress.
Version: 1.0
License: GPL 2.0
Author: WPinProgress
*/

Poiché utilizzeremo le thumbnail di WordPress come immagini, dobbiamo dichiarare un formato personalizzato con la funzione add_image_size, avente 950px di larghezza e 400px di larghezza.
Nella seconda parte di questa guida vedremo come gestire anche questa funzione tramite il form del widget.

add_image_size( 'nivo', 950,400, TRUE );

Per la creazione del widget, dobbiamo dichiarare un’estensione della classe WP_Widget, nivoslider_widget.

class nivoslider_widget extends WP_Widget
{
  public function __construct()
  {
  }
  public function form()
  {
  }
  public function widget()
  {
  }
  public function update()
  {
  }
}

Andiamo ad aggiungere, all’interno del primo metodo, i parametri fondamentali del nostro widget, nome, titolo e descrizione:


public function __construct()
{
  parent::WP_Widget( "yiw_nivoslider", "YIW Nivoslider", array("description" => "Questo widget visualizzerà gli ultimi tweets."));
}

Successivamente impostiamo i campi del form per la gestione del widget, per il momento accontentiamoci solamente del titolo del widget e della selezione del template da utilizzare.

public function form( $instance )
{
  $defaults = array(
  'theme' => 'default',
  'title' => 'Slideshow',
 
  );
      
  $instance = wp_parse_args( (array) $instance, $defaults );
  $themes = array( "default" , "bar" ,"dark" ,"light" );
 
?>  
  <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>">
      Inserisci il titolo del widget:
    </label>
    <input class="widefat" 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>
    <label for="<?php echo $this->get_field_id( 'number' ); ?>">
      Tema da utilizzare:
    </label>    
    <select class="widefat" name="<?php echo $this->get_field_name( 'theme' ); ?>" id="<?php echo $this->get_field_id( 'theme' ); ?>">
      <?php
      foreach ($themes as $theme)
      {
        if ($theme == $instance['theme'] )
        { 
          echo "<option value='".$theme."' selected='selected' >".$theme."</option>"; 
        } else
        { 
          echo "<option value='".$theme."'>".$theme."</option>"; };
        }
      ?>
    </select>
  </p>
<?php
}

Una piccola considerazione sul codice, ho preferito caricare la lista dei template di Nivo Slider dentro ad un array, così da rendere il codice più snello. Ed ecco un’anteprima del form.

nivowidget-form

Con il metodo UPDATE, salviamo i dati del form.


public function update( $new_instance, $old_instance )
{
  $instance = $old_instance;
  $instance['theme'] = strip_tags( $new_instance['theme'] );
  $instance['title'] = strip_tags( $new_instance['title'] );
  return $instance;
}

Per ultima cosa occupiamoci della gestione dell’output, tramite il metodo widget, limitandoci ad utilizzare Nivo Slider per visualizzare i post di WordPress.

public function widget( $args, $instance )
{
  extract( $args );
  echo $before_widget;
  $title = apply_filters( 'widget_title', $instance['title'] );
  if ( $title ) {
    echo $before_title.$title.$after_title;
  }
  $file_dir = WP_PLUGIN_URL."/nivowidget";
  wp_enqueue_style( "nivo-slider", $file_dir."/css/nivo-slider.css", false, "1.0", "all" );
  wp_enqueue_style( "$instance['theme']", $file_dir."/themes/".$instance['theme']."/".$instance['theme'].".css", false, "1.0", "all" );
  wp_enqueue_script( 'nivo.slider', $file_dir.'/js/jquery.nivo.slider.js',array('jquery'),'1.0', true  );
  wp_enqueue_script("jquery");
?>

Con la variabile $instance, andremo a richiamare il valore salvato in precedenza con il form, per la selezione del template da utilizzare. Infatti è presente nella funzione wp_enqueue_style, utilizzata per caricare il foglio di stile. Invece, nella variabile $file_dir, caricheremo il percorso della cartella del widget, insieme al nome.


<!-- START SLIDER -->

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){ $('#slider').nivoSlider(); });
// ]]></script>

È preferibile aggiungere il codice javascript di Nivo Slider insieme al resto, così da poter gestire gli effetti utilizzando il form, ma questo lo vedremo nella seconda parte di questa lezione. Subito dopo aggiungiamo il loop di WordPress.

<!-- SLIDER BEGINS -->
<section class="theme-<?php echo $instance['theme']; ?> slider-wrapper">
  <!-- NIVOSLIDER BEGINS -->
  <div id="slider" class="nivoSlider">
    <?php
    $query = new WP_Query( array ('post_type' => 'post', 'posts_per_page' => '5' ));
    while( $query->have_posts() ) : $query->the_post();
      if ( has_post_thumbnail() ) {
        the_post_thumbnail('nivo',array('title' => '<h4>'.get_the_title().'</h4>' ));
      }  
    endwhile;
    wp_reset_postdata();
    ?>
  </div>
  <!-- NIVOSLIDER END -->
</section>
<!-- SLIDER END -->
<?php
echo $after_widget;
}
}

Come ultima cosa andiamo a registrare il widget e ad aggiungere i tag di chiusura.

 function add_nivoslider_widget() {   register_widget( 'nivoslider_widget' ); } add_action( 'widgets_init', 'add_nivoslider_widget' ); ?>

Ecco il codice completo.

<?php

/*
Plugin Name: YIW Nivoslider
Description: Grazie a questo widget potrai utilizzare NivoSlider all'interno del tuo sito in WordPress.
Version: 1.0
License: GPL 2.0
Author: WPinProgress
*/

add_image_size('nivo', 950, 400, TRUE);

class nivoslider_widget extends WP_Widget
{

  public function __construct()
  {
    parent::WP_Widget("yiw_nivoslider", "YIW Nivoslider", array("description" => "Questo widget visualizzera Nivoslider."));
  }

  public function form($instance)
  {
    $defaults = array(
      'theme' => 'default',
      'title' => 'Slideshow',

    );

    $instance = wp_parse_args((array)$instance, $defaults);
    $themes = array("default", "bar", "dark", "light");

    ?>

  <p>

      <label for="<?php echo $this->get_field_id('title'); ?>">
          Inserisci il titolo del widget:
      </label>
      <input class="widefat" 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>

      <label for="<?php echo $this->get_field_id('number'); ?>">
          Tema da utilizzare:
      </label>

      <select class="widefat" name="<?php echo $this->get_field_name('theme'); ?>"
              id="<?php echo $this->get_field_id('theme'); ?>">
        <?php
        foreach ($themes as $theme) {
          if ($theme == $instance['theme']) {
            echo "<option value='" . $theme . "' selected='selected' >" . $theme . "</option>";
          } else {
            echo "<option value='" . $theme . "'>" . $theme . "</option>";
          }
          ;
        }
        ?>
      </select>

  </p>

  <?php

  }

  public function update($new_instance, $old_instance)
  {
    $instance = $old_instance;

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

    return $instance;

  }


  public function widget($args, $instance)

  {
    extract($args);

    echo $before_widget;

    $title = apply_filters('widget_title', $instance['title']);
    if ($title) {
      echo $before_title . $title . $after_title;
    }
    $file_dir = WP_PLUGIN_URL . "/nivowidget";
    wp_enqueue_style("nivo-slider", $file_dir . "/css/nivo-slider.css", false, "1.0", "all");
    wp_enqueue_style("default", $file_dir . "/themes/" . $instance['theme'] . "/" . $instance['theme'] . ".css", false, "1.0", "all");
    wp_enqueue_script('nivo.slider', $file_dir . '/js/jquery.nivo.slider.js', array('jquery'), '1.0', true);
    wp_enqueue_script("jquery");

    ?>

  <!-- START SLIDER -->

  <script type="text/javascript">
      jQuery(document).ready(function ($) { $('#slider').nivoSlider(); });
  </script>

  <!-- SLIDER BEGINS -->
  <section class="theme-<?php echo $instance['theme']; ?> slider-wrapper">
      <!-- NIVOSLIDER BEGINS -->
      <div id="slider" class="nivoSlider">
        <?php
        $query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => '5'));
        while ($query->have_posts()) : $query->the_post();
          if (has_post_thumbnail()) {
            the_post_thumbnail('nivo', array('title' => '<h4>' . get_the_title() . '</h4>'));
          }
        endwhile;
        wp_reset_postdata();
        ?>
      </div>
      <!-- NIVOSLIDER END -->
  </section>
  <!-- SLIDER END -->

  <?php
    echo $after_widget;
  }
}

function add_nivoslider_widget()
{
  register_widget('nivoslider_widget');
}

add_action('widgets_init', 'add_nivoslider_widget');

?>

Andando nell’amministrazione di WordPress, all’interno della sezione Plugins, troveremo il nostro widget da attivare.

nivowidget-admin

Attiviamolo e passiamo nella pagina di gestione dei widget di WordPress.

nivowidget-widget

Una volta creati tutti i post da visualizzare nello slider, dovremo ottenere qualcosa di simile. Possiamo scegliere tra i vari template, per ottenere una visualizzazione diversa.

nivowidget-final

Qui puoi scaricare il widget pronto per essere installato ed utilizzato nel tuo sito.
Nella lezione successiva andremo a completare il widget, aggiungendo nel form i campi di gestione degli effetti di Nivo Slider, oltre alla possibilità di impostare la grandezza dello slider.

Download
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

Appassionato da sempre di informatica, da qualche anno è anche la mia professione, dopo aver abbandonato un posto fisso per lavorare come freelance. Mi occupo principalmente della progettazione e sviluppo web. Passo le giornate perennemente online, tra righe di codice, progetti su Photoshop e tazzine di caffè.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

7 commenti

  1. Hero of the day

Trackback e pingback

  1. Raccolta di Slide per web designer #1 | L'isola Felice
    [...] anche testi che si animano con la slide. Da sottolineare che Nivo Slider, grazie al tutorial di YIW è …

Lascia un Commento

Current day month ye@r *