WordPress 更改登入方式 Icon 教學

📌 目標

在 WordPress 後台 (wp-admin/users.php) 的使用者列表中，將「登入方式」顯示為 Icon，而不是純文字。

---

🔹 第 1 步：確保登入方式被記錄

我們需要在使用者登入時，將登入方式 (social_login_method) 儲存到 WordPress usermeta。

✅ 在 handleUserLogin() 方法內儲存登入方式

📌 修改以下檔案，確保登入方式被記錄：

🔹 Google 登入 (ORCAGoogleAuth.php)

update_user_meta($user->ID, 'social_login_method', 'Google');

🔹 Facebook 登入 (ORCAFBAuth.php)

update_user_meta($user->ID, 'social_login_method', 'Facebook');

🔹 LINE 登入 (ORCALineAuth.php)

update_user_meta($user->ID, 'social_login_method', 'LINE');

🔹 一般本地登入（非社群登入）

📌 在 functions.php 新增以下程式碼，確保一般登入方式被標記為 Local：

add_action('wp_login', function($user_login, $user) {
    if (!get_user_meta($user->ID, 'social_login_method', true)) {
        update_user_meta($user->ID, 'social_login_method', 'Local');
    }
}, 10, 2);

---

🔹 第 2 步：在 WordPress 後台顯示登入方式 Icon

📌 在 functions.php 或 ORCASettings.php 加入以下程式碼

✅ 在使用者列表 (wp-admin/users.php) 新增「登入方式」欄位

// 在 WordPress 使用者列表中新增「登入方式」欄位
function add_social_login_column($columns) {
    $columns['social_login_method'] = '登入方式';
    return $columns;
}
add_filter('manage_users_columns', 'add_social_login_column');

✅ 顯示登入方式的 Icon

function show_social_login_column_data($value, $column_name, $user_id) {
    if ($column_name === 'social_login_method') {
        $method = get_user_meta($user_id, 'social_login_method', true);

        // 設定不同登入方式的圖示
        $icons = [
            'Google'   => '<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" width="24" height="24" alt="Google">',
            'Facebook' => '<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" width="24" height="24" alt="Facebook">',
            'LINE'     => '<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/LINE_logo.svg" width="24" height="24" alt="LINE">',
            'Local'    => '<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/User_icon_2.svg" width="24" height="24" alt="Local">'
        ];

        return isset($icons[$method]) ? $icons[$method] : $icons['Local'];
    }
    return $value;
}
add_filter('manage_users_custom_column', 'show_social_login_column_data', 10, 3);

---

✅ 最終效果

當你進入 WordPress 後台 (wp-admin/users.php)，你會看到：

使用者名稱	Email	角色	登入方式
User A	userA@gmail.com	會員
User B	userB@example.com	會員
User C	userC@line.com	會員
User D	admin@example.com	管理員

---