워드프레스 메뉴 항목이 클릭되지 않도록 설정하는 방법

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스에서 특정 메뉴 항목이 클릭되지 않도록 하고 싶은 경우가 있습니다. 예를 들어, 다음 영상과 같이 최상위 메뉴 항목인 '카테고리' 아래에 개별 카테고리가 하위 메뉴 항목으로 추가된 경우 최상위 메뉴 항목은 클릭되지 않도록 설정할 수 있습니다.

워드프레스에서 특정 메뉴 항목이 클릭되지 않도록 설정하려면 메뉴 항목을 '사용자 정의 링크'로 추가하고 'URL'에 '#'을 입력하면 됩니다. 그리고 간단한 CSS 코드를 사용하여 마우스 포인터 모양도 변경할 수 있습니다.

Posted by 현탁석 on Monday, December 9, 2019

이 글에서는 메뉴 항목이 클릭되지 않도록 설정하고 마우스 포인터 커서 모양을 바꾸는 방법을 살펴보겠습니다.

메뉴 항목이 클릭되지 않도록 만들기 (메뉴 항목 클릭 불가)

먼저 워드프레스 사이트에 관리자로 로그인한 후에 테마 디자인 > 메뉴로 이동하고 편집할 메뉴를 선택하도록 합니다.

워드프레스 테마 디자인 메뉴 페이지

그런 다음 메뉴 아이템 추가에서 '사용자 정의 링크'를 선택합니다.

워드프레스 메뉴 - 사용자 정의 링크 추가

사용자 정의 링크 항목의 URL 부분에 https:// 대신 #을 입력합니다. '링크 텍스트'에 적당한 메뉴 항목에 표시될 문구를 입력하고 '메뉴에 추가'를 누르도록 합니다. 그러면 이 메뉴 항목은 클릭이 되지 않습니다.

URL 필드는 비워둘 수 없으며, 파운드 기호를 사용하는 것이 표준 규약입니다.

메뉴 항목에 마우스를 올릴 때 마우스 포인터 커서 제거하기

위의 방법으로 메뉴 항목을 추가하면 메뉴 항목을 클릭할 수 없지만 마우스 "포인터" 커서가 표시되어 링크가 있는 메뉴 항목처럼 보일 수 있습니다. 해당 메뉴 항목은 클릭이 안 되는 항목임을 확실히 하기 위해 CSS를 사용하여 마우스 포인터 커서를 제거할 수 있습니다.

메뉴 페이지에서 오른쪽 상단의 '화면 옵션'을 클릭합니다.

워드프레스 메뉴 - CSS 클래스 필드 표시

고급 메뉴 속성 보기 아래의 CSS 클래스 옆의 체크박스를 선택합니다. 그러면 개별 메뉴 항목에 'CSS 클래스' 필드가 표시됩니다.

워드프레스 메뉴 항목 마우스 커서 변경하기

방금 추가한 메뉴 항목을 선택하고 CSS 클래스 필드에 적당한 클래스 이름(예: unclickable)을 입력합니다.

마지막으로 다음 CSS 코드를 테마의 스타일시트 파일에 추가합니다.

/* 메뉴 항목의 마우스 포인터 커서 모양 바꾸기 */
/* Remove the mouse pointer cursor on hover in WordPress */
.unclickable > a:hover {
  cursor: default;
}

이제 해당 메뉴 항목에 마우스를 올리면 손바닥 모양의 마우스 포인터 커서 대신 기본 마우스 커서가 표시됩니다.

※ 워드프레스에서 CSS 코드를 추가하는 방법은 "워드프레스에서 CSS 추가하기"를 참고해보세요. 참고로 테마 파일을 수정해야 하는 경우 차일드 테마를 만들어 작업하시기 바랍니다. 부모 테마 내의 CSS 파일을 비롯한 테마 파일을 직접 수정하는 경우, 추후에 테마가 업데이트되면 수정 사항이 모두 사라지게 됩니다.

참고:



2 개 댓글

  1. 혹시 메뉴클릭시 hover 효과를 유지하는 방법을 알수있을까요?
    랜딩페이지를 구성했는데 hover 효과가 유지되지 않습니다.

    특정 섹션과 메뉴 이동경로가 일치할때 hover 되도록 하고 싶습니다.

    응답
    • 안녕하세요, 오정민 님.

      아마 "Page scroll to id"라는 다음 플러그인이 원하는 대로 작동하지 않을까 생각되네요.

      https://wordpress.org/plugins/page-scroll-to-id/

      응답