Share
Il y a quelque temps, nous avons eu un tutoriel montrant comment intégrer WordPress Media Uploader dans les options de thème et de plug-in. Sur la base de cette idée, nous en développerons une autre version en modifiant quelque chose en JavaScript (en gros, le code PHP de base est presque identique à l'ancien). En bref, nous allons tirer parti de jQuery pour créer un minuscule plugin jQuery répondant à notre objectif.
Nous allons créer un exemple de page Options contenant deux champs de formulaire: Logo et Favicon. En supposant que chacune d’elles comporte 3 composants, à savoir: un champ de texte permettant de saisir l’URL d’une image, un bouton permettant d’afficher la fenêtre contextuelle WP Media Uploader et un champ d’aperçu affichant l’image actuellement sélectionnée..
Dans votre répertoire de thème, créez deux fichiers nommés wptuts.php et wptuts-upload.js. Puis ouvrez le functions.php dans le même répertoire et ajoutez le code suivant:
Accentsconagua
require ('wptuts.php'); Tout d’abord, nous devrions définir les options par défaut pour notre page Options. Nous avons l'intention de regrouper tous les paramètres en une seule option, wptuts_options, dans ce cas. Voici le contenu de wptuts.php:
add_action ('after_setup_theme', 'wptuts_default_options'); function wptuts_default_options () // Vérifie l'existence ou non de 'wptuts_options' // Sinon, créez-en un nouveau. if (! get_option ('wptuts_options')) $ options = array ('logo' => ", 'favicon' =>",); update_option ('wptuts_options', $ options); le wptuts_default_options la fonction sera exécutée juste après l'installation du thème.
Ensuite, nous avons besoin d'une page Options dans laquelle nos champs de formulaire sont affichés. Ce message ne portera pas sur les paramètres de l'API, nous supposons que vous le comprenez. Si vous n'êtes pas familier avec l'API Settings, je vous recommande de vous reporter à d'autres publications à ce sujet, telles que le Guide complet de l'API Settings de WordPress, par exemple.
add_action ('admin_menu', 'wptuts_add_page'); function wptuts_add_page () $ wptuts_options_page = add_menu_page ('wptuts', 'Options de WPTuts', 'manage_options', 'wptuts', 'wptuts_options_page'); add_action ('admin_print_scripts-'. $ wptuts_options_page, 'wptuts_print_scripts'); fonction wptuts_options_page () ?> WPTuts + Page Options
Paramètres sauvegardés.
--> Le code ci-dessus ajoute simplement une nouvelle page de menu qui a un titre de menu qui se lit comme suit: Options WPTuts et la valeur de limace de Wptuts. Notez la fonction de rappel wptuts_options_page, il rendra le contenu de notre page d'options. A côté de cela, nous ajoutons également une fonction nommée wptuts_print_scripts qui met en mémoire JavaScript et la feuille de style sur le hook de notre page d’options, cette fonction sera mentionnée plus tard.
add_action ('admin_init', 'wptuts_add_options'); function wptuts_add_options () // Enregistre de nouvelles options register_setting ('wptuts_options', 'wptuts_options', 'wptuts_options_validate'); add_settings_section ('wptuts_section', 'WPTuts + Section d'options', 'wptuts_section_callback', 'wptuts'); add_settings_field ('wptuts_logo', 'WPTuts + Logo', 'wptuts_logo_callback', 'wptuts', 'wptuts_section'); add_settings_field ('wptuts_favicon', 'WPTuts + Favicon', 'wptuts_favicon_callback', 'wptuts', 'wptuts_section'); function wptuts_options_validate ($ values) foreach ($ valeurs comme $ n => $ v) $ valeurs [$ n] = esc_url ($ v); retourne $ valeurs; Rappelez-vous l'option nommée wptuts_options? À présent, nous l'enregistrons dans l'API Settings. Sa valeur soumise sera validée par la fonction wptuts_options_validate. Le code ci-dessus enregistre également une nouvelle section contenant nos nouvelles options de paramètres. Les trois fonctions suivantes rendent le contenu de la section et des paramètres nouvellement créés:
function wptuts_section_callback () / * Ne rien imprimer * /; fonction wptuts_logo_callback () $ options = get_option ('wptuts_options'); ?> "/> 
"/> "/> "/> --> Voyez-vous chaque paramètre a trois composantes principales que nous avons prévues ci-dessus? Le champ de texte a la valeur de la classe de envoi de texte, bouton-télécharger pour le bouton, et la valeur de prévisualisation pour le champ d'aperçu restant. Nous avons quitté le corps de wptuts_section_callback vide car nous n’avons besoin d’imprimer aucune information supplémentaire, il suffit d’imprimer tous ses paramètres. Les autres classes que nous ne mentionnons pas sont les classes WordPress intégrées, nous les utilisons pour une meilleure interface utilisateur.
Enfin, comme mentionné précédemment, nous devons intégrer certains scripts intégrés importants, notamment Thickbox et Téléchargement de média:
"/> fonction wptuts_print_scripts () wp_enqueue_style ('thickbox'); // Feuille de style utilisée par Thickbox wp_enqueue_script ('thickbox'); wp_enqueue_script ('media-upload'); wp_enqueue_script ('wptuts-upload', get_template_directory_uri (). '/wptuts-upload.js', array ('boîte épaisse', 'upload-média')); La dernière ligne de la fonction ci-dessus incorporera notre wptuts-upload.js fichier (il est encore vide jusqu'à présent) que nous avons créé auparavant. Tout notre code JavaScript sera écrit ici, alors ouvrez-le et passez à la section suivante.
dans le wptuts-upload.js fichier, la première chose à faire est d’initialiser la base du nouveau plugin:
(function ($) $ (function () $ .fn.wptuts = function (options) sélecteur var = $ (this) .selector; // Récupère le sélecteur // Définit les options par défaut var default = 'preview' : '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; options var = $ .extend (valeurs par défaut, options);); (jQuery ));
Nous venons de créer un plugin jQuery nommé Wptuts. le sélecteur indique l'élément HTML ou l'objet sur lequel le plugin aura une incidence. Par exemple, si nous écrivons JavaScript comme ceci:
$ ('.quelque chose') .wptuts (); Ensuite, le sélecteur sera l’élément HTML avec le quelque chose classe. Nous passons généralement le wrapper HTML, le plugin jQuery manipulera ensuite ses composants enfants. Jetez un coup d’œil à nos deux paramètres créés, chacun d’eux ayant un wrapper dont le nom de la classe est télécharger. Donc, plus tard, nous ferons ceci:
$ ('.upload') .wptuts (); // passe tous les éléments HTML avec la valeur de classe 'upload' au plugin jQuery. le défauts La variable contient toutes les options par défaut pour notre plugin. Nous définissons trois propriétés par défaut dont le nom indique les éléments auxquels elles font référence et dont les valeurs sont le sélecteur HTML. Ces valeurs guident notre plugin et déterminent lesquelles. sélecteurL'élément enfant de sont le champ texte, le bouton ou le champ Aperçu. Bien sûr, ces options peuvent être remplacées par les options de l'utilisateur (si elles sont définies). le options est la variable qui contient les options de cet utilisateur. Enfin, nous fusionnons deux types d’options dans une variable nommée options.
Ensuite, nous devons ajouter un gestionnaire d’événements à l’élément button:
$ .fn.wptuts = fonction (options) sélecteur var = $ (this) .selector; // Récupère le sélecteur // Définit les options par défaut var defaults = 'preview': '.preview-upload', 'text': '.text-upload', 'bouton': '.button-upload'; var options = $ .extend (valeurs par défaut, options); // Quand le bouton est cliqué… $ (options.button) .click (function () // Récupère l'élément Text. Var text = $ (this) .siblings (options.text); // Affiche le popup WP Media Uploader tb_show ('Télécharger un logo', 'media-upload.php? referer = wptuts & type = image & TB_iframe = true & post_id = 0', false); // Redéfinir la fonction globale 'send_to_editor' // Définir où la nouvelle valeur sera envoyée to window.send_to_editor = function (html) // Récupère l'URL de la nouvelle image var src = $ ('img', html) .attr ('src'); // envoie cette valeur au champ Text. text.attr ('value', src) .trigger ('change'); tb_remove (); // ferme ensuite la fenêtre contextuelle return false;); Lorsque vous cliquez sur un bouton, jQuery déclenche un gestionnaire d'événements Click. Ci-dessous le flux de cette fonction d'événement:
enfant de mêmes parents méthode avec la valeur de classe du champ Text comme argument.send_to_editor une fonction. Cette fonction globale a été définie à l'origine par WP Media Uploader. Sa tâche principale est de placer un pointeur sur lequel le nouvel élément d'image HTML (si l'utilisateur insère une image à partir d'une fenêtre contextuelle) est envoyé. Ensuite, nous allons analyser la valeur de permalink de cet élément d'image HTML et la stocker dans le src variable.tb_remove fonction, nous déclenchons un événement nommé changement à l'élément de champ de texte défini ci-dessous. $ (options.text) .bind ('change', function () // Récupère la valeur de l’objet actuel var url = this.value; // détermine le champ Aperçu var preview = $ (this) .siblings (options. preview); // Liez la valeur au champ Preview $ (preview) .attr ('src', url);); Si le champ Texte a une nouvelle valeur, cette valeur sera instantanément liée au champ Aperçu pour afficher la nouvelle image sélectionnée. Le JavaScript final créant le plugin sera:
(function ($) $ (function () $ .fn.wptuts = function (options) sélecteur var = $ (this) .selector; // Récupère le sélecteur // Définit les options par défaut var default = 'preview' : '.preview-upload', 'text': '.text-upload', 'button': '.button-upload'; var options = $ .extend (valeurs par défaut, options); // quand le bouton est cliqué … $ (Options.button) .click (function () // Récupère l'élément Text. Var text = $ (this) .siblings (options.text); // Afficher le popup WP Media Uploader popup tb_show ('Télécharger un logo' , 'media-upload.php? referer = wptuts & type = image & TB_iframe = true & post_id = 0', false); // Redéfinir la fonction globale 'send_to_editor' // Définir où la nouvelle valeur sera envoyée à window.send_to_editor = function ( html) // Récupère l'URL de la nouvelle image var src = $ ('img', html) .attr ('src'); // envoie cette valeur au champ Text. text.attr ('valeur', src) .trigger ('change'); tb_remove (); // ferme ensuite la fenêtre contextuelle return false;); $ (options.text) .bind ('change', function () // Récupère la valeur ue de l'objet courant var url = this.value; // Détermine le champ Aperçu var preview = $ (this) .siblings (options.preview); // Lier la valeur au champ Aperçu $ (preview) .attr ('src', url); ); // Usage $ ('.upload') .wptuts (); // Utiliser comme option par défaut. ); (jQuery)); Notre plugin jQuery est prêt à être utilisé. À la toute fin des extraits de code ci-dessus (l'endroit que nous avons commenté), ajoutez simplement ce code simple:
// Usage $ ('.upload') .wptuts (); // Utiliser comme option par défaut. La manière complète d’utiliser ce plugin est:
$ (sélecteur) .wptuts ('preview': / * Sélecteur de l'aperçu * /, 'text': / * Sélecteur du texte * /, 'bouton': / * Sélecteur du bouton * /); Tout ce dont vous avez besoin est de remplir correctement vos sélecteurs (en fonction de votre structure HTML).
Pour obtenir la valeur de l'URL de ces images, procédez comme suit:
$ wptuts_options = get_option ('wptuts_options'); $ wptuts_logo = $ wptuts_options ['logo']; // Logo $ wptuts_favicon = $ wptuts_options ['favicon']; // Favicon Ajoutez simplement le code suivant dans tout fichier de modèle pour lequel vous souhaitez afficher le logo. Essayez de l'ajouter à footer.php, par exemple:
">; ?> "<?php bloginfo( 'name' ); ?>")
Dans wptuts.php, ajouter ce code:
fonction wptuts_add_favicon () $ wptuts_options = get_option ('wptuts_options'); $ wptuts_favicon = $ wptuts_options ['favicon']; ?> --> Ceci est juste un simple plugin, il vous donnera la possibilité d’intégrer WP Media Uploader beaucoup plus facilement et avec plus de flexibilité. Il n'est pas nécessaire de répéter beaucoup de code JavaScript pour chaque entrée de téléchargement de formulaire si plusieurs entrées de téléchargement doivent être intégrées à WP Media Uploader. J'espère que vous aimez. Tout commentaire serait apprécié.
Vous pouvez télécharger le code source en haut de ce post ou le trouver sur Github.
