wp-login-logout-featured

워드프레스 사이드바에 로그인-로그아웃 메뉴 추가하기

일반적으로 워드프레스를 CMS나 개인 블로그로 사용한다면 굳이 로그인 버튼을 정면에 내세울 필요가 없겠지만, 가끔 워드프레스 사이트에 로그인/로그아웃 메뉴를 추가해야 할 경우가 있습니다. 특히 사이트에서 회원가입(registration)을 받는 경우라면 로그인/로그아웃 메뉴는 당연히 웹사이트 네비게이션 메뉴 어딘가에 들어가 있어야 합니다.

‘그 밖의 기능’ 위젯

이럴 때 워드프레스의 기본 위젯 중 하나인 ‘그 밖의 기능’ (영어로는 ‘Meta’) 위젯을 위젯 영역으로 가져다 놓으면 물론 간단하게 사이드바에 로그인/로그아웃/회원가입 메뉴를 붙여 넣을 수 있습니다만,

그 밖의 기능 위젯
그림. ‘그 밖의 기능’ 위젯

이럴 경우 문제는 ‘그 밖의 기능’에서 제공하는 로그인 기능과 관련 없는 다른 링크들까지 한번에 표시된다는 점입니다.

다른 방법은 없을까?

물론 워드프레스의 테마 파일 속에서 약간의 코딩을 통해 직접 메뉴를 만드는 방법도 있고 또는 이런 기능을 제공하는 플러그인들도 여럿 나와 있기 때문에 그 중 하나를 사용하면 간단히 해결할 수도 있습니다.

또는 워드프레스의 각종 멤버십 플러그인이나 사용자 관리 관련 플러그인들 속에는 로그인/로그아웃 메뉴 처리 부분이 들어 있는 경우도 많고, 더러는 테마 중에도 자체적으로 로그인/로그아웃 메뉴를 제공하는 테마들도 있습니다.

조금 더 복잡한(?) 복잡한 방법

코딩 없이, 그리고 플러그인도 사용하지 않고 워드프레스의 기본 기능만 가지고 처리할 경우에는 어떻게 하면 좋을까요? 바로 워드프레스의 “메뉴” 기능을 이용하는 것입니다. 워드프레스 관리자의 “외모 > 메뉴”에서 다음과 같이 새로운 메뉴를 하나 생성합니다. 이 때 메뉴 이름은 기억하기 쉽도록 아무거나 하나 정해 주면 됩니다.

새 메뉴 생성하기
그림. 새 메뉴 생성하기

그런 다음, 이 메뉴에 포함시킬 링크들을 “사용자 정의 링크”로 추가합니다.

로그인 메뉴 만들기
그림. 로그인 메뉴 만들기

참고로, 별다른 조작을 하지 않았을 때, 워드프레스에서 로그인 및 회원가입 관련 공식 URL은 다음과 같습니다. 따라서 사용자 정의 링크의 URL 부분에는 이 값들을 각각 입력해 주면 됩니다.

  • 로그인: /wp-login.php
  • 회원가입: /wp-login.php?action=register
  • 비밀번호 분실: /wp-login.php?action=lostpassword
  • 로그아웃: /wp-login.php?action=logout

다 만들었다면, 이제 “메뉴 저장”을 하고 밖으로 나옵니다. 이 때 “메뉴 설정”에서 “테마 위치”는 따로 선택하지 않아도 됩니다. 위젯 영역에서 직접 불러 사용할 것이기 때문입니다.

이제 방금 생성한 메뉴를 실제로 웹사이트 사이드바에 붙여 넣는 일만 남았습니다. 관리자 화면에서 “외모 > 위젯” 메뉴로 이동합니다. “사용할 수 있는 위젯”에서 “사용자 정의 메뉴” 위젯을 끌어다 로그인 메뉴를 표시할 위젯 영역 속에 놓습니다. 그런 다음 “메뉴 선택”에서 방금 전 만들어 두었던 “로그인 메뉴”를 선택합니다. 그리고 저장하면 끝입니다.

사용자 정의 메뉴 만들기
그림. 사용자 정의 메뉴 만들기

이제 웹사이트에서 보면 원하는 위치(여기서는 사이드바)에 방금 전 만든 로그인 메뉴가 들어가 있는 것을 확인할 수 있을 것입니다.

사이드바에 추가된 로그인 메뉴
그림. 사이드바에 추가된 로그인 메뉴

뭔가 조금 어색한가요? 그렇습니다. 함께 있을 수 없는 메뉴가 붙어 있군요. ‘로그인’과 ‘로그아웃’은 함께 있을 수 없죠. 로그인 전에는 로그아웃 메뉴가 필요 없고 또 이미 로그인된 사용자에게 로그인 메뉴는 불필요 합니다. 이럴 때는 사용자의 로그인 상태에 따라 메뉴가 보이고 안보이게 조정해 주면 좋을 것 같습니다. 워드프레스 플러그인 중 Nav Menu Roles 플러그인이나 If Menu 같은 플러그인이 바로 그 기능을 처리해 주는 플러그인입니다.

이 중 Nav Menu Roles 플러그인의 사용법을 자세하게 잘 소개한 글이 있어 여기서 별도의 설명은 생략합니다. 필요하신 분들은 참고하시면 좋을 듯 싶네요. 🙂

“워드프레스 사이드바에 로그인-로그아웃 메뉴 추가하기”에 대한 0개의 생각