Créer un widget dynamique dans WordPress en dix minutes –

Avez-vous essayé de trouver des fonctionnalités dans un but spécifique dans WordPress mais n'avez-vous pas réussi à trouver un plugin ou un widget qui fasse votre travail? Cet article explique comment créer un widget WordPress, même si vos connaissances en matière de programmation sont limitées.

Les widgets WordPress sont des blocs de code – statiques, dynamiques ou une combinaison des deux – pouvant être ajoutés à une zone spécifique du logiciel. votre site WordPress. Il existe de nombreux widgets intégrés dans WordPress – tels que le nuage de tags et les catégories -, mais cet article vous aide à créer un widget à partir de zéro dans un bref délai. Il faudra probablement plus de temps pour terminer la lecture de cet article que pour créer le widget une fois que vous avez acquis les connaissances nécessaires!

À titre d'illustration, nous envisageons de créer un widget avec un contenu dynamique sous la forme de données en temps réel de . ] matchs de cricket . Le but de la création de contenu dynamique est de vous familiariser avec les différentes fonctions associées aux widgets WordPress.

Pré-requis

Avant de commencer tout code, assurez-vous que sauvegardez votre code WordPress comme vous pouvez vous retrouver avec un écran blanc de la mort. Vous pouvez également explorer le contrôle de version pour WordPress avec Git .

De plus, il est recommandé de connaître un peu la POO en PHP avant de créer un widget. 19659003] Ce didacticiel a été créé sur la version 4.9.8 de WordPress.

Où placer le code?

Avant de discuter des nuances inhérentes au développement d’un widget WordPress, examinons où conserver le code. La réponse à cette question réside dans le but de développer le widget. Si vous souhaitez que le widget apparaisse uniquement dans un thème spécifique, vous pouvez placer le code dans le fichier functions.php du thème. Cependant, cela rend le widget accessible uniquement si le thème est actif.

Ce tutoriel se concentre sur la création d'un widget accessible via les thèmes de votre site Web. Par conséquent, nous créerions un nouveau plugin, qui hébergerait le widget qui afficherait une liste des correspondances de cricket en direct issues d'une API.

Pour créer un widget dans WordPress, vous devez étendre la classe WP_Widget . Dans votre classe de widgets, vous pouvez créer une liste de fonctions:

• la fonction constructeur
• la fonction widget pour afficher le contenu du widget
• la fonction de forme si vous besoin de définir un formulaire qui prend en entrée
• la fonction update si vous devez mettre à jour les paramètres du widget.

Dans l'exemple d'affichage des flux de cricket, nous devons définir uniquement les deux premiers. les fonctions. De plus, une fois que nous avons créé la classe de widgets, nous devons l'enregistrer avec la fonction register_widget .

Passons maintenant à la création d'un plugin de base dans WordPress, puis utilisons une API pour générer du contenu dynamique. .

Avant de créer le widget, vous devez créer un plug-in vide. Rendez-vous sur le / wp-content / plugins / et créez un nouveau répertoire avec le slug du nom de votre plugin. Dans ce répertoire, créez un fichier index.php avec le contenu suivant:

Définition d'un plug-in vide

Il s'agit essentiellement d'un fichier PHP vierge avec des commentaires, comme suggéré dans le codex de WordPress. page sur la création d'un nouveau plugin . Ces commentaires sont lus par WordPress lorsqu’ils affichent des informations sur le plug-in sur WP Admin.

Une fois que vous avez créé le plug-in vide avec commentaires, vous pouvez voir que votre plug-in est actif dans la liste des plug-ins sur WP Admin. Activez le plug-in avant de poursuivre.

Liste des plug-ins sur WP Admin après la création d'un plug-in vide

Définition d'un widget dans le plug-in

L'étape suivante consiste à créer un exemple de code de widget. Comme indiqué précédemment, nous étendrions la classe WP_Widget . Après avoir défini la classe, nous allons enregistrer le widget à l’aide de la méthode register_widget :

 La classe My_Custom_Widget’étend WP_Widget {

    fonction publique __construct () {
    }

    widget de fonction publique ($ args, $ instance) {
        // Définir le widget
    }
}
// enregistrer le widget
function my_register_custom_widget () {
    register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Maintenant que notre code squelette est prêt, remplissons le constructeur et le widget :

 public function __construct () {
    // Définir le constructeur

    $ options = array (
        'classname' => 'custom_livescore_widget',
        'description' => 'Un widget de score en direct',
    )

    parent :: __ construct (
        'live_score_widget', 'Widget Score Live', $ options
    )
}

Le constructeur peut être étendu à partir du constructeur parent. Dans les options, nous pouvons également fournir une classe CSS qui est ajoutée à l’élément de widget entier dans le DOM HTML lorsqu’elle est affichée. Définissons ensuite les options d’affichage du widget:

 widget de fonction publique ($ args, $ instance) {
    // Garde cette ligne
    echo $ args ['before_widget'];

    echo $ args ['before_title']. apply_filters ('widget_title', 'Correspondances Live Criket'). $ args ['after_title'];
    echo 'Hello, World!';

    // Garde cette ligne
    echo $ args ['after_widget'];
}

Dans la classe widget nous définissons ce qui doit être affiché dans le widget. Tout d'abord, nous ajoutons un titre de widget, "Live Cricket Matches", puis un simple "Hello, World!"

. Une fois le code sauvegardé, revenons à Apparence> Widgets dans WP Admin. et ajoutez le widget nouvellement créé à une partie de la page.

Ajout d'un widget à travers WP Admin

Une fois le widget ajouté, vous pouvez actualiser votre page d'accueil et vérifier si le Le widget est apparu.

Le widget Hello World sur la page d'accueil

Vous remarquerez peut-être que la classe dans laquelle nous avons défini le widget a été ajoutée à l'élément de widget. Vous pouvez modifier le style du widget si nécessaire. Si cela vous intéresse, consultez ce tutoriel sur la façon de personnaliser le style d'un thème WordPress .

Ajout d'une option de score en direct

Jusqu'à présent, nous avons créé un widget associé à un plugin, l’a enregistré sur WP Admin et l’a affiché sur notre page d’accueil. La prochaine étape consiste à obtenir le résultat en direct d’une API.

À titre de démonstration, nous allons utiliser l’API de CricAPI . Vous pouvez faire 100 demandes d'API par jour dans le cadre du plan gratuit. Une fois inscrit, vous recevez une clé API, nécessaire lorsque vous faites des demandes sur le site. Nous utiliserons l'option «Nouvelle API de correspondance» pour obtenir les données de notre widget.

Une demande GET doit être envoyée à l'API de correspondance avec le paramètre apikey . obtenir une liste de correspondances. Une fois que vous avez votre clé d'API, vous pouvez vérifier que l'API fonctionne correctement en accédant à l'URL suivante de votre navigateur:

 http://cricapi.com/api/matches?apikey=api_key

La ​​réponse est une chaîne JSON, avec la liste des correspondances et des métadonnées. Nous pouvons émuler la demande et extraire les données en PHP en modifiant notre fonction widget :

 widget fonction publique ($ args, $ instance) {

// les arguments de widget avant et après sont définis par des thèmes
echo $ args ['before_widget'];

echo $ args ['before_title']. apply_filters ('widget_title', 'Correspondances Live Criket'). $ args ['after_title'];

// C'est ici que vous exécutez le code et affichez le résultat
$ api_key = 'ONkuR4grRDFyUzOEYoSzeUQolbx2'
$ api_url = "http://cricapi.com/api/matches?apikey=". $ api_key;

// initier curl
$ ch = curl_init ();
curl_setopt ($ ch, CURLOPT_SSL_VERIFYPEER, false);

// Renverra la réponse. Si false, affiche la réponse.
curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, true);
// Définir l'URL
curl_setopt ($ ch, CURLOPT_URL, $ api_url);
// Execute
$ result = curl_exec ($ ch);
// Fermeture
curl_close ($ ch);

// Videra un json - vous pouvez enregistrer dans variable et utiliser le json
$ cricketMatches = json_decode ($ result);

foreach ($ cricketMatches-> correspond à $ item) {
    if ($ item-> matchStarted == true) {
        echo $ item -> {'team-1'}, 'vs', $ item -> {'team-2'}, '
';
    }
}

echo $ args ['after_widget'];

}

Voici les étapes que nous suivons dans le code:

• nous envoyons une demande à l'URL via cURL, désactivant l'option sécurisée (notez que l'URL cricAPI est http )
• nous économisons la réponse JSON après le décodage dans la variable $ cricketMatches
• nous obtenons une liste des correspondances et affichons celles qui ont déjà commencé.

Regardons maintenant la page d'accueil pour voir si la les données sont affichées.

Widget affichant la liste des matchs pour le cricket sur la page d'accueil

Les données peuvent être explorées plus en détail pour afficher des options spécifiques. Par exemple, vous pouvez obtenir le score en envoyant une demande à l'API de score de cricket avec votre clé d'API et votre ID de correspondance.

Création et partage du plug-in

Voilà. Vous avez créé avec succès le widget qui répertorie les matchs de cricket en direct! Vous pouvez emballer le plugin en créant un fichier zip du répertoire live-score-custom-plugin puis en le téléchargeant dans Plugins> Ajouter un nouveau> Upload Plugin .

Pensées finales

Dans ce didacticiel, nous avons présenté les principes de base de la création d’un widget dans WordPress par le biais d’un plugin, puis avons extrait les flux sportifs en direct afin d’afficher des données.

Shaumik est un optimiste, mais parapluie. Roorkee, étudiant de premier cycle à l'Institut indien de technologie, et cofondateur de The Blog Bowl, il adore écrire, alors qu'il n'est pas occupé à garder le drapeau bleu sous les ailes.