WordPress 中為每個自定義文章按鈕實現彈窗表單與AJAX提交教程

本教程詳細介紹瞭如何在WordPress自定義文章類型列表頁中，為每個文章的自定義按鈕實現一個彈出式表單。文章將涵蓋如何使用jQuery UI Dialog創建彈窗、通過數據屬性傳遞文章ID、利用AJAX提交表單數據，以及在WordPress後端處理表單提交（包括文件上傳），並返回處理結果。本指南旨在提供一個完整的、可操作的解決方案，以提升用戶交互體驗。

1. 概述與需求分析

在WordPress開發中，我們經常需要在自定義文章類型（如“房產”）的列表頁中，為每個列表項提供一個交互按鈕。當用戶點擊該按鈕時，期望彈出一個包含特定表單的模態窗口。此表單不僅需要收集用戶輸入，還應自動關聯到對應的文章ID，並通過AJAX無刷新提交，最後顯示提交結果。

核心需求點：

• 在WordPress循環中為每個文章添加一個按鈕。
• 點擊按鈕時，彈出一個自定義HTML表單。
• 表單中需包含當前文章的ID作為隱藏字段。
• 表單提交通過AJAX完成，並在彈窗內顯示成功或失敗消息。
• 表單支持文件上傳。

2. 環境準備與前置知識

為了實現上述功能，我們需要依賴以下技術：

• WordPress：作為內容管理系統。
• jQuery：用於DOM操作和AJAX請求。
• jQuery UI：提供Dialog組件，用於創建模態彈窗。
• PHP：用於WordPress後端邏輯和AJAX處理。

在開始之前，請確保您的WordPress主題或插件已正確加載jQuery。 jQuery UI Dialog組件需要單獨加載其JavaScript和CSS文件。

3. 構建HTML結構

首先，我們需要在WordPress文章循環中放置觸發彈窗的按鈕，並在頁面中預置一個隱藏的表單容器。

3.1 循環中的按鈕

在您的自定義文章類型（例如property）的列表模板文件（如archive-property.php或某個頁面模板）中，找到顯示文章的循環部分。為每個文章添加一個按鈕，並使用HTML5 data屬性存儲文章ID。

 <?php // 假設您正在一個WordPress循環中，例如通過WP_Query查詢&#39;property&#39;文章類型// 確保在自定義查詢後使用wp_reset_postdata();
$the_query = new WP_Query( array(
    &#39;post_type&#39; => 'property',
    '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><?php echo esc_html($post_title); ?></h3>
            <!-- 其他房產詳情... -->
            <button class="btn btn-primary open-offer-form" data-post-id="<?php echo esc_attr($post_id); ?>">Submit Offer</button>
        </div>
<?php endwhile;
    wp_reset_postdata(); // 重置全局$post 數據else :
    echo &#39;<p>No properties found.';
endif;
?>

解釋：

• open-offer-form 類用於JavaScript選擇器。
• data-post-id 屬性用於存儲當前文章的ID，方便JavaScript獲取。

3.2 隱藏的彈窗表單容器

將您的自定義HTML表單放置在一個隱藏的div 容器中。這個容器通常放在主題的footer.php 文件中，或者通過一個單獨的模板部分（如get_template_part('template-parts/offer-form');）加載，確保它在頁面加載時存在但不可見。

<div id="offerFormDialog" title="Submit Your Offer" style="display: none;">
    <h2 class="text center">Submit Your Offer</h2>
    <form id="propertyOfferForm" action="" method="POST" enctype="multipart/form-data">
        <!-- 隱藏字段用於存儲文章ID -->
        <input type="hidden" name="post_id" id="hidden_post_id" value="">

        <!-- 以下是您提供的表單字段-->
        <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

">