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

この記事では、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: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
}

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

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 までご連絡ください。
WordPress開発のための5つの最高のIDES(およびなぜ)WordPress開発のための5つの最高のIDES(およびなぜ)Mar 03, 2025 am 10:53 AM

WordPress開発に適した統合開発環境(IDE)の選択 10年間、WordPress開発のための多数の統合開発環境(IDE)を調査しました。 自由から商業、基本的なものまで、純粋な品種

OOPテクニックを備えたWordPressプラグインを作成しますOOPテクニックを備えたWordPressプラグインを作成しますMar 06, 2025 am 10:30 AM

このチュートリアルでは、ドリブルAPIを活用して、オブジェクト指向プログラミング(OOP)の原則を使用してWordPressプラグインを構築します。 元の意味と構造を維持しながら、明確さと簡潔さのためにテキストを洗練しましょう。 オブジェクトオリ

WordPressでPHPデータと文字列をJavaScriptに渡す方法WordPressでPHPデータと文字列をJavaScriptに渡す方法Mar 07, 2025 am 09:28 AM

PHPデータをjavaScriptに渡すためのベストプラクティス:wp_localize_scriptとwp_add_inline_scriptの比較 PHPファイルに静的文字列内にデータを保存することが推奨される練習です。 JavaScriptコードでこのデータが必要な場合は、INCORPORAT

WordPressプラグインでPDFファイルを埋め込み、保護する方法WordPressプラグインでPDFファイルを埋め込み、保護する方法Mar 09, 2025 am 11:08 AM

このガイドは、WordPress PDFプラグインを使用して、WordPressの投稿とページにPDFファイルを埋め込み、保護する方法を示しています。 PDFは、カタログからプレゼンテーションまで、さまざまなコンテンツに対してユーザーフレンドリーで普遍的にアクセス可能な形式を提供します。 この方法は

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール