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

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

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를 워드프레스에서 로드하는 방법은 이 글을 참고하시기 바랍니다.

참고:


2 개 댓글

  1. 자주 방문해서 좋은 정보 얻어가고 있습니다. 감사합니다.
    질문드릴게 있는데요.
    DIVI 테마사용중이고 제 블로그에 글을 포스팅하고 있습니다.
    헌데 특정카테고리에서 페이징을 통해 목록을 보다가 글을 하나 보고 다시 뒤로가기해서 목록을 보면 항상 1페이지로 되돌아와 있게 됩니다.
    6페이지에서 해당 페이지의 글을 읽고 뒤로가기 하면 6페이지로 돌아가게 할 방법이 있을까요?
    extra 로 만든 사이트도 같은 문제가 있는것 같아요.

    제 블로그는 ironleg.iwinv.net 입니다.

    답글
    • 안녕하세요, 이태건님.

      이 문제를 Divi 테마 개발사인 Elegant Themes에 문의해보시겠어요? 채팅으로 지원을 받을 수 있습니다.
      지원을 요청하면 반나절 이내에 답변을 받을 수 있을 것입니다. (주말에는 시간이 더 걸릴 수도 있을 것 같습니다.)

      https://avada.tistory.com/1591

      답글

댓글 남기기