Share
Bienvenue aux développeurs de thèmes WordPress et Plugin! Nous souhaitons tous que nos utilisateurs de thèmes puissent télécharger leurs propres images ou logos en utilisant une page d'options de thème créée par nous (y compris des pages de plugins), mais comment le programmez-vous? Utilisez-vous WordPress Media Uploader (comme lorsque vous téléchargez une image sélectionnée ou insérez une image dans un message) ou ajoutez-vous simplement un champ de saisie de fichier et oubliez-vous toutes les autres choses? Téléchargez-vous les images dans un dossier de téléchargement correctement? Joignez-vous l'image à la médiathèque WordPress? Et, c’est un point important, est-ce que vous supprimez le fichier (si c’est ce que l’utilisateur veut) correctement? Eh bien, il est temps de donner forme à notre page Options de thème en utilisant l'interface WordPress. Nous voulons des utilisateurs heureux, nous voulons une interface conviviale.
Ce tutoriel est axé sur le téléchargement d'images sur une page d'options de thème. Par conséquent, si vous ne savez pas comment en créer une, je vous recommande sérieusement de commencer par jeter un coup d'œil à l'étonnant tutoriel de Tom McFarlin, intitulé Guide complet sur les paramètres WordPress. Série API.
Nous devons créer un dossier appelé wptuts-options dans le dossier racine du thème contenant un fichier appelé wptuts-options.php où tout le code nécessaire pour créer notre page Options de thème sera défini. Nous devons également créer un dossier appelé js où nous allons enregistrer les fichiers JavaScript dont nous aurons besoin.
Tout d’abord, nous devons appeler notre wptuts-options.php déposer à partir de notre functions.php:
Accentsconagua
require_once ('wptuts-options / wptuts-options.php'); À l'intérieur de notre wptuts-options.php fichier nous allons créer une fonction où nous allons spécifier les valeurs par défaut. Dans ce cas, la valeur sera l'URL de l'image sur notre serveur. Nous allons assigner une chaîne vide par défaut mais nous pourrions aussi assigner l'URL d'une image que nous avons déjà dans un dossier de thème.
fonction wptuts_get_default_options () $ options = array ('logo' => "); return $ options; Nous allons maintenant créer une fonction qui, si notre option n’existe pas dans la base de données (nous l’appellerons theme_wptuts_options), l'initiera avec les valeurs données par notre fonction précédente.
function wptuts_options_init () $ wptuts_options = get_option ('theme_wptuts_options'); // Nos options sont-elles enregistrées dans la base de données? if (false === $ wptuts_options) // Sinon, nous enregistrerons nos options par défaut $ wptuts_options = wptuts_get_default_options (); add_option ('theme_wptuts_options', $ wptuts_options); // Dans les autres cas, nous n'avons pas besoin de mettre à jour la base de données // // Options de thème d'initialisation add_action ('after_setup_theme', 'wptuts_options_init'); Il est maintenant temps de créer notre page Options de thème, de l'ajouter au panneau d'administration et de créer un formulaire..
// Ajout du lien "Options WPTuts" à la fonction de menu "Apparence" wptuts_menu_options () // add_theme_page ($ page_title, $ menu_title, $ capable, $ menu_slug, $ fonction); add_theme_page ("Options WPTuts", "Options WPTuts", "edit_theme_options", "wptuts-settings", "wptuts_admin_options_page"); // Chargement de la page Options administrateur add_action ('admin_menu', 'wptuts_menu_options'); fonction wptuts_admin_options_page () ?>
En résumé: en utilisant le crochet admin_menu nous avons ajouté notre page au panneau d'administration sous Apparence -> Options WPTuts et il pourrait être identifié par la limace wptuts-settings. Après cela, nous avons créé un formulaire qui n'a toujours pas de champ de saisie basé sur setting_fields et do_settings_sections les fonctions. Comme je l'ai déjà dit, l'objectif de ce didacticiel n'est pas de décrire le fonctionnement de ces fonctions. Nous n'allons donc pas en expliquer le rôle. Vous pouvez lire la série de Tom sur le lien ci-dessus.
Mais faites attention au fait que, en plus de créer le bouton soumettre, nous avons également créé un autre, un Réinitialiser bouton. Quand on appuie dessus, la valeur de l'image sera celle établie par défaut.
Enfin, nous allons créer notre bouton pour télécharger des images et un champ de saisie où, une fois téléchargé, il affiche son URL..
fonction wptuts_options_settings_init () register_setting ('theme_wptuts_options', 'theme_wptuts_options', 'wptuts_options_validate'); // Ajoute une section de formulaire pour le logo add_settings_section ('wptuts_settings_header', __ ('Options de logo', 'wptuts'), 'wptuts_settings_header_text', 'wptuts'); // Ajout du logo uploader add_settings_field ('wptuts_setting_logo', __ ('Logo', 'wptuts'), 'wptuts_setting_logo', 'wptuts', 'wptuts_settings_header'); add_action ('admin_init', 'wptuts_options_settings_init'); fonction wptuts_settings_header_text () ?> Il n’ya pas grand chose de plus à dire ici, juste que la valeur de la logo Le champ affiche l'URL de l'image avec échappement. En ce moment, voici ce que montre notre écran:
Et n'oubliez pas notre fonction de validation des données:
fonction wptuts_options_validate ($ input) $ default_options = wptuts_get_default_options (); $ valid_input = $ default_options; $ submit =! vide ($ input ['submit'])? vrai faux; $ reset =! empty ($ input ['reset'])? vrai faux; if ($ submit) $ valid_input ['logo'] = $ input ['logo']; elseif ($ reset) $ valid_input ['logo'] = $ default_options ['logo']; return $ valid_input;
Sauvons la valeur de la logo champ tel qu'il est si nous soumettons le formulaire ou le laissons avec sa valeur par défaut si nous réinitialisons le formulaire. Il est conseillé de vérifier la valeur du champ de saisie, en validant les URL.
Si nous sommes arrivés à ce point (j'espère) et que nous ne sommes pas vraiment fatigués, nous pouvons essayer le formulaire. Nous verrons que la valeur du champ de saisie est sauvegardée sans problème et que, par la suite, une URL en tant que valeur.
Maintenant, continuons avec ce qui est vraiment important.
Étape 1 Ajout du JavaScript nécessaire
Si nous voulons que WordPress Media Uploader fonctionne correctement, nous devons importer plusieurs bibliothèques JavaScript ainsi que des CSS supplémentaires:
Nous devons introduire le code suivant dans le wptuts-options.php fichier:
function wptuts_options_enqueue_scripts () wp_register_script ('wptuts-upload', get_template_directory_uri (). '/ wptuts-options / js / wptuts-upload.js', array ('jquery', 'media-upload', 'thickbox'); if ('apparence_page_wptuts-settings' == get_current_screen () -> id) wp_enqueue_script ('jquery'); wp_enqueue_script ('thickbox'); wp_enqueue_style ('thickbox'); wp_enqueue_script ('media-upload'); wp_enqueue_script ('wptuts-upload'); add_action ('admin_enqueue_scripts', 'wptuts_options_enqueue_scripts'); Nous devons clarifier un certain nombre de choses: à la première ligne, nous enregistrons un script (nous n'en avons pas encore parlé) qui gérera le processus visant à ouvrir la fenêtre du modèle et à collecter des données d'image. Comme nous l'avons expliqué auparavant, nous allons créer un dossier appelé js. Une particularité de ce script est qu'il dépend d'un certain nombre d'autres bibliothèques telles que jQuery, Media-Upload et Thickbox, toutes viennent lorsque vous installez WordPress..
Dans la deuxième ligne, nous utilisons le get_current_screen () fonction qui nous fournit le slug de la page sur laquelle nous travaillons. Cette fonction ne peut pas toujours être utilisée et, selon le hook utilisé, elle sera disponible ou non. Avec le crochet admin_enqueue_scripts la fonction fonctionnera sans problème. get_current_screen () -> id nous donne un bout de la page sur laquelle nous travaillons. Pour les pages fournies par défaut dans le panneau d’administration de WordPress, cela peut être "des thèmes','post-édition','plugins'etc. Dans notre cas, cette limace ressemble à apparence_page_ OUR_SLUG. Vous souvenez-vous de la limace que nous avons définie dans le add_theme_page une fonction? Eh bien, notre page Options de thème contient enfin le slug suivant: apparence_page_wptuts-settings. Donc, nous ne chargerons les scripts que lorsque cela sera approprié.
Les deux autres lignes ajoutent les bibliothèques Javascript jQuery, Thickbox, Media Upload et notre JS, wptuts-upload.js. En outre, nous ajoutons également le CSS Thickbox.
Malgré son apparence, notre script sera plus facile qu'il n'y paraît. Il suffit de connaître certaines fonctions de Thickbox et le Media Uploader pour le faire fonctionner. Le problème est qu’il est difficile de trouver des informations à ce sujet et qu’en fin de compte, en tant que bons programmeurs, nous n’avons pas d’autre choix que de travailler avec du code. Comme nous sommes sur le point de le voir, c'est vraiment facile à faire. Continuons directement avec notre premier code de version:
jQuery (document) .ready (function ($) $ ('# upload_logo_button'). click (function () tb_show ('Téléchargez un logo', 'media-upload.php? referer = wptuts-settings & type = image & TB_iframe = true & post_id = 0 ', faux); retourne faux;);); Succès! Si nous appuyons maintenant notre Télécharger le logo bouton le WordPress Media Uploader apparaîtra. Génial, on a fini, à bientôt! Non, ce n'est pas vrai, mais il ne faudra pas beaucoup de temps pour que notre page Options de thème fonctionne de manière simple..
En examinant le code, nous pouvons constater que nous avons affecté un événement de clic au bouton qui lance une fonction Thickbox destinée à afficher la fenêtre modale. Cette fonction accepte trois paramètres:
Télécharger un logo'faux parce que nous n'allons pas travailler avec des groupes d'images mais avec un seul.Parmi eux, le plus intéressant est l'URL. WordPress utilise un fichier appelé media-upload.php pour gérer la fenêtre et permet également plusieurs $ _GET paramètres. Nous devons nous rappeler que Et les caractères doivent être codés avec leur entité HTML pour que l'URL fonctionne sans problème.
référant - Ce paramètre est optionnel. Nous l'utiliserons plus tard pour faire un petit tour.type - C'est le type de fichier. Ça peut être vidéo, l'audio, image ou fichier.TB_iframe - Il doit toujours être sélectionné vrai de sorte que la fenêtre est affichée dans un iframe, ou cela ne fonctionnera pas. Même si cela peut vous sembler difficile à croire, c’est le paramètre le plus important et nous allons maintenant voir pourquoi..post_id - Il est utilisé pour indiquer que l'image ne sera attachée à aucun message et qu'elle sera libre comme un petit oiseau.Eh bien, je ne veux pas vous mentir. Un seul de ces trois paramètres est vraiment nécessaire: TB_iframe. Nous pouvons oublier les autres. Il y a quelques versions, WordPress a unifié son Media Uploader pour télécharger tout type de fichier, sans avoir besoin de différencier les images des vidéos ou de la musique. type n'est pas nécessaire et l'ID de publication est 0 par défaut. Quoi qu'il en soit, il n'y a pas de mal à les quitter au cas où nous aurions un problème de compatibilité. Il serait intéressant d'indiquer post_id s'il s'agit d'une meta box dans un post.
La partie suivante de notre JavaScript doit contenir la fonction suivante:
window.send_to_editor = fonction (html) var image_url = $ ('img', html) .attr ('src'); $ ('# logo_url'). val (image_url); tb_remove (); send_to_editor est un événement inclus dans la bibliothèque WordPress JavaScript Media Uploader. Il fournira des données d'image au format HTML, afin que nous puissions les placer où nous voulons.
Cet événement fournit un paramètre à la fonction de gestionnaire., html qui comprend le code suivant (à titre d'exemple):
Il est donc facile d'extraire l'URL de l'image une fois chargée sur le serveur à l'aide de la ligne $ ('img', html) .attr ('src'); alors il sera stocké dans notre champ de saisie avec la ligne $ ('# logo_url'). val (image_url);.
La fonction tb_remove ferme la fenêtre modale, c'est tout. Nous sommes maintenant en mesure de soumettre le formulaire et d’enregistrer l’URL de l’image dans la base de données. Nous pourrions nous arrêter maintenant, mais le résultat ne serait pas très beau ni convivial, alors faisons une amélioration.
Si nous sommes attentifs, lorsque nous téléchargeons l’image à l’aide de Media Uploader, nous pouvons insérer l’URL de l’image dans notre champ de saisie à l’aide du bouton Insérer dans le post bouton. Cela pourrait dérouter l'utilisateur. Pour cette raison, nous pouvons changer ce texte en utilisant des filtres dans WordPress. Nous tapons le code suivant dans notre wptuts-options.php fichier:
fonction wptuts_options_setup () global $ pagenow; if ('media-upload.php' == $ pagenow || 'async-upload.php' == $ pagenow) // Nous allons maintenant remplacer le "Insérer dans le bouton" dans Thickbox add_filter ("gettext", 'replace_thickbox_text', 1, 3); add_action ('admin_init', 'wptuts_options_setup'); function replace_thickbox_text ($ translate_text, $ text, $ domain) if ('Insérer dans la publication' == $ text) $ referer = strpos (wp_get_referer (), 'wptuts-settings'); if ($ referer! = ") return __ ('Je veux que ce soit mon logo!', 'wptuts'); return $ translate_text; En utilisant le crochet admin_init, nous vérifions que les pages sur lesquelles nous travaillons sont celles utilisées par Media Uploader. Ces pages sont: media-upload.php et async-upload.php. Le premier ouvre la fenêtre modale et le second est chargé une fois l'image téléchargée. Pour confirmer que nous travaillons sur l’un d’eux, nous devons utiliser la variable globale $ pagenow et non la fonction get_current_screen () parce que admin_init ne permet toujours pas cette fonction.
Maintenant, pourquoi utilisons-nous le référant variable? Ok, c'est un peu délicat et ça marche comme ça:
Télécharger une image bouton, l'URL de référent est quelque chose comme http://www.ourdomain.com/… / wp-admin / themes.php? page = wptuts_settings http: // localhost /… /wp-admin/media-upload.php?referer=wptuts-settings&type=image. Voyons maintenant pourquoi nous avons inclus le paramètre referer dans notre JavaScript? Nous devons savoir à partir de quelle page nous lançons Media Uploader car nous devons remplacer le Insérer dans le post texte dans le bouton juste dans notre page Options de thème et non dans une page de publication par exemple. C'est pourquoi j'ai inclus le paramètre referer. Maintenant, en utilisant le wp_get_referer () fonction, nous obtenons l'URL de référent et nous avons juste à trouver le wptuts-settings chaîne à l'intérieur de cette URL. Avec cette méthode, nous allons le replacer dans le bon contexte.
Nous appliquons maintenant le gettext filtrer et chaque phrase contenant "Insérer dans Post" nous remplaçons par "Je veux que ce soit mon logo!". Si nous rouvrons la fenêtre Thickbox et chargeons un nouveau fichier, nous verrons que le texte du bouton a changé. Si vous ne savez pas trop comment utiliser le gettext filtre, et comme ce n’est pas l’une des cibles de ce tutoriel, vous pouvez visiter le Codex WordPress.
Certaines améliorations ont été apportées, n'ont-ils pas?
L'utilisateur doit toujours regarder ce qui se passe à l'écran. Il ne suffit pas que l'utilisateur télécharge une image et se rende sur la page pour vérifier que l'image est là. Nous allons maintenant ajouter un champ de saisie à notre page Options de thème pour que l'utilisateur puisse voir la belle image déjà chargée..
Nous devons écrire le code suivant dans notre wptuts_options_settings_init () une fonction:
// Ajouter l'aperçu de l'image actuelle add_settings_field ('wptuts_setting_logo_preview', __ ('Aperçu du logo', 'wptuts'), 'wptuts_setting_logo_preview', 'wptuts', 'wptuts_settings_header'); Nous devons également créer une nouvelle fonction pour l’aperçu:
fonction wptuts_setting_logo_preview () $ wptuts_options = get_option ('theme_wptuts_options'); ?> ; ?>)
Si nous mettons en ligne une nouvelle image et soumettons le formulaire, nous verrons ceci:
Cool! Calme-toi, ne cours pas. Il y a deux étapes à suivre, tout d'abord, nous téléchargeons l'image, puis nous sommes obligés de soumettre le formulaire si nous voulons enregistrer les modifications. L'utilisateur pourrait penser qu'une fois l'image téléchargée, où diable est mon logo? Dois-je soumettre le formulaire? Évitez de vous fâcher en ajoutant quelques lignes simples à notre code JavaScript:
window.send_to_editor = fonction (html) var image_url = $ ('img', html) .attr ('src'); $ ('# logo_url'). val (image_url); tb_remove (); $ ('# upload_logo_preview img'). attr ('src', image_url); $ ('# submit_options_form'). trigger ('click'); Nous téléchargeons l'image et nous pouvons voir que le formulaire a été soumis! Il suffit d’ajouter une phrase: lorsque l’image est chargée, nous déclenchons la Cliquez sur événement sur le bouton Soumettre et le formulaire est soumis immédiatement, mettant à jour la base de données et l'aperçu de l'image en même temps. Parfait!
Supprimer ce qui n'est pas nécessaire
Jusqu’à présent, la forme est attrayante, utilisable et fonctionne plus que bien, mais il ya quelque chose qui commence à nous déranger. Pourquoi avons-nous besoin du champ de saisie? Hé, nous en avons besoin pour enregistrer l'URL de l'image. Voyons les choses autrement: pourquoi l'utilisateur a-t-il besoin d'un champ de saisie? Pour rien. Il suffit de montrer à l'utilisateur l'image qui a été téléchargée et que tout fonctionne correctement.
Convertissons un peu plus notre formulaire avec le wptuts_setting_logo () une fonction:
function wptuts_setting_logo () $ wptuts_options = get_option ('theme_wptuts_options'); ?> Si vous n'aviez pas remarqué, la seule chose que nous avons faite est de changer le type de saisie du formulaire. Nous parlons maintenant d'un caché champ de saisie et non un texte champ de saisie. Le formulaire conserve les mêmes fonctionnalités mais il est beaucoup plus agréable pour l'utilisateur:
Étape 3 Suppression de l'image
Naturellement, à un moment donné, l'utilisateur voudra supprimer l'image. Pour faciliter les choses, nous allons créer un bouton pour le supprimer. Mais l'image ne doit pas être supprimée uniquement lorsque l'utilisateur clique sur le bouton. Elle doit également être supprimée lors du téléchargement d'une nouvelle image ou si nous réinitialisons le formulaire..
Les premières choses d'abord. Nous allons créer le nouveau bouton dans le wptuts_setting_logo () une fonction:
function wptuts_setting_logo () $ wptuts_options = get_option ('theme_wptuts_options'); ?> Si nous sommes attentifs, le nouveau bouton n'apparaîtra que lorsqu'un logo sera déjà chargé. De plus, nous parlons d'un bouton submit-type, nous allons donc soumettre le formulaire lorsque nous cliquons dessus.
Nous devrons ajouter la fonctionnalité de validation suivante pour que le bouton agisse comme nous le souhaitons., wptuts_options_validate ():
$ default_options = wptuts_get_default_options (); $ valid_input = $ default_options; $ wptuts_options = get_option ('theme_wptuts_options'); $ submit =! vide ($ input ['submit'])? vrai faux; $ reset =! empty ($ input ['reset'])? vrai faux; $ delete_logo =! vide ($ input ['delete_logo'])? vrai faux; if ($ submit) if ($ wptuts_options ['logo']!! = $ input ['logo'] && $ wptuts_options ['logo']! = ") delete_image ($ wptuts_options ['logo']); $ valid_input [ 'logo'] = $ input ['logo']; elseif ($ reset) delete_image ($ wptuts_options ['logo']); $ valid_input ['logo'] = $ default_options ['logo']; elseif ( $ delete_logo) delete_image ($ wptuts_options ['logo']); $ valid_input ['logo'] = "; return $ valid_input; D'accord, qu'est-ce qu'on fait ici? Nous avons ajouté un nouveau $ wptuts_options variable pour vérifier si l'utilisateur a cliqué sur le Supprimer le logo bouton. Si l'utilisateur le fait, le Supprimer l'image La fonction est exécutée et la valeur de l'URL du logo est définie comme une chaîne vide. De plus, le logo sera supprimé si nous soumettons et nous téléchargeons une image différente de celle que nous avons déjà ou même si nous réinitialisons le formulaire..
Prudent! La réinitialisation du formulaire et la suppression de l'image ne doivent pas nécessairement être identiques. Dans notre cas, la valeur par défaut est une chaîne vide, elles correspondent donc.
Maintenant, nous allons ajouter le Supprimer l'image() une fonction:
function delete_image ($ image_url) global $ wpdb; // Nous devons obtenir la méta-ID de l'image. $ query = "SELECT ID FROM wp_posts où guid = '". esc_url ($ image_url). "'AND post_type =' attachment '"; $ results = $ wpdb-> get_results ($ query); // Et supprimez-le pour chaque résultat ($ résultats sous forme de $ rangée) wp_delete_attachment ($ rangé-> ID);
La vérité est que cette étape nécessite une explication plus profonde, mais elle est vraiment facile. La première chose à faire est d’exécuter une requête qui permettra de connaître le méta-ID de notre image dans la base de données. Vous pensez peut-être que c'est un mensonge, mais nos données d'image sont dans le wp_posts table. Eh bien, la requête essaie de sélectionner les registres dont GUID (image, post ou URL de la page) correspond à notre image et post_type = 'pièce jointe' (C'est un attachement, n'est-ce pas?). Nous stockons cet identifiant (il ne devrait pas y en avoir plus d'un) dans $ résultats et le passer en paramètre à WordPress wp_delete_attachment () cela supprimera l'image elle-même et supprimera également la pièce jointe de la médiathèque. C'est facile, propre et optimal.
Étape 4 Affichage de notre logo dans l’en-tête de notre site
Voyons où tout ce gâchis nous a menés. Nous avons besoin de header.php modèle où nous allons insérer un espace pour notre cher logo, où nous insérerons ce morceau de code à la place qui nous plait le plus:
> 
Voici le résultat:
Notes finales
La vérité est qu'il n'y a pas beaucoup plus à dire. Est-il possible de faire cela d'une autre manière? Bien sûr, et en fait, je trouve constamment des exemples, mais de mon point de vue, WordPress Media Uploader est vraiment utile et, une fois qu’il est connu en profondeur, il facilite vraiment la vie. Nous enregistrons le code, la validation (dans le tutoriel, nous n’avons pas beaucoup utilisé, nous aurions dû en utiliser davantage, et nous vous recommandons de le lire à ce sujet) et utilisons le système de fichiers mis à notre disposition par WordPress. Ce sont tous des avantages pour l'utilisateur, qui est habitué à utiliser l'interface de WordPress et peut voir comment tout fonctionne correctement et conformément aux fonctionnalités standard de WordPress. En fait, on pourrait penser que c'est la fonctionnalité par défaut de WordPress.
Ressources externes
Bien que nous ayons parlé de fonctionnalités spécifiques de WordPress, la vérité est que de nombreuses connaissances intermédiaires sont nécessaires. Ici, nous avons une liste avec des ressources connexes:
- Le guide complet de l'API de paramètres WordPress
- Thickbox sur Github
gettext Filtre- Interfaçage avec la base de données dans WordPress
wp_delete_attachment
; ?>)
