2026年10月8日

WordPressのログインボタンをナビゲーションに追加する方法

ログイン・アクセス

はじめに

この記事では、WordPressサイトのトップページやナビゲーションバーにログインボタンを追加する方法を解説します。これにより、ユーザーは簡単にログインリンクを見つけることができ、ユーザーフレンドリーなウェブサイトを作成できます。

症状・背景

このテーマが必要になる主な場面:

ログインページへの直結が不明瞭で、訪問者が迷う場合
機能を提供する前にユーザーにログインしてもらう必要がある場合
サイト全体のナビゲーションを改善したい場合
ユーザー体験を向上させたい場合

手順・設定方法

ステップ1: テーマのfunctions.phpファイルを開く

# WordPressサイトの/wp-content/themes/your-themeディレクトリに移動します。
cd /var/www/html/wp-content/themes/your-theme

# functions.phpファイルをエディタで開きます。
nano functions.php

ステップ2: フィルター関数を追加

# ログインリンクのHTMLタグをカスタマイズするフィルター関数を追加します。
add_filter( 'wp_nav_menu_items', function($items, $args) {
    if ( is_user_logged_in() ) {
        // ログイン中のユーザーにログアウトリンクを表示
        return $items . '<li><a href="' . wp_logout_url(home_url()) . '">ログアウト</a></li>';
    } else {
        // ログインしていないユーザーにログインリンクを表示
        return $items . '<li><a class="login-button" href="' . wp_login_url() . '">ログイン</a></li>';
    }
}, 10, 2);

ステップ3: CSSでスタイルを設定

# カスタムCSSファイルを開きます。
nano /var/www/html/wp-content/themes/your-theme/style.css

// ログインボタンのスタイルをカスタマイズします。
.login-button {
    padding: 5px 10px;
    border: none;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

ステップ4: ナビゲーションメニューの更新と確認

# WordPressダッシュボードにログインし、外観 > メニューを開きます。
cd /var/www/html/wp-admin/admin.php?page=nav-menus

# ログインボタンがナビゲーションバーに追加されていることを確認します。

注意事項

カスタマイズを行う前に必ずバックアップを取ること
安全な方法でファイルを編集し、適切な権限設定を行うこと
公開するコンテンツのセキュリティチェックを十分に行うこと
パフォーマンスに影響を与えないよう適切なCSSを使用すること

まとめ

1. フィルター関数: WordPressでナビゲーションメニューにログインリンクやログアウトリンクを追加するために使用します。

2. カスタムCSS: ログインボタンの外観を調整し、サイト全体と統一感を持たせます。

3. 更新確認: 新しい要素が適切に表示されているか確認するプロセスです。

4. 安全な編集: WordPressテーマファイルの変更は慎重に行い、必ずバックアップを取りましょう。