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

0

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

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

Posted by Word Creater 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 파일을 비롯한 테마 파일을 직접 수정하는 경우, 추후에 테마가 업데이트되면 수정 사항이 모두 사라지게 됩니다.

참고:

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요