Cet article montre la construction d'un plugin de formulaire de contact AJAX simple pour WordPress. Nous couvrirons la création du plugin, la conception de formulaires, la manipulation de l'AJAX et la mise en œuvre des raccourcis.
Concepts clés:
- Le développement du plugin WordPress exploite les plugins pour étendre les fonctionnalités du site. Cela comprend la création de formulaires de contact qui utilisent AJAX pour la soumission des données. Cela implique la création de fichiers de plugin, la construction de formulaires, un gestionnaire Ajax et un shortcode.
- Le gestionnaire Ajax est crucial. Il reçoit l'entrée de l'utilisateur, valide les données et envoie des notifications par e-mail à l'administrateur WordPress à l'aide de
wp_mail()
. Un enregistrement approprié du gestionnaire AJAX est essentiel pour le traitement des demandes AJAX. - Shortcodes Simplifiez l'intégration de la forme. Une fonction génère le HTML du formulaire, qui est ensuite encapsulé dans un shortcode pour une insertion facile dans les poteaux et les pages.
Création du plugin:
- Créez un dossier nommé
ajaxcontactform
dans votre répertoire WordPresswp-content/plugins
. - à l'intérieur, créez
ajaxcontactform.php
avec l'en-tête du plugin suivant:
<?php /* Plugin Name: Ajax Contact Form Plugin URI: (Your Plugin URI) Description: A simple contact form using AJAX. Author: Abbas Suterwala Version: 1.0 Author URI: (Your Author URI) */ ?>
- Activez le plugin dans votre panneau d'administration WordPress.
- Créez un sous-dossier nommé
js
dansajaxcontactform
et ajoutezajaxcontact.js
pour votre code ajax.
- Ajoutez le code PHP suivant à
ajaxcontactform.php
pour définir les constantes, les scripts en fidélisation et localiser l'URL AJAX:
define('ACFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) ); define('ACFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) ); function ajaxcontact_enqueuescripts() { wp_enqueue_script('ajaxcontact', ACFSURL.'/js/ajaxcontact.js', array('jquery')); wp_localize_script( 'ajaxcontact', 'ajaxcontactajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); } add_action('wp_enqueue_scripts', 'ajaxcontact_enqueuescripts');
Création de formulaire:
La fonction suivante génère le HTML du formulaire de contact:
function ajaxcontact_show_contact() { ?> <div> <div style="background-color:https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bE6E6FA ;color:blue;"></div> <input type="text" id="ajaxcontactname" placeholder="Name"><br> <input type="email" id="ajaxcontactemail" placeholder="Email"><br> <input type="text" id="ajaxcontactsubject" placeholder="Subject"><br> <textarea id="ajaxcontactcontents" placeholder="Message"></textarea><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="ajaxformsendmail(this.form);" style="cursor: pointer">Send Mail</a> </div> <?php }
Ce formulaire sera affiché comme indiqué ci-dessous après avoir été intégré dans une page ou un message:
Ajax Handler:
Cette fonction gère la demande Ajax, valide les données et envoie l'e-mail:
function ajaxcontact_send_mail() { $results = ''; $error = 0; $name = isset($_POST['acfname']) ? sanitize_text_field($_POST['acfname']) : ''; $email = isset($_POST['acfemail']) ? sanitize_email($_POST['acfemail']) : ''; $subject = isset($_POST['acfsubject']) ? sanitize_text_field($_POST['acfsubject']) : ''; $contents = isset($_POST['acfcontents']) ? wp_kses_post($_POST['acfcontents']) : ''; $admin_email = get_option('admin_email'); if (!is_email($email)) { $results = $email." :email address is not valid."; $error = 1; } elseif (empty($name)) { $results = "Name is invalid."; $error = 1; } elseif (empty($subject)) { $results = "Subject is invalid."; $error = 1; } elseif (empty($contents)) { $results = "Content is invalid."; $error = 1; } if ($error == 0) { $headers = 'From: ' . $email . "\r\n"; if (wp_mail($admin_email, $subject, $contents, $headers)) { $results = "*Thanks for your mail."; } else { $results = "*The mail could not be sent."; } } die($results); }
La gestion des erreurs affichera un message comme celui-ci:
Enregistrement du gestionnaire AJAX:
Enregistrez le gestionnaire AJAX:
add_action( 'wp_ajax_nopriv_ajaxcontact_send_mail', 'ajaxcontact_send_mail' ); add_action( 'wp_ajax_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );
Envoi de la demande Ajax (ajaxContact.js):
function ajaxformsendmail(form) { jQuery.ajax({ type: 'POST', url: ajaxcontactajax.ajaxurl, data: { action: 'ajaxcontact_send_mail', acfname: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactname').val(), acfemail: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactemail').val(), acfsubject: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactsubject').val(), acfcontents: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactcontents').val() }, success: function(data, textStatus, XMLHttpRequest) { jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontact-response').html(data); }, error: function(MLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); return false; // Prevent default form submission }
Création du shortcode:
function ajaxcontact_shortcode_func( $atts ) { ob_start(); ajaxcontact_show_contact(); $output = ob_get_clean(); return $output; } add_shortcode( 'ajaxcontact', 'ajaxcontact_shortcode_func' );
Le formulaire rempli apparaîtra comme suit:
Sécurité, personnalisation et fonctionnalités avancées:
Le code fourni n'a pas de mesures de sécurité cruciales (vérification nonce). L'ajout de nonces est fortement recommandé pour empêcher les attaques du CSRF. Une personnalisation plus approfondie (style avec CSS, validation améliorée, intégration CAPTCHA, téléchargements de fichiers, etc.) peut être implémentée sur la base d'exigences spécifiques. La section FAQS dans le texte d'origine fournit des conseils sur ces améliorations. N'oubliez pas de désinfecter toutes les entrées utilisateur pour éviter les vulnérabilités.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Choisir le bon environnement de développement intégré (IDE) pour le développement WordPress Depuis dix ans, j'ai exploré de nombreux environnements de développement intégrés (IDE) pour le développement WordPress. La variété pure - gratuite à commerciale, basique à FEA

Ce didacticiel montre la construction d'un plugin WordPress à l'aide de principes de programmation orientée objet (OOP), tirant parti de l'API Dribbble. Affinons le texte pour plus de clarté et de concision tout en préservant la signification et la structure d'origine. Objet-ori

Meilleures pratiques pour passer des données PHP à JavaScript: une comparaison de WP_localize_script et WP_ADD_INLINE_Script Le stockage des données dans les chaînes statiques dans vos fichiers PHP est une pratique recommandée. Si ces données sont nécessaires dans votre code JavaScript, incorporez

Ce guide montre comment intégrer et protéger les fichiers PDF dans les articles et pages WordPress à l'aide d'un plugin PDF WordPress. Les PDF offrent un format convivial et universellement accessible pour divers contenus, des catalogues aux présentations. Cette méthode Ens


Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Dreamweaver CS6
Outils de développement Web visuel

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Adaptateur de serveur SAP NetWeaver pour Eclipse
Intégrez Eclipse au serveur d'applications SAP NetWeaver.

mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
