워드프레스/티스토리 메뉴 항목을 버튼 모양으로 바꾸는 방법

워드프레스 내비게이션 메뉴의 특정 항목을 버튼 모양으로 표시되도록 바꿀 수 있습니다. 이 워드프레스 블로그에서는 "문의" 메뉴의 스타일을 버튼 모양으로 바꾸어 다른 메뉴 항목에 비해 돋보이도록 만들어 보았습니다.

테마에 관계 없이 모든 테마에서 특정 메뉴 항목의 스타일을 변경하는 방법과 GeneratePress 테마에서 고정 내비게이션(Sticky Navigation)을 사용하여 내비게이션 메뉴를 고정하는 경우 스크롤 시 스타일을 다르게 설정하는 방법에 대하여 살펴보겠습니다. 또한, 보너스로 티스토리에서 메뉴의 맨 끝 항목을 버튼 모양으로 변경하는 방법에 대해서도 추가했습니다.

다음 글에서 메뉴 항목에 아이콘을 표시하는 방법에 대하여 살펴볼 수 있습니다.

• 워드프레스 메뉴에 아이콘 추가하기(CSS 사용)

워드프레스 메뉴 항목을 버튼 모양으로 바꾸기

최종적으로 다음과 같이 특정 메뉴 항목의 스타일을 바꾸는 방법을 살펴보겠습니다.

1 디자인 » 메뉴에서 스타일을 다르게 지정할 메뉴 항목에 CSS 클래스를 지정합니다.

CSS 클래스 이름은 자유롭게 지정합니다. 여기에서는 jointoday_button으로 지정하겠습니다.

CSS 클래스 필드가 표시되지 않는 경우 "워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법"을 참고하시기 바랍니다.

2 워드프레스 관리자 페이지 » 디자인 (외모) » 사용자 정의하기 » 추가 CSS에 아래의 jsfiddle의 CSS 탭에 있는 코드를 추가합니다. ul 부분의 코드는 제외하고 jointoday_button 관련 코드만 입력하시기 바랍니다.

배경색, 글자 색상, 글자 크기, 허버 시 효과 등은 원하는 대로 바꾸시기 바랍니다. 이 코드는 GeneratePress 테마와 Divi 테마에서 잘 작동하는 것을 확인했지만, 테마에 따라 일부 스타일이 적용되지 않을 수도 있습니다. 그런 경우 기본적인 CSS를 이해하면 해결이 가능할 것입니다.

상기의 코드를 적용하면 지정한 메뉴 항목이 녹색 버튼으로 표시됩니다. 아래의 CSS 코드를 사용하면 보라색 버튼으로 표시됩니다.

.jointoday_button a {
	background: linear-gradient(135deg, #8A2BE2, #9370DB, #BA55D3) !important;
	padding: 12px 30px !important;
	font-size: 18px;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.3s ease, box-shadow 0.3s ease !important;
	border: none !important;
	box-shadow: 0 4px 6px rgba(138, 43, 226, 0.2);
	text-decoration: none;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2em !important;
	vertical-align: middle;
}

.jointoday_button a:hover, 
.jointoday_button a:focus {
	background: linear-gradient(135deg, #BA55D3, #9370DB, #8A2BE2) !important;
	box-shadow: 0 6px 12px rgba(138, 43, 226, 0.3);
}

데스크톱 기기에만 적용하기

모바일 기기에서는 메뉴 항목을 버튼으로 표시되지 않고 PC 해상도 기기에서만 적용되도록 하고 싶은 경우 CSS 미디어 쿼리를 사용하며 됩니다.

@media screen and (min-width: 1024px) {
// CSS 스타일
}

미디어 쿼리에 대한 자세한 내용은 모질라 문서의 "미디어 쿼리 초보자 안내서"를 참고해보시기 바랍니다.

GeneratePress 테마에서 스크롤 시 메뉴 항목의 스타일 변경하기

GeneratePress(제너레이트프레스) 테마의 유료 버전을 사용하는 경우 워드프레스 관리자 페이지 » 디자인 (외모) » Layout » Sticky Navigation에서 메뉴 내비게이션을 고정할 수 있습니다. 그러면 스크롤 시 메뉴가 상단에 고정됩니다.

Hide when scrolling down (아래로 스크롤 시 숨기기) 옵션을 활성화하면 아래로 스크롤하면 메뉴가 숨겨지고 위로 스크롤하면 메뉴가 상단에 고정되어 붙박이 내비게이션 메뉴로 표시됩니다. 예전에 Medium에서 이런 방식으로 작동했으며, 블로그에서 사용자들이 글 읽기에 집중할 수 있도록 하고 싶을 때 이 옵션을 활성화할 수 있습니다.

GeneratePress 테마에서 특정 메뉴 항목의 스타일을 버튼 모양으로 바꾸고, 스크롤 시 헤더가 고정될 때 해당 메뉴 항목의 스타일을 다르게 설정(예: 색상, 메뉴 크기 등 변경)하고 싶은 경우 아래의 jsfiddle에 제시된 CSS 코드를 응용할 수 있습니다.

Result 탭을 클릭하면 스크롤하기 전 메뉴 항목의 모양과 스크롤 시 메뉴가 상단에 고정될 때 해당 메뉴 항목의 모양을 확인할 수 있습니다.

마찬가지로 배경색, 텍스트 컬러, 글자 크기 등 세부적인 스타일을 조정하시기 바랍니다. 그리고 PC에만 적용하고 싶은 경우 CSS 미디어 쿼리를 사용할 수 있습니다(상기의 "데스크톱 기기에만 적용하기" 섹션 참조).

티스토리의 특정 메뉴 항목을 버튼 모양으로 표시하기

상기에서 다룬 내용을 티스토리에도 적용이 가능합니다. 티스토리의 경우 스킨에 따라 코드가 달라질 수 있습니다.

오디세이(Odyssey) 스킨을 사용하는 경우 다음 CSS 코드를 추가하면 내비게이션 메뉴의 맨 끝에 있는 항목의 스타일이 버튼 모양으로 바뀝니다.

@media screen and (min-width: 1061px) {
.t_menu_category.last {
	background: linear-gradient(135deg, #006400, #228B22, #32CD32) !important;
	padding: 12px 30px !important;
	font-size: 18px;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.3s ease, box-shadow 0.3s ease !important;
	border: none !important;
	box-shadow: 0 4px 6px rgba(0, 100, 0, 0.2);
	text-decoration: none;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2em !important;
	vertical-align: middle;
}

.t_menu_category.last:hover, 
.t_menu_category.last:focus {
	background: linear-gradient(135deg, #32CD32, #228B22, #006400) !important;
	box-shadow: 0 6px 12px rgba(0, 100, 0, 0.3);
}

.t_menu_category.last a {
    color: white !important;
}

.t_menu_category.last:hover > a:after { 
    background: transparent !important; 
    }

}

PC 해상도 기기에서만 적용됩니다. 실제 작동을 여기에서 확인할 수 있습니다.

마찬가지로 배경색, 글자색 등을 원하는 대로 수정할 수 있습니다. 챗GPT에 위의 코드를 넣고 원하는 색상을 알려주면 적절한 스타일을 제시할 것입니다.

마치며

이상으로 워드프레스에서 특정 메뉴 항목을 버튼 모양으로 표시하는 방법에 대하여 살펴보았습니다. Divi 테마로 유명한 Elegant Themes 사이트에서 Pricing 메뉴 항목을 버튼 모양으로 표시하고 있으며, 아래로 스크롤 시 메뉴가 상단에 고정되고 Pricing 메뉴 항목의 스타일도 바뀌게 됩니다.

Divi 테마 사이트를 참조하여 이 사이트에도 비슷한 방식으로 작동하도록 코드를 추가해보았습니다.😄

특정 메뉴 항목을 돋보이도록 하고 싶은 경우 해당 메뉴 항목을 다른 메뉴와 다른 모양이 되도록 스타일을 지정하는 것을 고려해볼 수 있을 것입니다.

참고

• GeneratePress 테마 포스트 내비게이션 순서 및 스타일 변경하기
• Divi 스타터 사이트: 사전 제작된 사이트 템플릿 (데모) 로드 방법
• 클라우드웨이즈 PHP 8.3 추가 (+ PHP 버전 변경 방법)