WordPressのフロントエンドからログアウトする方法

はじめに

WordPressの管理バーにはログアウトリンクがありますが、管理バーを非表示にしている場合や、フロントエンドに専用のログアウトボタンを設置したい場合は wp_logout_url() 関数を使います。

基本：ログアウトURLを取得する

// テンプレートファイル内でログアウトリンクを表示
if (is_user_logged_in()) {
    $logout_url = wp_logout_url(home_url()); // ログアウト後はトップページへ
    echo '<a href="' . esc_url($logout_url) . '">ログアウト</a>';
}

wp_loginout() 関数を使う（ログイン/ログアウト切り替え）

// ログイン中は「ログアウト」、未ログインは「ログイン」リンクを表示
<?php wp_loginout(home_url()); ?>

ナビゲーションメニューにログアウトリンクを追加

// functions.php — メニューに動的にログアウトリンクを追加
add_filter('wp_nav_menu_items', function($items, $args) {
    if ($args->theme_location !== 'primary') return $items;

    if (is_user_logged_in()) {
        $logout_url = wp_logout_url(home_url());
        $items .= '<li class="menu-item"><a href="' . esc_url($logout_url) . '">ログアウト</a></li>';
    } else {
        $items .= '<li class="menu-item"><a href="' . esc_url(wp_login_url(get_permalink())) . '">ログイン</a></li>';
    }
    return $items;
}, 10, 2);

ショートコードでログアウトリンクを設置

// functions.php — ショートコードでどこでも使えるログアウトリンク
add_shortcode('logout_link', function($atts) {
    $atts = shortcode_atts([
        'redirect' => home_url(),
        'text'     => 'ログアウト',
        'class'    => 'logout-link',
    ], $atts);

    if (!is_user_logged_in()) return '';

    $url = wp_logout_url($atts['redirect']);
    return '<a href="' . esc_url($url) . '" class="' . esc_attr($atts['class']) . '">'
         . esc_html($atts['text']) . '</a>';
});

// 使い方: [logout_link text="サインアウト" redirect="/login"]

ログアウト後のリダイレクト先を変更する

// functions.php — ログアウト後のリダイレクト先をカスタマイズ
add_filter('logout_redirect', function($redirect_to, $requested_redirect_to, $user) {
    // 管理者はログインページへ、一般ユーザーはトップページへ
    if ($user && in_array('administrator', (array) $user->roles)) {
        return wp_login_url();
    }
    return home_url('/ありがとうございました/');
}, 10, 3);

JavaScriptでログアウトを実装

// Ajax経由でログアウト（ページリロードなし）
fetch(wpData.ajaxUrl, {
    method: 'POST',
    body: new URLSearchParams({
        action: 'ajax_logout',
        nonce:  wpData.nonce,
    }),
}).then(() => window.location.href = '/');

// functions.php — Ajaxログアウトハンドラー
add_action('wp_ajax_ajax_logout', function() {
    check_ajax_referer('ajax_logout_nonce', 'nonce');
    wp_logout();
    wp_send_json_success();
});

注意事項

• wp_logout_url() はnonceを含むため、キャッシュされたページでは無効になることがあります
• キャッシュプラグインを使用している場合は、ログアウトURLを含む部分をキャッシュ対象外にしてください
• wp_loginout() 関数はHTML全体を出力します。カスタマイズが必要な場合は wp_logout_url() を使ってください

まとめ

フロントエンドにログアウトリンクを設置するには wp_logout_url(home_url()) でURLを取得してリンクタグに使うのが最もシンプルです。ナビゲーションへの動的追加には wp_nav_menu_items フィルタが便利です。