Share
Lors de la publication de WordPress 3.5, l’un des changements les plus importants a été celui de Media Uploader. Une description plus précise du changement consisterait peut-être à se référer à at une addition d'un nouveau Media Uploader.
Après tout, l'ancienne version de Media Uploader existe toujours et peut fonctionner côte à côte avec la médiathèque actuelle, mais vous devez le faire en ajoutant et en utilisant correctement les scripts, le style et toutes les autres fonctionnalités qui en dépendent..
Comme pour tout élément logiciel, les fonctionnalités qui existent depuis longtemps peuvent être déconseillées au profit de nouvelles fonctionnalités. Dans notre cas, la médiathèque ne fait pas exception. Bien que WordPress ne l'utilise plus, il existe de nombreux plug-ins et autres utilitaires tiers qui utilisent encore l'ancienne version de la médiathèque..
Le grand nombre de copies du code de l'ancienne fonctionnalité pose un problème: lorsque nous utiliserons la médiathèque nous-mêmes, nous finirons probablement par trouver des exemples de l'ancienne fonctionnalité..
Comme la nouvelle médiathèque est la nouvelle norme dans WordPress, et comme il n’ya pas beaucoup de documentation sur son utilisation, nous allons examiner les fonctionnalités des prochains articles pour comprendre comment le nouveau média La bibliothèque est construite, comment nous pouvons la mettre en œuvre dans notre propre travail et comment nous pouvons tirer parti des diverses fonctionnalités déjà incluses dans le noyau de WordPress..
Le nouveau WordPress Media Uploader présente un certain nombre d'avantages par rapport à l'itération précédente:
Il est important de noter, cependant, que la version la plus récente de l'uploader est construite en utilisant un ensemble de technologies complètement différentes de celles antérieures. Cela signifie que le code que vous avez écrit une fois pour implémenter la gestion personnalisée des médias peut toujours fonctionner (jusqu'à ce que le code Thickbox principal soit obsolète), mais il va sembler daté par rapport à ce que les utilisateurs rencontrent maintenant lorsqu'ils gèrent leurs médias dans WordPress.
Avant de voir comment intégrer cela dans notre propre code et créer notre propre implémentation, il est important de comprendre le fondement sous-jacent de la nouvelle médiathèque..
Comme mentionné précédemment, l'édition précédente de l'éditeur de média utilisait une bibliothèque connue sous le nom de Thickbox afin de créer ce que nous avons vu, mais dans la dernière implémentation, WordPress utilise les deux Underscores (à ne pas confondre avec Underscore thème) et Backbone - deux technologies JavaScript qui fonctionnent ensemble pour piloter l’interface utilisateur et gérer les événements de l’éditeur de média.
Bien que nous n'allions pas nous plonger dans l'une ou l'autre de ces bibliothèques, il est important de comprendre le rôle que chacune joue dans Media Uploader..
D'abord, colonne vertébrale:
Backbone.js donne une structure aux applications Web en fournissant aux modèles des événements personnalisés, des regroupements avec une API riche de fonctions énumérables, des vues avec une gestion des événements déclarative et en connectant le tout à votre API existante via une interface JEST RESTful..
Et Underscore:
Underscore est une bibliothèque JavaScript qui fournit toute une panoplie d’aides utiles à la programmation fonctionnelle sans étendre les objets intégrés. C'est la réponse à la question: “De quoi ai-je besoin si je m'assieds devant une page HTML vierge et que je veux commencer à être productif immédiatement?”… Et la cravate qui va de pair avec le smoking et les jarretelles de Backbone de jQuery.
Évidemment, vous pouvez en apprendre davantage sur chacun d’entre eux sur leurs pages respectives, mais je voulais les mentionner maintenant. Ainsi, lorsque nous commencerons à examiner la gestion de l’interface utilisateur et des événements pour notre implémentation personnalisée de la médiathèque, nous comprendrons mieux ce que fait le code.
Enfin, notez que ceci est ne pas jQuery. Si vous avez l'habitude de travailler avec cette bibliothèque - et beaucoup d'entre nous le sont - ces deux bibliothèques sont complètement séparées. Vous pouvez, et nous le ferons, utiliser jQuery aux côtés des fonctionnalités ajoutées par Backbone et Underscore..
Maintenant, écrivons un peu de code.
Pour les besoins de notre exemple, nous allons examiner comment intégrer une version de base de la médiathèque dans un thème WordPress existant. Pour les besoins de notre exemple, nous allons construire ceci en tant que plugin; Cependant, l'environnement que nous allons utiliser comprend les éléments suivants:
Et c'est tout. Le reste du code sera contenu dans notre plugin. Bien sûr, cela soulève encore la question de savoir quoi notre plugin va réellement faire.
En bref, nous allons reproduire la fonctionnalité "Image en vedette" de WordPress, mais plutôt que d'ajouter une image en haut de l'article (ou presque en haut de l'article), nous allons introduire un " Featured Footer Image 'qui ajoute l'image au bas de l'article.
De toute évidence, la fonctionnalité est triviale - l'accent est mis sur la mise en œuvre de la nouvelle médiathèque.
Tout le code source sera mis à disposition pour révision dans un référentiel GitHub associé à cet article, n'hésitez pas à suivre le code au fur et à mesure de la progression de l'article, puis téléchargez le code pour en savoir plus après chaque article, pour une révision ultérieure..
dans le wp-content / plugins répertoire, créez un nouveau répertoire appelé acme-footer-image. C'est là que nous allons garder nos fichiers de projet. Après cela, continuez et créez des fichiers vides comme suit:
Accentsconagua
README.txtLICENCEacme-footer-image.phpLes trois premiers fichiers doivent être explicites. le acme-footer-image.php Le fichier est l'endroit où nous allons définir l'en-tête du plugin et commencer à exécuter le plugin. Notez que classe-acme-footer-image.php est la classe qui définira certaines des fonctionnalités initiales de notre plugin.
Ensuite, créez un répertoire dans le répertoire du plugin appelé admin car c’est là que toutes nos fonctionnalités d’administration seront conservées. Ce répertoire devrait contenir:
admin / class-admin-footer-image.phpadmin / js / admin.jsEnfin, créez un vues répertoire dans le admin sous-répertoire car c’est là que nous allons placer le balisage pour notre boîte méta. Nous examinerons cela plus en détail plus loin dans l'article..
Afin de nous assurer que nous créons un ensemble de fichiers bien organisé, chacun conservant son propre ensemble de responsabilités, nous examinerons chacun de ces fichiers plus en détail et nous suivrons le didacticiel. Pour l'instant, cependant, cela devrait inclure tout ce dont nous avons besoin pour commencer.
Avant de commencer à écrire du code, allons-y et complétons certaines des informations par défaut en commençant par le LISEZMOI.
=== Acme Footer Image === Contributeurs: tommcfarlin Faites un lien pour faire un don: http://tommcfarlin.com/ Tags: images en vedette Nécessite au moins: 3.9.2 Testé jusqu'à: 3.9.2 Balise stable: 0.1.0 Licence: GPLv2 ou plus tard License URI: http://www.gnu.org/licenses/gpl-2.0.html Ajoutez une image sélectionnée au bas du contenu d'un message ou d'une page. == Description == Ajoute une image sélectionnée au bas du contenu d'un message ou d'une page. Utilisé comme démo pour un tutoriel Tuts + Code. == Installation == Cette section explique comment installer le plugin et le faire fonctionner. par exemple. 1. Téléchargez "plugin-name.php" dans le répertoire "/ wp-content / plugins /" 1. Activez le plugin via le menu "Plugins" de WordPress 1. Placez "'dans vos modèles == Changelog == = 0.1.0 = * Version initiale
Notez que cela contient également le journal des modifications..
Ensuite, nous devons définir le code de la classe de plug-in principale. Cette classe sera responsable de ce qui suit:
De manière générale, je ne pense pas que ce soit la meilleure façon de développer des plugins de manière orientée objet car, comme vous pouvez le constater, cette classe fait déjà plus d'une chose. C'est une mauvaise pratique. Cependant, étant donné que la quantité de code est si courte et que l'accent de cette série sera largement centré sur le JavaScript qui anime la médiathèque, il s'agit d'un sacrifice que je suis prêt à faire..
Jetons donc un coup d'œil à la classe dans son intégralité, puis examinons quelques-uns des composants individuels:
* / class Acme_Footer_Image / ** * L'ID de ce plugin. * * @since 0.1.0 * @access private * @var string $ name L'ID de ce plugin. * / nom privé $; / ** * La version actuelle du plugin. * * @since 0.1.0 * @access private * @var string $ version La version du plugin * / private $ version; / ** * Initialise le plugin en définissant les propriétés. * * @since 0.1.0 * / public function __construct () $ this-> name = 'acme-footer-image'; $ this-> version = '0.1.0'; / ** * Définit les points d'ancrage qui vont inscrire et mettre en file d'attente le JavaScriot * et la méta-boîte qui rendra l'option. * * @since 0.1.0 * / public function run () add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_scripts')); add_action ('add_meta_boxes', tableau ($ this, 'add_meta_box')); / ** * Affiche la méta-boîte sur le post et les pages. * * @since 0.1.0 * / public function add_meta_box () $ screens = array ('post', 'page'); foreach ($ écrans en tant que $ screen) add_meta_box ($ this-> nom, 'Image de pied de page sélectionnée', array ($ this, 'display_featured_footer_image'), $ screen, 'side'); / ** * Enregistre le code JavaScript permettant de gérer le programme de téléchargement de média. * * @since 0.1.0 * / public function enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> name, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> version, 'tous'); / ** * Rend la vue qui affiche le contenu de la boîte à méta qui déclenche * la boîte à méta. * * @param WP_Post $ post L'objet post * @since 0.1.0 * / public function display_featured_footer_image ($ post) include_once (nom_répertoire (__FILE__). '/views/admin.php'); La plupart du code devrait être explicite à travers les commentaires. Sinon, n'hésitez pas à laisser un commentaire, mais en attendant, jetons un coup d'œil aux deux domaines suivants:
Tout d'abord, la définition de la boîte à méta.
name, 'Footer Featured Image', array ($ this, 'display_featured_footer_image'), $ screen, 'side');
Notez ici que nous incluons la prise en charge de la boîte à méta sur les types de page et de publication. Cette fonction fait également référence à une fonction de rappel display_featured_footer_image qui est responsable du rendu du code HTML de la méta-boîte:
fonction publique display_featured_footer_image ($ post) include_once (nomnom (__FILE__). '/views/admin.php');
Le balisage pour ce fichier est très simple. C'est une ancre avec un identifiant auquel nous pouvons accéder via notre code JavaScript que nous allons jeter un coup d'oeil sur.
Définir l'image sélectionnée
Et nous mettrons en file d'attente le JavaScript nécessaire au chargement de la médiathèque.
fonction publique enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> name, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> version, 'tous'); Notez ici qu'avant d'enregistrer notre propre JavaScript, nous faisons appel à wp_enqueue_media. Selon le Codex, cette fonction:
Met tous les scripts, styles, paramètres et modèles nécessaires pour utiliser toutes les API JavaScript des médias..
Et ceci est nécessaire afin de nous assurer que nous avons les dépendances nécessaires pour charger le nouveau Media Uploader..
Voyons ensuite le code JavaScript que nous devons écrire pour nous assurer de tirer parti des fonctionnalités nécessaires à la configuration de la médiathèque et pour s’assurer qu’il s’affiche lorsque l’utilisateur clique sur le lien approprié.
Le code est très commenté, il devrait donc être facile à suivre. Sinon, n'hésitez pas à laisser un commentaire dans le fil en dessous de l'article!
/ ** * Fonction de rappel pour l'événement 'click' de l'ancre 'Set Footer Image' * dans sa boîte méta. * * Affiche l'éditeur de média pour la sélection d'une image. * * @since 0.1.0 * / function renderMediaUploader () 'use strict'; var file_frame, image_data; / ** * Si une instance de file_frame existe déjà, nous pouvons l'ouvrir * plutôt que de créer une nouvelle instance. * / if (non défini! == image_fichier) image_fichier.open (); revenir; / ** * Si nous sommes si loin, alors une instance n'existe pas, nous devons donc * créer notre propre. * * Ici, utilisez la bibliothèque wp.media pour définir les paramètres du Media * Uploader. Nous choisissons d'utiliser le cadre 'post', qui est un modèle * défini dans le noyau de WordPress, et initialisons le cadre du fichier * avec l'état 'insérer'. * * Nous n'autorisons pas non plus l'utilisateur à sélectionner plus d'une image. * / file_frame = wp.media.frames.file_frame = wp.media (frame: 'post', state: 'insert', multiple: false); / ** * Configure un gestionnaire d'événement pour savoir quoi faire quand * une image a été sélectionnée. * * Puisque nous utilisons l'état 'view' lors de l'initialisation * de file_frame, nous devons nous assurer que le gestionnaire est attaché * à l'événement insert. * / file_frame.on ('insert', function () / ** * Nous couvrirons cela dans la prochaine version. * /); // Affiche maintenant le fichier_fichier_fichier_fichier.open (); (function ($) 'use strict'; $ (function () $ ('# set-footer-thumbnail') .on ('click' ', function (evt) // Arrête le comportement par défaut de l'ancre evt. preventDefault (); // Affiche l'éditeur de média renderMediaUploader ();););) (jQuery);Notez que cela seulement affiche la médiathèque. En fait, il ne fait rien après avoir chargé et / ou sélectionné une image..
Enfin, la dernière étape consiste à définir notre fichier de démarrage principal afin de démarrer le plugin:
* @license GPL-2.0 + * @link http://tommcfarlin.com * @ @ copyright 2014 Tom McFarlin * * @ wordpress-plugin * Nom du plugin: Acme Footer Image * Plugin URI: TODO * Description: Ajoute une image sélectionnée à la bas du contenu d'un article ou d'une page. * Version: 0.1.0 * Auteur: Tom McFarlin * URI de l'auteur: http://tommcfarlin.com * Licence: GPL-2.0 + * URI de la licence: http://www.gnu.org/licenses/gpl-2.0.txt * / // Si ce fichier est appelé directement, annulez. if (! define ('WPINC'))) die; / ** * Inclut la classe de plug-in principale pour l'exécution du plug-in. * / require_once (plugin_dir_path (__FILE__). 'admin / class-acme-footer-image.php'); / ** * Commence l'exécution du plugin. * * Étant donné que tout le contenu du plug-in est enregistré via des points d'ancrage, * le lancement du plug-in à partir de ce point dans le fichier * n'affecte pas le cycle de vie de la page. * * @since 0.1.0 * / function run_acme_footer_image () $ plugin = new Acme_Footer_Image (); $ plugin-> run (); run_acme_footer_image (); Ici, tout devrait être relativement familier: nous nous assurons d'obtenir l'autorisation de charger le plug-in, nous incluons la dépendance pour le tableau de bord, nous instancions le widget, puis nous le mettons en mouvement..
À ce stade, nous lisons pour activer le plugin. Faites-le à partir du tableau de bord du plugin de votre installation WordPress, puis accédez à n’importe quel écran de publication ou de page. Vous devriez remarquer une «Image de pied de page en vedette». Ensuite, lorsque vous cliquez sur l’ancre, la médiathèque doit apparaître..
Sinon, revérifiez les chemins que vous avez associés à votre fichier JavaScript et assurez-vous qu'ils se chargent correctement..
À partir de là, vous êtes libre de sélectionner des images et de les télécharger, mais rien d’autre ne vient de cela. Dans le prochain article, nous allons voir comment tirer parti des données extraites de l'utilitaire de téléchargement multimédia..
Ici, nous avons examiné la dernière version de Media Uploader de WordPress, son fonctionnement et la manière dont nous pouvons jeter les bases pour en tirer parti dans notre code. Dans le prochain article, nous allons voir comment utiliser JavaScript pour récupérer les données ajoutées à Media Uploader afin que nous puissions, à notre tour, en faire ce que nous voulons..
De plus, nous allons voir comment introduire des champs supplémentaires dans Media Uploader à l'aide de modèles existants fournis avec WordPress Core. Et plus tard, nous verrons comment implémenter des champs supplémentaires aux côtés de Media Uploader pour enregistrer encore plus d'informations..
Pour le moment, jouez avec le code fourni dans cet article, voyez si vous pouvez le faire fonctionner dans le contexte de vos propres projets, et laissez les questions et / ou commentaires que vous avez dans le fil de commentaires ci-dessous.!
Enfin, n'oubliez pas que vous pouvez extraire ce code du référentiel GitHub associé, attaché à ce message..
