プラグインなし!WordPressのHTMLフォームを簡単にデータベースに接続する秘訣

信じられますか?コンタクトフォーム、ユーザー登録フォーム、あるいはデータ送信フォームの背後にある原理を。 前方部分 HTML フォーム + バックエンドデータベース処理.この記事では、その基本的な考え方から、実踐的な方法、注意點(diǎn)まで詳しく解説する。 ワードプレス を使ってHTMLフォームを作成し、データベースにデータを保存します。

畫像[1]-WordPressカスタムHTMLフォーム+データベース実踐編!初心者でも大丈夫

I. なぜHTMLフォームをカスタマイズするのか?

WordPress フォームプラグインはたくさんありますが(Contact Form 7 など、WPForms)が、シナリオによってはHTMLフォームを手で書く必要がある:

  • カスタム?ビジネス?ロジック例えば、追加フィールドを収集したり、カスタムテーブルに格納したりする必要があります。
  • より高いパフォーマンスより軽いコードで複雑なプラグインをロードする必要はありません。
  • 完全に制御可能フロントエンドのデザインとバックエンドの処理ロジックはあなた次第です。

第二に、HTMLフォームの基本構(gòu)造

最も単純なHTMLフォームは、入力ボックス、送信ボタン、そして フォーム 例えば、タグ:

寫真[2]-WordPressカスタムHTMLフォーム+データベース実踐編!初心者でも大丈夫

  を入力してください。

  
  を入力してください。

  を入力してください。
</form

説明

  • method="post"POSTでフォームデータを送信する。
  • action=""現(xiàn)在のページに投稿します。
  • 名稱投稿後に値を取得するフィールドのキー屬性。

WordPressでフォームデータを扱う方法

ある ワードプレス である。 functions.php またはカスタムプラグインで処理ロジックを追加します。

functions.phpファイル

  • すべてのWordPressテーマには functions.php ドキュメンテーション
  • ここにコードを書けば、テーマがロードされたときにWordPressにこのロジックを?qū)g行させることができる。
  • フォームのデータ処理など、簡単な機(jī)能を入れるのに適している。

カスタムプラグイン

  • より獨(dú)立した複雑な関數(shù)であれば、プラグインとして記述する方がよい。
  • プラグインは獨(dú)立したフォルダとPHPファイルを持っており、テーマを変更しても失われることはありません。
  • 例えば、"カスタムフォーム収集プラグイン "を作って、コードをより明確に、より安全にする。

1.フォームデータの取得

イメージ[3] - WordPressカスタムHTMLフォーム+データベース実踐編!初心者でも大丈夫
if ( isset($_POST['submit_form']) ) { 以下のようにします。
    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
}

利用する sanitize_text_field() 歌で応える sanitize_email() 安全性を確保するためのデータのフィルタリング。

2.データベースへのアクセス

ワードプレスが提供する $wpdb オブジェクトは、データベースと簡単にやりとりできる。

寫真[4]-WordPressカスタムHTMLフォーム+データベース実踐編!初心者でも大丈夫
global $wpdb.
$table_name = $wpdb->prefix . "custom_form"; // データテーブル名

$wpdb->insert(
    $table_name、
    array(
        'name' => $name、
        'email' => $email, 'created_at' => current_time('mysql')
        'created_at' => current_time('mysql')
    )
).

説明

  • $wpdb->prefix はデータベーステーブルの接頭辭です(デフォルトは wp_).
  • インサート メソッドは、指定されたテーブルにデータを書き込みます。

3.データベースにテーブルを作成する

まず、データを保存するフォーム用のテーブルを作成する必要があり、プラグインが有効化されたときにSQLを?qū)g行することができます:

イメージ[5] - WordPressカスタムHTMLフォーム+データベース実踐編!初心者でも大丈夫
関數(shù) create_custom_table() { $wpdb_name = $wpdb>prefix .
    global $wpdb; $table_name = $wpdb->prefix .
    $table_name = $wpdb->prefix . "custom_form";

    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
      id mediumint(9) NOT NULL AUTO_INCREMENT、
      name varchar(50) NOT NULL, email varchar(100)
      email varchar(100) NOT NULL, created_at datetime DEFORM
      created_at datetime DEFAULT CURRENT_TIMESTAMP NOT NULL, PRIMARY KEY (id)
      PRIMARY KEY (id)
    ) $charset_collate;";

    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    dbDelta($sql);
}
add_action('after_switch_theme', 'create_custom_table' );

このコードは、トピックの切り替え時(shí)にデータテーブルを作成します。

IV.ページにフォームを表示する

WordPressでは ショートコード を呼び出して、フォームをどのページにも埋め込めるようにします。

イメージ[6] - WordPressカスタムHTMLフォーム+データベース実踐編!初心者でも大丈夫
関數(shù) custom_form_shortcode() { ?
    function custom_form_shortcode() { ob_start(); ?
    以下はカスタマイズされたフォームの例です。 
     入力フォーム
       を入力してください。
       <input type="submit
      を入力してください。
    </form
    <?php
    return ob_get_clean();
}
add_shortcode('custom_form', 'custom_form_shortcode');

ページに挿入 [カスタムフォーム] フォームを表示することができる。

V. 入稿データの閲覧方法

  • phpMyAdminまたはデータベース管理ツールにログインして wp_custom_form テーブルで提出されたデータを見ることができる。
イメージ[7] - WordPressカスタムHTMLフォーム+データベース実踐編!初心者でも大丈夫
  • バックエンドで表示させたい場(chǎng)合は、シンプルな管理ページで $wpdb->get_results() データを取り出して、それを見せてください。

セキュリティと最適化に関する推奨事項(xiàng)

  • データのフィルタリングと検証
    • 利用する サニタイズ シリーズ関數(shù)で入力データをクリーンアップする。
    • メールボックスなどの特殊フィールドの定期的な検証。
  • CSRF攻撃の防止
    ワードプレス オファー wp_nonce_field() とともに check_admin_referer() リクエストを確保する。
  • ページネーションと制限
    • スパムメールを避けるため、フォーム送信に回?cái)?shù)制限を設(shè)ける。
    • バックグラウンドでの読み込みに時(shí)間がかかるのを避けるため、データを表示する際にページングを行う。
  • AJAXの使用を検討する
    フォームはAJAXを通して送信することができます。AJAXは、よりレスポンシブなウェブアプリケーションを作成するために使用される技術(shù)の組み合わせで、ページを更新することなく更新することができ、ユーザーエクスペリエンスを向上させます。

まとめ

WordPressでHTMLフォームを作成し、データベースに接続するための主な手順は以下の通りです:HTMLのフォーム構(gòu)造を書く > PHPでデータを取得して処理する > PHPを使う $wpdb データベースに書き込む > ショートコードでフロントエンドにフォームを表示する。

プラグイン方式に比べ、カスタムフォームは柔軟性が高く、プロジェクトのニーズに的確に応えることができます。コードの量は若干多くなりますが、その分自由でコントロールしやすいので、投資に見合う価値があります。

    このプロセスをマスターすれば、入會(huì)システムのカスタマイズ、アンケート収集、會(huì)員情報(bào)管理など、ウェブサイトの機(jī)能を簡単に拡張することができます!


    お問い合わせ
    チュートリアルが読めない?無料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ!
    カスタマーサービス WeChat
    カスタマーサービス WeChat
    電話:020-2206-9892
    QQ咨詢:1025174874
    Eメール:info@361sale.com
    勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み
    ? 複製に関する聲明
    この記事はWoWによって書かれた
    終わり
    好きなら応援してください。
    クドス2497 分かち合う
    wajiguaのアバター - Photon Fluctuations|WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応
    おすすめ
    解説 ソファ購入

    コメントを投稿するにはログインしてください

      コメントなし