WordPressでは、各カスタム記事にポップアップフォームとAJAX提出チュートリアルを実装しますボタン

このチュートリアルでは、WordPressカスタム記事タイプリストページに、各記事のカスタムボタンにポップアップフォームを実装する方法を詳しく説明しています。この記事では、jQuery UIダイアログを使用してポップアップを作成する方法、記事IDをデータ属性を介して渡し、Ajaxを使用してフォームデータを送信し、WordPressバックエンドでフォーム送信（ファイルアップロードを含む）をプロセスし、処理結果を返す方法について説明します。このガイドは、ユーザーインタラクションエクスペリエンスを強化するための完全で実用的なソリューションを提供するように設計されています。

1。概要と要件分析

WordPress開発では、カスタム記事タイプのリストページ（「不動産」などの各リスト項目のインタラクティブボタンを提供する必要があることがよくあります。ユーザーがこのボタンをクリックすると、特定のフォームを含むモーダルウィンドウがポップアップすると予想されます。このフォームは、ユーザー入力を収集する必要があるだけでなく、対応する記事IDと最終的にリフレッシュしてサブミットを表示する必要があります。

コア要件：

• WordPressループの各投稿のボタンを追加します。
• ボタンをクリックすると、カスタムHTMLフォームが表示されます。
• フォームには、現在の記事IDを非表示フィールドとして含める必要があります。
• フォームの送信はAjaxを介して完成し、ポップアップウィンドウに成功したメッセージまたは故障メッセージが表示されます。
• フォームはファイルのアップロードをサポートします。

2。環境の準備と知識前

上記の機能を達成するには、次のテクノロジーに依存する必要があります。

• WordPress：コンテンツ管理システムとして。
• jQuery： DOM操作とAJAXリクエストの場合。
• jQuery UI：モーダルポップアップを作成するダイアログコンポーネントを提供します。
• PHP： WordPressバックエンドロジックとAJAX処理用。

開始する前に、WordPressテーマまたはプラグインがjQueryで正しくロードされていることを確認してください。 jQuery UIダイアログコンポーネントでは、JavaScriptとCSSファイルを個別にロードする必要があります。

3. HTML構造を構築します

まず、WordPressの記事Loopのポップアップをトリガーし、ページに隠されたフォームコンテナをプリセットするボタンを配置する必要があります。

3.1ループのボタン

カスタム投稿タイプ（プロパティなど）のリストテンプレートファイル（archive-property.phpやページテンプレートなど）で、投稿を表示するループセクションを見つけます。各投稿のボタンを追加し、HTML5データ属性を使用して投稿IDを保存します。

  'プロパティ'、
    'posts_per_page' => -1 //すべてのプロパティを表示））;

if（$ the_query-> have_posts（））：
    while（$ the_query-> have_posts（））：$ the_query-> the_post（）;
        $ post_id = get_the_id（）;
        $ post_title = get_the_title（）;
？>
        <div class="property-item">
            <h3>  </h3>
            
            <button class="btn btn-primary open offer-form" data-post-id="<？php echo esc_attr（$ post_id）;？>">提出オファー</button>
        </div>
プロパティが見つかりません。';
endif;
？>

説明する：

• オープンオブフォームクラスは、JavaScriptセレクターで使用されます。
• Data-Post-ID属性は、現在の記事のIDを保存するために使用されます。これは、JavaScriptが取得するのに便利です。

3.2隠されたポップアップフォームコンテナ

カスタムHTMLフォームを隠されたDivコンテナに配置します。このコンテナは通常、テーマのfooter.phpファイルに配置されているか、別のテンプレートセクション（get_template_part（ 'template-parts/offer-form'）;など）にロードされます。

<div id="offoreformdialog" title="subment your offer" style="display：none;">
    <h2 class="text center">オファーを送信</h2>
    <form id="propertyofferform" action="" method="post" enctype="multipart/form-data">
        
        

        
        <div class="form-group row">
            <label class="col-md-12" for="name">  <span class="red-star">*</span> </label>
            <input class="col-md-12" id="name name =" name text>
        </div>
        <div class="form-group row">
            <label for="email" class="col-md-12">  <span class="red-star">*</span> </label>
            <input class="col-md-12" name="email" type="email">
        </div>
        <div class="form-group row">
            <label for="price" class="col-md-12">  <span class="red-star">*</span> </label>
            <input class="col-md-12" name="rish" type="number" required>
        </div>
        <div class="form-group row">
            <label for="purchase_type" class="col-md-12">  <span class="red-star">*</span> </label>
            <select class="col-md-12" name="bulyse_type">
                  - オプションを選択 -  
                 Cash 
                従来のローン
                <option> fhaローン</option>
                <option> mshda慣習的ローン</option>
                <option value="mshda fhaローン"> mshda fhaローン</option>
                土地契約
            </select>
        </div>
        <div class="form-group row">
            <label for="closis_date">  <span class="red-star">*</span> </label>
            <input class="col-md-12 date_box" name="closis_date" type="date">
        </div>
        <div class="form-group row">
            <label for="concessions_amount">  </label>
            
        </div>
        <div class="form-group row">
            <label for="Inspection_period" class="col-md-12">  <span class="red-star">*</span> </label>
            <input class="col-md-6 date_box" name="insp_from" type="date">
            <input class="col-md-6 date_box" name="insp_to" type="date">
        </div>
        <div class="form-group row">
            <label for="seller_occupancy" class="col-md-12">  </label>
            <input class="col-md-6" name="seller_occupancy" type="text" placeholder="croudancy">
            <input class="col-md-6" name="seller_charge" type="number" placeholder="charge">
        </div>
        <div class="form-group row">
            <label for="emd" class="col-md-12">  <span class="red-star">*</span> </label>
            <input class="col-md-12" name="emd" type="number" placeholder="Earding Money Deposit" required>
        </div>
        <div class="form-group row">
            <label for="home_warranty" class="col-md-12">  <span class="red

">