Nous couvrons beaucoup de sujets sur ce blog - quelque chose d'aussi simple que d'inclure et d'exiger des fichiers modèles dans des projets WordPress ou de passer par toute une série sur l'API Settings, mais je pense qu'il est toujours possible de couvrir un simple How. -À qui couvre une seule tâche spécifique dans le contexte de WordPress.
Ainsi, dans cette série en deux parties, nous allons voir comment introduire un sélecteur de date jQuery dans notre éditeur de publication afin que nous puissions associer une date à une publication donnée..
A propos du plugin
Nous allons faire tout cela dans le contexte d'un plugin afin que le code source soit facilement téléchargeable via GitHub et fournisse un exemple concret du tutoriel..
La première chose à noter est que l’intégration du sélecteur de date jQuery est ne pas destiné à remplacer la date de publication du message. Au lieu de cela, il est conçu pour fournir un moyen facile de sélectionner une date, de la sauvegarder dans les méta-données postérieures, puis de l'afficher dans un autre but, comme par exemple lorsqu'un événement va se produire..
Planifier le plugin
Pour tous ceux qui ont lu l'un de mes posts précédents, vous savez que je suis fan de la planification du projet depuis le début, puis de la mettre en œuvre chaque étape à la fois pour être sûr que tout soit clair..
Alors faisons cela maintenant:
Nous fournirons la classe squelette pour le plugin
Nous écrirons le code responsable de la génération de la méta-boîte de publication permettant à l'utilisateur de sélectionner la date
Nous allons implémenter le sélecteur de date jQuery afin que les utilisateurs puissent sélectionner une date
Nous enregistrerons les données lorsque l'article sera publié et / ou mis à jour
Nous afficherons la date au début du message
Simple, non? Cela dit, commençons.
Construire le plugin
À la fin de cet article, l'intégralité du plugin sera disponible dans ce référentiel GitHub, mais je vous recommande vivement de suivre et d'écrire le code vous-même pour vous assurer de suivre tout ce que nous faisons..
Le code volonté être commenté donc il devrait être facile à suivre. Sinon, n'hésitez pas à laisser des commentaires après le post.
1. Stub Out the Plugin Class
En supposant que vous ayez déjà créé le WordPress-jQuery-Date-Picker répertoire dans votre wp-content / plugins répertoire, allez-y et créez deux fichiers:
plugin.php
README.txt
Nous reviendrons sur le LISEZMOI déposer dans un peu, mais allons-y et stub la classe qui sert de notre plugin.
Voici le code avec plus d'explications après l'extrait de code:
De toute évidence, il n'y a pas grand chose pour le moment. Nous avons simplement défini la classe, défini un constructeur vide et instancié le plugin en dehors de la classe.
Avant d'aller plus loin, allons de l'avant et préparons le plugin pour la localisation. Pour ce faire, nous devons faire plusieurs choses:
Introduire un lang annuaire
Ajouter lang / plugin.po
Définir le domaine de texte pour le plugin dans le constructeur
Rappelez-vous que la localisation est utilisée pour s'assurer que les traducteurs peuvent rendre notre plugin compatible avec d'autres langues, et que Poedit est l'outil de choix.
le plugin.po Le fichier doit contenir les éléments suivants (le vôtre sera évidemment différent en fonction de la date, de l'heure et de la configuration de Poedit):
msgstr "" msgstr "" "Projet-Id-Version: WordPress jQuery Date Picker 1.0 \ n" "Rapport-Msgid-Bugs-To: \ n" "POT-Creation-Date: 2013-02-07 13: 36-0500 \ n "" PO-Révision-Date: 2013-02-07 13: 36-0500 \ n "" dernier traducteur: Tom McFarlin \ n "" Équipe linguistique: Tom McFarlin \ n "" Langue: en_US \ n "" Version MIME: 1.0 \ n "" Content-Type: text / plain; charset = UTF-8 \ n "" Codage de transfert de contenu: 8 bits \ n "" X-Poedit-KeywordsList: __; _ e \ n "" X-Poedit-Basepath:. \ n "" X-Generator: Poedit 1.5 .5 \ n "" X-Poedit-SearchPath-0:… \ n "
Ensuite, nous devons définir le domaine de texte dans le constructeur. Commencez par inclure la ligne suivante dans votre constructeur:
// Chargement du domaine de texte du plugin add_action ('init', array ($ this, 'plugin_textdomain'));
Ensuite, ajoutez la fonction suivante à votre fichier:
/ ** * Charge le domaine de texte du plugin pour la traduction * * @version 1.0 * @since 1.0 * / fonction publique plugin_textdomain () load_plugin_textdomain ('wp-jquery-date-picker', false, nom du répertoire (nom_du_plot (__file__). '/ lang'); // fin plugin_textdomain
La chose la plus importante à noter ici est l'utilisation de la wp-jquery-date-picker clé car c’est ce que nous allons utiliser pour localiser les chaînes dans le reste du plugin.
Enfin, nous y reviendrons avec le LISEZMOI déposer plus tard dans le tutoriel.
2. Créer la méta-boîte
À ce stade, nous sommes prêts à définir le code qui rendra la méta-boîte. Cela consiste en plusieurs étapes:
Définir le hook dans le constructeur
Enregistrez la meta box avec WordPress
Définir une fonction utilisée pour rendre la boîte de méta réelle
Dans le constructeur, ajoutez la ligne de code suivante. Voici ce que nous allons utiliser pour enregistrer notre meta box post:
Dans la fonction ci-dessus, nous demandons à WordPress de rechercher notre méta-boîte de date dans une fonction appelée add_date_meta_box, nous avons donc besoin de définir cela maintenant.
Dans votre classe, ajoutez le code suivant:
/ ** * Enregistre la méta-boîte pour l'affichage de l'option 'Date' dans l'éditeur de publication. * * @version 1.0 * @since 1.0 * / fonction publique add_date_meta_box () add_meta_box ('the_date', __ ('The Date', 'wp-jquery-date-picker'), array ($ this, 'the_date_display') , 'post', 'side', 'low'); // end add_date_meta_box
Nous avons couvert de manière approfondie les méta-boîtes dans divers didacticiels et le Codex WordPress contient un article formidable expliquant le rôle de chaque paramètre. Je ne veux donc pas insister sur le point ici..
Cela dit, il y a une chose spécifique que nous devons noter dans l'appel ci-dessus. Notez que la méta-boîte cherche à enregistrer son affichage en utilisant une fonction appelée the_date_display.
En tant que tel, nous devons définir cette fonction. Heureusement, la méta-boîte peut être très simple: pour déclencher le sélecteur de date, nous n'avons besoin que d'un seul élément. Puisque nous allons restituer la date, optons pour une simple zone de saisie..
Ensuite, ajoutez la fonction suivante à votre classe:
/ ** * Génère le rendu de l'interface utilisateur pour l'achèvement du projet dans sa méta-boîte associée. * * @version 1.0 * @since 1.0 * / public function the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); écho ''; // end the_date_display
Facile à comprendre, juste?
Nous définissons une valeur nonce à des fins de sécurité en nous fournissant les fonctionnalités de sécurité dont nous avons besoin pour nous assurer que l'utilisateur dispose des autorisations nécessaires pour enregistrer les valeurs de ce champ, puis nous restituons un élément d'entrée à l'écran..
Notez que le contribution L'élément inclut l'ID "datepicker" et le nom "la date". Ce sera importé plus tard, mais pour l'instant, enregistrez votre travail.
Si vous activez le plugin maintenant, vous devriez voir quelque chose comme ce qui suit:
De toute évidence, cela nécessite un style léger pour le rendre un peu mieux. Alors, faisons ce qui suit:
Créer un css annuaire
Ajouter un css / admin.css fichier
Dans le fichier, incluez le code suivant:
#datepicker width: 100%;
Ensuite, dans le constructeur, ajoutez cette ligne:
Après cela, ajoutez cette fonction à votre plugin:
/ ** * Enregistre et met en file d'attente les styles spécifiques à l'administrateur. * * @version 1.0 * @since 1.0 * / public function register_admin_styles () wp_enqueue_style ('wp-jquery-date-picker', plugins_url ('WordPress-jQuery-Date-Picker / css / admin.css')); // end register_admin_styles
À ce stade, la largeur de la zone de saisie du sélecteur de date doit s'étendre sur la largeur du conteneur de la boîte à méta. Le rend un peu plus joli, à mon avis.
3. Réservez la date
Avant de commencer à implémenter le sélecteur de date, allons de l'avant et assurons-nous que notre nouvelle méta-boîte de publication peut correctement enregistrer les informations. Pour le moment, ce n'est pas possible car nous n'avons pas écrit le code correspondant.
Cette étape impliquera ce qui suit:
Définir une fonction pour sauvegarder les données
S'assurer que l'utilisateur a la possibilité de sauvegarder les données
Sauvegarde des données
Tout d'abord, nous devons définir le point d'ancrage pour enregistrer les données. Pour cela, ajoutez la ligne suivante à votre constructeur directement sous la ligne où nous avons défini le hook pour créer la boîte méta:
add_action ('save_post', array ($ this, 'save_project_date')); [php] Ensuite, nous devons définir réellement le save_project_date une fonction. Cette fonction sera chargée de s’assurer que l’utilisateur a l’autorisation de sauvegarder les données, puis de sauvegarder le contenu du champ de saisie dans la méta de la publication pour la publication associée. Ajoutez donc la fonction suivante à votre plug-in: [php] / ** * Enregistre les données d'achèvement du projet pour l'ID de publication entrant. * * @param int Identifiant de publication actuel. * @version 1.0 * @since 1.0 * / public function save_the_date ($ post_id) // Si l'utilisateur est autorisé à enregistrer les métadonnées… if ($ this-> user_can_save ($ post_id, 'wp-jquery-date-picker) -nonce ')) // Supprimez les métadonnées existantes du propriétaire if (get_post_meta ($ post_id,' the_date ')) delete_post_meta ($ post_id,' the_date '); // end if update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date'])); // fin si // fin save_the_date
Cette fonction fonctionne essentiellement en vérifiant si cet utilisateur peut sauvegarder. Si tel est le cas, il supprimera toutes les méta-publications existantes afin de ne pas encombrer la base de données, puis ajoutera la date spécifiée à cette publication..
Mais il y a un problème: nous appelons une fonction appelée user_can_save. Cette fonction particulière est une fonction d'assistance que nous devons définir car elle simplifie une grande partie du code habituel nécessaire pour s'assurer que l'utilisateur est autorisé à enregistrer le fichier..
Donc, dans la zone "Fonctions d'assistance" de votre classe, ajoutez la fonction suivante:
/ ** * Détermine si l'utilisateur actuel a la possibilité de sauvegarder les métadonnées associées à ce message. * * @param int $ post_id Identifiant de la publication en cours de sauvegarde * @param bool Indique si l'utilisateur a la possibilité de sauvegarder cette publication. * @version 1.0 * @since 1.0 * / private function user_can_save ($ post_id, $ nonce) $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST [$ nonce]) && wp_verify_nonce ($ _POST [$ nonce], plugin_basename (__FILE__))? vrai faux; // Renvoie true si l'utilisateur est capable de sauvegarder; sinon, faux. revenir ! ($ is_autosave || $ is_revision) && $ is_valid_nonce; // end user_can_save
Notez que cette fonction prend l’identifiant de publication actuel et la valeur de nonce (que nous avons définie plus tôt dans cette publication). Enfin, cette fonction renvoie true s'il ne s'agit pas d'une sauvegarde automatique, d'une révision ultérieure et que le nonce est valide..
Si c'est vrai, alors l'utilisateur a la permission de sauvegarder.
Conclusion
À ce stade, essayons ce que nous avons. Activez le plugin et vous devriez voir la boîte méta sur le tableau de bord Post Editor. Pour le moment, vous devriez pouvoir sauvegarder toute valeur que vous souhaitez dans ce domaine particulier..
Vous pouvez récupérer une copie du plugin dans sa version actuelle pour ce poste en utilisant ce lien.
Dans le prochain article, nous allons examiner comment implémenter le sélecteur de date. Cela inclura l'importation des dépendances JavaScript nécessaires, l'écriture d'un peu de notre propre JavaScript, puis le rendu de la date au début du message..
Enfin, nous préparerons le plugin pour la publication en générant les fichiers de localisation, puis en préparant le LISEZMOI.
Share
Accentsconagua
