WordPress

Widgets WordPress en 2026 — block-based, WP_Widget legacy, blocs personnalisés

8 دقائق للقراءة

Les widgets WordPress sont des composants fonctionnels qui s’insèrent dans les zones widgétisables d’un thème : sidebar, footer, header. Depuis WordPress 5.8 (juillet 2021), l’écran de gestion des widgets repose sur l’éditeur de blocs (block-based widgets editor) ; les widgets classiques basés sur la classe WP_Widget restent fonctionnels mais sont en fin de vie. Avec WordPress 6.9 (décembre 2025) et le Site Editor mature, les thèmes block-based (FSE) remplacent entièrement la zone widgets par des Template Parts et des Patterns.

Modèle actuel : block-based widgets

Dans un thème classique (non-FSE), accéder à Apparence > Widgets. L’éditeur affiche les zones widgétisables déclarées par le thème, et chaque zone se remplit en y déposant des blocs comme dans l’éditeur d’articles.

Blocs principaux disponibles dans la zone widgets :

  • core/search — formulaire de recherche
  • core/latest-posts — derniers articles, options de tri et nombre
  • core/categories — liste de catégories, hiérarchique ou plate
  • core/tag-cloud — nuage de mots-clés
  • core/archives — archives mensuelles ou annuelles
  • core/html — HTML personnalisé brut
  • core/shortcode — pour insérer un shortcode (ex. plugins WooCommerce)
  • core/social-links — icônes réseaux sociaux
  • core/navigation — menu de navigation

Pour réactiver l’ancien écran widgets classique (utile si un plugin n’est pas compatible blocs), ajouter dans functions.php :

add_filter('use_widgets_block_editor', '__return_false');

Déclarer une zone widgétisable

Dans un thème classique, déclarer une sidebar dans functions.php :

function mon_theme_widgets_init() {
    register_sidebar(array(
        'name'          => __('Sidebar principale', 'mon-theme'),
        'id'            => 'sidebar-1',
        'description'   => __('Apparait à droite des articles', 'mon-theme'),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'mon_theme_widgets_init');

Et l’afficher dans un template (ex. sidebar.php) :

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside class="sidebar">
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Créer un widget classique (legacy)

L’API WP_Widget reste fonctionnelle mais déconseillée pour du nouveau code en 2026. Exemple d’un widget « À propos » minimal :

class Mon_Widget_Apropos extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'mon_widget_apropos',
            __('À propos', 'mon-theme'),
            array('description' => __('Présentation courte de l\'auteur', 'mon-theme'))
        );
    }
    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . esc_html($instance['title']) . $args['after_title'];
        }
        echo '<p>' . esc_html($instance['texte']) . '</p>';
        echo $args['after_widget'];
    }
    public function form($instance) {
        $title = $instance['title'] ?? '';
        $texte = $instance['texte'] ?? '';
        printf('<p><label for="%s">Titre</label><input class="widefat" id="%s" name="%s" type="text" value="%s"></p>',
            esc_attr($this->get_field_id('title')), esc_attr($this->get_field_id('title')),
            esc_attr($this->get_field_name('title')), esc_attr($title));
        printf('<p><label for="%s">Texte</label><textarea class="widefat" id="%s" name="%s" rows="4">%s</textarea></p>',
            esc_attr($this->get_field_id('texte')), esc_attr($this->get_field_id('texte')),
            esc_attr($this->get_field_name('texte')), esc_textarea($texte));
    }
    public function update($new_instance, $old_instance) {
        return array(
            'title' => sanitize_text_field($new_instance['title']),
            'texte' => sanitize_textarea_field($new_instance['texte']),
        );
    }
}
add_action('widgets_init', function() { register_widget('Mon_Widget_Apropos'); });

Ce code apparaît dans Apparence > Widgets sous l’onglet « Widgets hérités » et reste utilisable.

Créer un bloc personnalisé (approche 2026)

Pour un nouveau composant en 2026, l’approche recommandée par la documentation WordPress est de créer un bloc Gutenberg, utilisable à la fois dans les articles et dans les zones widgets.

Initialiser un bloc avec @wordpress/create-block :

cd wp-content/plugins
npx @wordpress/create-block apropos-block
cd apropos-block
npm start

L’utilitaire crée la structure standard :

apropos-block/
├── block.json
├── apropos-block.php
├── src/
│   ├── index.js
│   ├── edit.js
│   ├── save.js
│   └── style.scss
└── build/  (généré par npm start)

Le fichier block.json déclare les métadonnées (title, category, attributes) ; edit.js définit l’interface dans l’éditeur ; save.js définit le rendu en HTML statique.

Activer le plugin dans Extensions > Extensions installées. Le bloc apparaît dans le sélecteur de blocs sous la catégorie « Widgets » et peut être inséré dans la zone widgets, dans un Pattern, ou directement dans un article.

Thèmes block-based (FSE) et fin des widgets

Avec un thème FSE (Twenty Twenty-Two et suivants, dont Twenty Twenty-Six), le menu Apparence > Widgets disparaît. Les zones modulaires sont gérées via Apparence > Éditeur > Modèles (Templates) et Modèles partiels (Template Parts).

Pour migrer un widget classique vers un Template Part :

  1. Ouvrir l’éditeur de site (Apparence > Éditeur).
  2. Modifier le Template Part concerné (Footer ou Sidebar).
  3. Insérer les blocs équivalents au widget classique.
  4. Si le widget injectait du PHP dynamique, recréer un bloc dynamique avec register_block_type et un callback render_callback côté serveur.

Exemple de bloc dynamique côté PHP (rendu serveur) :

register_block_type('mon-theme/derniers-clients', array(
    'render_callback' => function($attrs) {
        $clients = wp_get_recent_posts(array(
            'post_type' => 'client',
            'numberposts' => 5,
            'post_status' => 'publish',
        ));
        $output = '<ul class="derniers-clients">';
        foreach ($clients as $client) {
            $output .= '<li><a href="' . esc_url(get_permalink($client['ID'])) . '">' . esc_html($client['post_title']) . '</a></li>';
        }
        $output .= '</ul>';
        return $output;
    }
));

Performance et bonnes pratiques

  • Limiter à trois ou quatre widgets par sidebar — chaque widget supplémentaire ajoute des requêtes SQL à chaque chargement de page.
  • Le widget « Articles récents » interroge la base à chaque rendu ; mettre en cache via un plugin de cache page (LiteSpeed, WP Rocket, W3 Total Cache).
  • Le widget « Nuage de mots-clés » ralentit considérablement le rendu sur des sites avec plus de 1 000 tags ; le remplacer par une liste statique des 20 tags principaux.
  • Les widgets HTML personnalisé (core/html) ne sont pas filtrés par wp_kses et autorisent du HTML brut. Pour un site multi-utilisateurs, restreindre l’usage aux administrateurs.
  • Sur un thème FSE, préférer les Patterns synchronisés (wp_block CPT) aux blocs réutilisables génériques — un Pattern synchronisé se modifie en un endroit et se propage.

Compatibilité plugins

Plugins courants dépendant de widgets en 2026 :

  • WooCommerce (9.x+) — fournit des blocs Cart, Mini-Cart, Featured Product, Filter by Price, etc., qui remplacent les anciens widgets WooCommerce.
  • Contact Form 7 — le shortcode [contact-form-7] reste utilisable via le bloc core/shortcode.
  • Yoast SEO / Rank Math — n’utilisent plus de widgets dans leurs versions courantes.
  • Elementor / Divi / WP Bakery — leurs constructeurs prennent le pas sur les widgets WordPress natifs et gèrent leur propre système modulaire.

Références

Widgets WordPress en 2026 — bloc, classique, et widgets dynamiques

Le concept de widget WordPress a beaucoup evolue. Initialement, les widgets etaient des modules glisses dans les zones widget (sidebar, footer). Depuis WordPress 5.8 (juillet 2021), l ecran Widgets utilise l editeur Gutenberg et les widgets sont devenus des blocs. La transition est partielle : les widgets WP_Widget classiques (Recent Posts, Categories) coexistent avec les blocs natifs.

En 2026, trois familles de widgets coexistent. Blocs natifs Gutenberg (paragraphe, image, liste, latest posts, categories list) sont la voie standard pour les nouveaux themes. Widgets WP_Widget legacy sont conserves pour la compatibilite avec les plugins anciens (Mailchimp signup, popular posts, social icons d agences). Blocs custom de plugins (WooCommerce, Yoast, ACF) ajoutent des fonctionnalites specifiques.

Creer un widget custom en 2026

L approche moderne est de creer un bloc Gutenberg plutot qu un widget WP_Widget. Plus de boilerplate au depart mais plus de flexibilite et compatibilite future. Le scaffold WP-CLI wp scaffold block genere un bloc fonctionnel en 30 secondes.

Pour des cas simples (afficher la liste des 5 derniers articles d une categorie, par exemple), un bloc natif Latest Posts ou Query Loop avec un filtre suffit — pas de developpement necessaire.

Theme blocks vs theme classique

Dans un theme classique (avec sidebar.php), les widgets sont places dans des zones predefinies via register_sidebar() et affiches avec dynamic_sidebar(). Dans un theme bloc (FSE, basé sur theme.json), tout est un bloc — y compris la sidebar et le footer. Les widgets disparaissent au profit des blocs dans des templates editables visuellement.

References

مشاركة