WordPressカスタムHTMLフォーム＋データベース練習！初心者でもできる

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

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

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

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

第二に、HTMLフォームの基本構造

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

名前：
  を入力してください。

  Email: 
  を入力してください。

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

説明

method="post"POSTでフォームデータを送信する。
action=""現在のページに投稿します。
名称投稿後に値を取得するフィールドのキー属性。

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

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

functions.phpファイル

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

カスタムプラグイン

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

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

if ( isset($_POST['submit_form']) ) { 以下のようにします。
    $name = sanitize_text_field($_POST['name'])；
    $email = sanitize_email($_POST['email'])；
}

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

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

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

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を実行することができます：

関数 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' )；

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

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

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

関数 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 テーブルで提出されたデータを見ることができる。

バックエンドで表示させたい場合は、シンプルな管理ページで $wpdb->get_results() データを取り出して、それを見せてください。

セキュリティと最適化に関する推奨事項

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

まとめ

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

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

このプロセスをマスターすれば、入会システムのカスタマイズ、アンケート収集、会員情報管理など、ウェブサイトの機能を簡単に拡張することができます！

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み