PHP服务端给WordPress主菜单添加登录退出按钮

WordPress主菜单通过PHP添加登录/退出按钮

使用服务端方法在WordPress主菜单中添加登录/退出按钮更为稳定和SEO友好。以下是通过PHP实现的方案：

将以下代码添加到您的子主题functions.php文件中：

/**
 * 为主菜单添加登录/退出按钮
 */
function add_login_logout_menu_item($items, $args) {
    // 仅在主菜单添加按钮
    if ($args->theme_location != 'primary') {
        return $items;
    }

    // 获取当前用户状态
    $is_logged_in = is_user_logged_in();

    // 设置按钮文本和URL
    if ($is_logged_in) {
        $button_text = '退出';
        $button_url = wp_logout_url(home_url());
        $button_class = 'menu-button logout-button';
    } else {
        $button_text = '登录';
        $button_url = wp_login_url(get_permalink());
        $button_class = 'menu-button login-button';
    }

    // 创建菜单项HTML
    $button_item = '<li class="menu-item menu-item-button">';
    $button_item .= '<a href="' . esc_url($button_url) . '" class="' . esc_attr($button_class) . '">' . esc_html($button_text) . '</a>';
    $button_item .= '</li>';

    // 添加到菜单末尾
    $items .= $button_item;

    return $items;
}
add_filter('wp_nav_menu_items', 'add_login_logout_menu_item', 10, 2);

/**
 * 为登录/退出按钮添加样式
 */
function add_login_logout_button_styles() {
    $styles = '
    .menu-item-button {
        margin-left: 10px;
        display: flex;
        align-items: center;
    }

    .menu-button {
        background-color: #0274be;
        color: #ffffff !important;
        border-radius: 3px;
        padding: 8px 16px;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .menu-button:hover {
        background-color: #0258a8;
        color: #ffffff !important;
    }

    /* 移动端适配 */
    @media (max-width: 921px) {
        .menu-item-button {
            margin: 10px 0;
        }

        .menu-button {
            display: block;
            text-align: center;
            width: 100%;
        }
    }
    ';

    wp_add_inline_style('astra-child-theme-css', $styles);
}
add_action('wp_enqueue_scripts', 'add_login_logout_button_styles');

此代码做了以下工作：

1. 使用wp_nav_menu_items钩子过滤主菜单项，添加登录/退出按钮
2. 根据用户登录状态动态显示”登录”或”退出”按钮
3. 为按钮添加合适的样式，并确保移动端显示正常
4. 通过wp_add_inline_style将样式直接添加到Astra子主题的样式表中

模块化思路提醒：
如果您希望进一步模块化此功能：

1. 创建单独的文件（如login-buttons.php）并通过require_once引入到functions.php

2. 添加可配置选项，例如：

function get_login_button_options() { return apply_filters('login_button_options', array( 'login_text' => '登录', 'logout_text' => '退出', 'button_bg_color' => '#0274be', 'button_hover_color' => '#0258a8', 'button_text_color' => '#ffffff', )); }

3. 通过WordPress自定义设置页面让按钮颜色、文本等可配置

这种服务端方法比JavaScript方案更稳定，对搜索引擎更友好，同时能适应不同的主题结构和用户状态。