Share
Dans cette série d'articles, nous allons étudier le processus pas à pas du développement du plugin WordPress..
Si vous êtes un débutant et que vous souhaitez écrire votre premier plugin (comprenant à la fois des codes courts et des widgets), cette série est notamment pour vous.
Afin de montrer ce processus en pratique, nous allons développer un plugin pour l'intégration du carrousel de la chouette dans WordPress.
Owl Carousel est un carrousel réactif qui fonctionne bien sur les ordinateurs de bureau, les tablettes et les téléphones mobiles. Il a été développé par Bartosz Wojciechowski et est distribué sous licence MIT..
Jetons un coup d'oeil au concept de plugin pour bien comprendre ce que nous allons créer exactement.
Voici l'idée:
En termes simples, nous cherchons à introduire une intégration profonde de Owl Carousel dans WordPress avec une interface conviviale.
Naturellement, la première question est de savoir par où commencer?
Étant donné que nous travaillons à l’intégration d’une bibliothèque (Owl Carousel) dans une application existante (WordPress), nous devons être en mesure de définir les étapes à suivre pour développer nos brancher.
Pour commencer, nous allons décrire exactement ce que fait Owl Carousel:
Ici, vous voyez nos deux mots-clés:
Tout d’abord, examinons de plus près les "Paramètres". Les paramètres peuvent être définis en tant que paramètres du carrousel de la chouette que nous exposerons dans le tableau de bord WordPress.
Pour ce faire, nous devons développer la page des paramètres dans notre tableau de bord. En tant que tel, ce sera la première étape du développement du plugin. À cette fin, nous l'ajouterons à notre diagramme..
Passons maintenant aux images en vedette.
Comme je l'ai mentionné au début de l'article, nous aimerions afficher les images en vedette des publications que nous avons sélectionnées. Pour ce faire, nous devons pouvoir marquer les messages devant apparaître dans le carrousel..
Il y a plusieurs moyens de le faire:
Les implémentations de catégories et de balises sont des idées médiocres du point de vue du référencement, car elles créent des pages supplémentaires sur le site Web qui dupliquent en fin de compte le contenu existant. Bien qu’il soit possible de contrôler cela de différentes manières, ces stratégies sortent du cadre de ce tutoriel..
Pour éviter cela, je recommande d'utiliser des champs personnalisés. Dans ce cas, vous marquez une publication et aucune page supplémentaire ne s'affiche. La deuxième étape consiste à définir les images à ajouter au carrousel..
Ajoutons cette étape à notre diagramme:
Lorsque nous avons des paramètres et des images, nous pouvons enfin implémenter la fonctionnalité réelle du carrousel. Et ce sera notre troisième étape, ajoutons-le à notre diagramme:
À ce stade, nous avons suffisamment de fonctionnalités pour ajouter Owl Carousel au thème en tant que balise de modèle; cependant, il serait bien préférable de pouvoir ajouter le carrousel aux articles et aux pages..
Pour ce faire, nous devons implémenter la fonctionnalité shortcode. Comme pour le reste de nos étapes, ajoutons-le au diagramme:
Pour rendre le plugin encore plus utile, nous devrions ajouter un widget pour le carrousel de la chouette. Les widgets nous permettent d'afficher le carrousel sur plusieurs pages, au lieu des codes courts..
Enfin, ajoutons le développement d’un widget au diagramme de notre développement, ainsi que.
Ci-dessus, le diagramme de tout notre processus. Avant de développer la fonctionnalité même du plugin, nous devons préparer notre espace de travail de développement. Dans le prochain article, nous couvrirons exactement cela.
Dans cet article, nous avons défini les fonctionnalités de notre plugin et planifié les étapes de développement..
Le processus de planification vise avant tout à diviser pour régner. En d’autres termes, nous travaillons pour décomposer l’idée de ce que nous voulons faire en étapes faciles à réaliser qui peuvent être réalisées à travers plusieurs itérations de développement..
À partir de là, vous devriez pouvoir définir les dépendances, les étapes, les API et les données nécessaires à la mise en œuvre du plug-in. À partir du prochain article, nous allons commencer par configurer notre espace de travail de développement, puis poursuivre avec le développement du plugin..
Accentsconagua