Ajax連絡フォームを作成するためのWordPressプラグインを構築する

この記事では、WordPress用のシンプルなAjax連絡フォームプラグインを構築することを示しています。 プラグインの作成、フォームデザイン、AJAX処理、ショートコードの実装をカバーします。

重要な概念：

WordPressプラグイン開発は、サイト機能を拡張するためのプラグインをレバレッジします。これには、データ提出にAJAXを使用する連絡先フォームの作成が含まれます。 これには、プラグインファイルの作成、フォーム構造、AJAXハンドラー、ショートコードが含まれます。

ajaxハンドラーは非常に重要です。ユーザーの入力を受信し、データを検証し、
• を使用してWordPress管理者に電子メール通知を送信します。 AJAXハンドラーの適切な登録は、AJAXリクエストを処理するために不可欠です。
ショートコードは、フォームの統合を簡素化します。フォームのHTMLを生成し、その後、ショートコード内にカプセル化され、投稿やページに簡単に挿入するようになります。
• wp_mail()
プラグインの作成：

WordPressディレクトリ内でという名前のフォルダーを作成します。

内部、次のプラグインヘッダーを使用して

を作成します
1. ajaxcontactform wp-content/plugins
WordPress管理パネルのプラグインをアクティブにします。
2. ajaxcontactform.php

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

3. 内に
という名前のサブフォルダーを作成し、ajaxコードに

を追加します。

4. js次のPHPコードをajaxcontactformに追加して、定数、Enqueueスクリプトを定義し、ajax URLをローカライズします。 ajaxcontact.js

フォーム作成：

次の関数は、連絡先フォームのhtml：
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');

ajaxハンドラー：

この関数はAJAX要求を処理し、データを検証し、メールを送信します。

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ハンドラーを登録します：

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リクエスト（ajaxcontact.js）の送信：

ショートコードの作成：

完成したフォームは次のように表示されます

セキュリティ、カスタマイズ、および高度な機能：

提供されたコードには、重要なセキュリティ対策がありません（NonCe検証）。 CSRF攻撃を防ぐために、Noncesの追加を強くお勧めします。 さらなるカスタマイズ（CSSによるスタイリング、強化された検証、CAPTCHA統合、ファイルアップロードなど）は、特定の要件に基づいて実装できます。 元のテキストのFAQSセクションは、これらの機能強化に関するガイダンスを提供します。 脆弱性を防ぐために、すべてのユーザー入力を消毒することを忘れないでください

以上がAjax連絡フォームを作成するためのWordPressプラグインを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。