Comment créer des widgets personnalisés sur WordPress 

Widgets WordPressCela peut se faire dans des zones désignées du site web (par ex.une barre latérale (dans un logiciel)) Ajoutez des modules de fonction, tels queTexte, liens de page,bouton socialet d'autres éléments. Par exemple, un formulaire d'abonnement aux actualités peut être placé dans la barre latérale.

Ces widgets améliorent la fonctionnalité du site sans en modifier le contenu principal, ce qui permet d'ajouter des modules tels que des bannières publicitaires, des outils de navigation, etc.

WordPress est livré avec un certain nombre de widgets par défaut, tels que les archives, le calendrier, les catégories, le nuage de tags, les pages, les méta-informations, etc. En outre, les widgets peuvent être personnalisés afin d'inclure un contenu personnalisé, par exemple en intégrant des mises à jour de médias sociaux, des articles récents ou des balises HTML.

Dans cet article, nous montrerons Trois approches Crée des widgets WordPress personnalisés et explique comment ajouter ou supprimer des widgets dans des articles ou des pages spécifiques.

Qu'est-ce qu'un widget WordPress ?

Les widgets WordPress sont des modules de contenu qui peuvent être ajoutés à des zones spécifiques d'un site web, comme la barre latérale ou le pied de page. Ces widgets sont essentiellement des objets PHP qui produisent du HTML et peuvent remplir diverses fonctions, telles que l'affichage des derniers articles, l'intégration des mises à jour des médias sociaux, l'affichage des catégories ou l'ajout de menus personnalisés.

Les gadgets peuvent être réutilisés dans la même zone de gadgets, ce qui offre une certaine souplesse dans la conception du site web. Le nombre de zones de gadgets varie en fonction du thème.

En outre, les widgets WordPress enregistrent les paramètres de configuration dans une base de données, ce qui facilite la gestion de leur comportement et de leur apparence.

Utilisations des widgets WordPress et où les ajouter

Les widgets peuvent améliorer la fonctionnalité de votre site web de nombreuses façons. Par exemple, les Widgets peuvent améliorer la fonctionnalité de votre site web de plusieurs façons :

• Ajoutez un champ de recherche pour permettre aux utilisateurs de trouver plus facilement le contenu.
• Ajoutez un formulaire d'abonnement par courriel pour collecter les informations d'enregistrement de l'utilisateur.
• Affichez les derniers articles ou les contenus les plus populaires pour attirer l'attention des visiteurs.
• Ajoutez des boutons de suivi des médias sociaux ou un flux de contenu en direct montrant les développements récents.
• Affiche les biographies des auteurs pour établir un lien avec les lecteurs.
• Répertoriez les catégories de sites web pour simplifier la navigation.
• Si le site organise des événements, vous pouvez utiliser le widget calendrier pour afficher les dates à venir.
• Pour les sites de commerce électronique, les widgets peuvent permettre de filtrer les produits et d'autres fonctions.

Où ajouter des widgets

Les widgets peuvent être placés dans n'importe quelle "zone de widgets" du site. Les zones de widgets les plus courantes pour la plupart des thèmes sont les suivantesune barre latérale (dans un logiciel)répondre en chantantpieds de pagemais certains thèmes peuvent offrir un espace supplémentaire. Ces zones peuvent toutes être gérées via l'interface des widgets de WordPress, ce qui permet de personnaliser facilement la mise en page du site.

Pourquoi ajouter un widget à une page ou un article WordPress ?

L'ajout de widgets à une page ou à un article WordPress améliore la fonctionnalité de votre site web grâce à un contenu pertinent. Exemple :

• Promouvoir des offres spéciales pour attirer l'attention des utilisateurs.
• Ajoutez un formulaire d'inscription par courrier électronique pour élargir votre base d'abonnés.
• Ajoutez des menus supplémentaires ou des boîtes de recherche pour optimiser la navigation sur le site.

En outre.Les widgets peuvent également être utilisés pour placer des publicités.ou mettre en évidence un nouveau contenu sans interférer avec la navigation normale de l'utilisateur.

Comment fonctionnent les widgets personnalisés dans WordPress

Les widgets personnalisés de WordPress fonctionnent à l'aide de la classe WP Widget, que les développeurs peuvent utiliser pour afficher un contenu dynamique sur leurs sites web. Chaque widget détermine sa sortie et ses paramètres en définissant des fonctions spécifiques.

Pour créer un gadget fonctionnel, les quatre fonctions clés suivantes sont généralement requises :

1. __construct() fonction (math.)
Initialiser le gadget et définir ses paramètres.

2. widget() fonction (math.)
Déterminez ce que le widget montre à l'utilisateur.

3. formulaire() fonction (math.)
Créez un écran de réglages dans l'interface d'administration de WordPress pour configurer les options des widgets.

4. mettre à jour() fonction (math.)
Enregistre les modifications apportées par l'utilisateur aux paramètres et veille à ce que le gadget affiche les informations les plus récentes.

Il y a environ 20 fonctions disponibles dans la classe WP Widget, mais en vous concentrant sur les quatre fonctions principales, vous obtiendrez un widget personnalisé fonctionnel. Pour les fonctionnalités avancées, vous pouvezConsultez la documentation destinée aux développeurs de WordPresspour plus d'informations.

Comment créer un widget personnalisé pour WordPress ?

Dans certains thèmes, l'option d'ajouter des widgets peut ne pas être fournie par défaut. Si cette fonctionnalité est requise, elle peut être obtenue en ajoutant manuellement un code personnalisé. Pour ce faire, vous pouvez utiliser l'option SSH ou SFTP, selon votre préférence. Vous trouverez ci-dessous un exemple deThèmes WordPress par défautCapture d'écran des options de gadgets manquantes (la capture d'écran peut être insérée).

Étape 1 : Activer la prise en charge des widgets

1. Ouvrez le dossier du thème
Connectez-vous au serveur à l'aide de SSH ou de SFTP et accédez au chemin du dossier où se trouve le sujet :
wp-content/themes/votre-dossier-thème/

2. Modifiez le fichier functions.php
Recherchez et ouvrez le thème dans le functions.php Documentation.

3. Ajouter du code pour supporter les widgets
existent functions.php ajoutez le code suivant pour activer la prise en charge des gadgets :

function theme_widgets_init() {
    register_sidebar(array(
        
        'id' => 'sidebar-1',
        
        'before_widget' =&gt; '<div class="widget">',
        'after_widget' =&gt; '</div>',
        'before_title' =&gt; '<h2 class="widget-title">',
        'after_title' =&gt; '</h2>',
    )) ;
}
add_action('widgets_init', 'theme_widgets_init') ;

4. Enregistrer et télécharger des fichiers
Enregistrez le fichier modifié et téléchargez-le sur le serveur via SSH ou SFTP.

Étape 2 : Créer un widget personnalisé

Ensuite, nous allons créer un widget personnalisé qui pourra être affiché dans la nouvelle barre latérale. Après avoir enregistré le code dans la barre latérale, ajoutez le code suivant au fichierdans le fichier functions.php.

class My_Custom_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'my_custom_widget', // Base ID
            __('My Custom Widget', 'text_domain'), // Nom
            array('description' => __('Un widget personnalisé pour la page d'accueil', 'text_domain')) // Args
        ) ;
    }

    public function widget($args, $instance) {
        echo $args['before_widget'] ;
        $title = apply_filters('widget_title', $instance['title']) ;
        if (!empty($title)) {
            echo $args['before_title'] . $title . $args['after_title'] ;
        }
        echo '<p>Bonjour, voici mon widget personnalisé !</p>' ; // Personnalisez ce contenu
        echo $args['after_widget'] ; }
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain') ; ?
        ? &gt;
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}

function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

instructionsCe code définit une nouvelle classe de widgetMon_Widget_personnaliséentre autres :

• widget(): Ce qui sera affiché dans la barre latérale. Personnalisez cette section pour afficher ce que vous voulez.
• formulaire(): Un formulaire qui permet aux utilisateurs de définir des titres pour les widgets.
• mettre à jour(): Sauvegarde des données du formulaire lors de la mise à jour.

fonction (math.)register_my_custom_widget()L'enregistrement de ce widget le rend disponible dans la rubriqueétat extérieur>widgetsDisponible en.

Étape 3 : Ajouter une barre latérale au modèle de thème

Nous devons maintenant modifier le fichier de modèle (par exempleindex.htmlpeut-êtremaison.html) pour afficher la nouvelle barre latérale. Ces fichiers se trouvent généralement dans le dossier principal du thème.

1. Ouvrez index.html ou home.html dans le dossier du thème.

2) Remplacez le contenu du fichier par le code suivant pour vous assurer que les espaces réservés de la barre latérale dynamique sont ajoutés à l'endroit où vous souhaitez qu'ils apparaissent :

<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
    <!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
    <h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Postes</h1>
    <!-- /wp:heading -->
    
    <!-- wp:pattern {"slug":"twentytwentyfour/posts-3-col"} /-->

    <!-- Dynamic Sidebar -->
    <!-- wp:dynamic-sidebar {"id":"custom-sidebar"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

instructionsCe code ajoute un en-tête, une zone de contenu principal et un pied de page. Le contenu clé ajouté ici est la barre latérale dynamique.
()Il affiche les barres latérales enregistrées et les widgets personnalisés.

Étape 4 : Vérifier les changements dans wp-admin

Après avoir effectué les étapes ci-dessus :

1) Allez dans la zone d'administration WordPress de l'applicationApparence > Widgets.

2. devrait voirPersonnalisation de la barre latérale.entre autres"Mes widgets personnalisésest disponible.

3. ajoutez le widget à la barre latérale personnalisée, personnalisez le titre et enregistrez le widget.

Après avoir sauvegardé, allez dans la partie frontale du site et actualisez pour vérifier que le widget s'affiche comme prévu.

Comment insérer des widgets dans WordPress ?

Pour ajouter des widgets dans WordPress, vous pouvez suivre les étapes ci-dessous :

1. accès à l'interface du widget
Depuis le Centre d'information WordPress, naviguez versApparence → Widgets. L'écran du gestionnaire de widgets s'ouvre.

2. sélection de l'emplacement du widget
Une fois que vous êtes dans l'écran des widgets, vous verrez différentes zones où vous pouvez ajouter des widgets. Ces zones dépendent de votre thème WordPress. Cliquez sur la flèche située à côté de la zone que vous souhaitez modifier pour la développer.

3. ajouter du contenu à l'aide de blocs
Après avoir sélectionné la zone de widget, vous pouvez utiliser la zone familièreéditeur de blocsAjouter du contenu. Cliquez simplement suricône du signe plusInsérez instantanément le bloc, en choisissant parmi les blocs WordPress intégrés ou les blocs personnalisés dans le plugin. Une fois ajouté, vous pouvez ajuster les paramètres du bloc, tels que le nombre d'articles à afficher ou les options de l'image vedette.

4. enregistrer les modifications
Une fois que vous êtes satisfait de l'apparence de tous les contenus, cliquez sur le bouton"Renouvellementpour enregistrer les modifications. Le widget prend alors immédiatement effet sur le site web.

Si vous ne voyez pasWidgets, il se peut que vous utilisiez un thème de bloc WordPress, qui est accessible via le menuRédacteur du siteConception du traitement.

Comment supprimer les widgets de WordPress ?

Pour cet exemple, nous pouvons supprimer le widget ajouté précédemment. Sélectionnez le widget bloc, cliquez sur le menu à trois points dans la barre d'outils et choisissez "supprimer"suffira.

Comment gérer les widgets à l'aide du personnalisateur de WordPress ?

Les widgets peuvent également être gérés via le Customizer de WordPress afin que les modifications puissent être visualisées en temps réel sur le site. Voici comment procéder :

• Naviguer vers le tableau de bord de WordPressétat extérieur→personnalisation.

• Dans la barre latérale du Customiser, sélectionnez"Widgets".

• Sélectionnez l'emplacement du widget dans la liste des options disponibles (vous ne verrez que l'emplacement visible sur la page en cours de prévisualisation).

• Ajoutez ou modifiez des widgets à l'aide de l'interface fournie.

• Vous pouvez cliquer sur l'aperçu en direct sur la pageDes icônes en forme de crayon permettent de personnaliser directement des widgets spécifiques.

Comment afficher les widgets WordPress sur un article ou une page spécifique ?

Par défaut, tout widget ajouté au site sera affiché dans toutes les zones où un espace est disponible pour le widget. Par exemple, si un widget est placé dans la barre latérale principale, il s'affichera sur toutes les pages dotées d'une barre latérale.

Cependant, si vous ne souhaitez afficher des widgets que sur un contenu spécifique, tel que des articles, des pages, voire des catégories ou des étiquettes.

Si des blocs sont utilisés, des plugins qui ajoutent des conditions de visibilité peuvent être utilisés (par ex."Visibilité du bloc" ) contrôlent l'endroit où ils apparaissent.

Après avoir installé et activé le plugin, accédez à l'écran des widgets et trouvez le widget que vous souhaitez personnaliser.

Lorsque vous modifiez ce widget, un nouveau widget apparaît dans les paramètres de la barre latérale.Section visibilité.

• Dans cette zone, vous pouvez définir des règles pour afficher ou masquer le widget, par exemple en ne l'affichant que sur des articles spécifiques.

rendre un verdict

La création de widgets WordPress personnalisés permet d'ajouter des fonctionnalités spécifiques à un site web, telles que l'affichage personnalisé du contenu, l'amélioration de la navigation ou des outils personnalisés tels que la dynamique des médias sociaux ou une barre de recherche.