WordPress自定義文章按鈕彈出表單與AJAX提交指南

本教程詳細介紹瞭如何在WordPress中為每個自定義文章類型（如“房產”）的列表項添加一個“提交報價”按鈕，點擊後彈出包含特定文章ID的自定義HTML表單。文章將涵蓋如何使用jQuery UI Dialog創建模態彈窗，通過數據屬性動態傳遞文章ID，並利用WordPress AJAX機制實現表單的異步提交，同時處理文件上傳和展示提交結果，從而提供一個無縫的用戶體驗。

1. 概述與核心需求

在WordPress開發中，我們經常需要在文章列表頁為每個條目提供特定的交互功能。本教程旨在解決以下核心需求：

• 在自定義文章類型（例如property）的循環列表中，為每個文章添加一個“提交報價”按鈕。
• 點擊按鈕後，彈出一個模態表單。
• 該表單應包含當前文章的ID作為隱藏字段，以便在提交時關聯到特定的文章。
• 表單提交過程應通過AJAX異步完成，避免頁面刷新，並在彈窗內顯示成功或失敗消息。
• 表單支持文件上傳功能。

我們將利用WordPress的內置功能、jQuery UI Dialog庫以及AJAX技術來實現這一目標。

2. HTML結構：按鈕與表單

首先，我們需要在WordPress文章循環中設置按鈕，並在頁面上放置一個用於彈窗的表單結構。

2.1 文章循環中的按鈕

在您的自定義文章類型模板文件（如archive-property.php或通過WP_Query構建的頁面）中，遍歷文章時為每個文章添加按鈕，並通過HTML5的data-*屬性存儲文章ID和標題。

 <?php // 假設您正在一個自定義文章類型&#39;property&#39; 的循環中$args = array(
    &#39;post_type&#39; => 'property',
    'posts_per_page' => -1, // 顯示所有文章'post_status' => 'publish'
);
$the_query = new WP_Query( $args );

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">
            <h2><?php echo esc_html( $post_title ); ?></h2>
            <p>文章ID: <?php echo esc_html( $post_id ); ?></p>
            <!-- 其他房產信息-->

            <button class="btn btn-primary submit-offer-btn" data-post-id="<?php echo esc_attr( $post_id ); ?>" data-post-title="<?php echo esc_attr( $post_title ); ?>">
                提交報價</button>
        </div>
<?php endwhile;
    wp_reset_postdata(); // 重置查詢else :
    echo &#39;<p>沒有找到房產信息。 ';
endif;
?>

說明：

• submit-offer-btn 類用於JavaScript選擇器。
• data-post-id 和data-post-title 屬性用於存儲當前文章的ID和標題，JavaScript將通過這些屬性獲取數據。

2.2 彈出表單的HTML結構

將您的完整表單放置在一個隱藏的div 容器中，該容器應該在頁面上只出現一次，而不是在循環內部。這個div 將被jQuery UI Dialog轉換為彈窗。

 <div id="offerFormDialog" style="display:none;">
    <h2 class="text-center">提交您的報價</h2>
    <form id="offerForm" method="POST" enctype="multipart/form-data">
        <div class="form-group row">
            <label class="col-md-12" for="name"><?php esc_html_e( &#39;Name&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" id="name" name="name" type="text" required>
        </div>
        <div class="form-group row">
            <label for="email" class="col-md-12"><?php esc_html_e( &#39;Email&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" name="email" type="email" required>
        </div>
        <div class="form-group row">
            <label for="price" class="col-md-12"><?php esc_html_e( &#39;Price&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" name="price" type="number" required>
        </div>
        <div class="form-group row">
            <label for="purchase_type" class="col-md-12"><?php esc_html_e( &#39;Purchase Type&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <select class="col-md-12" name="purchase_type" required>
                <option disabled selected value> -- select an option -- </option>
                <option value="Cash">Cash</option>
                <option value="Conventional Loan">Conventional Loan</option>
                <option value="FHA Loan">FHA Loan</option>
                <option value="MSHDA Conventional Loan">MSHDA Conventional Loan</option>
                <option value="MSHDA FHA Loan">MSHDA FHA Loan</option>
                <option value="Land Contract">Land Contract</option>
            </select>
        </div>
        <div class="form-group row">
            <label for="closing_date"><?php esc_html_e( &#39;Closing Date&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <input class="col-md-12 date_box" name="closing_date" type="date" required>
        </div>
        <div class="form-group row">
            <label for="concessions_amount"><?php esc_html_e( &#39;Concessions Amount&#39;, &#39;ivproperty&#39; ); ?></label>
            <input class="col-md-12" name="concessions_amount" type="number">
        </div>
        <div class="form-group row">
            <label for="inspection_period" class="col-md-12"><?php esc_html_e( &#39;Inspection Period&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <input class="col-md-6 date_box" name="insp_from" type="date" required>
            <input class="col-md-6 date_box" name="insp_to" type="date" required>
        </div>
        <div class="form-group row">
            <label for="seller_occupancy" class="col-md-12"><?php esc_html_e( &#39;Seller Occupancy & Charge&#39;, &#39;ivproperty&#39; ); ?></label>
            <input class="col-md-6" name="seller_occupancy" type="text" placeholder="Occupancy">
            <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"><?php esc_html_e( &#39;EMD&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" name="emd" type="number" placeholder="Earnest Money Deposit" required>
        </div>
        <div class="form-group row">
            <label for="home_warranty" class="col-md-12"><?php esc_html_e( &#39;Home Warranty&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <select class="col-md-12" name="home_warranty" required>
                <option disabled selected value> -- select an option -- </option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </div>
        <div class="form-group row">
            <label for="attachment" class="col-md-12"><?php esc_html_e( &#39;Attachment&#39;, &#39;ivproperty&#39; ); ?></label>
            <input type="file" name="attachment">
        </div>

        <!-- 隱藏字段用於存儲文章ID -->
        <input type="hidden" name="property_id" id="property_id_hidden_field" value="">

        <!-- 用於顯示AJAX消息的區域-->
        <div id="form_messages" style="margin-top: 15px;"></div>

        <div class="modal-footer">
            <input type="submit" name="submit_offers" class="btn btn-secondary col-md-12 ml-2">
        </div>
    </form>
</div>

說明：

• id="offerFormDialog" 是彈窗容器的唯一標識符。
• style="display:none;" 確保彈窗在頁面加載時是隱藏的。
• id="property_id_hidden_field" 是一個隱藏字段，其value將在彈窗打開時由JavaScript動態填充。
• id="form_messages" 用於顯示AJAX提交後的成功或錯誤消息。

3. JavaScript/jQuery：彈窗控制與AJAX提交

我們將使用jQuery UI Dialog來創建彈

以上是WordPress自定義文章按鈕彈出表單與AJAX提交指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！