検索
ホームページ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 までご連絡ください。
Webサイトをゼロからコーディングする上でWordPressを使用することの利点は何ですか?Webサイトをゼロからコーディングする上でWordPressを使用することの利点は何ですか?Apr 25, 2025 am 12:16 AM

wordpressisadvasteousovercodingawebsitefromscratchdueto:1)easeofuseandfasterdevelopment、2)柔軟性と吸収性、3)strongCommunitySupport、4)組み込みインセンアンドマークティングツール、5)費用対効果、6)レシュリティアップデート

WordPressがコンテンツ管理システムになっている理由は何ですか?WordPressがコンテンツ管理システムになっている理由は何ですか?Apr 24, 2025 pm 05:25 PM

wordpressisacmsduetoitseaseaseofuse、customization、usermanagement、seo、andcommunitysupport.1)ofssextensiveationization throughthemesandplugins.3)ofsiscontensiveativeizationization withintentmanagement withintententmanagement with inting ustomization.3)revisustusersandpermissions.4)拡張型を提供します

WordPressにコメントボックスを追加する方法WordPressにコメントボックスを追加する方法Apr 20, 2025 pm 12:15 PM

WordPress Webサイトでコメントを有効にして、訪問者にディスカッションに参加し、フィードバックを共有するプラットフォームを提供します。これを行うには、次の手順に従ってください。コメントを有効にします。ダッシュボードで、設定に移動してgt;議論し、[コメントを許可]チェックボックスを選択します。コメントフォームの作成:エディターで、[ブロックの追加]をクリックし、コメントブロックを検索してコンテンツに追加します。カスタムコメントフォーム:タイトル、ラベル、プレースホルダー、ボタンテキストを設定して、コメントブロックをカスタマイズします。変更を保存します:[更新]をクリックしてコメントボックスを保存し、ページまたは記事に追加します。

WordPressからサブサイトをコピーする方法WordPressからサブサイトをコピーする方法Apr 20, 2025 pm 12:12 PM

WordPressサブサイトをコピーする方法は?手順:メインサイトにサブサイトを作成します。メインサイトのサブサイトのクローニング。クローンをターゲットの場所にインポートします。ドメイン名(オプション)を更新します。個別のプラグインとテーマ。

WordPressのヘッダーの書き方WordPressのヘッダーの書き方Apr 20, 2025 pm 12:09 PM

WordPressでカスタムヘッダーを作成する手順は次のとおりです。テーマファイル「header.php」を編集します。あなたのウェブサイトの名前と説明を追加します。ナビゲーションメニューを作成します。検索バーを追加します。変更を保存して、カスタムヘッダーを表示します。

WordPressコメントを表示する方法WordPressコメントを表示する方法Apr 20, 2025 pm 12:06 PM

WordPress Webサイトでコメントを有効にします。1。管理パネルにログインし、「設定」 - 「ディスカッション」に移動し、「コメント許可」を確認します。 2。コメントを表示する場所を選択します。 3.コメントをカスタマイズします。 4.コメントを管理し、承認、拒否、または削除します。 5。use&lt;?php comments_template(); ?&gt;コメントを表示するタグ。 6.ネストされたコメントを有効にします。 7.コメントの形状を調整します。 8。プラグインと検証コードを使用して、スパムコメントを防ぎます。 9.ユーザーにGravatarアバターの使用を奨励します。 10。参照するコメントを作成します

WordPressのソースコードをアップロードする方法WordPressのソースコードをアップロードする方法Apr 20, 2025 pm 12:03 PM

WordPressからFTPプラグインをインストールし、FTP接続を構成し、ファイルマネージャーを使用してソースコードをアップロードできます。手順には、FTPプラグインのインストール、接続の構成、アップロードの場所の参照、ファイルのアップロード、アップロードが成功したことを確認します。

WordPressコードをコピーする方法WordPressコードをコピーする方法Apr 20, 2025 pm 12:00 PM

WordPressコードをコピーする方法は?管理インターフェイスからコピー:WordPress Webサイトにログインし、宛先に移動し、コードを選択し、Ctrl C(Windows)/Command C(MAC)を押してコードをコピーします。ファイルからコピー:SSHまたはFTPを使用してサーバーに接続し、テーマまたはプラグインファイルに移動し、コードを選択し、Ctrl C(Windows)/コマンドC(MAC)を押してコードをコピーします。

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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。