[쇼핑몰 구축기] 메뉴에 로그인/로그아웃 링크 추가하는 다양한 방법

이전에 쇼핑몰 메뉴에 우커머스 로그인 및 회워가입 메뉴를 추가하는 방법에 대해서 살펴보았습니다. 이번에는 비슷한 주제이기는 하지만 워드프레스 로그인/로그아웃 링크를 메뉴에 추가하는 다양한 방ㅂ버에 대해서 살펴보겠습니다.

플러그인 없이 메뉴에 워드프레스 로그인 로그아웃 링크 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

플러그인 없이 메뉴에 워드프레스 로그인 로그아웃 링크 추가하기

이전 포스팅에서 우커머스 내 계정 로그인 및 회원 가입을 메뉴에 추가하는 방법에 대해서 알아봤습니다.

우커머스 내 계정 로그인 및 회원 가입 기능을 이용하는 것도 좋은 선택이지만 워드프레스 본연의 로그인과 회원가입 폼을 이용하는 것도 굉장한 의미가 잇을 것으로 판단합니다.

따라 오늘은 플러그인없이 메뉴에 워드프레스 본연의 로그인 및 로그아웃 잉크 추가 방법에 대해서 살펴보도록 하겠습니다.

우커머스 로그인과 로그아웃 링크는 내 계정 정보를 활용한다는 점에서 효율적이지만 우커머스보다는 워드프레스 중심으로 사이트를 운영하는 경우는 아무래도 워드프레스 로그인과 로그아웃이 더 유용하다고 할 수 있습니다.

1. 워드프레스 로그인 링크 추가하기

워드프레스 로그인 링크를 추가하는 것은 이전에 설명한 우커머스 내 계정 로그인 및 회원 가입 링크를 메뉴에 추가하는 방법과 유사합니다.

• 로그인 전에는 계정이 있는 경우 로그인, 계정이 없는 경우는 회원가입으로 들어갈 수 있도록 Loh In과 Sign Up의 두개 메뉴가 나타납니다.
• 로그인 후에는 로그아웃 메뉴만 나타납니다.

이렇게 메뉴에 우커머스 내 계정 로그인/로그아웃 링크를 추가하는 방법은 아래 코드를 function.php 파일에 추가하는 것입니다. 물로 child theme의 function.php에 추가하는 것이 좋겠죠.

add_filter( 'wp_nav_menu_items', 'add_login_logout_register_menu', 20, 2 );
function add_login_logout_register_menu( $items, $args ) {
      if ( $args->theme_location != 'primary' ) {
            return $items;
      }

      if ( is_user_logged_in() ) {
            $items .= '<li><a href="' . wp_logout_url() . '">' . __( 'Log Out' ) . '</a></li>';
      } else {
            $items .= '<li><a href="' . wp_login_url() . '">' . __( 'Login In' ) . '</a></li>';
            $items .= '<li><a href="' . wp_registration_url() . '">' . __( 'Register/Sign Up' ) . '</a></li>';
      }

      return $items;
}Code language: PHP (php)

자기 테마 메뉴의 위치 슬러그 찾아 변경하기

여기서도 마찬가지로 메뉴의 위치 슬러그 찾아 변경해야하는데요.

위 코드 중에서 theme_location == ‘primary’)의 ‘primary’가 메뉴의 위치 슬러그를 지칭하고 있습니다. 따라 본인이 사용하는 테마의 메뉴 세팅 부분에서 사용하는 메뉴의 위치 슬러그를 찾아 변경해 주어야 합니다.

이는 메뉴 설정화면에서 크롬의 개발자도구 – 요소 찾기나 파이어폭스의 개발자도구 – 요소 찾기에서 menu-locations 다음에 나오는 위치 슬러그를 찾아 볼 수 있습니다.

아래 이미지는 파이어폭스의 개발자도구 – 검사기에서 메뉴 중 Main을 찍었을 시 검사기에서 나타난 상태인데요. 흐릿한 파란색으로 칠해진 부분을 살펴보면 menu-locations[main menu]를 찾을 수 있죠. 바로 main_menu가 우리가 찾고자하는 메뉴의 위치 슬러그입니다.

최종적으로는 아래와 같은 코드로 변경됩니다.

add_filter( 'wp_nav_menu_items', 'add_login_logout_register_menu', 20, 2 );
function add_login_logout_register_menu( $items, $args ) {
      if ( $args->theme_location != 'main_menu' ) {
            return $items;
      }

      if ( is_user_logged_in() ) {
            $items .= '<li><a href="' . wp_logout_url() . '">' . __( 'Log Out' ) . '</a></li>';
      } else {
            $items .= '<li><a href="' . wp_login_url() . '">' . __( 'Login In' ) . '</a></li>';
            $items .= '<li><a href="' . wp_registration_url() . '">' . __( 'Register/Sign Up' ) . '</a></li>';
      }

      return $items;
}Code language: PHP (php)

2. 보다 근원적인 해결 방안 – 메뉴 로그인 링크

위에서 제시한 방법은 특정메뉴별로 위치 슬러그를 찾아서 기능 정의를 해주어야 합니다.

메뉴를 하나로 통일해서 사용한다면 별 문제가 없겠지만 여러 메뉴에 이러한 로그인 링크를 적용하고 싶다면 메뉴 설정에서 직접 추가가 가능한 방식이 좋을 것입니다.

제가사용 테마의 경우도 일반 PC 접속 상태에서는 정상적으로 로그인 로그아웃 그리고 회원가입이 나타나지만 폭이 좁아져 테블릿이나 모바일 모드가되면 기능이 사라지더군요.

그렇기때문에 보다 근원적으로 메뉴 설정에서 세팅 가능하도록 만들어주는 것이 필요한데요.

아래에서 제시하는 코드는 메우 길지는 하지만 메뉴 설정에서 링크를 추가할 수 있도록 해줍니다.

function.php 파일에 아래 코드를 추가하고 메뉴 세팅에서 링크를 연결해 주면 됩니다. 그러면 아래와 같이 메뉴 설정에서 메뉴에 추가할 수 있는 상태가 됩니다.

이 방법은 “WordPress Login, Logout Menu Link Without a Plugin”이라는 글에서 소개한 방식입니다.

/********************* START OF THE MENU SNIPPET **********************/

/* To add a metabox in admin menu page */
add_action( 'admin_head-nav-menus.php', 'd2l_add_custommenu_metabox' );
function d2l_add_custommenu_metabox() {
      add_meta_box( 'add-d2l_custommenu', __( 'Register, Log In/Out Links' ), 'd2l_custommenu_metabox', 'nav-menus', 'side', 'default' );
}

/* The metabox code. */
function d2l_custommenu_metabox( $object ) {
      global $nav_menu_selected_id;

      $menukeywords = array(
            '#d2l_login#' => __( 'Log In' ),
            '#d2l_logout#' => __( 'Log Out' ),
            '#d2l_loginout#' => __( 'Log In/Out' ),
            '#d2l_register#' => __( 'Register/Sign Up' ),
            '#d2l_profile#' => __( 'Profile' )
      );

      class d2lCustomMenuItems {
            public $db_id = 0;
            public $object = 'd2l_custommenu';
            public $object_id;
            public $menu_item_parent = 0;
            public $type = 'custom';
            public $title;
            public $url;
            public $target = '';
            public $attr_title = '';
            public $classes = array();
            public $xfn = '';
      }

      $menukeywords_obj = array();
      foreach ( $menukeywords as $value => $title ) {
            $menukeywords_obj[ $title ]                 = new d2lCustomMenuItems();
            $menukeywords_obj[ $title ]->object_id        = esc_attr( $value );
            $menukeywords_obj[ $title ]->title            = esc_attr( $title );
            $menukeywords_obj[ $title ]->url            = esc_attr( $value );
      }
      $walker = new Walker_Nav_Menu_Checklist( array() );
      ?>
      <div id="d2l-custommenu" class="loginlinksdiv">
            <div id="tabs-panel-d2l-custommenu-all" class="tabs-panel tabs-panel-view-all tabs-panel-active">
                  <ul id="d2l-custommenuchecklist" class="list:d2l-custommenu categorychecklist form-no-clear">
                        <?php echo walk_nav_menu_tree( array_map( 'wp_setup_nav_menu_item', $menukeywords_obj ), 0, (object) array( 'walker' => $walker ) ); ?>
                  </ul>
            </div>

            <p class="button-controls">
                  <span class="list-controls">
                        <a href="<?php echo admin_url('/nav-menus.php?d2l_custommenu-tab=all&selectall=1#d2l-custommenu');?>" class="select-all aria-button-if-js" role="button">Select All</a>
                  </span>
                  <span class="add-to-menu">
                        <input type="submit"<?php disabled( $nav_menu_selected_id, 0 ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-d2l-custommenu-menu-item" id="submit-d2l-custommenu" />
                        <span class="spinner"></span>
                  </span>
            </p>
      </div>
      <?php
}

/* Replace the #keyword# by links */
add_filter( 'wp_setup_nav_menu_item', 'd2l_setup_nav_menu_item' );
function d2l_setup_nav_menu_item( $menu_item ) {
      global $currentpage;

      $menukeywords = array( '#d2l_login#', '#d2l_logout#', '#d2l_loginout#', '#d2l_register#', '#d2l_profile#' );

      if ( isset( $menu_item->object, $menu_item->url )
            && $currentpage != 'nav-menus.php'
            && !is_admin()
            && 'custom'== $menu_item->object
            && in_array( $menu_item->url, $menukeywords ) ) {

            $item_url = substr( $menu_item->url, 0, strpos( $menu_item->url, '#', 1 ) ) . '#';

            $item_redirect = str_replace( $item_url, '', $menu_item->url );

            if( $item_redirect == '%actualpage%') {
                  $item_redirect = $_SERVER['REQUEST_URI'];
            }

            switch ( $item_url ) {
                  case '#d2l_login#'    : $menu_item->url = wp_login_url( $item_redirect ); break;
                  case '#d2l_logout#'   : $menu_item->url = wp_logout_url( $item_redirect ); break;
                  case '#d2l_profile#'   :
                        if( is_user_logged_in() ) {
                              $current_user = wp_get_current_user();
                              $menu_item->title = 'Hi, ' . $current_user->display_name;
                              $menu_item->url = get_edit_user_link($current_user->ID);
                        }else{
                              $menu_item->title = '#d2l_profile#';
                        }
                  break;

                  case '#d2l_register#' :
                        if( is_user_logged_in() ) {
                              $menu_item->title = '#d2l_register#';
                        } else {
                              $menu_item->url = wp_registration_url();
                        }
                  break;

                  case '#d2l_loginout#' :
                        if( is_user_logged_in() ) {
                              $menu_item->title = 'Log Out';
                              $menu_item->url = wp_logout_url();
                        } else {
                              $menu_item->title = 'Log In';
                              $menu_item->url = wp_login_url();
                        }
                  break;
            }

            $menu_item->url = esc_url( $menu_item->url );
      }

      return $menu_item;
}


add_filter( 'wp_nav_menu_objects', 'd2l_nav_menu_objects' );
function d2l_nav_menu_objects( $sorted_menu_items ) {
      foreach ( $sorted_menu_items as $k => $item ) {
            if ( $item->title==$item->url && '#d2l_register#' == $item->title ) {
                  unset( $sorted_menu_items[ $k ] );
            }

            if ( $item->title==$item->url && '#d2l_profile#' == $item->title ) {
                  unset( $sorted_menu_items[ $k ] );
            }

      }
      return $sorted_menu_items;
}

/********************* END OF THE MENU SNIPPET **********************/Code language: PHP (php)