寻找适配多供应商场景的WordPress前端登录插件

Got it, let's break down exactly how to build this frontend-only vendor access flow—no admin dashboard allowed, just a clean login page and frontend product uploads. Here's the step-by-step approach:

1. First, Create a Restricted Vendor Role #

We need a custom user role that only has permissions for frontend product actions, zero access to the admin. Add this code to your theme's functions.php or a custom plugin:

add_action('init', 'create_vendor_role');
function create_vendor_role() {
    add_role(
        'vendor',
        '供应商',
        array(
            'read' => true, // Let them view their own products
            'edit_posts' => true, // Allow editing their products
            'publish_posts' => true, // Let them publish products
            'upload_files' => true, // Permit image uploads for products
            // Important: Do NOT add 'access_dashboard' here
        )
    );
}

This role ensures vendors can't even see the admin menu in the first place.

2. Build a Custom Frontend Login Page #

Ditch the default wp-login.php—we'll make a branded, frontend-only login page. Here's how with a page template:

1. In your theme folder, create a file named page-vendor-login.php with this code:

<?php
/*
Template Name: 供应商登录页
*/
get_header();

// Handle login submission
if (isset($_POST['vendor_login'])) {
    $creds = array(
        'user_login'    => sanitize_text_field($_POST['username']),
        'user_password' => $_POST['password'],
        'remember'      => isset($_POST['remember']) ? true : false
    );

    $user = wp_signon($creds, false);

    if (is_wp_error($user)) {
        echo '<p class="login-error" style="color: red;">' . $user->get_error_message() . '</p>';
    } else {
        // Redirect to product upload page on success
        wp_redirect(get_permalink(get_page_by_path('vendor-product-upload')));
        exit;
    }
}
?>

<div class="vendor-login-wrapper" style="max-width: 400px; margin: 2rem auto; padding: 2rem; border: 1px solid #eee; border-radius: 8px;">
    <h2 style="text-align: center; margin-bottom: 1.5rem;">供应商专属登录</h2>
    <form method="post" action="<?php echo esc_url(get_permalink()); ?>">
        <div style="margin-bottom: 1rem;">
            <label for="username" style="display: block; margin-bottom: 0.5rem;">用户名</label>
            <input type="text" name="username" id="username" required style="width: 100%; padding: 0.7rem; border: 1px solid #ddd; border-radius: 4px;">
        </div>
        <div style="margin-bottom: 1rem;">
            <label for="password" style="display: block; margin-bottom: 0.5rem;">密码</label>
            <input type="password" name="password" id="password" required style="width: 100%; padding: 0.7rem; border: 1px solid #ddd; border-radius: 4px;">
        </div>
        <div style="margin-bottom: 1.5rem;">
            <input type="checkbox" name="remember" id="remember" style="margin-right: 0.5rem;">
            <label for="remember">记住登录状态</label>
        </div>
        <button type="submit" name="vendor_login" style="width: 100%; padding: 0.8rem; background: #007cba; color: white; border: none; border-radius: 4px; cursor: pointer;">登录</button>
    </form>
</div>

<?php get_footer(); ?>

2. Go to your WordPress admin, create a new page, select "供应商登录页" as the template, and set its slug to vendor-login (so the URL is yourdomain.com/vendor-login).

3. Lock Down Access: Redirect Vendors to Frontend, Block Admin #

Add these functions to functions.php to ensure vendors never reach the admin dashboard:

// Redirect vendors to product upload page after login
add_filter('login_redirect', 'vendor_login_redirect', 10, 3);
function vendor_login_redirect($redirect_to, $request, $user) {
    if (isset($user->roles) && is_array($user->roles)) {
        if (in_array('vendor', $user->roles)) {
            // Replace with your product upload page's slug
            return get_permalink(get_page_by_path('vendor-product-upload'));
        }
    }
    return $redirect_to;
}

// Block vendors from accessing the admin entirely
add_action('admin_init', 'block_vendor_admin_access');
function block_vendor_admin_access() {
    $current_user = wp_get_current_user();
    if (in_array('vendor', (array) $current_user->roles)) {
        wp_redirect(home_url('/vendor-product-upload/'));
        exit;
    }
}

// Optional: Hide default wp-login.php so users only use your frontend login
add_action('init', 'hide_default_wp_login');
function hide_default_wp_login() {
    if (strpos($_SERVER['REQUEST_URI'], 'wp-login.php') !== false && !isset($_POST['wp-submit'])) {
        wp_redirect(home_url('/vendor-login/'));
        exit;
    }
}

4. Build a Frontend Product Upload Page #

Now create a page where vendors can upload products without touching the admin. Use this shortcode in functions.php:

add_shortcode('vendor_product_upload', 'render_vendor_product_upload_form');
function render_vendor_product_upload_form() {
    // Check if user is logged in and is a vendor
    if (!is_user_logged_in() || !in_array('vendor', wp_get_current_user()->roles)) {
        return '<p style="text-align: center;">请先<a href="' . esc_url(home_url('/vendor-login/')) . '">登录</a>后上传商品。</p>';
    }

    // Handle product submission
    if (isset($_POST['submit_product'])) {
        $post_args = array(
            'post_title'    => sanitize_text_field($_POST['product_title']),
            'post_content'  => wp_kses_post($_POST['product_description']),
            'post_status'   => 'draft', // Set to 'publish' if you want products live immediately
            'post_type'     => 'product', // Replace with your custom product post type slug
            'post_author'   => get_current_user_id()
        );

        $product_id = wp_insert_post($post_args);

        // Handle product image upload
        if (!empty($_FILES['product_image']['name'])) {
            require_once(ABSPATH . 'wp-admin/includes/image.php');
            require_once(ABSPATH . 'wp-admin/includes/file.php');
            require_once(ABSPATH . 'wp-admin/includes/media.php');

            $attachment_id = media_handle_upload('product_image', $product_id);
            if (!is_wp_error($attachment_id)) {
                set_post_thumbnail($product_id, $attachment_id);
            }
        }

        return '<p style="color: green; text-align: center;">商品上传成功！我们会尽快审核（如果需要）。</p>';
    }

    // Render the upload form
    ob_start();
    ?>
    <div style="max-width: 600px; margin: 2rem auto; padding: 2rem; border: 1px solid #eee; border-radius: 8px;">
        <h2 style="text-align: center; margin-bottom: 1.5rem;">上传商品</h2>
        <form method="post" enctype="multipart/form-data">
            <div style="margin-bottom: 1rem;">
                <label for="product_title" style="display: block; margin-bottom: 0.5rem;">商品名称</label>
                <input type="text" name="product_title" id="product_title" required style="width: 100%; padding: 0.7rem; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div style="margin-bottom: 1rem;">
                <label for="product_description" style="display: block; margin-bottom: 0.5rem;">商品描述</label>
                <textarea name="product_description" id="product_description" rows="6" required style="width: 100%; padding: 0.7rem; border: 1px solid #ddd; border-radius: 4px;"></textarea>
            </div>
            <div style="margin-bottom: 1.5rem;">
                <label for="product_image" style="display: block; margin-bottom: 0.5rem;">商品主图</label>
                <input type="file" name="product_image" id="product_image" accept="image/*" style="width: 100%; padding: 0.5rem;">
            </div>
            <button type="submit" name="submit_product" style="width: 100%; padding: 0.8rem; background: #2271b1; color: white; border: none; border-radius: 4px; cursor: pointer;">提交商品</button>
        </form>
    </div>
    <?php
    return ob_get_clean();
}

Then create a new page in admin, add the shortcode [vendor_product_upload], and set its slug to vendor-product-upload.

Final Notes #

• Make sure to create your custom product post type (product in the code) if you haven't already—you can use a plugin like Custom Post Type UI or code it manually.
• Test with a test vendor account to ensure they can't access the admin, only the login and upload pages.

内容的提问来源于stack exchange，提问作者Monique Keithanne Gowie