워드프레스 사이드 메뉴 카테고리 css 스타일 정의하기

워드프레스 사이드 메뉴 카테고리 css 스타일 정의하기

워드프레스에서 사이드 메뉴의 카테고리에 CSS 스타일을 정의하는 방법은 다음과 같습니다:

1. 워드프레스 대시보드에 로그인합니다.
2. 왼쪽 메뉴에서 “모양” 또는 “테마”를 클릭합니다.
3. “스타일” 또는 “사용자 지정 CSS”와 같은 항목을 찾습니다. 이 항목은 사용하는 테마에 따라 다를 수 있습니다.
4. “사용자 지정 CSS”를 클릭하면 CSS 편집기가 열립니다.
5. CSS 편집기에서 원하는 스타일을 정의합니다. 예를 들어, 사이드 메뉴의 카테고리에 대한 스타일을 변경하려면 해당 CSS 선택자를 사용하여 스타일 규칙을 작성합니다. 예를 들어, 사이드 메뉴의 카테고리 링크에 대한 글꼴 크기를 변경하려면 다음과 같은 CSS 코드를 작성할 수 있습니다:.side-menu-category a { font-size: 14px; }

   여기서 “.side-menu-category”는 사이드 메뉴의 카테고리를 감싸는 요소의 클래스 이름이며, “a”는 링크 요소를 선택합니다. “font-size”는 글꼴 크기를 지정하는 속성이고, “14px”는 원하는 크기로 변경할 수 있습니다.

6. CSS 규칙을 작성한 후, 변경 사항을 저장합니다.
7. 변경 사항을 웹 사이트에 적용하기 위해 워드프레스 대시보드에서 사이트를 업데이트하거나 테마를 프리뷰하고 활성화합니다.

위의 단계를 따라가면 워드프레스 사이드 메뉴의 카테고리에 CSS 스타일을 정의할 수 있습니다. 원하는 스타일을 적용하여 사이드 메뉴를 더욱 멋지게 꾸밀 수 있습니다.

사이드 메뉴 CSS 스타일 예제

/*사이드메뉴폭넓이옵션*/
.sidebar_left .inner_sidebar {
    margin: 0px !important;
}
/*ul.nested_nav li {
    margin: 0px !important;
    padding: 0px !important;
}*/
ul.nested_nav li.page_item_has_children.current_page_ancestor.current_page_parent a {
    font-weight: 600;
}
/*ul.nested_nav li a {
    font-weight: 400 !important;
}
*/
ul.nested_nav li a {
    margin: 0px !important;    
}
.sidebar_left .widget_nav_menu ul:first-child > .current_page_item{
    top: 0px !important;
}
/*사이드메뉴공통옵션*/
ul.nested_nav li a{
    color:black !important;
    background: #e8e8e8;
    padding:0px 20px;
}
ul.nested_nav li a:hover {
    color: white !important;
    background: #adb2b5 !important;
}
/*하위메뉴사이드메뉴공통옵션*/
ul.nested_nav li.current_page_ancestor.current_page_parent a {
    color: black !important;
    font-weight: 600;
}
ul.nested_nav li.current_page_ancestor.current_page_parent ul.children li a {    
    font-weight: 400;
}
ul.nested_nav li.page_item.current_page_ancestor.current_page_parent ul.children li a{  
    background:white;
    text-decoration:none !important;

}
/*.main_color .widget_nav_menu ul:first-child>.current_page_item{
    background:none !important; 
}*/
.sidebar .widget_nav_menu ul:first-child>.current_page_item{
    box-shadow:none !important;
}
/*하위메뉴사이드메뉴활성화옵션*/
/*ul.nested_nav li ul.children li.page_item.current_page_item a,ul.nested_nav li.current_page_item a{
    color:white !important;
  background:blue !important;
    border-left: 2px solid red!important;   
}*/
.nested_nav li.page_item.current_page_item {
    border-left: 3px solid #fb4f05 !important;
}
ul.children li ul.children li.current_page_item a{
    padding-left: 46px !important;
}
ul.children li.current_page_item a {
    font-weight: 600 !important;
    border-left:3px solid #fb4f05 !important;
}
/*사이드하위메뉴패딩공통옵션*/
ul.children{
    padding:0px !important;
}
/*사이드메뉴패딩값공통옵션*/
ul.nested_nav li a{
    padding:10px 20px !important;
    text-align: left !important;
}
/*사이드하위메뉴before값*/
ul.children li:before{
    display:none;
}
/*사이드하위메뉴패딩옵션*/
ul.children li a{   
    padding: 5px 15px 5px 30px !important;
/*    border-left:2px solid #cccccc;*/
}
ul.children li ul.children li a {
    padding-left: 50px !important;
}
    li ul.children li a{    
    padding-left:30px !important;       
}
ul.nested_nav li {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    border-left: 3px solid #ffffff00;
}
ul.children li.page_item a, ul.children li.page_item .page_item_has_children.current_page_ancestor .current_page_parent a {
    background: #f1f1f1;
}
ul.children li a:before {
    content: "+";
    display: -webkit-inline-box;
    padding-right: 5px;
    margin-left: -10px;
}