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

Naveen Giri

3 years ago

WordPress용 Ollie 테마를 활용해 디렉토리 웹사이트를 구축하는 단계별 가이드입니다:

Ollie 테마 설치
GeoDirectory 설치 및 설정
OllieWP 테마와 Gutenberg를 사용하여 디렉토리 웹사이트 디자인 편집기

GeoDirectory는 Ollie와 같은 FSE 블록 테마와 완벽하게 호환되므로, 이 경우 페이지 빌더나 추가 블록 플러그인이 필요하지 않습니다.

GeoDirectory는 어떤 테마나 페이지 빌더를 사용해서도 역동적인 온라인 디렉토리를 손쉽게 구축할 수 있는 강력하고 유연한 솔루션을 제공합니다.

이 튜토리얼에서는 OllieWP 테마와 GeoDirectory 플러그인을 함께 사용하여 디렉토리 웹사이트를 구축하는 방법을 알아보겠습니다.

이 두 가지를 조합하면 위치 기반 기능을 원활하게 통합하고, 레이아웃 디자인을 맞춤 설정하며, 인터랙티브 콘텐츠 블록을 추가하여 직관적이고 매력적인 사용자 경험을 제공할 수 있습니다.

이 통합 접근 방식을 통해 웹 개발자와 디자이너는 특정 틈새 시장이나 폭넓은 커뮤니티 요구에 맞춘 전문가 수준의 디렉토리 사이트를 손쉽게 구현할 수 있습니다.

자세한 방법을 살펴보겠습니다.

이 튜토리얼에서는 다음을 다룹니다:

테마 및 플러그인 설치 및 설정
OllieWP 디렉토리 웹사이트 디자인

테마 및 플러그인 설치.

1. OllieWP 테마 설치

테마를 설치해야 합니다. 이 튜토리얼에서는 OllieWP 테마를 설치합니다.

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

새로 추가를 선택하고, 설치, 및 활성화 the OllieWP 테마를 설치합니다.

2. GeoDirectory 설치

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

다음으로 이동하세요 플러그인 >> 새로 추가, GeoDirectory를 검색하세요. 설치 후 활성화하면 플러그인 설치가 완료됩니다.

3. GeoDirectory 설치 마법사

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

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

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

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

Google Maps를 선택하려는 경우 다음 추가 단계를 따르세요.

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

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

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

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

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

기본 도시 설정

그 후, 기본 위치를 설정합니다. 이것은 디렉토리가 생성될 도시입니다.

기본 도시로 Philadelphia를 설정하겠습니다.

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

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

추가 기능 설정

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

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

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

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

더미 데이터 추가

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

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

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

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

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

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

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

다음으로 외관 > 편집기 > 페이지 > 홈 로 디렉토리 웹사이트 디자인을 시작하고 편집 버튼을 클릭합니다.

로고

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

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

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

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

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

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

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

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

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

상단의 메뉴를 클릭하고 기존 메뉴를 모두 제거합니다.

이제 두 열 레이아웃의 컬럼 블록을 추가해 보겠습니다.

왼쪽 열에 사이트 로고 블록을 추가합니다.

메인 헤더 컨테이너를 클릭한 후 블록 설정에서 배경: #FFFFF

오른쪽 열에 탐색 메뉴를 추가합니다.

다음과 같은 주요 탐색 링크와 몇 가지 하위 탐색 링크를 추가했습니다:

홈
소개
블로그
Places and add places
프로필
로그인/로그아웃

로그인/로그아웃 블록은 사용자의 로그인 상태에 따라 로그인 및 로그아웃 링크만 표시합니다.

콘텐츠

저는 OllieWP 및 Gutenberg 블록.

다음으로 이동하세요 외관 > 편집기 > 디자인 > 페이지 그리고 홈 페이지 편집 버튼을 클릭합니다.

홈페이지에 히어로 헤더가 필요합니다. 이를 위해 이 페이지의 모든 콘텐츠를 제거하고 커버 블록.

다음으로, 블록 설정을 확인하고 배경 이미지 URL을 설정합니다.

히어로 섹션에는 이미지가 필요하며, 다음에서 무료 이미지를 다운로드할 것입니다. Pexels.com (감사합니다, @rachel-claire).

이 커버 블록에 다음 설정을 추가합니다

콘텐츠: 1200
와이드: 100
불투명도: 50
패딩 및 마진: 0
커버의 최소 높이: 600

이제 이 커버 블록 안에 다음을 사용하여 헤더 태그를 추가해 보겠습니다
텍스트: 필라델피아 최고의 레스토랑 찾기

헤더 태그에 추가 클래스( heading-text-center )를 추가하여 스타일을 적용합니다.

이제 테마 커스터마이저에서 다음 스타일을 추가해 보겠습니다.

.heading-text-center{
    text-align:center;
}

이제 다음을 추가해 보겠습니다 GD > search 블록을 이 제목 아래에 추가합니다.

그 아래에 높이가 다음과 같은 스페이서 블록을 사용하여 공간을 추가해 보겠습니다: 60

이제 빈 열을 추가하고 GD > Categories 블록을 그 안에 넣겠습니다.

블록 옵션을 다음과 같이 설정하세요
디자인 유형: 이미지 배경
행 항목: 3
카테고리 이미지 사용 활성화

다음에서 카테고리를 편집하여 카테고리에 이미지를 설정할 수 있습니다 wp-admin -> places -> Place Categories.

각 카테고리에는 기본 이미지를 설정하는 옵션이 있습니다

히어로 섹션 아래에 하나 더 열 을 추가하려면 플러스 아이콘을 클릭하고 GD > Listings 블록을 추가하세요.

이제 이 항목에서 몇 가지 필요한 설정을 진행하겠습니다. GD > Listings 블록. 정렬 설정: 최신순으로 지정합니다.

이제 콘텐츠와 너비가 100인 빈 컬럼을 추가해 보겠습니다.

Add the GD > Map 블록을 추가하고 설정은 기본값으로 유지합니다.

푸터를 클릭하고 OllieWP 이미 몇 가지 미리 만들어진 푸터 템플릿을 제공합니다. 그 중 하나를 선택하겠습니다.

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

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

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

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

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

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

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

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

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

리스팅 페이지

외모 > 편집기 > 디자인 > 템플릿으로 이동하여 편집을 클릭합니다. GD Archive 페이지 템플릿

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

이제 빈 행을 추가해 보겠습니다.

이 안에 두 개의 컬럼 레이아웃을 추가합니다.

이제 왼쪽 컨테이너에서 다음과 같은 GD 아카이브 페이지 관련 위젯을 드래그합니다. GD > Loop Action, GD > Loop, GD > Loop Pagination, 그리고 GD > Search 을 상단에 배치하여 사용자가 아카이브 페이지에서 검색할 수 있도록 합니다.

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

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

다음 스타일을 테마 커스터마이저에서 추가하세요. 외관 => 사용자 정의 => CSS 추가

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

이제 리스팅 아카이브 페이지가 완성되었습니다.

또 다른 옵션은 이 튜토리얼에서 설명하는 GD > Simple Archive 블록을 사용하는 방법입니다. Elementor로 디렉토리 웹사이트 구축하기.

검색 페이지도 동일한 과정을 반복합니다.

검색 페이지

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

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

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

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

3. OllieWP 디렉토리 웹사이트 단일 리스팅 페이지 디자인

GD Detail 페이지를 편집하고 커스터마이즈하려면 외모 > 편집기 > 디자인 > 템플릿 그리고 편집을 클릭하세요. GD Single 페이지 템플릿.

빈 열 추가

먼저 리스팅 상세 페이지 상단에 이미지 슬라이더를 추가하겠습니다. 다음 GD > Post Image 블록을 이 컨테이너에 다음 설정으로 드래그합니다.

이미지 제한: 10
표시 제한: 3
출력 유형: 슬라이더
자동 시작: 활성화

이제 빈 행을 추가해 봅시다.
콘텐츠: 1200
와이드: 100

그 안에 두 개의 열을 추가합니다.

이제 왼쪽 열에 필요한 GD 상세 페이지 숏코드를 하나씩 추가해 봅시다.

여기에는 GD > 단일 택소노미, GD > 단일 탭, GD > 단일 이전/다음이 포함됩니다.

오른쪽 열에는 GD > Author Action 및 GD > Output Location 블록.

작업을 완료하면 리스팅 상세 페이지 가 완성되었습니다.

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

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

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

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

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

다음 조언으로 디렉토리 웹사이트 프로젝트를 시작해 보세요: 지금 바로 디렉토리 웹사이트를 시작하세요.

가능성은 무한합니다.