ホームページ > CMS チュートリアル > &#&プレス > Ajax連絡フォームを作成するためのWordPressプラグインを構築する

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

Lisa Kudrow
リリース: 2025-02-20 09:36:38
オリジナル
845 人が閲覧しました

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

重要な概念:

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

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

内部、次のプラグインヘッダーを使用して
    を作成します
  1. ajaxcontactform wp-content/plugins
  2. WordPress管理パネルのプラグインをアクティブにします。
  3. 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)
*/
?>
ログイン後にコピー
  1. 内に
  2. という名前のサブフォルダーを作成し、ajaxコードに
を追加します。

Building a WordPress Plugin to Create an AJAX Contact Form

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

フォーム作成:Building a WordPress Plugin to Create an AJAX Contact Form

    次の関数は、連絡先フォームのhtml:
  1. を生成します ajaxcontactform.php
  2. このフォームは、ページまたは投稿に統合された後に以下に示すように表示されます。
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://m.sbmmt.com/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="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="ajaxformsendmail(this.form);" style="cursor: pointer">Send Mail</a>
</div>
<?php
}
ログイン後にコピー

エラー処理には、次のようなメッセージが表示されます

Building a WordPress Plugin to Create an AJAX Contact Form

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)の送信:

Building a WordPress Plugin to Create an AJAX Contact Form

ショートコードの作成:

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

Building a WordPress Plugin to Create an AJAX Contact Form

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

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート