[워드프레스] 내비게이션 메뉴에 '뒤로 가기' 항목 추가하기

워드프레스 내비게이션 메뉴에서 특정 메뉴 항목을 클릭했을 때 바로 직전의 경로로 이동하게 해야 하는 경우 여러 가지 방법을 생각해 볼 수 있습니다. 우선 가장 먼저 고려해볼 수 있는 것이 다음과 같이 해당 메뉴 내비게이션의 끝에 "뒤로 가기" 항목을 추가하는 것입니다.

add_filter( 'wp_nav_menu_items', 'wti_loginout_menu_link', 10, 2 );

function wti_loginout_menu_link( $items, $args ) {
if ($args->theme_location == 'main_navigation') {
$items .= '<li class="right"><a href="javascript:history.go(-1)">뒤로 가기</a></li>';
}
return $items;
}

theme_location은 해당 메뉴 위치로 수정하도록 합니다. 확인하는 방법은 테마의 함수 파일에서 function register_nav_menus() 또는 function register_nav_menu() 함수를 찾으면 테마에 등록된 메뉴의 이름을 확인할 수 있습니다.

위의 방법은 자바스크립트가 꺼져 있는 경우 안전하지 않을 수 있으므로 javascript 대신 다음과 같이 워드프레스에서 제공하는 wp_get_referer()를 사용할 수도 있습니다.

<a href="' . wp_get_referer() .'">뒤로 가기</a>

위의 방법은 직접 코드를 수정하는 경우에 유용하겠지만 특정 페이지 내에서 메뉴 항목을 제어하고자 하는 경우 다음과 같은 jQuery가 유용합니다.

$(document).ready(function(){
$('a.back').click(function(){
parent.history.back();
return false;
});
});

위의 jQuery 스크립트를 사용하여 깔끔하게 원하는 대로 처리할 수 있었습니다. 참고로 특정 URL로 이동시키고 싶은 경우에는:

jQuery('a.classname').click(function(){
window.location = 'http://www.example.com/contact'})

이와 같은 간단한 스크립트 코드를 사용하면 해당 클래스 항목을 클릭하면 특정 URL로 리디렉션시킬 수 있습니다. 예를 들어, 워드프레스 로고를 클릭했을 때 홈페이지가 아닌 다른 경로로 이동시키고 싶을 때 사용할 수 있습니다.  jQuery를 워드프레스에서 로드하는 방법은 이 글을 참고하시기 바랍니다.

참고:

• 워드프레스 로그인/로그아웃 후 특정 페이지로 이동하기