워드프레스에서 텍스트 메뉴 항목을 이미지로 바꾸기(CSS 사용)

이 글에서는 조금 재미있는(?) 주제를 다루어보려고 합니다. 텍스트로 된 메뉴 항목을 이미지로 바꾸는 방법을 CSS로 구현하는 방법을 살펴보겠습니다.

다음과 같은 사이드바 메뉴에서 "Sponsor" 항목을 이미지로 바꾸어보겠습니다.
Menu item in wordpress
이를 위해서는 먼저 해당 메뉴의 요소를 검사해야 합니다. 구글 크롬의 경우 마우스 오른쪽 버튼을 눌러 상황 메뉴에서 "요소 검사"를 선택하여 해당 항목의 요소를 확인할 수 있습니다.
element inspector in google
이 예제에서는 요소가 #menu-item-74이네요. 자 그럼, 다음과 비슷한 CSS 코드를 CSS 스타일시트에 추가합니다. (워드프레스에서 CSS 스타일시트에 코드를 추가하는 방법은 여기를 참조하시기 바랍니다.)

#menu-item-74 a {
display:block;
height:29px;
width:119px;
padding:0px;
margin-left:6px;
outline:none;
text-indent:-9999px;
background-image:url('http://www.abc.com/path_of_the image/icon1.jpg'); background-position:0 0;
}

위에서 높이, 너비, padding, margin, 그림 파일 경로는 적절히 수정하시기 바랍니다. 그럼, 어떻게 되었는지 볼까요?
Sample menu in wordpress
그림과 같이 텍스트가 위에 지정한 이미지로 바꾸었습니다. 그리고 마우스를 올리면 링크도 제대로 작동합니다.

마우스를 올리면 그림이 바뀌게 하는 것도 가능합니다. 아래와 같은 코드를 추가하면 됩니다.

#menu-item-74 a:hover {
background-image:url('http://www.abc.com/path_of_the image/icon2.jpg''); background-position:0 0;
}

이상으로 플러그인을 사용하지 않고 간단한 CSS를 사용하여 텍스트로 된 메뉴 항목을 그림으로 바꾸는 방법을 살펴보았습니다. 다음에는 CSS를 사용하여 메뉴 항목 앞에 아이콘을 추가하는 방법과 플러그인을 사용하여 아이콘을 추가하는 방법을 살펴보겠습니다.


6개 댓글

  1. 메뉴구성이 여러개일때는 어떻게 해야할까요?
    main menu -> ul id="menu-main-menu-1"
    sticky menu -> ul id="menu-abc_a"
    이런식으로 되어있고, 알려주신대로 avada custom css에 #li id입력해서 업로드했는데
    적용이 되긴하는데 스크롤을 내리면 다시 원래 텍스트메뉴로 나오더라구요...ㅜㅜ

      1. 답변 감사합니다^^ 제가 메뉴옵션을 여러가지 다 체크해놔서 안됐던 거였어요~ stiky menu뭐이런건 다 체크해제하고 main menu로만 체크하고
        avada - custom css에서 알려주신대로 css적용했더니 됐습니다! 감사합니다.

댓글 남기기

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