この記事では、WordPress用のシンプルなAjax連絡フォームプラグインを構築することを示しています。 プラグインの作成、フォームデザイン、AJAX処理、ショートコードの実装をカバーします。
重要な概念:WordPressプラグイン開発は、サイト機能を拡張するためのプラグインをレバレッジします。これには、データ提出にAJAXを使用する連絡先フォームの作成が含まれます。 これには、プラグインファイルの作成、フォーム構造、AJAXハンドラー、ショートコードが含まれます。
- ajaxハンドラーは非常に重要です。ユーザーの入力を受信し、データを検証し、
- を使用してWordPress管理者に電子メール通知を送信します。 AJAXハンドラーの適切な登録は、AJAXリクエストを処理するために不可欠です。 ショートコードは、フォームの統合を簡素化します。フォームのHTMLを生成し、その後、ショートコード内にカプセル化され、投稿やページに簡単に挿入するようになります。
-
wp_mail()
プラグインの作成:
WordPressディレクトリ内でという名前のフォルダーを作成します。
内部、次のプラグインヘッダーを使用して- を作成します
-
ajaxcontactform
wp-content/plugins
WordPress管理パネルのプラグインをアクティブにします。 -
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) */ ?>
- 内に という名前のサブフォルダーを作成し、ajaxコードに
-
js
次のPHPコードをajaxcontactform
に追加して、定数、Enqueueスクリプトを定義し、ajax URLをローカライズします。ajaxcontact.js
フォーム作成:
- 次の関数は、連絡先フォームのhtml:
- を生成します
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 サイトの他の関連記事を参照してください。

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

WebStorm Mac版
便利なJavaScript開発ツール

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

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

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

Dreamweaver Mac版
ビジュアル Web 開発ツール
