在 WordPress 中，使用插件 Advanced Custom Fields (ACF)，我們可以創(chuàng)建一個用戶友好的產(chǎn)品認證查詢系統(tǒng)。本文將詳細介紹如何使用 ACF 實現(xiàn)這一功能，并提供清晰的分步指導。

第一步：安裝和設置 ACF 插件

1. 安裝 ACF 插件
   • 在 WordPress 后臺，點擊 插件 > 安裝新插件。
   • 搜索 “Advanced Custom Fields“，然后點擊 立即安裝 和 啟用。
   • 安裝后，將在后臺導航菜單中看到 “Custom Fields” 菜單。

2. 為字段組命名
   • 在新頁面中，需要為字段組命名。例如，可以將其命名為 “產(chǎn)品認證查詢” 以便于識別和管理。

3. 選擇字段組的顯示規(guī)則
   • 向下滾動頁面，找到 Location（位置）設置區(qū)域。這里是決定這些字段將顯示在何處的地方。
   • 設置條件為：
     • Post Type （文章類型）選擇 Product，這意味著這些字段只會顯示在 WooCommerce 產(chǎn)品編輯頁面上。
   • 如果希望字段顯示在其他頁面類型，可以根據(jù)需要進行相應設置。

添加自定義字段。現(xiàn)在我們已經(jīng)創(chuàng)建了字段組，接下來需要添加具體的自定義字段，例如產(chǎn)品的認證碼、名稱和認證日期。

4. 添加第一個字段 – 認證代碼
   • 在 Field Label（字段標簽）中輸入“認證代碼”，這將是用戶在后臺看到的字段名稱。
   • 在 Field Name（字段名稱）中輸入 certification_code。這是這個字段的唯一標識，稍后會在代碼中使用到。
   • 在 Field Type（字段類型）中，選擇 Text，因為認證碼通常是由字母或數(shù)字組成的。
   • 其他設置可根據(jù)你的需求調整，例如設置為必填項。

5. 添加第二個字段 – 產(chǎn)品名稱
   • 點擊 Add Field（添加字段），繼續(xù)為產(chǎn)品名稱創(chuàng)建字段。
   • 在 Field Label 中輸入“產(chǎn)品名稱”，Field Name 中輸入 product_name。
   • 選擇 Text 作為字段類型，因為產(chǎn)品名稱也是文本格式。

6. 添加第三個字段 – 認證日期

在 Field Type 中選擇 Date Picker，這樣可以讓用戶通過日期選擇器來選擇認證的具體日期。

第二步：創(chuàng)建認證查詢頁面

1. 創(chuàng)建自定義查詢頁面
   • 轉到 頁面 > 新建頁面，創(chuàng)建一個新的查詢頁面（例如：產(chǎn)品認證查詢）。
   • 可以使用 Elementor Pro 或 WordPress 區(qū)塊編輯器來設計頁面的布局。
   • 頁面應該包含一個表單，用戶可以在此輸入產(chǎn)品認證碼來查詢產(chǎn)品信息。

2. 添加產(chǎn)品認證查詢表單

可以使用任何表單插件（如 Contact Form 7、WPForms）創(chuàng)建表單，并添加輸入字段，供用戶輸入他們的產(chǎn)品認證碼。

將表單設置為將數(shù)據(jù)發(fā)送到你將使用的自定義查詢處理函數(shù)。

第三步：創(chuàng)建查詢邏輯

1. 編寫查詢功能
   • 在WordPress 主題的 functions.php 文件中，需要編寫一個函數(shù)來處理用戶輸入的查詢請求，并根據(jù)輸入的認證碼返回產(chǎn)品認證信息。
   例如，可以使用以下代碼來處理查詢：

function product_certification_lookup() {
if ( isset($_POST['certification_code']) ) {
$cert_code = sanitize_text_field($_POST['certification_code']);
 // Query to retrieve product by certification code
    $args = array(
        'post_type' => 'product',
        'meta_query' => array(
            array(
                'key' => 'certification_code', // Custom field name
                'value' => $cert_code,
                'compare' => '='
            )
        )
    );

    $query = new WP_Query($args);

    // Check if any products match the certification code
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $product_name = get_the_title();
            $cert_date = get_field('certification_date'); // Retrieve the custom field

            // Output the product name and certification date
            echo 'Product Name: ' . $product_name . ' | Certification Date: ' . $cert_date;
        }
    } else {
        // If no product is found, display a message
        echo 'No matching product certification information found';
    }

    // Reset post data
    wp_reset_postdata();
}
}
add_action('init', 'product_certification_lookup');

說明:
· 此函數(shù)處理表單提交，用戶在表單提交中輸入產(chǎn)品認證代碼。
用于搜索具有匹配認證代碼(存儲在自定義字段中)的WooCommerce產(chǎn)品。
· 如果找到匹配的產(chǎn)品，則顯示產(chǎn)品名稱和認證日期(也存儲為自定義字段)。
· 如果未找到匹配項，則顯示”未找到匹配合適的產(chǎn)品認證信息”消息。

2. 將表單與查詢邏輯關聯(lián)
   • 在你的查詢頁面中，使用短代碼或 PHP 代碼將查詢表單與認證查詢功能關聯(lián)。
   • 當用戶提交認證碼時，函數(shù)會根據(jù)認證碼查詢產(chǎn)品數(shù)據(jù)庫，返回相應的產(chǎn)品信息。

在頁面插入短代碼，這會在頁面上顯示一個輸入產(chǎn)品認證碼的表單，并將表單提交的數(shù)據(jù)與編寫的查詢功能關聯(lián)。

[product_certification_form]

第四步：優(yōu)化和樣式調整

1. 優(yōu)化用戶體驗
   • 可以添加額外的反饋功能，例如在用戶提交無效認證碼時提示 “未找到相關信息”。
   • 使用 CSS 或者 Elementors 的樣式工具調整查詢表單和結果的展示效果，確保界面友好。
2. 緩存和性能優(yōu)化
   • 對于擁有大量產(chǎn)品的站點，可以考慮使用緩存或數(shù)據(jù)庫索引來提升查詢性能。

結論

通過使用 Advanced Custom Fields (ACF)，可以輕松地為 WordPress 網(wǎng)站創(chuàng)建一個強大的產(chǎn)品認證查詢系統(tǒng)。該系統(tǒng)能夠提升用戶信任感，并提供便捷的產(chǎn)品認證驗證功能。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息