wordpress图文教程

企业认证系统-WordPress插件

2025年5月28日
酒醒

企业认证系统-WordPress插件

完整WordPress企业认证插件代码，包含多文件上传功能：

把以下代码写进enterprise-verification.php文件里


<?php
/*
Plugin Name: 企业认证系统
Description: 提供完整的企业认证功能，包含营业执照和多张办公环境照片上传
*/

// 注册短代码
add_shortcode('enterprise_verification', 'verification_form');
function verification_form() {
    ob_start(); ?>
    <form id="enterprise-verify" method="post" enctype="multipart/form-data">
        <h3>企业认证申请</h3>
        <div class="form-field">
            <label>企业名称* <input type="text" name="company_name" required></label>
        </div>
        <div class="form-field">
            <label>统一信用代码* <input type="text" name="credit_code" pattern="[0-9A-Z]{18}" required></label>
        </div>
        <div class="form-field">
            <label>认证账号* <input type="text" name="verify_account" required></label>
        </div>
        <div class="form-field">
            <label>营业执照* <input type="file" name="license_file" accept="image/*,.pdf" required></label>
        </div>
        <div class="form-field">
            <label>办公环境照片(最多5张)* 
                <input type="file" name="office_photos[]" multiple accept="image/*" required>
            </label>
            <div id="preview-area"></div>
        </div>
        <div class="form-field">
            <label>联系人* <input type="text" name="contact_name" required></label>
        </div>
        <div class="form-field">
            <label>职位* <input type="text" name="contact_position" required></label>
        </div>
        <div class="form-field">
            <label>联系电话* <input type="tel" name="contact_phone" required></label>
        </div>
        <?php wp_nonce_field('verify_submit', 'verify_nonce'); ?>
        <input type="hidden" name="action" value="process_verification">
        <button type="submit">提交认证</button>
    </form>
    <div id="verify-result"></div>
    <?php return ob_get_clean();
}

// 处理表单提交
add_action('wp_ajax_process_verification', 'handle_verification');
add_action('wp_ajax_nopriv_process_verification', 'handle_verification');
function handle_verification() {
    check_ajax_referer('verify_submit', 'verify_nonce');
    
    $user_id = get_current_user_id();
    $fields = [
        'company_name', 'credit_code', 'verify_account',
        'contact_name', 'contact_position', 'contact_phone'
    ];
    
    foreach ($fields as $field) {
        update_user_meta($user_id, $field, sanitize_text_field($_POST[$field]));
    }
    
    // 处理营业执照
    if ($_FILES['license_file']) {
        $file = wp_handle_upload($_FILES['license_file'], ['test_form' => false]);
        update_user_meta($user_id, 'license_file', $file['url']);
    }
    
    // 处理办公照片
    if (!empty($_FILES['office_photos'])) {
        $photos = [];
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        
        foreach ($_FILES['office_photos']['tmp_name'] as $key => $tmp_name) {
            $file = [
                'name' => $_FILES['office_photos']['name'][$key],
                'type' => $_FILES['office_photos']['type'][$key],
                'tmp_name' => $tmp_name,
                'error' => $_FILES['office_photos']['error'][$key],
                'size' => $_FILES['office_photos']['size'][$key]
            ];
            
            $upload = wp_handle_upload($file, ['test_form' => false]);
            if ($upload && !isset($upload['error'])) {
                $photos[] = $upload['url'];
            }
        }
        
        update_user_meta($user_id, 'office_photos', $photos);
    }
    
    update_user_meta($user_id, 'verify_status', 'pending');
    wp_send_json_success('认证申请已提交');
}

// 加载前端资源
add_action('wp_enqueue_scripts', 'load_verification_assets');
function load_verification_assets() {
    wp_enqueue_style('verify-css', plugins_url('style.css', __FILE__));
    wp_enqueue_script('verify-js', plugins_url('script.js', __FILE__), ['jquery'], null, true);
    wp_localize_script('verify-js', 'verifyVars', ['ajaxurl' => admin_url('admin-ajax.php')]);
}

把以下代码写进style.css文件里

enterprise-verify {
    max-width: 600px;
    margin: 20px auto;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#enterprise-verify .form-field {
    margin-bottom: 15px;
}
#enterprise-verify label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
#enterprise-verify input[type="text"],
#enterprise-verify input[type="tel"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
#enterprise-verify input[type="file"] {
    padding: 5px;
    border: 1px dashed #ccc;
}
#preview-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.preview-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #eee;
}
#verify-result .success {
    color: #0a7a0a;
    padding: 10px;
    background: #f0fff0;
    margin-top: 15px;
}
#verify-result .error {
    color: #d63638;
    padding: 10px;
    background: #fff0f0;
    margin-top: 15px;
}

把以下代码写进script.js文件里

Query(document).ready(function($) {
    // 图片预览功能
    $('input[name="office_photos[]"]').change(function() {
        $('#preview-area').empty();
        Array.from(this.files).slice(0,5).forEach(file => {
            const reader = new FileReader();
            reader.onload = (e) => {
                $('#preview-area').append(
                    `<img src="${e.target.result}" class="preview-img">`
                );
            }
            reader.readAsDataURL(file);
        });
    });

    // 表单提交处理
    $('#enterprise-verify').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        
        $.ajax({
            url: verifyVars.ajaxurl,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                $('#verify-result').html(
                    res.success ? 
                    '<div class="success">'+res.data+'</div>' : 
                    '<div class="error">提交失败</div>'
                );
                if(res.success) $('#enterprise-verify')[0].reset();
            },
            error: function() {
                $('#verify-result').html('<div class="error">服务器错误</div>');
            }
        });
    });
});

将这三个文件放进名为Enterprise Certification System文件夹里，保存为WordPress插件。

将Enterprise Certification System文件夹，上传到wp-content/plugins目录后激活即可使用完整的企业认证功能，包含多文件上传和实时预览。

在任意页面添加[enterprise_verification]短代码即可使用。

以上功能提交后会在那里显示？

根据代码实现，提交后的信息将会在以下三个位置显示：

  1. ‌前端即时反馈（用户可见）‌
    在表单下方的 <div id="verify-result"></div> 区域会即时显示提交结果：
  • 成功时会显示绿色提示：”认证申请已提交”
  • 失败时会显示红色错误提示
  • 服务器错误显示”服务器错误”
  1. ‌后台数据库存储（管理员可见）‌
    所有提交数据通过 update_user_meta 存储在 WordPress 用户元数据中，可以通过以下方式查看：
// 通过用户ID获取数据示例
$company_name = get_user_meta( $user_id, 'company_name', true );
$license_file = get_user_meta( $user_id, 'license_file', true );
$office_photos = get_user_meta( $user_id, 'office_photos', true );
  1. ‌管理员后台界面（需扩展）‌
    当前代码需要添加管理员界面才能可视化展示申请数据，建议增加以下代码到插件的 admin.php 文件：
// 在用户资料页面添加认证信息展示
add_action( 'show_user_profile', 'show_verification_info' );
add_action( 'edit_user_profile', 'show_verification_info' );

function show_verification_info( $user ) {
    ?>
    <h3>企业认证信息</h3>
    <table class="form-table">
        <tr>
            <th>认证状态</th>
            <td><?php echo get_user_meta( $user->ID, 'verify_status', true ) ?></td>
        </tr>
        <tr>
            <th>营业执照</th>
            <td><a href="<?php echo get_user_meta( $user->ID, 'license_file', true ) ?>" target="_blank">查看文件</a></td>
        </tr>
        <tr>
            <th>办公照片</th>
            <td>
                <?php foreach( get_user_meta( $user->ID, 'office_photos', true ) as $photo ): ?>
                    <img src="<?php echo $photo ?>" style="width:100px; margin:5px;">
                <?php endforeach; ?>
            </td>
        </tr>
    </table>
    <?php
}

// 创建认证管理菜单
add_action( 'admin_menu', 'register_verification_menu' );
function register_verification_menu() {
    add_menu_page( 
        '企业认证管理', 
        '企业认证', 
        'manage_options', 
        'enterprise-verification', 
        'verification_admin_page' 
    );
}

function verification_admin_page() {
    $users = get_users( ['meta_key' => 'verify_status'] );
    ?>
    <div class="wrap">
        <h2>企业认证申请列表</h2>
        <table class="wp-list-table widefat fixed striped">
            <thead>
                <tr>
                    <th>企业名称</th>
                    <th>联系人</th>
                    <th>认证状态</th>
                    <th>申请时间</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach( $users as $user ): ?>
                <tr>
                    <td>
                        <a href="<?php echo get_edit_user_link( $user->ID ) ?>">
                            <?php echo get_user_meta( $user->ID, 'company_name', true ) ?>
                        </a>
                    </td>
                    <td><?php echo get_user_meta( $user->ID, 'contact_name', true ) ?></td>
                    <td><?php echo get_user_meta( $user->ID, 'verify_status', true ) ?></td>
                    <td><?php echo date( 'Y-m-d H:i', get_userdata( $user->ID )->user_registered ) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php
}

‌完整使用流程：‌

  1. 用户通过短代码页面提交表单
  2. 即时在前端看到成功提示
  3. 数据存入用户元数据
  4. 管理员在后台：
    • 用户资料页查看完整认证信息
    • 左侧菜单「企业认证」查看申请列表
    • 可手动修改用户元数据中的 verify_status 值（如改为 approved/rejected）

建议在文件上传处理部分增加安全限制：

// 添加到 handle_verification() 的 $_FILES 处理前
if (count($_FILES['office_photos']['tmp_name']) > 5) {
    wp_send_json_error('最多上传5张照片');
}

这个还没试上传功能