Share
Dans cette série, nous examinons comment implémenter WordPress Media Uploader dans un plugin réel. L'idée derrière cette série et son code associé est de donner une compréhension claire de son fonctionnement, de la façon dont nous pouvons l'utiliser à l'avenir et de la manière dont nous pouvons l'intégrer à notre travail..
Jusqu'à présent, nous avons couvert:
Et tout au long de ces articles, nous avons exploré le processus de création d’un plug-in utilisant WordPress Media Uploader pour introduire une image sélectionnée dans le bas de page de nos articles de blog (et pages).
Mais il y a un problème: l'image n'est pas enregistrée ni affichée dans le contenu de son article de blog (ou de sa page) associé (s)..
Dans cet article, nous allons reprendre là où nous en étions et terminer la mise en œuvre du reste de ce plugin. Notez que je suppose que vous avez lu les deux articles précédents et que vous comprenez le code source que nous avons couvert jusqu'à présent..
Cela dit, reprenons.
La clé pour vous assurer que l'image peut être affichée sur le frontal de WordPress est de sauvegarder les informations sur l'image fournies. par WordPress.
Dans l'article précédent, nous avons utilisé certaines de ces informations pour afficher l'image dans la boîte de méta que nous avons créée, mais aucune de ces informations n'a été réellement enregistrée. En tant que telle, l'image ne peut pas être affichée dans le tableau de bord ou sur le front-end du site car WordPress ne s'en souvient pas..
Nous allons résoudre ce problème. Plus précisément, nous allons enregistrer des champs pour:
Accentsconagua
src attributalt attribuer et comme Titre attributLa première chose à faire est d’ajouter un autre conteneur avec trois champs d’entrée dans la liste. admin.php vue de notre plugin. Chacun de ces champs correspondra à quoi des valeurs ci-dessus.
Jetez un oeil au code ci-dessous après quoi je vais élaborer:
Dès le départ, il devrait être assez facile à comprendre:
en vedette-pied-image-meta À ce stade, nous devons revenir dans notre fichier JavaScript afin de pouvoir récupérer les informations qui nous sont renvoyées via le Media Uploader et renseigner les champs de saisie avec ces informations..
Ouvrir admin.js puis ajoutez les trois lignes suivantes au bas de la fonction de gestionnaire pour l'insert un événement (pour image_fichier):
// Stocke les informations de l'image dans les champs de métadonnées $ ('# # footer-thumbnail-src') .val (json.url); $ ('# footer-thumbnail-title') .val (json.title); $ ('# footer-thumbnail-alt') .val (json.title);À partir de là, accédez à votre tableau de bord WordPress, ajoutez un nouveau message ou modifiez un message existant. Vous devriez voir quelque chose qui ressemble à l'image suivante:
En supposant que vous ayez écrit tout le code JavaScript directement, vous devriez voir quelque chose comme ceci, basé sur les données que vous avez fournies dans Media Uploader lors de la sélection d'une image..
Notez cependant que lorsque vous cliquez sur "Supprimer l'image sélectionnée", le texte reste. Avant d'envisager de sauvegarder ces informations, finissons le code JavaScript afin qu'il efface les champs de saisie chaque fois que l'utilisateur supprime l'image..
Bien qu'il y ait plusieurs façons de faire cela, j'ai choisi d'utiliser le code suivant:
// Enfin, nous réinitialisons les champs de saisie de métadonnées $ ('# # vedette-bas-image-info') .children () .val (");N'oubliez pas que cela doit être situé dans le gestionnaire d'événements pour l'ancre "Supprimer l'image sélectionnée". Dans l'article précédent, nous avons nommé cette fonction resetUploadForm.
À ce stade, vous devriez pouvoir cliquer sur "Supprimer l'image sélectionnée" et voir que l'image et les champs de saisie sont réinitialisés. Si vous rencontrez des problèmes, examinez le code source dans le référentiel GitHub associé à ce message (ce sera dans la branche principale et sera également étiqueté 1.0.0)..
Nous devons maintenant introduire dans le plugin du code qui nettoiera les valeurs des champs de saisie, les associera à la publication et les enregistrera dans la base de données afin que nous puissions afficher les informations au bas de chaque publication..
dans le courir fonction pour Acme_Footer_Image, ajoutez la ligne de code suivante:
add_action ('save_post', tableau ($ this, 'save_post'));Ensuite, nous devons définir une fonction qui sera responsable de la sauvegarde des valeurs des champs de saisie dans la base de données. Il y a deux choses à savoir sur le code suivant:
/ ** * Sanitized et enregistre le message contenant les métadonnées de l'image de pied de page spécifiques à ce message. * * @param int $ post_id L'ID de la publication avec laquelle nous travaillons actuellement. * @since 0.2.0 * / public function save_post ($ post_id) if (isset ($ _REQUEST ['footer-thumbnail-src'])) update_post_meta ($ post_id, 'footer-thumbnail-src', sanitize_text_field ($ _REQUEST ['footer-thumbnail-src'])); if (isset ($ _REQUEST ['footer-thumbnail-title'])) update_post_meta ($ post_id, 'footer-thumbnail-title', sanitize_text_field ($ _REQUEST ['footer-thumbnail-title'])); if (isset ($ _REQUEST ['footer-thumbnail-alt'])) update_post_meta ($ post_id, 'footer-thumbnail-alt', sanitize_text_field ($ _REQUEST ['footer-thumbnail-alt']));
Avant de pouvoir tester cela, nous devons apporter deux modifications supplémentaires à la vue du tableau de bord avant d'afficher les images sur le frontal..
Premièrement, nous devons nous assurer que les métadonnées sont renvoyées dans les champs de saisie. Hop dans le admin.php et le mettre à jour une fois de plus pour inclure ceci:
Ici, nous appelons le get_post_meta fonction pour récupérer les valeurs qui sont enregistrées en utilisant la fonction que nous avons déclarée ci-dessus.
Ensuite, nous devons nous assurer de renseigner l'élément d'image que nous avons créé précédemment dans cette série avec les mêmes valeurs:
Bien sûr, si les métadonnées sont vides, rien ne remplira les attributs et l'image ne s'affichera pas.
En supposant que tout se passe bien, vous devriez voir l'image et ses données associées affichées dans les champs de saisie lorsque vous enregistrez la publication. De même, lorsque vous supprimez l'image sélectionnée, les champs doivent disparaître et ne plus être affichés..
Avant de passer à l'affichage de l'image sur le front-end, il y a quelques petites choses que nous devons faire pour nettoyer l'affichage de la méta-boîte.
Tout d’abord, nous devons nous assurer que tous les champs de saisie précédents étaient de type texte sont de type caché.
Ensuite, nous devons écrire une petite fonction JavaScript qui affichera l’image en supposant que celle-ci a été enregistrée. La fonction vérifiera si le champ de saisie de l'URL de l'image n'est pas une chaîne vide..
Si ce n'est pas le cas, l'image sera affichée. Nous ajoutons donc cette fonction à notre fichier JavaScript:
; ?> "<?php echo get_post_meta( $post->ID, 'footer-thumbnail-title', true); ?>")
/ ** * Vérifie si le champ de saisie de la source de miniatures a une valeur. * Si c'est le cas, l'image et l'ancre «Supprimer l'image sélectionnée» sont affichés. * * Sinon, l'ancre standard est rendue. * * @param object $ Une référence à l'objet jQuery * @since 1.0.0 * / function renderFeaturedImage ($) / * Si une URL de vignette a été associée à cette image * Ensuite, nous devons afficher l'image et le lien de réinitialisation . * / if ("! == $ .trim ($ ('# footer-thumbnail-src') .val ())) $ ('# vedette-footer-image-conteneur') .removeClass ('hidden') ; $ ('# set-footer-thumbnail') .parent () .hide (); $ ('# remove-footer-thumbnail') .parent () .removeClass ('hidden');Ensuite, appelez la fonction JavaScript dans le contexte de la fonction prête au DOM:
renderFeaturedImage ($);
En bref, lors du chargement de la page, elle vérifie si une URL existe dans notre champ de saisie. Si tel est le cas, il restitue l'image et nous donne la possibilité de la supprimer. Sinon, il affiche simplement la zone d'image sélectionnée vide.
Encore une fois, si vous rencontrez des difficultés pour suivre ce code, veillez à consulter le référentiel GitHub associé à l'aide du lien situé dans la barre latérale de cette page..
À ce stade, nous avons fait tout ce que nous devons faire dans le tableau de bord. Il est donc temps d'afficher l'image sur le front-end du blog. Pour ce faire, nous devons installer un hook qui se connecte à le contenu action, vérifiez si une image existe et, le cas échéant, ajoutez-la au contenu de la publication.
Pour cela, commencez par ajouter la ligne suivante au courir méthode de votre Acme_Footer_Image classe:
add_action ('the_content', array ($ this, 'the_content'));Ensuite, nous devons écrire une fonction liée à cette action. Cette fonction sera chargée de vérifier si nous ne sommes qu'une seule page (car nous ne voulons pas ajouter une image au pied de page d’un message si un utilisateur a, par exemple, un plus tag dans le cadre de leur contenu).
Nous faisons cela en utilisant le code suivant:
/ ** * Si le message en cours est un message unique, vérifiez s'il y a une image en vedette. * Si c'est le cas, ajouter est au contenu de la publication avant de la publier. * * @param string $ content Le contenu de la publication. * @since 1.0.0 * / public function the_content ($ content) // Nous ne nous intéressons qu'à l'ajout de l'image à une seule page if (is_single ()) // Pour pouvoir ajouter une image, il doit y avoir au moins un attribut source if ("! == ($ src = get_post_meta (get_the_ID (), 'footer-thumbnail-src', true))) // lit les attributs restants même s'ils sont des chaînes vides $ alt = get_post_meta (get_the_ID (), 'footer-thumbnail-alt', true); $ title = get_post_meta (get_the_ID (), 'footer-thumbnail-title', true); // crée l'élément image dans son propre conteneur $ img_html = ''; $ img_html. = "
"; $ img_html. = '
'; // l'ajoute au contenu $ content. = $ img_html; return $ content; Et avec cela, nous devrions avoir un plugin entièrement fonctionnel ajoutant une image de pied de page en vedette à un message qui s'affiche sur une seule page de message..
Tout au long de cette série, nous avons couvert de nombreux documents, le moins important étant l’utilisation de Media Uploader. Bien que cet article particulier ait passé plus de temps à nous montrer comment connecter les données de la méta-boîte au front-end, il montre toujours comment appliquer une application pratique de Media Uploader dans le contexte d'un plugin..
Cela dit, il reste encore beaucoup à apprendre sur le Media Uploader que nous pourrions couvrir dans les prochains sujets. Si vous êtes intéressé, s'il vous plaît faites le moi savoir dans les commentaires ci-dessous. De plus, si vous avez des questions sur ce que vous avez lu ou sur cette série en général, n'hésitez pas à les laisser, ainsi.
N'oubliez pas de consulter le référentiel GitHub pour ce projet - j'espère qu'il vous servira bien lorsque vous utiliserez Media Uploader à l'avenir.!
"; $ img_html. = '