Come creare widget personalizzato WordPress da codice

31 Marzo 2017Scritto da mario0
Aggiornamento: Questo articolo è stato originariamente pubblicato più di 3 anni fa e aggiornato il 24 Gennaio 2025 per garantire informazioni accurate.

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!

Scritto da mario

Agile web e mobile developer, attraverso il blog mette in campo l'esperienza acquisita quotidianamente sul mondo del lavoro.

Lascia un commento

Your email address will not be published. Required fields are marked *

https://www.fullstacksas.it/wp-content/uploads/2021/11/FULLSTACK-LOGO-MINI-150x131.png

Via Vito Rosa, 7
70127 Bari – IT
P.iva – 08087100726

Gli attrezzi del mestiere

Full Stack Sas – p.iva 08087100726 – Rea n. BA – 603324

Copyright 2019. Bold Themes. All rights reserved.

bt_bb_section_top_section_coverage_image