Creare un semplice Twitter Widget plugin per wordpress

Oggi vediamo come realizzare un semplice widget per WordPress dove andremo a  recuperare i nostri ultimi pensieri da twitter. Un ottimo strumento da poter usare all’interno del vostro blog!

DEMO (Vedi il footer di targetweb ;)).

DOWNLOAD >>

Codice da incollare alla fine di funtions.php, o in alternativa, posizionate il plugin su un file esterno (es. twitter.php) e richiamatelo tramite include nel file functions.php.

Inizializzazione del Widget

// =TARGETWEB - TWITTER WIDGET = //
// = Need more Plugins? Visit: targetweb.it =//

class twitter extends WP_Widget {
	function twitter() {
	//Creo il widget nella lista degli elementi disponibili nel backend

		$widget_ops = array('classname' => 'Twitter', 'description' => 'Visualizza i tuoi ultimi update di Twitter tramite questo comodo Widget' );
		$this->WP_Widget('widget_Twidget', 'Targetweb → Twitter', $widget_ops);
	}

Questa porzione di codice inizializza il plugin/widget che andiamo a creare. Definiamo la descrizione  e il titolo da visualizzare nella lista dei widget disponibili.

Visualizzazione front-end

	function widget($args, $instance) {
	// Inizio Visualizzazione

                //Inizializzo le variabili che mi servono
		extract($args, EXTR_SKIP);
		echo $before_widget;
		$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
		$account = empty($instance['account']) ? ' ' : apply_filters('widget_account', $instance['account']);
		$show = empty($instance['show']) ? ' ' : apply_filters('widget_show', $instance['show']);
		$follow = empty($instance['follow']) ? ' ' : apply_filters('widget_follow', $instance['follow']);

		 // Output
		echo $before_widget ;

		// Frontend
		echo '<div id="twitter"> <h4><span>'.$title.'</span></h4>';
		echo '<ul id="twitter_update_list"><li></li></ul>
		      <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>';
		echo '<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/'.$account.'.json?callback=twitterCallback2&amp;count='.$show.'"></script>';
		echo '</div>';

		echo $after_widget;
	}

In questa parte di codice mi preme sottolineare l’importanza dei tag:

– $before_widget – In pratica, molto banalmente rappresenta il div dell’elemento che andiamo a creare (es. <div class=”widget my” id=”my-widget-1″>)

– $after_widget – Crea il tag di chiusura del contenitore.

Questi due tag vanno inseriti SEMPRE. Detto questo abbiamo poi la struttura del frontend, a cui possiamo mettere mano per strutturare il layout e lo stile dei dati recuperati. Come vedete ho usato due js e la documentazione api di Twitter.

Funzione di aggiornamento Widget e form backend

function update($new_instance, $old_instance) {
	//Salva modifiche

		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['account'] = strip_tags($new_instance['account']);
		$instance['follow'] = strip_tags($new_instance['follow']);
		$instance['show'] = strip_tags($new_instance['show']);
		return $instance;

	}

	function form($instance) {
	//Backend

		$instance = wp_parse_args( (array) $instance, array('account'=>'riccardo_mel', 'title'=>'Twitter Widget', 'show'=>'3' ) ); //Account di base che appare quando carichi il widget
		$title = strip_tags($instance['title']);
		$show = strip_tags($instance['show']);
		$follow = strip_tags($instance['follow']);
		$account = strip_tags($instance['account']);
?>
<p>
  <label for="<?php echo $this->get_field_id('account'); ?>"><?php  _e('ID del vostro Account Twitter ')?>:
    <input class="widefat" id="<?php echo $this->get_field_id('account'); ?>" name="<?php echo $this->get_field_name('account'); ?>" type="text" value="<?php echo attribute_escape($account); ?>" />
  </label>
</p>
<p>
  <label for="<?php echo $this->get_field_id('title'); ?>"><?php  _e('Titolo')?>:
    <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" />
  </label>
</p>

<p>
  <label for="<?php echo $this->get_field_id('show'); ?>"><?php  _e('Quanti tweet visualizzo?')?>:
    <input class="widefat" id="<?php echo $this->get_field_id('show'); ?>" name="<?php echo $this->get_field_name('show'); ?>" type="text" value="<?php echo attribute_escape($show); ?>" />
  </label>
</p>

<?php
	}

}

//Registra il widget
register_widget('twitter');

Nella parte finale del codice troviamo innanzitutto la funzione update per aggiornare le modifiche. Molto interessante anche questo parametro:

$instance = wp_parse_args( (array) $instance, array('account'=>'riccardo_mel', 'title'=>'Twitter Widget', 'show'=>'3' ) );

In pratica grazie a questo code possiamo definire nell’array i valori di default (base) che appaiono quando viene inserito il widget. In seconda battuta troviamo il form del backend dove l’utente andrà a inserire i suoi valori e parametri per gestire il widget. Ovviamente visto in senso più “astratto” se modificate questa sezione dovrete poi creare le relative istanze e variabili necessarie a un corretto funzionamento.

Con l’ultima parte di codice infine:

//Registra il widget
register_widget('twitter');

registriamo il widget per un corretto funzionamento.

Codice completo

// =============================== TARGETWEB - TWITTER WIDGET ======================================//
// =============================== Need more Plugins? Visit: targetweb.it ======================================//

class twitter extends WP_Widget {
	function twitter() {
	//Creo il widget nella lista degli elementi disponibili nel backend
		$widget_ops = array('classname' => 'Twitter', 'description' => 'Visualizza i tuoi ultimi update di Twitter tramite questo comodo Widget' );
		$this->WP_Widget('widget_Twidget', 'Targetweb &rarr; Twitter', $widget_ops);
	}

	function widget($args, $instance) {
	// Inizio Visualizzazione

                //Inizializzo le variabili che mi servono
		extract($args, EXTR_SKIP);
		echo $before_widget;
		$title = empty($instance['title']) ? '&nbsp;' : apply_filters('widget_title', $instance['title']);
		$account = empty($instance['account']) ? '&nbsp;' : apply_filters('widget_account', $instance['account']);
		$show = empty($instance['show']) ? '&nbsp;' : apply_filters('widget_show', $instance['show']);
		$follow = empty($instance['follow']) ? '&nbsp;' : apply_filters('widget_follow', $instance['follow']);

		 // Output
		echo $before_widget ;

		// Frontend
		echo '<div id="twitter"> <h4><span>'.$title.'</span></h4>';
		echo '<ul id="twitter_update_list"><li></li></ul>
		      <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>';
		echo '<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/'.$account.'.json?callback=twitterCallback2&amp;count='.$show.'"></script>';
		echo '</div> </div>';

		echo $after_widget;
	}

	function update($new_instance, $old_instance) {
	//Salva modifiche

		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['account'] = strip_tags($new_instance['account']);
		$instance['follow'] = strip_tags($new_instance['follow']);
		$instance['show'] = strip_tags($new_instance['show']);
		return $instance;

	}

	function form($instance) {
	//Backend

		$instance = wp_parse_args( (array) $instance, array('account'=>'riccardo_mel', 'title'=>'Twitter Widget', 'show'=>'3' ) ); //Account di base che appare quando carichi il widget
		$title = strip_tags($instance['title']);
		$show = strip_tags($instance['show']);
		$follow = strip_tags($instance['follow']);
		$account = strip_tags($instance['account']);
?>
<p>
  <label for="<?php echo $this->get_field_id('account'); ?>"><?php  _e('ID del vostro Account Twitter ')?>:
    <input class="widefat" id="<?php echo $this->get_field_id('account'); ?>" name="<?php echo $this->get_field_name('account'); ?>" type="text" value="<?php echo attribute_escape($account); ?>" />
  </label>
</p>
<p>
  <label for="<?php echo $this->get_field_id('title'); ?>"><?php  _e('Titolo')?>:
    <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" />
  </label>
</p>

<p>
  <label for="<?php echo $this->get_field_id('show'); ?>"><?php  _e('Quanti tweet visualizzo?')?>:
    <input class="widefat" id="<?php echo $this->get_field_id('show'); ?>" name="<?php echo $this->get_field_name('show'); ?>" type="text" value="<?php echo attribute_escape($show); ?>" />
  </label>
</p>

<?php
	}

}

register_widget('twitter');

Vedi codice commentato per seguire step by step la costruzione del widget. Come vedete la struttura appare un po’ spoglia, tuttavia tramite CSS possiamo facilmente stilizzare il nostro widget come meglio preferiamo =).

Spero vi sia utile! Condividete e commentate se vi è servito! a presto con la nuova “lezione” dedicata a WordPress, e a Settembre non perderti tantissime novità dedicate a questo noto CMS!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Titoli e intestazioni Responsive tramite script jQuery

Titoli e intestazioni Responsive tramite script jQuery