Extra로 제품 리뷰 사이트 구축 – 4부
게시 됨: 2017-09-17Extra를 사용하여 제품 리뷰 사이트를 개발하는 방법에 대한 이 4부 시리즈 중 4부에 오신 것을 환영합니다. 제품 리뷰 사이트 개발을 시작하는 방법에 대해 고민하고 있다면 이 시리즈가 적합합니다. 내장된 리뷰 기능과 스마트한 게시물 분류 기능을 갖춘 Extra는 멋진 리뷰, 제품 게시물 템플릿, 메가 메뉴 및 카테고리 레이아웃을 몇 분 안에 만들 수 있도록 특별히 준비되어 있습니다. 저와 함께 Extra의 힘을 살펴보세요.
1부에서는 테마 옵션 및 사용자 지정 설정을 지정합니다. 2부에서는 게시물을 추가하고 제품 리뷰를 표시하는 게시물 레이아웃을 만들었습니다. 이 시리즈의 3부에서는 제품 리뷰 사이트를 위한 두 개의 카테고리 레이아웃을 만들었습니다. 하나는 홈페이지용이고 다른 하나는 "모든 카테고리" 페이지용입니다.
오늘 우리는 기본 카테고리 레이아웃, 메뉴 및 바닥글을 구축하여 제품 리뷰 사이트를 마칠 것입니다. 오늘 게시물의 하이라이트는 해당 카테고리 페이지의 색상과 일치하는 메뉴 링크가 있는 사용자 정의 메뉴입니다. 또한 Extra에 내장된 메가 메뉴 옵션을 배포하고 몇 가지 사용자 정의를 추가하는 방법도 보여 드리겠습니다.
다음은 우리가 구축할 것의 미리보기입니다.
시작하자.
Extra로 제품 리뷰 사이트 구축 – 4부
YouTube 채널 구독
기본 범주 페이지 작성
Extra는 기본 카테고리 페이지가 이미 설치된 상태로 제공됩니다. 기본 카테고리 페이지는 특정 카테고리 레이아웃이 선택되지 않은 카테고리 페이지를 볼 때 사용되는 레이아웃입니다. 이 시리즈의 3부에서는 홈페이지의 카테고리 레이아웃을 지정하고 "모든 카테고리" 페이지를 특정 카테고리인 "모든 카테고리"에 할당했습니다. 나머지 제품 리뷰 카테고리 페이지에서는 이 기본 카테고리 레이아웃을 사용합니다.
기본 카테고리 레이아웃을 사용자 지정하려면 wordpress 대시보드로 이동하여 Extra > Category Builder로 이동합니다. 그런 다음 "기본 범주" 위로 마우스를 가져간 다음 편집 링크를 클릭합니다.
기본적으로 기본 범주에는 표준 섹션의 한 열 행 내에서 서로의 위에 쌓인 두 개의 모듈이 있습니다. 레이아웃을 변경하기 전에 "이 레이아웃을 기본 레이아웃으로 사용하시겠습니까?" 옵션을 선택했는지 확인하십시오. 오른쪽 사이드바의 레이아웃 사용 상자에서
먼저 상단 추천 게시물 슬라이더를 게시물 회전식 모듈로 교체합니다. 그런 다음 이 모듈의 범주로 "현재 범주/태그/분류"를 선택하여 모듈 설정을 업데이트합니다. 이제 이 게시물 캐러셀 모듈은 방문 중인 카테고리 페이지의 제품만 표시합니다. 꽤 똑똑하죠?
저장 및 종료
Blog Feed Masonry Module을 기본 설정으로 둘 수 있습니다. 나중에 이 페이지에 추가하는 카테고리 모듈에 "현재 카테고리/태그/분류" 카테고리가 할당되어 있는지 확인하십시오.
이제 카테고리 페이지 h1 제목의 스타일을 지정하려면 테마 사용자 정의 프로그램의 추가 CSS에 다음 사용자 정의 CSS를 추가해야 합니다. 최소 너비가 980px인 미디어 쿼리 안에 넣어야 합니다.
.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}
이것이 기본 카테고리 레이아웃에 대한 것입니다. 내 주방 카테고리 페이지에서 기본 레이아웃이 어떻게 보이는지 확인해 보겠습니다.
이제 기본 카테고리 레이아웃이 준비되었으므로 웹 사이트의 가장 중요한 부분 중 하나인 탐색 메뉴를 살펴보겠습니다.
우리는 이미 이 시리즈의 1부에서 기본 헤더 스타일을 설정했습니다. 그러나 오늘 우리는 기본 탐색 메뉴를 만들고 스타일을 지정할 것입니다.
귀하의 워드 프레스 대시 보드에서 외관에 탐색> 메뉴는 메뉴를 선택합니다. 페이지 상단의 "새 메뉴 만들기" 링크를 선택하고 메뉴 이름으로 "카테고리 메뉴"라는 이름을 입력합니다. 그런 다음 메뉴 설정 섹션에서 표시 위치로 "기본 메뉴"를 선택합니다. 
이제 메뉴 항목을 메뉴에 추가할 수 있습니다. 페이지 왼쪽에 있는 카테고리 토글을 클릭합니다. 표시되는 옵션에서 "모두 보기"를 선택하여 사용 가능한 모든 범주를 볼 수 있는지 확인합니다. 생성한 5개 카테고리(분류되지 않음)를 모두 선택하고 메뉴에 추가 버튼을 클릭하여 페이지 오른쪽의 메뉴 구조 섹션에 추가합니다. 이제 각 메뉴 항목을 클릭하고 끌어 다음 순서로 표시할 수 있습니다.
- 전자
- 의류
- 부엌
- 건강과 운동
- 모든 카테고리
메뉴 항목을 편집하기 전에 페이지 상단의 화면 옵션 링크를 선택하십시오. 열리는 고급 메뉴 속성 섹션에서 "CSS 클래스" 옆의 확인란을 선택해야 합니다. 이렇게 하면 각 메뉴 항목에 사용자 정의 CSS 클래스를 추가할 수 있습니다.
메뉴로 돌아갑니다. 전자 제품 카테고리 메뉴 항목부터 클릭하여 구성 옵션을 엽니다. CSS 클래스 상자에서 "green"이라는 클래스를 추가합니다. 그리고 Extra Mega 메뉴 옵션에 대해 "Mega Menu 3 Featured"를 선택하십시오.
이것은 두 가지를 성취할 것입니다. 먼저 "녹색" 클래스를 사용하여 마우스 오버 시 메뉴 항목을 녹색으로 바꿉니다. 둘째, 메가 메뉴 3 추천 옵션은 메뉴 항목 위로 마우스를 가져갈 때 3개의 추천 항목을 메가 메뉴로 추가합니다.
의류 카테고리 메뉴 항목의 경우 "파란색" 클래스를 추가하고 "메가 메뉴 3 추천" 옵션을 선택합니다.
주방 카테고리 메뉴 항목의 경우 "핑크" 클래스를 추가하고 "메가 메뉴 3 추천" 옵션을 선택합니다.
건강 및 피트니스 카테고리 메뉴 항목의 경우 "보라색" 클래스를 추가하고 "메가 메뉴 3 추천" 옵션을 선택합니다.
"모든 카테고리" 메뉴 항목은 약간 다를 것입니다. 계속해서 CSS 클래스 텍스트 상자를 비워 둡니다. 메가 메뉴 옵션의 경우 "메가 메뉴 목록"을 선택합니다. 이 유형의 메가 메뉴는 하위 메뉴 항목 목록을 생성하는 보다 전통적인 메가 메뉴입니다. 이 메가 메뉴 링크의 목표는 모든 카테고리를 아래에 제품 목록과 함께 표시하는 것입니다.
돌아가서 카테고리 상자를 열고 동일한 4가지 카테고리(전자제품, 의류, 주방, 건강 및 피트니스)를 선택하고 메뉴에 추가합니다. 그런 다음 방금 추가한 각 범주를 "모든 범주" 메가 메뉴 항목 아래에 한 단계 끌어 놓습니다.
각 카테고리 메뉴 항목에 대한 구성 옵션을 전환하고 이전에 했던 것처럼 동일한 CSS 클래스를 각각에 추가합니다. 추가해야 하는 클래스가 있는 카테고리는 다음과 같습니다.
전자 제품 – 녹색
의류 - 파란색
주방 – 핑크
건강 및 피트니스 – 보라색
다음으로 메가 메뉴의 각 카테고리에 대한 추천 카테고리 이미지로 사용할 사용자 지정 이미지를 추가합니다.
사진 편집기를 사용하여 너비 500px, 높이 300px이 되도록 각 이미지를 축소하고 자릅니다.
WordPress 미디어 라이브러리에 추가/드래그합니다.
이제 WordPress Admin의 메뉴 페이지로 돌아갑니다.
이 예에서 메가 메뉴의 최상위 카테고리 링크는 "전자 제품"입니다. "전자제품" 항목의 오른쪽에 있는 화살표를 클릭합니다. 탐색 레이블 상자에서 "Electronics" 텍스트 바로 앞에 html img 태그를 사용하여 원하는 이미지를 추가합니다. 이미지 태그는 다음과 같아야 합니다.
<img src="Insert Image Url" width="100%" />
이미지의 URL을 찾으려면 미디어 → 라이브러리로 이동합니다. 추가하려는 이미지를 클릭합니다. 첨부 파일 세부 정보 팝업 화면에서 오른쪽 섹션의 URL을 찾아 강조 표시한 다음 ctrl+c를 사용하여 클립보드에 복사합니다.
이제 메뉴 페이지의 "Electronics" 메뉴 항목 구성으로 돌아가서 ctrl+v를 사용하여 이미지의 URL을 붙여넣어 "Insert Image URL" 텍스트를 바꿉니다.
다음 3개의 카테고리 메뉴 항목에 대해 동일한 과정을 반복합니다.
각 카테고리 메뉴 항목에 4개의 이미지 태그를 모두 추가했으면 각 카테고리 아래에 단일 게시물 메뉴 항목(제품 리뷰에 대한 링크)을 추가할 차례입니다.
클릭하여 왼쪽에 있는 게시물 상자를 열고 "모두 보기" 탭을 선택합니다. 그런 다음 12개의 제품을 모두 선택하고 메뉴에 추가를 클릭합니다. 그런 다음 각 게시물 메뉴 항목을 각 범주 아래로 한 수준 끌어 놓습니다.
메뉴 저장
새 메뉴를 확인하기 전에 메뉴에 최종 수정을 가하기 위해 몇 가지 사용자 정의 CSS를 추가해야 합니다.
테마 사용자 정의 > 추가 CSS로 이동하여 다음 CSS를 입력하십시오.
/****************************
style menu
*****************************/
#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}
li.green a:before {
background-color: #5bd999 !important;
}
#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}
li.pink a:before {
background-color: #e6567a !important;
}
#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}
li.blue a:before {
background-color: #00c0e4 !important;
}
#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}
li.purple a:before {
background-color: #7658f8 !important;
}
/***************************
increase height of line under nav links on hover
****************************/
#et-navigation&amp;amp;gt;ul&amp;amp;gt;li&amp;amp;gt;a:before {
height: 8px;
}
설정을 저장하고 게시합니다.
이제 신메뉴를 확인해볼까요? 메뉴 항목 위로 마우스를 가져갈 때 메뉴 항목의 색상을 확인합니다. 색상은 해당 카테고리 색상과 일치합니다.
바닥글 작성
제품 리뷰 사이트의 바닥글을 작성하기 위해 Extra의 내장 위젯을 활용하여 최신 제품 리뷰와 카테고리 목록을 표시할 것입니다.
먼저 테마 사용자 정의 > 바닥글 설정으로 이동해야 합니다. 그런 다음 레이아웃을 클릭하고 2열 레이아웃을 선택합니다.
돌아가서 Typography를 선택하고 다음을 업데이트하십시오.
제목 텍스트 크기: 32
본문/링크 텍스트 크기: 16
위젯 텍스트 색상: rgba(255,255,255,0.6)
위젯 링크 색상: #ffffff
위젯 제목 색상: #ffffff
저장 및 게시
Theme Customizer의 기본 메뉴로 돌아가서 위젯을 선택합니다. 그런 다음 바닥글 사이드바 왼쪽을 선택하고 버튼을 클릭하여 위젯을 추가합니다. 추가 – 최근 리뷰 위젯 선택
위젯 메뉴로 돌아가서 바닥글 사이드바 오른쪽을 선택하고 카테고리 위젯을 추가합니다.
추가 CSS 섹션으로 이동하여 바닥글에 다음 사용자 정의 CSS를 추가하십시오.
/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}
Theme Customizer 설정을 저장 및 게시하고 바닥글을 확인하세요.
그게 다야 파트 4를 성공적으로 완료하고 Extra를 사용하여 제품 리뷰 사이트 구축에 대한 시리즈를 완료했습니다.
최종 CSS
시리즈에서 입력한 위치에 따라 사용자 정의 CSS를 확인하여 모든 항목이 올바르게 입력되었는지 확인해야 할 수도 있습니다. 다음은 Theme Customizer에 입력할 최종 CSS 코드입니다.
.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}
/****************************
style menu
*****************************/
#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}
li.green a:before {
background-color: #5bd999 !important;
}
#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}
li.pink a:before {
background-color: #e6567a !important;
}
#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}
li.blue a:before {
background-color: #00c0e4 !important;
}
#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}
li.purple a:before {
background-color: #7658f8 !important;
}
/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}
/****************************
comment box background
*****************************/
#comment-wrap {
padding: 75px 40px;
background: #fff;
border-radius: 3px;
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}
/***************************
Post Header Size
****************************/
h1.entry-title {
font-size: 48px;
}
/***************************
Fancy Subtitle
****************************/
.subtitle {
margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
text-align: center;
padding-bottom: 0px;
}
.fancy span {
display: inline-block;
position: relative;
line-height: 1.3em;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 4px solid #333;
border-top: 4px solid #333;
top: 40%;
width: 100%;
max-width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}
.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}
.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title {
display: block;
font-size: 20px;
}
.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}
.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}
/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}
/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}
마무리
저와 함께 제품 리뷰 사이트를 구축할 때 Extra의 힘을 탐색하는 데 도움이 되었기를 바랍니다. 적어도 이 뛰어난 테마에 대한 새로운 감상과 이 테마로 더 많은 작업을 수행할 수 있는 약간의 영감을 가지고 떠날 것이라고 확신합니다. 내장된 리뷰 시스템, 스마트 카테고리 레이아웃 및 Divi Builder의 기능은 제품 리뷰 사이트에 매우 적합합니다.
내가 다루지 않은 한 가지 주제(향후 게시물을 위해 저장)는 Extra를 사용하여 제휴 링크를 처리하는 방법입니다. 결국, 대부분의 사람들에게 제품 리뷰 사이트의 최종 목표는 돈을 버는 것입니다. 아래의 의견에서 이 문제에 대한 귀하의 생각을 자유롭게 공유하십시오.
귀하의 의견을 기다리겠습니다.