Share
Bienvenue dans la deuxième partie de la série. Dans le premier article, nous avons expliqué les normes de codage WordPress, comment éviter les collisions d’espaces de nom, les commentaires dans le code et quelques conseils de sécurité de base..
Aujourd'hui, nous allons aller un peu plus loin et écrire un peu plus de code et apprendre quelques techniques pour améliorer les performances et la sécurité de nos plugins. Les sujets que nous couvrirons sont les suivants:
Saisissez votre éditeur de code et préparez-vous à jouer avec WordPress!
La première chose à garder à l’esprit est que WordPress a deux fonctions formidables (wp_enqueue_script et wp_enqueue_style) pour vous permettre d’inclure vos scripts et vos styles. À cette fin, veuillez ne pas les ajouter manuellement dans l'en-tête ou en utilisant wp_head crochet d'action.
Si vous utilisez les méthodes WordPress, les plugins de mise en cache et de minification pourront inclure vos scripts dans leurs fonctions, vous pourrez choisir de les placer très facilement en pied de page ou en-tête, vous pourrez ajouter des scripts dépendants et également utiliser tous les scripts. astuces expliquées ci-dessous avec d'autres fonctionnalités.
Incorrect:
Accentsconagua
add_action ('wp_head', 'my_custom_scripts'); function my_custom_scripts () echo ''; Correct:
add_action ('wp_enqueue_scripts', 'my_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('gestionnaire de scripts', get_template_directory_uri (). '' /js/my.js ', array (' jquery '),' 1.0.0 ', true); Je ne vous donnerai pas un tutoriel complet sur la façon d'utiliser wp_enqueue_xxxx car ils sont nombreux (et le Codex est une excellente ressource!) Et j'essaie simplement de vous indiquer comment ajouter des scripts dans vos thèmes ou plugins..
Ce que vous devez toujours avoir à l’esprit est de laisser l’empreinte la plus légère possible. Cela signifie que vous ne devriez pas inclure de fichiers où ils ne sont pas censés être.
Vous pensez peut-être que «ce n’est qu’un fichier, cela n’affectera pas le site Web» et, dans cet état d’esprit, c’est comme jeter un papier dans le parc parce qu’il s’agit d’un simple bout de papier, mais ce n’est pas ainsi que les choses se passent: tous les développeurs laissent leurs scripts partout, l'utilisateur final se retrouvera avec un site totalement gonflé et nous ne voulons pas que.
Maintenant que nous avons couvert cela, voyons quelques astuces pour inclure vos scripts uniquement lorsque cela est nécessaire..
// FRONT END UNIQUEMENT add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('gestionnaire de scripts', get_template_directory_uri (). '' /js/my.js ', array (' jquery '),' 1.0.0 ', true); // BACKEND ONLY add_action ('admin_enqueue_scripts', 'mon_back_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('gestionnaire de scripts', get_template_directory_uri (). '' /js/my.js ', array (' jquery '),' 1.0.0 ', true); Mais attendez! Allons un peu plus loin et n'incluons que des scripts dans les pages dont vous avez vraiment besoin. Une bonne méthode consiste à les enregistrer d'abord, puis à les mettre en file d'attente dans les pages nécessaires.
// FRONT END UNIQUEMENT add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('gestionnaire de scripts', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); if (is_page ('ma-page')) wp_enqueue_script ('gestionnaire de script'); // Soyez créatif pour inclure des fichiers uniquement lorsque cela est nécessaire // if (is_single ()) // if (is_home ()) // if ('nom_cpt' == get_post_type ()) // BACKENDEND UNIQUEMENT add_action (' admin_enqueue_scripts ',' my_back_customs_scripts '); function my_customs_scripts ($ hook) wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // Pour l'inclure uniquement lors de l'édition d'un message if ('edit.php' == $ hook) wp_enqueue_script ('script-handler'); // Si vous avez ajouté une page d'options comme celle-ci // $ plugin_screen_id = add_options_page (…) // vous pouvez faire $ screen = get_current_screen (); if ($ plugin_screen_id == $ screen-> id) wp_enqueue_script ('gestionnaire de scripts'); / * Une autre façon d'utiliser l'ID d'écran * / add_action ('admin_print_styles-'. $ Plugin_screen_id, 'my_back_customs_scripts');// FRONT END UNIQUEMENT add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('gestionnaire de scripts', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // si vous avez besoin d'inclure un script pour un shortcode // Ne l'ajoutez pas partout // Vous pouvez l'inclure uniquement si nécessaire global $ post; if (is_a ($ post, 'WP_Post') && has_shortcode ($ post-> post_content, 'custom-shortcode')) wp_enqueue_script ('script-handler'); Alors que les autres extraits de code s'appliquent aux scripts et aux styles, les éléments suivants ne fonctionnent qu'avec wp_enqueue_style (au moins pour l'instant).
// FRONT END UNIQUEMENT add_action ('wp_enqueue_scripts', 'my_front_customs_styles'); function my_front_customs_styles () wp_register_style ('mon-plugin-css', plugins_url ('mon-plugin / css / plugin.css')); // Incluons ce css uniquement pour les navigateurs anciens (et de mauvaise qualité) wp_enqueue_style ('my-plugin-css'); global $ wp_styles; $ wp_styles-> add_data ('my-plugin-css', 'conditionnel', 'lte IE 9'); Vous pouvez voir quelques exemples supplémentaires dans le Codex. Un autre excellent exemple que vous pouvez utiliser pour démarrer tous vos plugins est le plugin Boilerplate de WordPress. Examinez le code pour voir comment les scripts et les styles sont inclus. Le plugin Wpfavs (basé sur WordPress Plugin Boilerplate) est un bon exemple de la création d’un plugin pour le backend de Wordpress..
Pour ce sujet, je vais partager quelques mauvaises habitudes que j’ai souvent vues en faisant Ajax dans WordPress et qui pourraient être divisées en phrases suivantes:
wp_localize_scriptJe sais que jQuery fait de l’appel Ajax une partie du gâteau, et nous pouvons simplement créer un fichier appelé ajax.php, comprendrewp-load.php dessus et faites notre Ajax là-bas. Mais ce n'est pas la "manière WordPress" - ce n'est pas à l'épreuve du futur. Plus encore, il est moins sécurisé et vous manquerez de nombreuses fonctionnalités de WordPress..
La bonne façon est d'utiliser le wp_ajax_my_action et wp_ajax_nopriv_my_action crochets d'action. La principale différence entre les deux est que le premier est utilisé pour les utilisateurs connectés et le second pour les utilisateurs non connectés..
Notez que "my_action" doit être changé pour votre nom d'action. Nous verrons comment cela fonctionne dans un instant.
Voyons tout cela dans un exemple simple avec un peu de code et d'imagination. Imaginons que nous voulions afficher 5 messages lorsqu'un utilisateur (connecté ou non) clique sur un bouton. Nous allons nommer cette action cool_ajax_example, alors commençons à ajouter les fonctions de rappel Ajax qui renverront les données.
Vous pouvez inclure ce code sur votre functions.php ou dans votre plugin.
// Nous ajoutons d'abord les actions hook add_action ('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback'); add_action ('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback'); function cool_ajax_example_callback () …Comme vous pouvez le constater, les deux hooks utilisent la même fonction de rappel qui renvoie les données. Notez également que notre action se nomme à la fin du nom du crochet wp_ajax_cool_ajax_example
C'est très importantécrire le nom de l'action partout ou cela ne fonctionnera pas du tout.
Avant de continuer avec la fonction de rappel, passons à jQuery nécessaire pour l'appel Ajax. Le script jQuery se déclenchera lorsque nous appuierons sur un simple bouton HTML, et nous devrons envoyer cette demande au admin-ajax.php fichier que c’est le script qui gère toutes les demandes AJAX dans Wordpress. De plus, nous devons ajouter un nonce car nous avons déjà dit que nous voulons le sécuriser. wp_localize_script une fonction.
Si vous avez inclus vos scripts correctement, comme expliqué au début de cet article, vous avez un nom de gestionnaire de script (dans nos exemples ci-dessus, 'gestionnaire de script'), utilisez-le pour transmettre nos valeurs PHP à notre fichier javascript. Vous pouvez inclure ce morceau de code juste après le wp_enqueue_function utilisé pour inclure le JavaScript.
wp_localize_script ('script-handler', 'MyVarName', array ('ajax_url' => admin_url ('admin-ajax.php'), 'nonce' => wp_create_nonce ('return_posts'));Comme vous pouvez le voir wp_localize_script est un moyen assez facile de transmettre une variable PHP à nos fichiers JavaScript et il imprimera un xhtml valide en raison de la Mots clés. Le code ci-dessus sera imprimé dans l'en-tête lorsque le fichier JavaScript avec gestionnaire de script comme le nom est chargé et il ressemblera à quelque chose comme:
Il est maintenant temps de créer notre fichier javascript, appelons-le my.js et cela ressemblera à quelque chose comme:
(fonction ($) $ (fonction () $ ('bouton #'). click (fonction (e) e.preventDefault (); $ .ajax (url: monVarName.ajax_url, données: action: ' cool_ajax_example ', nonce: monVarName.nonce, succès: fonction (réponse) $ (' # conteneur_réponse '). html (réponse);, tapez: "POST",);); ) (jQuery);Veuillez noter comment nous utilisons le nonce et ajax_url que nous avons passé avec wp_localize_script. Vérifiez également que nous transmettons une valeur POST appelée "action" qui correspond au nom de l’action que nous avons utilisé dans le processus. wp_ajax crochets.
Il est maintenant temps de terminer notre fonction de rappel. La première chose à faire est de vérifier que le nonce est correct et de pouvoir ensuite renvoyer certains messages..
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // La première chose que nous faisons est de vérifier le nonce et de tuer le script s'il est erroné si (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wron nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // La requête $ the_query = new WP_Query ($ args); // La boucle si ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); écho ''. get_the_title (). '
'; écho ''; else echo 'Messages non trouvés'; / * Restaure les données de post d'origine * / wp_reset_postdata (); // n'oublie pas ceci // Nous faisons un appel simple, nous ne voulons rien exécuter d'autre die (); Si vous avez besoin de quelque chose de plus complexe, comme supprimer un message, vérifiez toujours les autorisations des utilisateurs, comme je l’ai mentionné au début de ce sujet. Par exemple, si vous voulez que les administrateurs seulement fassent certaines actions, vous pouvez faire dans votre script quelque chose comme:
if (current_user_can ('administrator')) wp_delete_post ($ postid, $ force_delete); Avec tous les conseils ci-dessus, vous êtes maintenant un maître dans WordPress Ajax et vous pouvez effectuer toutes les actions que vous voulez. Essayez de jouer avec ce qui précède et ajustez-le à vos besoins. Personnellement, j'aime utiliser JSON type de données et je fais echo json_encode () au lieu de faire un simple écho sur mes scripts, mais c'est une autre affaire.
Le but de cette section ne sera pas de vous apprendre comment fonctionnent les filtres et les actions. Il existe d'excellents tutoriels autour de ce sujet qui l'expliquent en détail. Ce que je vais expliquer, c’est pourquoi vous devriez ajouter des filtres et des actions sur vos plugins et vous montrer quelques exemples pour en faciliter la compréhension..
Mais commençons par une introduction à ces concepts:
Vérifier la API de plugin pour plus d'informations sur les crochets d'action et les filtres.
C'est simple: parce que cela rend votre plugin meilleur. De cette façon, les développeurs et les utilisateurs normaux ensemble pourront étendre, adapter ou améliorer votre plugin au-delà de son objectif initial sans toucher au cœur de celui-ci..
Prenons par exemple un plugin de commerce électronique. Grâce aux crochets et aux filtres, vous pouvez créer de nouveaux plug-ins qui s'y rattachent, comme par exemple de nouvelles passerelles de paiement, des fonctions d'expédition et bien plus encore..
Ne devenez pas fou en ajoutant des actions et des filtres partout. Au début, vous trouverez cela un peu difficile ou ennuyeux, alors essayez de penser comme si vous étiez un autre développeur regardant un nouveau plugin et demandez-vous "Ai-je besoin ici d'un crochet d'action?". En outre, un pourcentage énorme d'actions et de filtres sera ajouté à la demande une fois que vous aurez commencé à recevoir une demande d'assistance (oui, vous les aurez toujours!) Ou à recevoir les commentaires de vos utilisateurs..
Comme tout dans la vie, une fois que cela devient une habitude, vous verrez clairement où les inclure..
Quelques recommandations pour savoir où inclure les filtres:
Utilisons la fonction de rappel utilisée dans cet article pour voir un exemple des recommandations ci-dessus. Pour créer des variables filtrables sur ce cas, nous utilisons apply_filters ()
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // La première chose que nous faisons est de vérifier le nonce et de tuer le script s'il est faux if (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // La requête $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // La boucle si ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); écho ''. get_the_title (). '
'; écho ''; else echo 'Messages non trouvés'; / * Restaure les données de post d'origine * / wp_reset_postdata (); // n'oublie pas ceci // Nous faisons un appel simple, nous ne voulons rien exécuter d'autre die (); Comme vous pouvez le voir, j’ai ajouté un filtre au $ args variable qui fonctionnera juste avant WP_Query exécute la requête. Avec un simple filtre, tout utilisateur peut modifier, par exemple, le nombre de publications renvoyées..
fonction wpt_alter_coolajax_query ($ args) $ args ['posts_per_page'] = 10; return $ args; add_filter ('cool_ajax_query', 'wpt_alter_coolajax_query');Vous pouvez utiliser des filtres dans différents scénarios, utilisez simplement votre imagination. Par exemple, sur mon plugin Invitations sociales WordPress, je laisse les utilisateurs modifier la feuille de style contextuelle avec un filtre au cas où ils auraient un style totalement différent.
Ou à cette occasion, lorsque le plugin envoie des emails, je donne la possibilité de changer le "De l'email" qui wp_mail () va utiliser.
function get_from_email () if (isset ($ this -> _données_utilisateur)) return apply_filters ('wsi_from_email', $ this -> _données_utilisateur-> user_email); return apply_filters ('wsi_from_email', get_bloginfo ('admin_email')); En ce qui concerne les actions, cela change un peu. Vous souhaitez ajouter des points d'ancrage d'action dans les scénarios suivants (sans s'y limiter):
Pour créer ces zones d'accrochage, nous utilisons le do_action () une fonction. Appliquons-les dans notre exemple.
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // La première chose que nous faisons est de vérifier le nonce et de tuer le script s'il est erroné si (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wron nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // La requête $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // La boucle if ($ the_query-> have_posts ()) // nous lançons le hook avant que la boucle ne soit traitée do_action ('cool_ajax_before_loop', get_the_ID ()); écho ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); // nous courons le crochet avant que le titre ne soit imprimé do_action ('cool_ajax_before_title', get_the_ID ()); écho ''. get_the_title (). '
'; // nous courons le crochet après que le titre est imprimé do_action ('cool_ajax_after_title', get_the_ID ()); écho ''; // nous lançons le hook après que la boucle ait été traitée do_action ('cool_ajax_after_loop', get_the_ID ()); else echo 'Messages non trouvés'; / * Restaure les données de post d'origine * / wp_reset_postdata (); // n'oublie pas ceci // Nous faisons un appel simple, nous ne voulons rien exécuter d'autre die (); Comme vous pouvez le voir, je passe un argument aux crochets avec get_the_ID () . Toute fonction accrochée à notre action hook pourra utiliser cet argument. Voyons quelques exemples:
/ ** * Afficher l'image sélectionnée avant le titre * / function wpt_show_post_image ($ post_id) echo get_the_post_thumbnail ($ post_id, 'thumbnail'); add_action ('cool_ajax_before_title', 'wpt_show_post_image'); / ** * Afficher les catégories de message après le titre * / function wpt_show_post_cats ($ post_id) echo get_the_category_list (",", $ post_id); add_action ('cool_ajax_after_title', 'wpt_show_post_cats');Aussi, vous pouvez utiliser do_action () crochets pour exécuter d'autres actions au lieu d'ajouter un nouveau balisage comme dans l'exemple ci-dessus. Par exemple, dans WordPress Social Invitations, j’ai un crochet d’action qui se déclenche chaque fois qu’un message est envoyé. Puis en utilisant myCRED plugin je peux accrocher l'action de donner des points à l'utilisateur qui vient d'envoyer le message.
Comme vous pouvez le constater, l'ajout de points d'ancrage et de filtres profitera non seulement à votre plugin, mais également aux autres développeurs et utilisateurs. Alors pourquoi ne pas commencer à ajouter des filtres et des actions autour de?
Aujourd'hui, nous avons appris comment inclure des scripts et des styles, comment procéder. Ajax appelle la méthode WordPress et quelques astuces de base pour le filtrage et les actions. Nous avons déjà beaucoup d’informations pour développer un joli plugin et je peux maintenant dire que ces séries sont proches de la fin.
Dans l'article à venir et final, je vais parler d'internationalisation, de débogage et de documentation pour résumer ce que je considère comme les principaux éléments à prendre en compte lors du développement d'un plugin..
