Comment créer un widget dynamique dans WordPress

Les widgets WordPress peuvent vous aider à rendre votre site Web dynamique et à interagir efficacement avec les visiteurs. Il existe de nombreux widgets WordPress disponibles. Mais la création d'un widget WordPress personnalisé vous aide à ajouter le code de votre choix à votre site Web WordPress.

La plupart des sites Web utilisent le widget dynamique pour améliorer l'expérience utilisateur et à d'autres fins. Vous pouvez créer des formulaires de contact, des formulaires de connexion, des cartes d'abonnement, un suivi en direct et bien d'autres fonctionnalités sur votre site Web avec les widgets WordPress.

Créer un widget est facile et cet article vous facilitera la tâche. Alors, sans perdre de temps, commençons à créer des widgets dynamiques dans WordPress.

 

Comment créer un widget dynamique dans WordPress

Dans cet article, nous aborderons ce sujet en trois grandes parties.

 

PARTIE 1 : Comprendre quelques éléments avant de commencer

Avant d'apprendre à créer un widget WordPress dynamique, vous devez savoir certaines choses.

Ces éléments sont liés aux bases des widgets et à la façon dont les widgets dynamiques sont composés de WordPress. N'essayez pas de négliger, d'ignorer ou de sauter cette partie, car elle vous aidera beaucoup.

Considérez cette partie comme le bloc de construction. Cependant, si vous êtes familier avec les widgets, le codage, les plugins, les fonctions, etc. WordPress, vous pouvez l'ignorer.

 

Qu'est-ce qu'un widget WordPress ?

Un widget WordPress est un petit bloc et ce bloc est placé quelque part sur votre page Web WordPress.

Le widget peut être utilisé pour fournir à vos visiteurs un contenu et des fonctionnalités uniques sans rien coder. Un peu de codage WordPress suffira pour créer un widget.

Les fenêtres contextuelles de boîte d'abonnement, les notifications, les fenêtres contextuelles de formulaire de contact, les mises à jour de données en direct, etc. sont des widgets courants utilisés par les webmasters WordPress.

 

Widget statique

Un widget statique n'a aucune interaction avec les utilisateurs car il n'y a qu'une communication unidirectionnelle. Il est utilisé pour fournir des informations non modifiables ou collecter des informations auprès des utilisateurs de manière simple.

 

Widget dynamique

Les widgets dynamiques interagissent efficacement avec les utilisateurs et fournissent des données mises à jour à l'aide de différentes API. En outre, ces widgets collectent des informations et les utilisent de manière dynamique. Une fonction d'automatisation complète est présente dans le widget dynamique.

 

Combinaison

De nos jours, la plupart des sites Web utilisent une combinaison de widgets statiques et dynamiques. Dans ces widgets, ils fournissent des informations statiques ainsi que des fonctionnalités dynamiques. 

 

Choses que vous devez savoir

Vous connaissez maintenant le widget WordPress et ses types. WordPress fournit de nombreux widgets intégrés à ses utilisateurs. Mais si vous souhaitez créer un widget WordPress personnalisé pour votre site, vous aurez peut-être besoin des éléments suivants. 

 

Codage de base

Vous devez être familiarisé avec les bases de la POO (programmation orientée objet) en PHP. 

 

Code d'origine de sauvegarde

Gardez à l'esprit que vous allez jouer avec votre code WordPress. Pour éviter tout problème, vous devez sauvegarder votre code WordPress d'origine.

 

Placement du code

Les widgets WordPress seront développés avec des codes mais où seront placés ces codes ? Vous pouvez placer un code widget dans le thème WordPress Fonctions.php déposer. Ces widgets seront actifs lorsque vous aurez le thème actif.

 

Notions de base sur les widgets WordPress

WordPress fournit le  WP_Widget  classe pour créer des widgets dynamiques. Nous devons étendre cette classe en ajoutant plus de fonctions selon nos besoins pour créer un widget WordPress dynamique. Voici les quatre fonctions de base que nous pouvons ajouter à   WP_Widget   classe.

• Fonction constructeur.
• Pour afficher le contenu du widget, nous créons le  Widget la fonction.
• Pour mettre à jour les paramètres d'un widget, nous utilisons le  Mises à jour la fonction.
• Pour collecter des informations auprès des utilisateurs, nous utilisons le  Forme la fonction.

Dans un widget dynamique, nous utiliserons certaines de ces quatre fonctions de widget. Après cela, nous enregistrerons notre widget en utilisant  registre_widget. 

 

PARTIE 2 : Créons un widget dynamique pour WordPress

Créer un widget dynamique pour WordPress est un long processus. Peut-être que cela vous semblera complexe si vous le faites pour la première fois, mais nous l'avons simplifié pour vous.

Nous avons divisé l'ensemble du processus en quatre étapes simples. Suivez ces quatre étapes simples pour créer un widget dynamique pour WordPress.

 

ÉTAPE 1 : Créer un plugin vide

La première étape consiste à créer un plugin vide pour notre widget WordPress, cette étape est simple et facile. Vous avez peut-être déjà vu cela si vous avez déjà créé des plugins ou des widgets.

Nous créons un plugin car nous allons ajouter un widget dans ce plugin, puis ajouter ce plugin à notre site WordPress.

Pour ce faire, vous devez vous rendre à  /wp-content/plugins/. Lors de la création de ce plugin pour votre site WordPress, vous devrez ajouter un nouveau répertoire, puis le nommer en conséquence.

Vous pouvez le nommer comme vous voulez. Dans votre répertoire, vous devrez créer le   index.php.   Ce fichier d'index aura l'exemple de code suivant.

Tous les détails mentionnés ci-dessus dans le plugin vide seront utilisés par WordPress pour vous montrer les détails de votre plugin dans le panneau d'administration. Après avoir ajouté ce code pour créer un plugin vide. Vous le verrez dans votre panneau d'administration WordPress. Vous devez maintenant activer ce plugin.

 

ÉTAPE 2 : Créez un exemple de code de widget

La deuxième étape consiste à créer un exemple de code de widget. Nous utiliserons les quatre fonctions de base pour étendre la convivialité du  WP_Widget  classe.

class Example_Widget étend WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // Créer l'exemple de widget } } // Enregistrer le widget function register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action( 'widgets_init', 'register_sample_widget' );

Dans la section de code ci-dessus, vous pouvez voir que  WP_Widget est étendu avec l'utilisation de la fonction construct. Et dans la dernière partie du bloc, vous pouvez voir comment nous avons enregistré notre exemple de widget avec  registre_widget. 

Après avoir créé et enregistré l'exemple de widget, nous devons lui ajouter des fonctions dynamiques. On peut utiliser  Widget,  former, ainsi que le  Mises à jour Fonctionne selon nos besoins.

CONSEIL DE BONUS: Pour ajouter des détails de style, vous pouvez utiliser CSS  Classe.   Il peut être ajouté au DOM HTML et il stylisera l'affichage de l'ensemble du widget. 

 

ÉTAPE 3 : Ajouter un widget à la page

Après avoir terminé la partie codage. Vous pouvez ajouter le widget à votre page. N'oubliez pas que nous n'avons encore ajouté aucune information dynamique ou source de données dans notre widget.

Pour le rendre dynamique, nous devons ajouter une source d'information dynamique. Nous le ferons à l'étape suivante. Pour l'instant, nous allons ajouter ce widget personnalisé nouvellement créé à la page du site WordPress.

Pour l'ajouter à la page, vous devez revenir au panneau d'administration de WordPress. Là, vous devrez vous rendre au Aspect option dans la barre latérale. Aller à Apparence>Widgets.

Ici, vous pouvez ajouter votre widget n'importe où sur la page, comme l'en-tête, le pied de page, la barre latérale, etc.

 

ÉTAPE 4: Ajouter des données dynamiques au widget

Maintenant, plus de la moitié du processus est terminé. Il est temps d'ajouter des données dynamiques à votre widget. Vous pouvez obtenir des données dynamiques à partir de n'importe quelle source.

Par exemple, si vous créez un widget pour afficher des cas COVID-19 en direct dans le monde, vous devrez récupérer les données d'un site Web tel que l'OMS ou un site de médias.

Obtenez l'URL de l'information et ajoutez le  clé API à cela. Maintenant en utilisant le Widget fonction avec l'instruction "GET", vous pouvez obtenir les détails en direct du COVID-19 (selon l'exemple).  

clé API avec la demande « GET », saisira et affichera les données ou les informations dans votre widget. Obtenez de l'aide avec les chaînes et les variables JSON pour mettre les données à jour dans votre widget.

 

ÉTAPE 5 : Téléchargement du plugin

Vous pouvez prévisualiser votre widget une fois que vous avez ajouté tous les codes requis.

Maintenant, la dernière étape consiste à télécharger le plugin dans votre panneau d'administration WordPress. Pour cela, vous devez compresser le plugin dans un fichier zip. Allez maintenant à Plugins> Ajouter un nouveau> Télécharger un plug-in et téléchargez votre plugin.

 

PARTIE 3: Obtenez des éléments, des plugins et des widgets à un seul endroit

Créer et ajouter des plugins, des widgets et des éléments semble difficile ? Ne vous inquiétez pas, la bonne nouvelle est que vous n'avez plus rien à faire manuellement de nos jours.

Il y a beaucoup de Thèmes WordPress, plugins et widgets disponibles. La plupart de vos besoins peuvent être satisfaits avec ces widgets personnalisables prêts à l'emploi. Voici la meilleure option disponible.

 

Deep Thème WordPress

La Deep Thème WordPress fourni par The Webnus est l'une des meilleures options pour obtenir les thèmes, éléments, plugins, etc. WordPress premium. Vous pouvez utiliser toutes ces choses pour placer n'importe quel widget dynamique sur votre site Web WordPress. Voici quelques-unes des meilleures fonctionnalités que vous n'obtiendrez qu'avec le deep Thème WordPress par Webnus.

 

Accélérateur

Les codes supplémentaires sur vos pages ont un impact sur la vitesse de chargement de votre page. Mais il n'y a pas de codes supplémentaires à charger avec ce thème. Ce qui accélère le chargement de vos pages. Les éléments CSS et JS sont chargés dans le code source de la page. Cela rend donc le chargement plus fluide avec moins de code.

 

Super réponse

Vous obtiendrez une expérience utilisateur améliorée sur vos pages Web. L'expérience utilisateur améliorée vous aidera à fournir une fonctionnalité de super réponse aux visiteurs de votre site.

 

Facilité d’utilisation

Deep L'importateur de thèmes est très simple et rapide à utiliser. Ce qui vous aide à travailler de manière très confortable et pratique tout en important des thèmes sur votre site WordPress.

 

Prix ​​​​véritable

Vous économiserez beaucoup en utilisant le deep Thème WordPress par Webnus. Tous les thèmes, plugins sont disponibles à un prix réel.

 

Résumons !

Dans cet article, nous avons appris ce qu'est un widget WordPress dynamique et comment le créer.

De l'ajout de données à la création du widget de base, nous avons couvert tous les aspects de l'ensemble du processus. Vous pouvez facilement créer un widget WordPress dynamique si vous suivez les étapes mentionnées dans cet article.

De plus, nous avons appris que vous pouvez obtenir des plugins, des widgets, des éléments, etc. prêts à l'emploi par Webnus. Vous économiserez votre temps et votre argent tout en utilisant le deep Thème WordPress par Webnus.