Durante lo sviluppo di un tema WordPress, mi capita spesso di dover creare un widget personalizzato per aggiungere contenuti e caratteristiche specifiche al sito.
Esistono diversi plugin che fanno questo per noi, ma per piccole porzioni di codice è sempre meglio evitare installazioni che dipendono da aggiornamenti e bug fixing: meno plugins installiamo su WordPress, più sicuro e controllabile sarà il sito che stiamo costruendo.
Tutto ciò che è necessario fare per creare un widget personalizzato via codice è inserire il codice seguente nel file functions.php del tema WordPress:
// Registrazione del widget
function my_custom_widget() {
register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'my_custom_widget');
// Definizione della classe del widget
class My_Custom_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'my_custom_widget', // ID del widget
__('My Custom Widget', 'text_domain'), // Nome del widget
array('description' => __('A Custom Widget for specific content', 'text_domain')) // Descrizione
);
}
// Funzione per mostrare il contenuto del widget
public function widget($args, $instance) {
echo $args['before_widget'];
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
echo '<p>' . (!empty($instance['content']) ? esc_html($instance['content']) : __('Default Content', 'text_domain')) . '</p>';
echo $args['after_widget'];
}
// Funzione per il backend del widget
public function form($instance) {
$title = !empty($instance['title']) ? $instance['title'] : __('Default Title', 'text_domain');
$content = !empty($instance['content']) ? $instance['content'] : '';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'text_domain'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('content'); ?>"><?php _e('Content:', 'text_domain'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('content'); ?>" name="<?php echo $this->get_field_name('content'); ?>"><?php echo esc_textarea($content); ?></textarea>
</p>
<?php
}
// Salvataggio delle opzioni del widget
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
$instance['content'] = (!empty($new_instance['content'])) ? sanitize_textarea_field($new_instance['content']) : '';
return $instance;
}
}
Abbiamo predisposto il widget che sarà visibile e gestibile nell’area “Widget” di WordPress.
Per mostrare il contenuto dell’area che abbiamo creato è necessario inserire il codice seguente all’interno del tema, in un file qualsiasi (sidebar, index, archive, ecc…):
Il Widget è pronto!