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 ;)).
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&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 → 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']) ? ' ' : 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&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!
Bell’articolo Ric!!! Ne ho fatto uno proprio l’altro giorno per un nuovo tema… a saperlo aspettavo l’articolo 😛 😛
hihi grazie marco!