構建WordPress插件以創建AJAX聯繫表

>本文演示了為WordPress構建簡單的AJAX觸點表插件。 我們將介紹插件創建，表單設計，Ajax處理和短碼實現。

密鑰概念：

WordPress插件開發利用插件來擴展站點功能。這包括創建使用AJAX進行數據提交的聯繫表。 這涉及插件文件創建，形式構造，Ajax處理程序和快捷代碼。
• > Ajax處理程序至關重要。它接收用戶輸入，驗證數據，並使用
向WordPress管理員發送電子郵件通知。 Ajax處理程序的正確註冊對於處理AJAX請求至關重要。
• > wp_mail()短代碼簡化了形式的集成。一個函數會生成表單的HTML，然後將其封裝在短碼中，以便於插入帖子和頁面。
插件創建：

在您的WordPress

目錄中創建一個名為

的文件夾。
1. > ajaxcontactform>內部，創建wp-content/plugins>帶有以下插件標頭：>
2. ajaxcontactform.php
激活WordPress Admin面板中的插件。

>

<?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)
*/
?>

在內創建一個名為

的子文件夾，並為您的ajax代碼添加

。
4. jsajaxcontactform ajaxcontact.js

>將以下php代碼添加到

中以定義常數，構建腳本並本地化ajax url：

5. ajaxcontactform.php形式創建：

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');

以下功能生成聯繫表的HTML：

該表格將顯示為集成到頁面或帖子後所示：

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
}

ajax處理程序：

此函數處理AJAX請求，驗證數據並發送電子郵件：>

錯誤處理將顯示這樣的消息：

註冊Ajax處理程序：

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);
}

>

註冊Ajax處理程序：

>發送ajax請求（ajaxcontact.js）：

>

創建快捷代碼：

add_action( 'wp_ajax_nopriv_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );
add_action( 'wp_ajax_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );

完整的表格將顯示如下：

安全性，自定義和高級功能：>

提供的代碼缺乏關鍵的安全措施（NONCE驗證）。 強烈建議使用Nonces來防止CSRF攻擊。 可以根據特定要求實現進一步的自定義（使用CSS，增強驗證，CAPTCHA集成，文件上傳等樣式）。 原始文本中的常見問題解答部分提供了有關這些增強功能的指導。 切記對所有用戶輸入進行消毒以防止漏洞。

以上是構建WordPress插件以創建AJAX聯繫表的詳細內容。更多資訊請關注PHP中文網其他相關文章！