워드프레스 Onepress 테마에서 메뉴를 이쁘게 꾸미는 방법

워드프레스 Onepress 테마에서 메뉴를 추가하면, 화면 상단 오른쪽에 메뉴에 등록한 항목들이 밋밋한 형식으로 표시됩니다. 이 글에서는 CSS 코드를 활용하여 워드프레스 Onepress 테마에서 메뉴를 이쁘게 꾸미는 방법에 대해 알아보겠습니다.

워드프레스 Onepress 테마에서 메뉴를 이쁘게 꾸미는 방법

워드프레스 Onepress 테마에서 메뉴를 추가하면, 사용자 정의 링크, 페이지, 글, 카테고리, 태그를 화면 상단에 배치하여 방문자들이 원하는 콘텐츠에 쉽게 접근할 수 있도록 해줍니다. 하지만 기본으로 제공되는 메뉴 디자인이 그리 눈에 띄지 않습니다. 이 글에서는 메뉴에 파스텔 톤의 색상을 추가하여 보기 좋게 꾸미는 방법을 알아보겠습니다. 오늘 제가 알려드릴 내용은 아래 [A]와 같이 메뉴 형식을 [B]처럼 보이도록 수정하는 것입니다.

[A] 변경전

[B] 변경후

위의 [B]처럼 색상을 변경하기 위해서는 각 메뉴 항목의 ID 또는 Class를 알아내야 합니다.

먼저 여러분의 블로그로 접속한 후, 브라우저에서 F12 키를 눌러 ‘개발자 도구’를 열어줍니다. 개발자 도구에서 ‘요소 검사’ 아이콘을 클릭한 다음, 확인하고 싶은 메뉴를 마우스로 클릭하면 메뉴의 ID를 확인할 수 있습니다.

이와 같이 확인한 제 메뉴 항목의 ID는 다음과 같습니다.

IT SKILL : menu-item-2206
ESSENTIAL KNOWLEDGE : menu-item-2207
PASSIVE INCOME : menu-item-2208

각 메뉴 항목의 ID를 알아냈다면 CSS 코드를 사용하여 쉽게 원하는 효과를 적용할 수 있습니다.

아래 코드는 위의 [B]와 같이 메뉴의 색상을 변경하는 CSS 코드입니다. 메뉴 아이템 별로 색상을 다르게 적용하였고, 모바일의 경우 PC와 동일하게 적용할 경우 효과가 좋지 않아 리스트 형식으로 표시되도록 @media (max-width: 768px) 코드를 추가하였습니다.

/* IT Skill */
/* Default styles for PC */
#menu-item-2206 a { 
        color: #ffffff !important;
        background-image: linear-gradient(
        to bottom, 
        transparent, 
        transparent 30%, 
        rgba(9, 89, 162, 0.6) 50%, 
        transparent 70%, 
        transparent
    );
    border-radius: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}

@media (max-width: 768px) {
    #menu-item-2206 a {
        color: #0959a2 !important;
        background-image: none;
        background-color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        display: block;
    }
}

/* Essential Knowledge */
#menu-item-2207 a { 
        color: #ffffff !important; 
        background-image: linear-gradient(
        to bottom, 
        transparent, 
        transparent 30%, 
        rgba(72, 160, 33, 0.6) 50%, 
        transparent 70%, 
        transparent
    );
    border-radius: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}

@media (max-width: 768px) {
    #menu-item-2207 a {
        color: #48a021 !important;
        background-image: none;
        background-color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        display: block;
    }
}

/* Passive Income */
#menu-item-2208 a {
        color: #ffffff !important;
        background-image: linear-gradient(
        to bottom, 
        transparent, 
        transparent 30%, 
        rgba(204, 0, 0, 0.6) 50%, 
        transparent 70%, 
        transparent
    );
    border-radius: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}

@media (max-width: 768px) {
    #menu-item-2208 a {
        color: #cc0000 !important;
        background-image: none;
        background-color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        display: block;
    }
}

위의 코드에서 #menu-item-2206 , #menu-item-2207 , #menu-item-2208 과 각 메뉴 ID에 적용된 rgba(9, 89,162, 0.6) 50% 부분을 여러분의 메뉴 ID와 원하는 색상으로 변경하면 됩니다.

rgba 코드에서 앞의 3개 숫자는 색상을 나타내고, 네 번째 숫자는 투명도를 설정합니다. RGB 코드는 아래 사이트에서 쉽게 확인할 수 있습니다.

hex, rgb 코드 확인하기

color-hex.com 사이트에서 원하는 색상을 클릭하면 아래와 같이 RGB코드를 확인할 수 있습니다.

위의 코드에서 메뉴 아이템의 ID와 색상코드를 여러분의 메뉴 ID와 원하는 색상으로 수정하였다면, 다음으로 해당 코드를 CSS에 적용해 보도록 하겠습니다.

워드프레스 관리자 화면에서 ‘외관’ → ‘사용자 정의’ → ‘추가 CSS’로 이동한 다음, 아래와 같이 위의 코드를 복사하여 붙여넣기 한 후, ‘저장’을 클릭하면 적용됩니다.

아래 화면은 위의 CSS 코드를 적용한 결과입니다.

오늘은 워드프레스 Onepress 테마에서 메뉴를 이쁘게 꾸미는 방법에 대해 알아보았습니다. 저는 위에서 소개한 방법을 적용하여 메뉴의 색상을 변경하였다가, 몇 일 전 원래대로 되돌렸습니다. 블로그에 너무 많은 색상이 들어가면서 오히려 복잡해 보이는 것 같았기 때문입니다. 여러분 중에서 메뉴에 색상을 추가하고 싶지만 방법을 몰라 적용하지 못하고 계신 분이 계시다면, 이 글을 참고하여 적용해 보시기 바랍니다.