WooCommerce Storefront 헤더 CSS 사용자 정의 가이드
게시 됨: 2020-10-10
Storefront WooCommerce 테마 헤더의 모양을 변경하려는 경우 이 간단한 자습서에서 몇 가지 CSS 트릭을 배울 수 있습니다.
WooCommerce Storefront는 무료로 제공되는 간단하고 강력한 테마입니다. 이 테마는 제품 프리젠테이션 및 사용자 액세스와 관련하여 상점에 대한 상당한 제어를 제공합니다. 무료이며 하위 테마를 통해 다양한 사용자 정의 옵션을 제공합니다.
Storefront 테마는 WordPress 사용자 정의 프로그램을 지원하며 이 섹션에서 헤더를 편집할 수 있습니다.
그러나 필터를 사용하여 상점 첫화면 헤더를 사용자 정의할 수 있습니다. 그러나 CSS를 사용하면 특정 섹션의 스타일을 변경하는 규칙을 추가하는 것이 더 쉽습니다. 이 튜토리얼에서는 코딩 기술이 필요합니다. 사용자 정의 프로그램을 통해 추가 CSS 섹션에 CSS 규칙을 추가합니다.
이 섹션을 사용하는 이점은 WordPress 사용자 지정 프로그램을 사용하여 실시간으로 편집할 수 있다는 것입니다. 변경 사항을 게시하기 전에 변경 사항을 볼 수 있습니다.
Storefront 테마를 사용자 정의할 때 활성 테마여야 한다는 점도 언급할 가치가 있습니다.
즉, 상점을 다음 단계로 끌어올리는 데 사용할 수 있는 몇 가지 헤더 CSS 팁을 살펴보겠습니다.
- 헤더 크기 사용자 정의
여기에서는 테마 사용자 정의 프로그램을 다시 사용하지만 '추가 CSS' 섹션에서 일부 CSS 코드를 작성합니다.
다음 코드를 추가합니다.
* 마스트헤드 */
#masthead.site-header {
높이: 155px!중요;
여백-하단:0px
}
/* 마스트헤드용 모바일 CSS */
@미디어 전용 화면 및 (최대 너비: 320px) {
#masthead.site-header {
높이: 80px!중요;
여백-바닥:0px;
}
}
/* 마스트헤드 메뉴 */
.storefront-primary-navigation a, .cart-contents a {
여백:0 0 0 0;
}
.메인 탐색 ul {
패딩:0 0 10px 4px!중요;
}
.main-내비게이션 리 {
높이:38px!중요;}
/* 마스트헤드 메뉴용 모바일 CSS */
@미디어 전용 화면 및 (최대 너비: 320px) {
.메인 탐색 ul {
배경:#D6DDE4!중요;
}
}
/* 헤더 영역 */
.사이트 헤더 {
패딩 탑:0.5em;
}
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
여백-하단: -45px;
} 결과는 다음과 같습니다. 
- 테마 헤더에서 검색 표시줄 제거
이 코드를 '추가 CSS' 섹션에 추가하세요.
.사이트 헤더 .widget_product_search {
디스플레이: 없음;
} 결과는 다음과 같습니다. 
- 헤더 메뉴 색상 변경
커스터마이저를 사용하면 원하는 색상으로 헤더를 커스터마이징할 수 있습니다. 사용자 정의로 이동한 다음 헤더로 이동하고 원하는 색상을 선택하여 이를 수행할 수 있습니다.
그러나 이 옵션은 검색 표시줄, 로그인 섹션 및 로고를 포함한 전체 헤더 영역에 색상을 지정합니다. 헤더 메뉴에 다른 배경을 가져오려면 추가 CSS 패널에 다음 코드 스니펫을 추가하십시오.
.storefront-primary-navigation,
.main-navigation ul.menu ul.sub-menu{
배경색: 녹색;
} 결과는 다음과 같습니다. 
4. 기본 탐색 모음 숨기기
상점 첫화면 테마는 기본적으로 모든 페이지를 메뉴로 표시합니다. 기본 탐색 모음을 숨기려면 메뉴를 삭제하는 것만으로는 충분하지 않습니다. 사용자 정의, 추가 CSS 섹션으로 이동하여 다음 행을 추가하십시오.
.storefront-primary-navigation {
디스플레이: 없음;
} 결과는 다음과 같습니다. 
5. 헤더에서 공백 제거
사용자 정의, 추가 CSS 섹션으로 이동하여 다음 행을 추가하십시오.
.사이트 브랜딩 {
여백-하단: 0px;
} 결과는 다음과 같습니다. 
6. 검색 창의 너비 늘리기
검색 창의 너비를 확장하려면 어떻게 하시겠습니까? 추가 CSS 섹션을 사용하여 다음 줄을 추가합니다.
.woocommerce-active .site-header .site-search {
너비: 44.739%;
}
#masthead .site-search .widget_product_search 입력[유형="검색"] {
너비: 700px !중요;
} 결과는 다음과 같습니다. 
7. 로고, 보조 탐색 및 검색 창의 크기를 변경하는 방법
한 번에 모두 변경하려면 추가 CSS 섹션에 다음 코드를 추가하세요.
@미디어 화면 및 (최소 너비: 768px) {
/* 로고 */
.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { 너비: 30% !중요; /* 원하는 경우 px 값을 사용하십시오. 350픽셀 */ }
/* 2차 탐색 */
.site-header .secondary-navigation { 너비: 40% !중요; /* 원하는 경우 px 값을 사용하십시오. 350픽셀 */ }
/* 검색 창 */
.site-header .site-search { 너비: 30% !중요; /* 원하는 경우 px 값을 사용하십시오. 350픽셀 */ } 결과는 다음과 같습니다. 
8. 헤더에서 카트 제거
이 예에서는 새 규칙을 추가하여 장바구니 아이콘을 제거하겠습니다. ' display: none; '. 추가 CSS 섹션에 다음 CSS 코드를 추가합니다.
.site-header-cart .cart-contents {
디스플레이: 없음;
} 결과는 다음과 같습니다. 
9. 헤더 숨기기
헤더를 숨기려면 추가 CSS 섹션에 다음 CSS 코드를 추가합니다.
.사이트 헤더 {
디스플레이: 없음;
} 결과는 다음과 같습니다. 
10. 상점 머리글의 메뉴 링크 크기 늘리기
메뉴는 많은 사용자의 선호에 따라 약간 더 작습니다. 그러나 상점 테마에서 메뉴 링크의 글꼴 크기를 업그레이드해야 합니다. 추가 CSS 섹션에 다음 코드를 추가합니다.
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
글꼴 크기: 28px;
}결과는 다음과 같습니다.
11. 상점 머리글의 장바구니 아이콘 크기 변경
추가 CSS 섹션에 다음 CSS 코드를 추가하면 됩니다.
.site-header-cart .cart-contents {
글꼴 크기:30px;
} 결과는 다음과 같습니다. 
12. Storefront 테마에서 사이트 헤더 제목의 크기 변경
추가 CSS 섹션에 다음 코드를 추가합니다.
.사이트 헤더 {
글꼴 크기: 20px;
} 결과는 다음과 같습니다. 
13. 모바일 메뉴 버튼 크기 변경
메뉴가 표시되는 방식은 메뉴를 반응형으로 만드는 과정의 일부라는 점에 유의하는 것이 중요합니다. 따라서 데스크톱 장치에서 기본 탐색 메뉴가 목록 형태인 경우 동일한 메뉴가 모바일 장치에서 햄버거 메뉴로 표시될 수 있습니다.
크기를 변경하려면 추가 CSS 섹션에 다음 CSS 코드를 추가하세요.
.button.menu-toggle {
글꼴 크기: 19px;
} 결과는 다음과 같습니다. 
결론
이 가이드에서는 헤더 스타일을 지정하는 데 사용할 수 있는 몇 가지 헤더 CSS 팁을 공유했습니다. 실시간으로 변경 사항을 미리 볼 수 있도록 추가 CSS 섹션에서 CSS 규칙을 추가하는 것이 좋습니다. 변경 사항을 미리 보면 사양에 맞게 규칙을 변경할 수 있습니다.
규칙을 추가하려면 Storefront 테마 사용자 정의 인터페이스의 " 추가 CSS " 섹션에 복사/붙여넣기하세요. 이것을하기 위해:
- WordPress 사이트에 로그인하고 관리자로 대시보드 에 액세스합니다.
- 대시보드 메뉴에서 모양 메뉴 > 사용자 정의 를 클릭합니다.
- 표시되는 왼쪽 사이드바에서 추가 CSS 로 이동합니다.
- CSS 규칙을 추가합니다.
- 변경 사항에 만족하면 게시를 클릭합니다.
그러나 여기에 공유된 CSS 팁은 Storefront 테마에서만 작동한다는 점에 유의해야 합니다.
유사한 기사
- WordPress에서 사용자 정의 위젯 영역을 단계별로 만드는 방법
- 스토어프론트 테마를 사용자 정의하는 방법 – 홈페이지 사용자 정의 [궁극 가이드]
- 상점 테마 헤더 배경 이미지를 추가하는 방법
- Storefront WooCommerce 테마에서 헤더를 편집하는 방법
- Divi 모바일 메뉴를 스크롤 가능한 빠른 수정 솔루션으로 만드는 방법
- WooCommerce Storefront 테마에서 장바구니 아이콘의 크기를 변경하는 방법
- 모바일 메뉴 버튼 스토어프론트 테마의 크기를 변경하는 방법
- 헤더의 WooCommerce Storefront 높이를 조정하는 방법
- 메인 메뉴 글꼴 크기 스토어프론트 테마를 변경하는 방법
- WooCommerce Storefront 바닥글 높이를 변경하는 방법
- 메뉴 색상 변경 방법 WooCommerce Storefront
- 스토어프론트 WooCommerce 테마를 사용자 정의하는 방법: 궁극적인 스토어프론트 테마 사용자 정의 가이드
- 사이트 제목 WooCommerce Storefront 테마의 크기를 변경하는 방법
- 헤더 WooCommerce Storefront 테마를 제거하는 방법