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

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

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

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

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

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

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

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

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

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

※이 글을 발행한 후에 워드프레스의 한글 UI 번역이 일부 변경되었습니다.

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

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

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

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

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

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

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

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

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

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

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

참고:


6개 댓글

  1. 안녕하세요!
    혹시 사용자 설정 링크에 하위메뉴를 넣었을 때 메뉴를 누르면 자동으로 첫번째 하위메뉴로 이동하게 할 수 있나요?
    물론 첫번째 하위메뉴의 도메인을 입력하면 되겠지만 그 외에 가능한 방법이 있는지 궁금합니다!

    1. 워드프레스에서는 그런 기능이 없지만, 꼭 원한다면 javascript 등으로 구현이 가능할 것입니다. 하지만 간단히 말씀하신 방법으로 하면 되는데, 굳이 다른 방법을 동원할 필요는 없을 것 같습니다.

  2. 많은 도움을 받고 있습니다. 감사합니다.
    여쭙고 싶은것은 oceanWP에서 메뉴 항목이 클릭되지 않도록 했는데 여전히 클릭이 되어 빈 페이지가 열립니다. 무엇이 문제일까요?

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

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

댓글 남기기

* 이메일 주소는 공개되지 않습니다.