사이트 상단에 로그인/로그아웃 메뉴 표시하기 - 워드프레스 중급

한국형 워드프레스 게시판 플러그 중 하나인 망보드를 사용하는 경우 망보드에서 제공하는 함수를 사용하여 사이트 상단에 로그인/로그아웃 버튼을 표시할 수 있습니다. 망보드 문서에서 테마 상단에 로그인/로그아웃 버튼을 추가하는 방법을 설명하고 있습니다. 망보드에서 제시하는 코드를 활용하여 GeneratePress 테마와 Astra 테마 상단에 로그인/로그아웃 버튼을 추가하는 방법을 살펴보겠습니다. 망보드를 사용하지 않는 경우 기본 워드프레스 함수를 사용하여 테마 상단에 로그인/로그아웃 버튼을 표시하는 방법도 다루어보겠습니다.

사이트 상단에 로그인/로그아웃 메뉴 표시하기 (feat. 망보드)

예를 들어, 망보드 게시판을 사용하고 있고 비로그인 사용자(게스트)가 방문하면 사이트 상단에 로그인|회원가입 메뉴를 표시할 수 있습니다.

로그인 시에는 테마 상단에 환영 인사말(예: 홍길동님의 방문을 환영합니다!)과 회원정보|로아웃 메뉴를 표시합니다.

이와 관련된 코드가 망보드의 "테마 상단에 로그인/로그아웃 버튼 만들기" 문서에 제시되어 있습니다.

해당 코드를 인용하면 다음과 같습니다.

<?php
$html  = '';
$html .= '<div class="container" style="text-align:right;background-color:#FFF;color:#555;font-size:12px;">';  
if(mbw_is_login()){
 if(mbw_get_user("fn_user_name")!="") $html .= '<span class="text-user-welcome">'.mbw_get_user("fn_user_name").'님의 방문을 환영합니다!</span>&nbsp;&nbsp;';
 $html .= '<a href="'.mbw_get_user_url("user_info").'" ><span class="btn-user-info">회원정보</span></a><span style="padding:0 10px;font-size:11px;vertical-align:1px;">|</span>';  
 $html .= '<a href="'.site_url().'/?mb_user=logout" ><span class="btn-user-logout">로그아웃</span></a>';  
}else{          
 $html .= '<a href="'.mbw_get_user_url("login").'" ><span class="btn-user-login">로그인</span></a><span style="padding:0 10px;font-size:11px;vertical-align:1px;">|</span>';
 $html .= '<a href="'.mbw_get_user_url("register").'" ><span class="btn-user-join">회원가입</span></a>';
}       
$html .= '</div>';  
echo $html;
?>

위의 코드를 테마의 header.php 파일에 추가하면 로그인/로그아웃 버튼이 우측정렬되어 표시됩니다.

코드를 숏코드로 변환하기

망모드에서 소개하는 코드는 PHP 코드를 header.php 파일에 직접 추가하도록 안내하고 있습니다. 이보다는 숏코드(shortcode)로 변환하면 테마나 엘리멘터 등의 페이지 빌더에서 원하는 곳에 단축코드를 추가하여 로그인/로그아웃 메뉴를 표시할 수 있습니다.

차일드 테마를 만들고, 차일드 테마 내의 함수 파일(funcitons.php)에 다음과 같은 코드를 추가합니다.

/* 망보드 사용 시 테마의 상단에 로그인/로그아웃 메뉴 표시하기 */

function custom_user_greeting_shortcode() {
    $html  = '';
    $html .= '<div class="mb-container">';  
    if(mbw_is_login()){
        if(mbw_get_user("fn_user_name") != "") {
            $html .= '<span class="text-user-welcome">' . mbw_get_user("fn_user_name") . '님의 방문을 환영합니다!</span>&nbsp;&nbsp;';
        }
        $html .= '<a href="' . mbw_get_user_url("user_info") . '"><span class="btn-user-info">회원정보</span></a><span class="mb-separator">|</span>';  
        $html .= '<a href="' . site_url() . '/?mb_user=logout"><span class="btn-user-logout">로그아웃</span></a>';  
    } else {          
        $html .= '<a href="' . mbw_get_user_url("login") . '"><span class="btn-user-login">로그인</span></a><span class="mb-separator">|</span>';
        $html .= '<a href="' . mbw_get_user_url("register") . '"><span class="btn-user-join">회원가입</span></a>';
    }       
    $html .= '</div>';  

    return $html;
}
add_shortcode('user_greeting', 'custom_user_greeting_shortcode');

차일드 테마 내의 스타일시트 파일(style.css)이나 워드프레스 알림판 » 사용자 정의하기 » 추가 CSS에 적절한 코드를 추가하여 상단 로그인/로그아웃 메뉴의 스타일을 지정합니다. 예시:

.mb-separator {
	    padding: 0 10px;
    font-size: 11px;
    vertical-align: 1px;
}

GeneratePress 테마의 Top Bar 위젯 영역에 로그인/로그아웃 메뉴 표시하기

GeneratePress 테마에서는 Top Bar 위젯 영역을 통해 사이트 상단에 필요한 요소들을 표시할 수 있습니다. 디자인 » 위젯으로 이동합니다.

Top Bar 위젯 영역에 사용자 정의 HTML 블록을 추가하고 다음과 같은 숏코드를 입력합니다.

[user_greeting]

사용자 정의 HTML 블록 대신 숏코드 블록이나 단락 블록을 사용할 수도 있습니다. 단락 블록이나 숏코드 블록을 사용할 경우 의도치 않게 <p> 태그가 삽입되어 스타일을 다시 잡아야 하는 번거로움이 있습니다. 사용자 정의 HTML 블록을 사용하면 불필요한 <p> 태그가 삽입되지 않습니다.

저장하면 상단에 로그인/로그아웃 메뉴가 표시되는 것을 확인할 수 있습니다. 상단 Top Bar의 텍스트 색상, 배경색, 여백 등의 설정은 사용자 정의하기에서 가능합니다.

Top Bar 컬러 설정:

Top Bar 레이아웃:

저장한 다음 사이트를 새로 고침하면 상단 표시줄에 로그인/로그아웃 메뉴가 표시될 것입니다. 망보드가 설치가 안 된 경우에는 치명적인 오류가 발생합니다. 그런 경우, 아래의 "페이지 상단에 워드프레스 기본 로그인/로그아웃 메뉴 표시하기" 부분을 참고해보세요.

Astra 테마의 Top Bar 위젯 영역에 로그인/로그아웃 메뉴 표시하기

아스트라 테마를 사용하는 경우에는 헤더 빌더의 상단 헤더 부분에 숏코드를 추가할 수 있습니다.

HTML 요소나 위젯 요소를 사용하여 숏코드를 추가할 수 있습니다.

헤더 상단 표시줄의 레이아웃은 CSS를 사용하여 조정할 수 있습니다. 기본적인 CSS를 이해하시면 어느 정도 원하는 대로 스타일을 조정할 수 있을 것입니다.

페이지 상단에 워드프레스 기본 로그인/로그아웃 메뉴 표시하기

망보드를 사용하지 않는 경우 워드프레스 기본 로그인/로그아웃 링크로 연결되는 메뉴를 표시할 수 있습니다. 상기에 제시된 숏코드 함수 대신 다음 코드를 차일드 테마 내의 함수 파일에 추가하여 테스트해보시기 바랍니다.

/**
 * Shortcode to display user greeting and login/logout links.
 * 
 * 이 숏코드는 사용자 환영 인사와 로그인/로그아웃 링크를 표시합니다.
 */

function custom_user_greeting_shortcode() {
    $html  = '';
    $html .= '<div class="mb-container">';  // Create a container div with the class "mb-container".
    
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();  // Get the current logged-in user's information.
        
        // If the user's display name is not empty, display a welcome message.
        if ($current_user->display_name != "") {
            $html .= '<span class="text-user-welcome">' . esc_html($current_user->display_name) . '님의 방문을 환영합니다!</span>&nbsp;&nbsp;';
        }
        
        // Display the profile link and logout link for logged-in users.
        $html .= '<a href="' . esc_url(admin_url('profile.php')) . '"><span class="btn-user-info">회원정보</span></a><span class="mb-separator">|</span>';  
        $html .= '<a href="' . esc_url(wp_logout_url()) . '"><span class="btn-user-logout">로그아웃</span></a>';  
    } else {          
        // Display the login and registration links for guests.
        $html .= '<a href="' . esc_url(wp_login_url()) . '"><span class="btn-user-login">로그인</span></a><span class="mb-separator">|</span>';
        $html .= '<a href="' . esc_url(site_url('/wp-login.php?action=register&redirect_to=' . get_permalink())) . '"><span class="btn-user-join">회원가입</span></a>';
    }       
    $html .= '</div>';  // Close the container div.

    return $html;  // Return the generated HTML.
}

add_shortcode('user_greeting', 'custom_user_greeting_shortcode');  // Register the shortcode.

페이지 상단에 우커머스 로그인/로그아웃 메뉴 표시하기

우커머스 쇼핑몰을 운영하는 경우 다음 코드를 응용할 수 있습니다.

/**
 * Shortcode to display user greeting and login/logout links with WooCommerce integration.
 * 
 * 이 숏코드는 우커머스 통합을 통해 사용자 환영 인사와 로그인/로그아웃 링크를 표시합니다.
 */

function custom_user_greeting_shortcode() {
    $html  = '';
    $html .= '<div class="mb-container">';  // Create a container div with the class "mb-container".
    
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();  // Get the current logged-in user's information.
        
        // If the user's display name is not empty, display a welcome message.
        if ($current_user->display_name != "") {
            $html .= '<span class="text-user-welcome">' . esc_html($current_user->display_name) . '님의 방문을 환영합니다!</span>&nbsp;&nbsp;';
        }
        
        // Display the profile link and logout link for logged-in users.
        $html .= '<a href="' . esc_url(get_permalink(get_option('woocommerce_myaccount_page_id'))) . '"><span class="btn-user-info">회원정보</span></a><span class="mb-separator">|</span>';  
        $html .= '<a href="' . esc_url(wp_logout_url()) . '"><span class="btn-user-logout">로그아웃</span></a>';  
    } else {          
        // Display the login and registration links for guests.
        $html .= '<a href="' . esc_url(wc_get_page_permalink('myaccount')) . '"><span class="btn-user-login">로그인</span></a><span class="mb-separator">|</span>';
        $html .= '<a href="' . esc_url(wc_get_page_permalink('myaccount')) . '"><span class="btn-user-join">회원가입</span></a>';
    }       
    $html .= '</div>';  // Close the container div.

    return $html;  // Return the generated HTML.
}

add_shortcode('user_greeting', 'custom_user_greeting_shortcode');  // Register the shortcode.