Création d'un plugin d'événements à venir dans WordPress Introduction

WordPress n'est plus seulement une plate-forme de blogs, mais peut également être utilisé pour développer des applications Web complexes à de nombreuses fins. WordPress fournit une variété d’API, nous permettant ainsi de développer plus avant sur sa base.

Nous pouvons étendre WordPress pour répondre à nos besoins en utilisant l’API des plugins. Avec cette puissante API, nous pouvons développer des solutions répondant à nos besoins pour des scénarios presque infinis; donc, pour devenir un maître de WordPress, il faut une fois maîtriser ses API.

Dans cette série, nous examinerons l’API des plugins WordPress, ainsi que l’API des widgets, et comment nous pouvons les utiliser pour développer des solutions adaptées à nos besoins..

Ce que nous faisons

Au cours de cette série en trois parties, nous allons construire un plugin WordPress à partir de rien. Ce plugin affichera une liste des événements à venir sur le front-end pour permettre aux utilisateurs de savoir ce qui les attend. L'administrateur pourra publier des informations sur les nouveaux événements et pourra les éditer ou les supprimer..

Il y a un dicton:

Ne pas planifier est la planification à l'échec.

Nous allons planifier tous les détails et tous les aspects de notre plugin avant de commencer à écrire du code. De cette façon, nous allons clarifier quoi nous allons faire et Comment nous allons le faire. Nous veillerons également à disposer de tous les actifs nécessaires que nous utiliserons plus tard avant de commencer à écrire notre code..

Nous allons commencer par enregistrer un type de message personnalisé pour nos événements. Cela nous permettra de gérer les choses plus facilement. Ce type de message personnalisé comprendra:

  • un champ de titre
  • un champ de description
  • champ pour l'image sélectionnée

En plus de ces champs standard, nous allons également inclure trois champs méta personnalisés pour:

  • date de début de l'événement
  • date de fin de l'événement
  • lieu de l'événement

Pour la date de début et la date de fin de l'événement, nous intégrerons le sélecteur de date de l'interface utilisateur jQuery dans notre tableau de bord de publication..

Les trois champs personnalisés ci-dessus enregistreront leurs valeurs dans post meta et nous interrogerons nos événements sur le front-end sur la base de ces champs personnalisés à l'aide de la méta requête..

En ce qui concerne les types de publication personnalisés, WordPress affiche uniquement les colonnes pour le titre, l'auteur et la date de publication de la publication sur l'écran de post-édition, mais nous ne sommes pas limités à cela. Nous ajouterons des colonnes personnalisées pour la date de début de l'événement, la date de fin et le lieu de l'événement pour une meilleure accessibilité de l'utilisateur..

Enfin, en ce qui concerne le front-end, il est approprié de créer un widget qui affiche une liste de tous les événements planifiés dans un avenir proche. Avec la puissante API de widget, nous coderons notre widget personnalisé que nous pourrons ajouter à notre barre latérale ou à notre pied de page..

Poser les fondations

Commençons par créer la structure de base répertoire / fichier. Accédez auwp-content / plugins répertoire et créer un nouveau répertoire nommé évènements à venir. À l'intérieur de cela, créez plus de répertoires pour:

  • css
  • js
  • img

Créez également les fichiers PHP suivants:

  • index.php
  • coming-events.php

Comme vous avez peut-être remarqué que nous avons créé un nouveau coming-events.php déposer en plus de la norme index.php fichier. Nous allons écrire tout notre code à l'intérieur du coming-events.php fichier. C'est une bonne pratique de laisser tomber un index.php fichier à l'intérieur de vos répertoires d'actifs et bloquera toute personne essayant de comprendre le contenu du répertoire dans le navigateur.

Nous allons créer style.css et script.js fichiers à l'intérieur du css et js dossiers respectivement.

À l'intérieur de index.php fichier, ajoutez le code suivant:

 

Ici, nous ne faisons que placer un texte de substitution dans le index.php.

À l'intérieur de coming-events.php fichier, ajoutez la déclaration de plugin suivante:

 

Après avoir fini avec la structure de fichier de base, nous allons passer à la collecte des actifs nécessaires dont nous avons besoin dans notre plugin. L'un de ces actifs est la feuille de style pour datepicker de l'interface utilisateur jQuery. Par défaut, WordPress utilise jQuery et le noyau de l'interface utilisateur jQuery sur toutes ses pages du tableau de bord. Nous avons seulement besoin d'inclure les styles pour son widget datepicker.

Pour ce faire, naviguez votre navigateur vers http://jqueryui.com et:

  1. Cliquer sur Téléchargement personnalisé bouton à droite
  2. Sur la page suivante, décochez la case Basculer tout case à cocher sous le Composants Titre. Cela désélectionnera toutes les cases à cocher
  3. Faites défiler jusqu'à la Widgets section et vérifier la Sélecteur de date case à cocher
  4. Au bas de la page, sélectionnez le thème de couleur de votre choix dans la liste Des thèmes section. Nous allons utiliser la valeur par défaut UI légèreté thème pour notre tutoriel
  5. Cliquez sur le bouton de téléchargement pour télécharger le package personnalisé.

Extraire le package téléchargé et copier le contenu de css / ui-légèreté à événements-à venir / css annuaire.

Quoi de neuf ensuite?

Tout est question de planification. Dans la prochaine tranche de la série, nous commencerons à écrire notre code.

Nous allons:

  • enregistrer le type de message personnalisé pour l'événement
  • ajouter des méta-boîtes à l'écran d'édition d'événements
  • ajouter les styles et les scripts nécessaires à notre administrateur
  • incorporer le sélecteur de date de l'interface utilisateur jQuery pour saisir les dates des événements
  • ajouter des colonnes personnalisées à l'écran "Tous les événements"

Restez à l'écoute pour le prochain article de la série.