Voici un post d’exemple sur l’utilisation de l’ajax dans WordPress. Nous allons voir \u00e0 travers la cr\u00e9ation d’un mini plugin, comment lancer une requ\u00eate ajax utilisant le syst\u00e8me con\u00e7u pour \u00e7a dans wordpress.<\/p>\n
Le plugin sera utilisable en pla\u00e7ant le shortcode<\/p>\n
dans une page. La d\u00e9monstration est ici<\/a><\/p>\n On avait d\u00e9j\u00e0 vu comment cr\u00e9er un plugin permettant l\u2019utilisation d’un shortcode.<\/a> Pour ajouter de l’ajax il faudra ajouter certains \u00e9l\u00e9ments \u00ab\u00a0wp_ajax_\u00a0\u00bb. Le code fonctionnel du plugin est pr\u00e9sent\u00e9 ci-dessous :<\/p>\n Il ne reste plus qu’a cr\u00e9er le fichier script.js qui lancera l’appel de \u00ab\u00a0process_action\u00a0\u00bb lors de la soumission du formulaire g\u00e9n\u00e9r\u00e9 par le shortcode. Il contient le code suivant : <\/p>\n
\n Plugin Name: Plugin action ajax
\n Description: Demonstration d'un plugin effectuant une action ajax
\n *\/<\/span>
\n
\nclass<\/span> PluginActionAjax {<\/span>
\n
\n public<\/span> function<\/span> __construct(<\/span>)<\/span> {<\/span>
\n \/\/shortcode permettant d'afficher le formulaire avec le champs input et le bouton de soumission<\/span>
\n add_shortcode(<\/span>'submit-input-ajax'<\/span>,<\/span> array<\/span><\/a>(<\/span>$this<\/span>,<\/span> 'shortcode_submit_input_ajax'<\/span>)<\/span>)<\/span>;<\/span>
\n \/\/chargement des scripts \u00e0 inclures (css, js...)<\/span>
\n add_action(<\/span>'wp_enqueue_scripts'<\/span>,<\/span> array<\/span><\/a>(<\/span>$this<\/span>,<\/span> 'action_ajax_scripts'<\/span>)<\/span>)<\/span>;<\/span>
\n \/\/appel ajax de notre fonction "process_action_ajax" si l'utilisateur est logg\u00e9 "wp_ajax_" ou si il ne l'est pas "wp_ajax_nopriv_"<\/span>
\n add_action(<\/span>'wp_ajax_process_action'<\/span>,<\/span> array<\/span><\/a>(<\/span>$this<\/span>,<\/span> 'process_action_ajax'<\/span>)<\/span>)<\/span>;<\/span>
\n add_action(<\/span>'wp_ajax_nopriv_process_action'<\/span>,<\/span> array<\/span><\/a>(<\/span>$this<\/span>,<\/span> 'process_action_ajax'<\/span>)<\/span>)<\/span>;<\/span>
\n }<\/span>
\n
\n \/**
\n * g\u00e9n\u00e8re le formulaire lorsqu'on utilise le plugin [submit-input-ajax]
\n *\/<\/span>
\n public<\/span> function<\/span> shortcode_submit_input_ajax(<\/span>$atts<\/span>)<\/span> {<\/span>
\n $html<\/span> =<\/span> '<form class="submit-input-ajax-container">'<\/span>;<\/span>
\n $html<\/span> .=<\/span> '<div><label for="submit-input-ajax">Veuillez entrez une information et valider en cliquant sur le bouton<\/label><\/div>'<\/span>;<\/span>
\n $html<\/span> .=<\/span> '<input type="text" id="submit-input-ajax" \/>'<\/span>;<\/span>
\n $html<\/span> .=<\/span> '<button type="submit" id="btn-submit-input-ajax" >Valider<\/button>'<\/span>;<\/span>
\n $html<\/span> .=<\/span> '<\/form>'<\/span>;<\/span>
\n return<\/span> $html<\/span>;<\/span>
\n }<\/span>
\n
\n \/**
\n * traite l'appel ajax
\n *\/<\/span>
\n public<\/span> function<\/span> process_action_ajax(<\/span>)<\/span> {<\/span>
\n \/\/verifie l'existence non vide de l'input<\/span>
\n if<\/span> (<\/span>isset<\/span><\/a>(<\/span>$_POST<\/span>[<\/span>'input'<\/span>]<\/span>)<\/span> &&<\/span> $_POST<\/span>[<\/span>'input'<\/span>]<\/span> !=<\/span> ''<\/span>)<\/span> {<\/span>
\n \/\/n'importe quel traitement<\/span>
\n $message<\/span> =<\/span> 'Voici votre message en sha1 : '<\/span>;<\/span>
\n $message<\/span> .=<\/span> sha1<\/span><\/a>(<\/span>$_POST<\/span>[<\/span>'input'<\/span>]<\/span>)<\/span>;<\/span>
\n \/\/retour success<\/span>
\n wp_send_json_success(<\/span>[<\/span>'message'<\/span> =><\/span> $message<\/span>]<\/span>)<\/span>;<\/span>
\n }<\/span>
\n \/\/retour erreur<\/span>
\n wp_send_json_error(<\/span>[<\/span>'message'<\/span> =><\/span> 'Impossible !'<\/span>]<\/span>)<\/span>;<\/span>
\n }<\/span>
\n
\n \/**
\n * Appel des fichiers js\/css n\u00e9cessaires au fonctionnement
\n *\/<\/span>
\n public<\/span> function<\/span> action_ajax_scripts(<\/span>)<\/span> {<\/span>
\n global<\/span> $post<\/span>;<\/span>
\n \/\/si notre shortcode est pr\u00e9sent dans le post courant.<\/span>
\n if<\/span> (<\/span>is_a<\/span><\/a>(<\/span>$post<\/span>,<\/span> 'WP_Post'<\/span>)<\/span> &&<\/span> has_shortcode(<\/span>$post<\/span>-><\/span>post_content<\/span>,<\/span> 'submit-input-ajax'<\/span>)<\/span>)<\/span> {<\/span>
\n wp_enqueue_style(<\/span>'paa-style'<\/span>,<\/span> plugin_dir_url(<\/span>__FILE__<\/span>)<\/span> .<\/span> '\/styles.css'<\/span>)<\/span>;<\/span>
\n \/\/ajout du script lancant la requete ajax<\/span>
\n wp_enqueue_script(<\/span>'paa-ajax'<\/span>,<\/span> plugin_dir_url(<\/span>__FILE__<\/span>)<\/span> .<\/span> '\/script.js'<\/span>,<\/span> array<\/span><\/a>(<\/span>'jquery'<\/span>)<\/span>)<\/span>;<\/span>
\n \/\/on informe le script pr\u00e9c\u00e9dent de l'adresse "adminAjax" de wordpress<\/span>
\n wp_localize_script(<\/span>'paa-ajax'<\/span>,<\/span> 'adminAjax'<\/span>,<\/span> admin_url(<\/span>'admin-ajax.php'<\/span>)<\/span>)<\/span>;<\/span>
\n }<\/span>
\n }<\/span>
\n
\n}<\/span>
\nnew<\/span> PluginActionAjax(<\/span>)<\/span>;<\/span><\/div><\/div>\n
\n \/*lors de la soumission du formulaire, on v\u00e9rifie que le champ est replie et on appelle notre action ajax*\/<\/span>
\n jQuery(<\/span>document)<\/span>.on<\/span>(<\/span>"submit"<\/span>,<\/span> ".submit-input-ajax-container"<\/span>,<\/span>