Kadence 테마로 디렉토리 웹사이트 만들기

Naveen Giri

3 years ago

Kadence 디렉토리 웹사이트를 구축하는 가장 좋은 방법은 무엇인가요?

Kadence 디렉토리 웹사이트를 구축하려면 Kadence Theme, Kadence Blocks, 그리고 최고의 Kadence 디렉토리 플러그인을 활용해야 합니다.

Kadence Theme은 디렉토리 웹사이트의 탄탄한 기반을 제공하는 다재다능하고 높은 수준의 커스터마이징이 가능한 WordPress 테마입니다.

Kadence Blocks는 Gutenberg 블록 라이브러리로, 맞춤형 레이아웃을 만들고 웹사이트에 다양한 기능을 추가할 수 있게 해줍니다.

마지막으로, GeoDirectory 플러그인은 Kadence 테마에 가장 적합한 디렉토리 플러그인으로, 비즈니스 리스팅, 사용자 리뷰, 고급 검색 기능 등 다양한 디렉토리 기능을 웹사이트에 추가할 수 있는 강력한 도구입니다.

이 도구들을 함께 활용하면 강력하고 풍부한 기능을 갖춘 디렉토리 웹사이트를 만들기 위한 완벽한 솔루션을 제공합니다.

무료 테마와 무료 플러그인만으로 만드는 Kadence 디렉토리 웹사이트

이 튜토리얼에서는 무료 Kadence Theme, Kadence Blocks 플러그인, 무료 GeoDirectory 플러그인 등 무료 WordPress 리소스를 활용하여 완성도 높은 디렉토리 웹사이트를 구축하는 과정을 안내해 드립니다.

이 디렉토리 웹사이트는 다음 기능을 제공합니다:

무제한 커스텀 필드를 포함한 무제한 리스팅.
근접 검색 기능.
사용자 리뷰.
사용자가 자신의 리스팅을 등록, 수정 및/또는 삭제할 수 있는 프론트엔드 제출 양식.

이미 호스팅 제공업체에 WordPress가 설치되어 있다고 가정합니다. 이 튜토리얼에서는 필라델피아 시를 위한 비즈니스 디렉토리를 만들어 보겠습니다.

이 튜토리얼에서 다룰 내용은 다음과 같습니다:

테마 및 플러그인 설치 및 구성
GeoDirectory 설치 마법사
Kadence 디렉토리 웹사이트 디자인하기
리스팅 및 검색 페이지 디자인
단일 리스팅 페이지 디자인
Kadence 디렉토리 웹사이트에 프리미엄 기능 추가하기
Kadence Blocks 디렉토리 웹사이트 템플릿

이 튜토리얼을 마치면 바로 운영할 수 있는 완전한 기능의 디렉토리 웹사이트를 완성하게 됩니다. 지금 바로 시작해 봅시다!

Kadence 테마 및 플러그인 설치 및 설정

1. Kadence 테마 설치

가장 먼저 테마를 설치하겠습니다. 이 튜토리얼에서는 Kadence 테마를 사용할 것입니다.

다음으로 이동하세요 외관 >> 테마

새로 추가를 선택하고, 설치, 및 활성화 Hello 테마를 선택하세요.

2. Kadence Blocks 플러그인 설치

이제 Kadence Block 플러그인을 설치해야 합니다.

다음으로 이동하세요 플러그인 >> 새로 추가.

Kadence를 검색한 후 설치하고 활성화하세요.

3. GeoDirectory 설치

마지막으로, 설치해야 합니다 GeoDirectory.

다음으로 이동하세요 플러그인 >> 새로 추가, GeoDirectory를 검색하세요. 플러그인을 설치하고 활성화하면 지금 단계에서의 플러그인 설치가 완료됩니다.

새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
키를 활성화합니다.
키를 발급받습니다.
결제 계정을 활성화합니다.
API 키를 제한합니다(내 웹사이트 URL에서만 사용할 수 있도록).

4. GeoDirectory 설치 마법사

GeoDirectory를 사용하려면 설치 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 샘플 목록을 가져와야 합니다.

지도 시스템 선택 (Google Maps 또는 OpenStreetMap)

마법사의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택할 수 있습니다. Google Maps와 Open Street Maps(API 키가 필요하지 않음)입니다.

이 튜토리얼에서는 Google Maps를 선택합니다.

키 생성 버튼을 클릭하고 이 단계를 따르세요 문서 의 단계를 따라 유효한 API 키를 생성하세요.

필수 단계는 다음과 같습니다:

네 번째 항목에 대해: 이는 필수 요건입니다. 하지만 임계값인 월 $200를 초과하는 경우에만 요금이 부과됩니다.

이 무료 크레딧은 99%의 디렉토리에 충분히 활용할 수 있습니다.

기본 도시 설정

그 다음, 기본 위치를 설정합니다. 이는 디렉토리가 생성되는 도시입니다. 기본 도시는 변경하지 않고 그대로 두겠습니다.

GeoDirectory는 Philadelphia를 기본 도시로 사용합니다.

필요한 위치를 자유롭게 사용할 수 있습니다.

두 개 이상의 도시에 목록을 추가해야 하는 경우 Location Manager 애드온이 필요합니다.

추가 기능 설정

이 단계에서는 UsersWP 플러그인을 설치합니다, 사용자 등록 플러그인 사용자가 귀하의 웹사이트에 회원가입하고 로그인할 수 있게 해줍니다.

이 플러그인은 사용자가 리스팅을 추가하고 수정할 수 있도록 하는 데 필요합니다. 또한 사용자가 자신의 리스팅, 리뷰 등을 확인할 수 있는 사용자 프로필을 생성합니다.

또한 설치할 플러그인은 Ninja Forms 입니다. 이를 통해 모든 리스팅에 리스팅 소유자에게 직접 이메일을 발송하는 문의 양식이 추가됩니다.

AyeCode Connect는 이 튜토리얼에서 필수 사항이 아닙니다. 주로 GeoDirectory 프리미엄 애드온을 추가하고 WordPress 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

설치 마법사를 완료하기 위한 마지막 단계는 더미 리스팅을 추가하는 것입니다. 이 과정에서 나중에 필요에 따라 수정할 수 있는 리스팅 카테고리도 함께 추가됩니다.

사이드바 위젯과 메뉴 항목은 지금 추가하지 않으며, 이는 나중에 진행할 예정입니다.

Kadence 디렉토리 웹사이트 디자인하기

테마와 플러그인을 설치하고 GeoDirectory의 초기 설정을 완료했으니, 이제 Kadence Suite 도구를 사용하여 디렉토리 웹사이트 디자인을 시작할 수 있습니다.

1. Kadence 디렉토리 홈 페이지 디자인

새 페이지를 만들거나 WordPress가 기본으로 생성하는 샘플 페이지(Sample Page)를 활용할 수 있습니다.

페이지(Pages)로 이동하여 샘플 페이지를 편집하고 이름을 Home으로 변경하거나, 이를 위한 새 페이지를 만드세요.

이제 화면 오른쪽 상단의 페이지 설정 아이콘을 클릭하세요.

다음 변경 사항을 적용하세요:

페이지 제목: 비활성화
페이지 레이아웃: 전체 너비
콘텐츠 스타일: 언박스드

나머지는 그대로 두세요. 다음으로, 외관 > 사용자 정의 > 홈페이지 설정 으로 이동하여 위 페이지를 홈으로 선택하세요.

게시물 페이지는 나중에 선택하겠습니다.

홈 페이지 콘텐츠를 만들기 전에 헤더 작업을 먼저 해야 합니다.

그 후에 홈 페이지 콘텐츠 디자인으로 돌아오겠습니다.

로고

우선, 웹사이트에 사용할 로고가 필요합니다.

로고의 첫 번째 버전을 제작하기 위해 디자이너에게 비용을 지불할 필요는 없습니다.

새 디렉토리를 시작할 때 저지를 수 있는 가장 큰 실수 중 하나는 제품 시장 적합성을 검증하기 전에 너무 많은 시간과 돈을 투자하는 것입니다.

Canva와 같은 앱을 사용하면 5분 만에 로고를 디자인할 수 있으며, 가격도 저렴하고 놀라울 정도로 퀄리티가 좋습니다.

MVP(최소 기능 제품)의 경우, Canva로 디자인한 로고로도 충분합니다.

선택할 수 있는 로고 템플릿이 여러 가지 있으며, 처음 만든 로고가 완벽하거나 독창적이지 않아도 괜찮습니다.

프로젝트가 성장하면 나중에 언제든지 개선하거나 완전히 새롭게 바꿀 수 있습니다.

평범한 로고가 프로젝트 실패의 주된 원인이 되는 경우는 없습니다.

로고 디자인을 완료한 후 외관 > 사용자 정의 > 헤더, 클릭 로고 > 로고 선택, PNG 파일을 업로드하세요. 크롭은 건너뛰고(또는 필요에 따라 이미지를 자르세요), Logo Layout에서 Logo 옵션을 선택한 후 게시를 클릭하세요.

로고를 만들고 추가한 후 외관 > 메뉴, 에서 메뉴를 만드세요.

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션, "Primary" 옵션을 체크할 수 있습니다.

원하신다면 같은 메뉴를 푸터에도 표시하거나, 푸터에 표시할 별도의 메뉴를 만들 수 있습니다.

이 예제에서는 헤더 탐색 메뉴만 사용합니다.

총 8개의 링크를 추가했습니다:

홈
소개
블로그
장소
장소 추가
프로필
로그인
로그아웃

로그인 링크(UsersWP 엔드포인트에서 제공)는 로그아웃된 사용자에게만 표시되며, 로그아웃 및 프로필 링크는 로그인된 사용자에게만 표시됩니다.

콘텐츠

이제 홈 페이지 디자인을 시작할 수 있습니다. 먼저, 헤더 아래에 히어로 이미지 를 추가해야 합니다.

이를 위해 페이지 > 홈으로 이동하여 편집을 클릭하세요.

샘플 페이지를 사용한 경우 텍스트를 삭제하세요. 새 페이지를 만든 경우 새 행 레이아웃 블록을 추가하세요.

블록을 선택하려면 '/ 입력' 안내가 표시된 곳에 /Row를 입력하고 Kadence Row Layout 블록을 선택하세요. 다음으로 단일 행(첫 번째 옵션)을 선택하세요.

콘텐츠 최대 너비 옵션에 800을 입력하세요.

다음으로 블록 상단 탭에서 스타일을 클릭하세요. 배경 이미지 옵션에서 이미지 선택을 클릭하세요.

히어로 섹션에는 Pexels.com 에서 제공하는 필라델피아의 무료 이미지를 사용할 것입니다. (감사합니다, @Kelly)

이미지를 업로드하고 배경 이미지 첨부 옵션에서 고정(Fixed)을 선택한 후 업데이트하세요.

현재는 이미지의 일부분만 보이지만, 다음 단계를 따라 하면 원하는 대로 표시됩니다.

이미지에 오버레이가 필요합니다. 그렇지 않으면 위에 올라가는 텍스트의 대비가 충분하지 않아 읽기 어려울 수 있습니다.

배경 오버레이 설정을 선택하고, 오버레이 불투명도를 45로, 오버레이 색상을 000000(검정)으로 설정하세요.

이제 고급 탭을 클릭하고 패딩을 추가해 보겠습니다. 정확히는 상단과 하단에 4em의 패딩입니다. 이를 위해 사용자 지정 크기 설정 아이콘을 클릭하고, 상단 및 하단 입력 필드에 각각 4를 입력한 다음 크기 단위로 EM을 선택하세요.

히어로 이미지를 더 어둡게 만들었으니 이제 텍스트를 추가할 수 있습니다.

이미지 중앙을 클릭하세요(더하기 버튼이 희미하게 보입니다). 그러면 새 블록을 선택할 수 있습니다. Section 블록을 추가하세요.

이미지 중앙을 다시 클릭하고 Text (Adv) 블록을 추가하세요.

텍스트 블록에 "My Philadelphia Directory"와 같은 내용을 추가하세요.

블록의 일반 섹션에서 HTML 태그로 H1을, 텍스트 정렬은 가운데로 선택하세요.

스타일 탭을 클릭하고 색상을 FFFFFF(흰색)로 선택하세요.

다음으로 글꼴 크기 섹션에서 사용자 지정 크기 설정 아이콘을 클릭하고 글꼴 크기를 40으로 설정하세요.

마지막으로, 고급 타이포그래피 설정 > 글꼴 굵기에서 Bold 700을 선택하세요.

이제 Kadence 디렉터리 웹사이트의 히어로 섹션에 검색 폼을 추가할 수 있습니다.

제목 섹션의 오른쪽 하단 모서리에 있는 + 버튼을 클릭하여 새 섹션을 추가합니다.

다른 Section 블록을 검색하여 선택하고, 새 섹션 가운데의 플러스 버튼을 클릭한 후 GD > Search 블록을 추가합니다.

이제 홈페이지의 히어로 섹션이 완성되었으며, 완성된 모습은 다음과 같습니다.

이제 홈페이지에 필요한 섹션을 몇 가지 더 추가할 차례입니다. 지금은 최근 목록 섹션을 추가하겠습니다.

히어로 섹션 아래에 Row Layout 블록을 플러스 아이콘을 클릭하여 추가하고, Section 블록을 그 안에 추가합니다.

이제 제목 블록을 추가하고 Typography를
크기: 크게
대소문자: Ab
텍스트: 최근 비즈니스 목록

최신 목록을 표시하려면 GD > Listings 블록을 아래에 추가하고 다음 설정을 적용하세요.
정렬 기준: 최신
레이아웃: 그리드 보기( 4열 )

이제 Row Layout 블록을 하나 추가하려면 더하기 아이콘을 클릭하고 Section 블록을 그 안에 추가합니다.
제목 블록의 타이포그래피 설정에서
크기: 크게
대소문자: Ab
텍스트: 내 도시에서 인기 있는 항목 둘러보기

이제 GD>Category 블록을 추가하여 모든 카테고리를 표시합니다.
스타일에서 다음 설정을 추가합니다
행 항목: 4
디자인 유형: 이미지 배경

이제 다음을 위한 섹션을 하나 더 추가하겠습니다 작동 방식. 하나를 추가해 봅시다 Row Layout 블록을 추가하려면 플러스 아이콘을 클릭하고 4열 레이아웃을 선택합니다.

이제 정보 박스 블록을 모든 컨테이너에 추가합니다.

콘텐츠에서 최대 너비: 테마의 최대 너비를 상속합니다.

이제 각 컨테이너의 아이콘을 설정하겠습니다. 아무 Info Box 블록 설정 스타일 > 미디어 설정을 클릭합니다
미디어 유형: 아이콘

이제 아이콘의 색상을 설정해 봅시다

아이콘 색상: #FFFFFF
아이콘 배경: #FF6616
미디어 패딩: 20px
아이콘 테두리 반경: 15px

이제 빈 항목을 하나 더 추가해 보겠습니다 Row Layout

그 안에 CTA를 추가할 것입니다.
제목을 추가하고 타이포그래피 설정에서
크기: 크게
대소문자: Ab

단일 버튼 블록을 추가한 다음 이 블록의 스타일 설정에서 다음을 설정합니다
색상: #FFFFF
배경색: #FF6A00
테두리 반경: 10px

이제 푸터를 설정하겠습니다.
외모 > 사용자 정의 > 푸터로 이동합니다

여기에 몇 가지 푸터 메뉴 위젯을 추가할 것이며, Kadence는 소셜 블록을 제공합니다. 푸터 섹션 상단에 추가할 수 있습니다.

소셜 위젯의 설정 아이콘을 클릭하면 소셜 옵션을 설정할 수 있는 설정 창이 열립니다.

축하합니다! 이제 홈페이지가 완성되었습니다.

Kadence 디렉토리 웹사이트 리스팅 및 검색 페이지 디자인

이제 모든 디렉토리에 필수적인 두 페이지를 디자인해야 합니다.

리스팅 페이지(일반 아카이브, 카테고리, 태그)와 검색 결과 페이지입니다.

GeoDirectory는 기본적으로 일반 레이아웃으로 이 페이지들을 생성합니다. 이 튜토리얼에서는 이 페이지들의 레이아웃을 조금 커스터마이징해 보겠습니다.

리스팅 페이지와 검색 페이지는 대부분 동일하므로, 한 번 만든 후 다른 페이지에 레이아웃을 복사하면 됩니다.

리스팅 페이지 레이아웃은 왼쪽에 목록, 오른쪽에 리스팅의 정확한 위치를 보여주는 고정 지도로 구성하기로 결정했습니다.

Airbnb 검색 페이지 레이아웃에서 영감을 받은 리스팅 및 검색 페이지

이 작업은 매우 간단합니다.

리스팅 페이지

GeoDirectory > 설정 > 일반 > 페이지 > GD Archive 페이지 템플릿 편집 클릭으로 이동하세요.

이 항목의 모든 콘텐츠를 삭제하세요. GD Archive 페이지 템플릿.

다음을 사용하여 행 레이아웃을 추가하세요

아래 이미지에서 표시된 점을 드래그하여 60 – 40 비율로 만드세요.

이제 왼쪽 섹션에 다음에 필요한 모든 블록을 추가합니다. GD Archive 페이지. 예를 들어 GD > Loop Action, GD > Loop, GD > Loop Pagination, 그리고 GD > Search

오른쪽 열에는 다음을 드래그합니다. GD > Map 블록.

다음에 대한 모든 설정을 기본값으로 유지합니다. GD > Map. 높이를 지정해 보겠습니다. 저는 높이를 다음과 같이 설정하기로 했습니다. 100vh.

맵 블록 상위 행 컨테이너에 CSS 클래스를 추가합니다. kt-inside-inner-col

그리고 테마 커스터마이저 외모 > 사용자 정의 > 추가 CSS에 다음 CSS를 추가합니다.

body.archive .kt-inside-inner-col {
    position: sticky;
    top: 0;
}

마지막으로, 오른쪽 상단의 Kadence 아이콘을 클릭하여 페이지를 전체 너비로 설정하고 페이지 레이아웃을 전체 너비로 지정합니다.

그리고 메인 행 레이아웃에 다음 스타일도 설정합니다.
최대 너비: 100%
열 간격: SW
행 거터: 없음

Geodirectory > 설정 > 일반 > 페이지 > GD Search 페이지 템플릿 편집 클릭으로 이동

이 항목의 모든 콘텐츠를 삭제하세요. GD Search 페이지 템플릿.

GD Archive 페이지의 모든 콘텐츠를 복사하여 GD Search 페이지에 붙여넣기 합니다.

이제 GD Search 및 Archive 페이지가 준비되었습니다.

이 템플릿을 손쉽게 만드는 또 다른 방법은 전체 너비 페이지 템플릿과 GD > Simple Archive 블록.

Kadence Directory Website 단일 리스팅 페이지 디자인

GD Detail 페이지를 편집하고 커스터마이즈하려면 Geodirectory > 설정(Settings) > 일반 > 페이지 > GD Detail 페이지 템플릿 편집 클릭.

이 템플릿에서는 Geodirectory가 생성한 기본 콘텐츠를 이미 확인할 수 있습니다.

이 기본 콘텐츠를 모두 제거하고 새로운 Row Layout (으)로: 콘텐츠 너비: 100%

클래스 추가 (single-header-image) 이 행 레이아웃에 추가합니다. 고급 > 추가 CSS 클래스

이제 두 개의 열로 구성된 Row Layout 컨테이너를 추가합니다.

왼쪽 컨테이너에는 GD > Post Badge 블록을 추가하여 일부 배지를 정의하고, 오른쪽 컨테이너에는 GD > Post Favorite 블록.

이 컨테이너의 상위 행 레이아웃 안에 사용자 정의 클래스(header-position-feature).

이 아래에 이미지 슬라이더를 추가할 것입니다. 이를 위해 GD > Post Image 블록.

다음 설정을 선택합니다.
출력 유형: 슬라이더
자동 시작: 활성화
애니메이션: 슬라이드

이제 두 개의 열로 구성된 Row Layout 컨테이너.

왼쪽 컨테이너 안에 GD 상세 페이지에 필요한 블록들을 추가할 것입니다. 여기에는 다음이 포함됩니다 GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

다음 설정으로

최대 너비: 1200px
열 간격: SW
행 거터: 없음

오른쪽 컨테이너에는 GD > Output Location 및 GD > Author Actions 블록.

아래 CSS를 사용하여 GD 상세 페이지 레이아웃에 추가적인 디자인을 적용합니다.

다음 CSS를 외모 > 사용자 정의 > 추가 CSS

.single-header-image {
    max-height: 400px !important;
    overflow: hidden;
}

.geodir-page-single .entry-header {
	display: none;
}
.geodir-page-single .content-area {
	margin: 0px;
}
.geodir-page-single .content-container {
	padding: 0px;
	max-width: 100%;
}
@media (min-width: 576px) {
.bsui .row.row-cols-md-0 .card .embed-responsive {
    max-width: 100% !important;
    display: inline-block;
}
}
.geodir-page-single .entry-content-wrap {
	padding: 0px !important;
}
.geodir-page-single .entry-content {
	margin-top: 0px;
}
.single-header-image {
	max-height: 400px !important;
	overflow: hidden;
}
.single-feature {
	padding: 10px !important;
}

.header-position-feature {
	position: absolute !important;
	width: 100%;
}

.kb-row-layout-id15_c06314-2b > .kt-row-column-wrap {
    z-index: 1;
    position: relative;
		padding:0px !important;
}

이제 GD 상세 페이지가 완성되었습니다.

Kadence 디렉토리 웹사이트에 프리미엄 기능 추가하기

원하신다면, 이제 디렉토리에 다음과 같은 프리미엄 기능을 추가할 수 있습니다:

유료 리스팅: GeoDirectory Listing Price Manager 애드온을 사용하면 리스팅 등록에 대한 가격을 설정할 수 있습니다. 각 가격 등급별로 다음과 같은 기능을 활성화/비활성화할 수 있습니다: 무료 리스팅의 사진 수 제한 및 유료 리스팅의 사진 수 확대 허용. 태그 및 카테고리 수 조정. 특정 커스텀 필드 활성화 또는 비활성화. 더 길거나 짧은 설명 제출.
Claim Listings: 이것은 디렉토리의 핵심 기능으로, 관리자가 데이터베이스를 생성하고 비즈니스 소유자를 초대하여 무료 리스팅을 관리할 수 있게 합니다. 리스팅 소유권을 이전하기 위해 유료 리스팅으로의 업그레이드를 요구하는 과정이 클레임 리스팅 절차에 포함될 수 있습니다.
광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화입니다. 트래픽이 많다면 광고 네트워크를 활용할 수 있습니다. 그렇지 않은 경우, 비즈니스가 웹사이트의 특정 영역에 배너를 추가하거나 리스팅이 광고 형태로(예: 유기적 검색 결과 상단에) 표시되도록 허용하는 방식으로 광고를 직접 판매할 수 있습니다.

이것은 세 가지 예시에 불과합니다. 하지만 디렉토리 웹사이트는 온라인으로 수익을 창출하는 다양한 방법을 제공합니다.

수공예 아이템의 글로벌 마켓플레이스를 만들거나, 이벤트 티켓 또는 할인 쿠폰을 판매할 수 있습니다.

이 가이드를 통해 손쉽게 제작 과정을 진행해 보세요: 디렉토리 웹사이트 제작을 위한 단계별 가이드.

가능성은 무한합니다.