워드프레스 내비게이션 메뉴의 특정 항목을 버튼 모양으로 표시되도록 바꿀 수 있습니다. 이 워드프레스 블로그에서는 "문의" 메뉴의 스타일을 버튼 모양으로 바꾸어 다른 메뉴 항목에 비해 돋보이도록 만들어 보았습니다.
테마에 관계 없이 모든 테마에서 특정 메뉴 항목의 스타일을 변경하는 방법과 GeneratePress 테마에서 고정 내비게이션(Sticky Navigation)을 사용하여 내비게이션 메뉴를 고정하는 경우 스크롤 시 스타일을 다르게 설정하는 방법에 대하여 살펴보겠습니다. 또한, 보너스로 티스토리에서 메뉴의 맨 끝 항목을 버튼 모양으로 변경하는 방법에 대해서도 추가했습니다.
다음 글에서 메뉴 항목에 아이콘을 표시하는 방법에 대하여 살펴볼 수 있습니다.
워드프레스 메뉴 항목을 버튼 모양으로 바꾸기
최종적으로 다음과 같이 특정 메뉴 항목의 스타일을 바꾸는 방법을 살펴보겠습니다.
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 테마 사이트를 참조하여 이 사이트에도 비슷한 방식으로 작동하도록 코드를 추가해보았습니다.😄
특정 메뉴 항목을 돋보이도록 하고 싶은 경우 해당 메뉴 항목을 다른 메뉴와 다른 모양이 되도록 스타일을 지정하는 것을 고려해볼 수 있을 것입니다.
네 워드님! 감사드립니다 😍😍 ㅎㅎ 덕분에 항상 잘 보고있습니다
모레 일요일에 코드를 테스트한 후에 공유하도록 하겠습니다. 즐거운 주말과 휴일 보내세요.
안녕하세요, 코드를 테스트하여 정리하여 이 블로그에 관련 글을 작성했으니 참고해보세요:
https://www.thewordcracker.com/intermediate/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%eb%8c%93%ea%b8%80%ec%97%90-%ed%8f%ac%ed%95%a8%eb%90%9c-%ec%9d%b4%eb%af%b8%ec%a7%80-url%ec%9d%84-%ec%9d%b4%eb%af%b8%ec%a7%80%eb%a1%9c-%eb%b3%80%ed%99%98/
이 블로그에도 해당 코드를 추가하여 당분간 테스트해볼 생각입니다.
예시 이미지 임베드:
https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYW4YK%2FbtsIEbYPS48%2Fueoi1zgy3d6EHAvd81KL90%2Fimg.webp
안녕하세요 오늘도 정보 잘 보고갑니다~ 다른 글을 보긴했는데 댓글이 너무 많아서 여기에 문의 드려서 죄송합니다!
혹시 댓글에 이미지 링크를 남기면 이미지로 변환하는거 어떻게하는지 아시나요? ㅠㅠ 플러그인보다는 php에 의존하고싶은데..
안녕하세요, 바람님. 댓글에 이미지 URL을 남기면 이미지가 표시되도록 구현하고 싶은 것으로 이해되네요. 테스트를 해보고 가능한 경우 코드를 공유해보겠습니다.
워드님 항상 감사합니다! 테스트까지 해보신다고하셔서 괜히 민폐끼치는게 아닌지 걱정이네요 ( _ _ )
이미지 URL이 입력될 때 댓글 내용에서 이미지 URL이 이미지로 표시되는 HTML 태그로 변환하는 코드를 만들었지만, 아직 테스트를 하지 못했습니다. (다른 방법으로 댓글이 로드될 때마다 이미지 URL을 이미지를 표시하는 HTML 태그로 변환하는 것도 생각할 수 있지만 이 경우 방문자들이 방문할 때마다 코드로 실행되어야 하므로 사이트 속도에 영향을 미칠 것 같습니다.)
시간 여유가 생기면 작성한 코드를 테스트해보고 결과를 공유하도록 노력하겠습니다.
시간내주셔서 감사합니다 ! 확실히 부하가 생길 수 있겠군요 ~! 괜히 저때문에 시간내셔서 테스트하시기보다는 블로그에 콘텐츠로 업로드할 가치와 의향이있다면 해보시는게 좋을 것 같네요 ㅠㅠ 감사합니다!
댓글을 달 때에만 코드가 로드되도록 하여 이미지 URL이 있으면 댓글 콘텐츠에 이미지를 표시하는 HTML 코드를 추가하면 사이트 속도나 부하에 큰 영향을 미치지는 않을 것입니다. (다른 방법으로 페이지가 로드될 때마다 이미지 URL을 체크하여 이미지를 표시하는 경우에는 사이트 성능에 영향을 줄 수도 있을 것입니다. 댓글 콘텐츠에 이미지를 표시하는 HTML 태그를 추가하는 방법으로 시도해보고 결과를 공유해드리겠습니다.)