WordPress 短代码实现产品验证查询表单功能

客户想实现在产品编辑页面可以输入以下字段

产品编号
条形码编码
产品名称
生产日期
保质日期

网站访客可以在网页端进行产品验证查询，具体查询表单如下

若后台已上传一致的产品，则显示文本：

Success! Your product is verified.

Lot Number: 1

Barcode: 111

Product Name: Seal Oil Softgels

Production Date: April 30, 2026

Shelf Life: April 30, 2027

若后台未上传一致的产品，则显示文本：

No matching records found.

Possible reasons:

Barcode or batch number input error
Not a product produced by our company
Counterfeit risk (report phone: )

以下是将您的代码转换为 WordPress 短代码的实现方式：

1. 在主题的 functions.php 文件中添加短代码

function product_verification_shortcode() {
    ob_start(); // 开始输出缓冲
    
    // 检查是否是表单提交
    $is_submitted = isset($_POST['product_number']) && isset($_POST['barcode']);
    
    // 输出表单
    ?>
    <form id="product-verify-form" method="post">
        <div class="form-group">
            <label for="product_number">Lot Number:</label>
            <input type="text" id="product_number" name="product_number" required 
                   placeholder="Enter product lot number" 
                   value="<?php echo $is_submitted ? esc_attr($_POST['product_number']) : ''; ?>">
        </div>
        <div class="form-group">
            <label for="barcode">Barcode:</label>
            <input type="text" id="barcode" name="barcode" required 
                   placeholder="Enter barcode number"
                   value="<?php echo $is_submitted ? esc_attr($_POST['barcode']) : ''; ?>">
        </div>
        <button type="submit" class="verify-button">Verify Product</button>
    </form>

    <div id="verification-result">
        <?php 
        if ($is_submitted) {
            $product_number = sanitize_text_field($_POST['product_number']);
            $barcode = sanitize_text_field($_POST['barcode']);
            
            $args = array(
                'post_type' => 'product',
                'posts_per_page' => 1,
                'meta_query' => array(
                    'relation' => 'AND',
                    array(
                        'key' => 'product_number',
                        'value' => $product_number,
                        'compare' => '='
                    ),
                    array(
                        'key' => 'barcode',
                        'value' => $barcode,
                        'compare' => '='
                    )
                )
            );
            
            $query = new WP_Query($args);
            
            if ($query->have_posts()) {
                while ($query->have_posts()) {
                    $query->the_post();
                    $product_name = get_the_title();
                    $production_date = get_field('cp-production');
                    $shelf_life = get_field('cp-shelf');
                    
                    echo '<div class="verification-success">';
                    echo '<h3>Success! Your product is verified.</h3>';
                    echo '<div class="product-details">';
                    echo '<p><strong>Lot Number:</strong> ' . esc_html($product_number) . '</p>';
                    echo '<p><strong>Barcode:</strong> ' . esc_html($barcode) . '</p>';
                    echo '<p><strong>Product Name:</strong> ' . esc_html($product_name) . '</p>';
                    echo '<p><strong>Production Date:</strong> ' . esc_html($production_date) . '</p>';
                    echo '<p><strong>Shelf Life:</strong> ' . esc_html($shelf_life) . '</p>';
                    echo '</div>';
                    echo '</div>';
                }
            } else {
                echo '<div class="verification-failure">';
                echo '<h3>No matching records found.</h3>';
                echo '<div class="failure-reasons">';
                echo '<p><strong>Possible reasons:</strong></p>';
                echo '<ol>';
                echo '<li>Barcode or batch number input error</li>';
                echo '<li>Not a product produced by our company</li>';
                echo '<li>Counterfeit risk (report phone: )</li>';
                echo '</ol>';
                echo '</div>';
                echo '</div>';
            }
            
            wp_reset_postdata();
        }
        ?>
    </div>
    <?php
    
    return ob_get_clean(); // 返回缓冲内容
}
add_shortcode('product_verification', 'product_verification_shortcode');

2. 在 WordPress 中使用短代码

现在您可以在任何文章、页面或小工具中使用以下短代码来显示产品验证表单：

[product_verification]

3. 可选：添加一些基本样式

您可以在主题的样式表中添加以下CSS来美化表单：

#product-verify-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.verify-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.verify-button:hover {
    background-color: #45a049;
}

.verification-success {
    margin-top: 20px;
    padding: 15px;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
    color: #3c763d;
}

.verification-failure {
    margin-top: 20px;
    padding: 15px;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    color: #a94442;
}

.product-details, .failure-reasons {
    margin-top: 10px;
}

WordPress独立站科普知识大全

这是我对于品牌独立站，尤其是WordPress建站的全部分享