GeoDirectory

BuddyBoss로 뛰어난 디렉토리 웹사이트 만드는 방법

Naveen Giri

BuddyBoss와 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 만들려면 다음 단계를 따르세요:

  1. BuddyBoss 테마와 BuddyBoss Platform을 설치합니다.
  2. GeoDirectory를 설정하세요.
  3. Elementor 플러그인을 설치하세요.
  4. BuddyBoss 테마와 Elementor를 사용하여 디렉토리 웹사이트를 디자인하세요.

BuddyBoss와 GeoDirectory 플러그인, Elementor 플러그인을 결합하면 세련된 온라인 디렉토리와 소셜 네트워킹 기능을 갖춘 다목적 플랫폼을 구축할 수 있습니다.

이 조합을 활용하고 이 글에서 안내하는 단계를 따르면, 소셜 네트워킹 기능이 포함된 사용자 친화적인 디렉토리 사이트를 손쉽게 만들 수 있습니다.

이를 실현하는 방법의 세부 사항을 살펴보겠습니다.

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

테마 및 플러그인 설치.

1. 설치하기 BuddyBoss 테마 및 BuddyBoss 플랫폼

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

다음으로 이동하세요 buddyboss.com, BuddyBoss 테마와 BuddyBoss 플랫폼을 구매하고 다운로드하세요.

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

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

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

업로드를 선택하고, 설치, 및 활성화 the BuddyBoss 플랫폼 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

이제 BuddyBoss를 구성해 보겠습니다.

다음으로 이동하세요 BuddyBoss >> 구성 요소

모든 구성 요소를 활성화하고 있으며, 필요에 따라 직접 선택하셔도 됩니다.

이제 다음에서 BuddyBoss에 필요한 몇 가지 페이지를 설정해 보겠습니다. BuddyBoss >> 페이지

모든 설정을 기본값으로 유지하겠지만, 원하신다면 설정을 확인하고 필요한 변경을 하실 수 있습니다.
이제 우리 사이트는 모든 소셜 네트워킹 기능과 BuddyBoss의 디자인 및 느낌을 갖추고 준비가 완료되었습니다.

2. 설치하기 Elementor 플러그인

템플릿을 스타일링하기 위해 Elementor 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

The Elementor 플러그인은 기본값보다 뛰어난 다양한 커스터마이징 기능을 제공하며 페이지 템플릿을 디자인하는 데 도움이 됩니다.

Elementor 프로 버전도 있으며 다양한 기능을 제공하고, GeoDirectory는 두 버전 모두와 호환됩니다.

이 글에서는 Elementor 무료 버전을 사용할 것입니다.

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

검색하기 Elementor. 설치 후 활성화하세요.

Elementor 플러그인 설치

3. GeoDirectory 설치

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

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

GeoDirectory 플러그인 설치

4. GeoDirectory 설치 마법사

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

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

GeoDirectory 설치 마법사

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

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

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

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

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

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

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

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

기본 도시 설정

디렉토리 기본 도시 설정

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

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

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

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

추가 기능 설정

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

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

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

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

더미 데이터 추가

GeoDirectory 더미 리스팅

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

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

5. GeoDirectory BuddyBoss 통합

BuddyBoss와 GeoDirectory를 연결하려면 GeoDirectory BuddyBoss 통합 두 가지 모두에서 작동하는 BuddyBoss 및 BuddyPress 통합이 필요합니다.


이 애드온을 Geodirectory 대시보드에서 다운로드하여 이 플러그인을 업로드하고 설치하십시오.

에서 GeoDirectory >> 설정(Settings) >> BuddyPress 탭에서 아래 스크린샷에 언급된 모든 설정을 활성화합니다.

이 플러그인을 사용하면 사용자가 BuddyBoss 프로필 페이지에서 자신의 리스팅을 관리할 수 있습니다.

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

테마와 플러그인을 설치하고 GeoDirectory의 기본 설정을 마쳤으니, 이제 디렉토리 웹사이트 디자인을 시작할 수 있습니다.

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

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

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

다음으로 외관 > 사용자 정의 > 홈페이지 설정 을 선택하고 홈을 선택하세요.

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

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

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

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

Canva.com을 이용해 첫 번째 로고 초안을 만들어 보세요.

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

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

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

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

로고 디자인을 완료한 후 BuddyBoss > Theme Options > 로고, PNG 파일을 업로드하세요.

자르기를 건너뛰거나 (또는 필요에 따라 이미지를 자르세요), 로고 레이아웃에서 변경 사항 저장을 클릭합니다.

내비게이션 메뉴

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

Neve Directory 내비게이션 메뉴

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션,헤더 메뉴 – 로그인한 사용자 및 헤더 메뉴 – 로그아웃한 사용자” option.

If you want, you can make the same menu appear on the mobile or create another menu to appear there.

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

We added seven main navigation links and a few sub-navigation links:

  1. 홈
  2. Places and add places
  3. 회원
  4. 블로그
  5. 고객 지원

콘텐츠

저는 Elementor 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

저희는 이미 다음 주제에 관한 글을 보유하고 있습니다: Elementor로 디렉토리 웹사이트 만드는 방법.

이 글에서는 BuddyBoss를 함께 활용하는 방법을 소개합니다.

홈페이지에 히어로 헤더가 필요합니다. 이를 위해 페이지 > 홈으로 이동한 후 Elementor로 편집을 클릭하세요.

섹션을 추가합니다. (페이지 빌더에서 다음과 같이 표시된 플러스 버튼을 클릭하세요: 여기에 위젯을 드래그하세요.)

하나의 열로 구성된 섹션 하나만 있는 빈 홈페이지

이제 하나의 열로 구성된 섹션 하나만 있는 빈 페이지가 생성되었습니다.

컨테이너 스타일 섹션에서 배경 이미지를 업로드하고 다음과 같은 몇 가지 설정을 적용해 보겠습니다:
위치: 가운데 가운데
반복: 반복 없음
표시 크기: 커버
배경 오버레이: #000000
불투명도: 0.51

컨테이너의 레이아웃 섹션에서 다음 설정을 구성합니다
최소 높이: 500
방향: 열 세로
가운데 정렬: 가운데
항목 정렬: 가운데

그런 다음 상단에 헤더 태그를 추가하고 텍스트를 다음과 같이 설정합니다: Find The Best Restaurant In Philadelphia​, 그리고 아래 설정을 적용합니다
HTML 태그: H1
정렬: 가운데
텍스트 색상: #ffffff
타이포그래피 크기: 48px

다음으로, GD > Search 블록을 추가하고 기본 설정으로 구성합니다. 고급 탭에서 너비: 전체 너비(100%)

아래에 빈 컨테이너를 하나 더 추가하고 GD > Categories 블록을 드래그하여 카테고리 목록을 표시합니다.
GD > Categories 블록 설정을 다음과 같이 지정합니다
디자인 유형: 이미지 배경
행 항목: 4
다음을 활성화합니다 카테고리 이미지 사용 옵션

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

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

카테고리 기본 이미지

이제 제목 태그가 있는 빈 컨테이너를 추가하고
텍스트: 최근 비즈니스 리스팅
정렬: 가운데
타이포그래피 크기: 38px

아래에 GD > Listings 블록을 추가하고 다음 설정을 적용합니다
정렬: 최신
그리드: 4

아래의 빈 컨테이너 안으로 GD > Map 단축코드를 드래그합니다.

Elementor 컨테이너에서 다음 설정을 적용합니다
콘텐츠 너비: 전체 너비
간격: 0
여백: 상하 50px
패딩: 0px

마지막으로, 사용자를 리스팅 추가 페이지로 이동시키는 CTA를 추가하겠습니다.

두 열 레이아웃의 빈 컨테이너를 추가합니다.

왼쪽 컨테이너에 이미지 박스를 추가합니다.

오른쪽 컨테이너에는 아래와 같은 모양이 되도록 제목, 텍스트, 버튼을 드래그하여 배치합니다.

이제 홈페이지가 완성되었습니다.


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

디렉토리를 위해 두 가지 중요한 페이지를 만들어야 합니다. 하나는 리스팅 페이지(아카이브, 카테고리, 태그 포함)이고, 다른 하나는 검색 결과 페이지입니다.

GeoDirectory는 기본 디자인으로 이 페이지들을 자동으로 설정합니다. 이 가이드는 이 페이지들의 모양을 조금 더 다듬는 데 도움이 될 것입니다.

리스팅 페이지와 검색 페이지는 매우 유사하기 때문에, 한 번만 디자인하고 동일한 레이아웃을 두 페이지 모두에 적용하겠습니다.

리스팅 페이지 디자인은 왼쪽에 리스팅을 배치하고, 오른쪽에는 각 리스팅의 위치를 보여주는 고정 지도를 배치하는 방식으로 구성할 것입니다.

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

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

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

이 항목의 모든 콘텐츠를 삭제하세요. GD Archive 페이지 템플릿을 선택하고 Elementor로 편집합니다.

페이지 설정에서 페이지 레이아웃을 Elementor 전체 너비로 설정합니다.

이제 다음 설정으로 빈 컨테이너를 추가해 보겠습니다.

방향: 열 세로
가운데 정렬: 가운데
항목 정렬: 가운데
배경색: #2143D3

이제 GD > page title 블록을 드래그하여 올려놓겠습니다.

이제 다음 설정으로 두 열 레이아웃을 추가해 보겠습니다.
콘텐츠 너비: 전체 너비
간격: 0

다음으로, 왼쪽 컨테이너에 GD 아카이브 페이지 관련 블록을 추가합니다. 예를 들면 GD > Loop Action, GD > Loop, GD > Loop Pagination, 그리고 GD > Search 을 상단에 배치하여 사용자가 아카이브 페이지에서 검색할 수 있도록 합니다.

스크롤 터치를 위해 클래스 scrolling-gd-loop 스크롤 터치를 위해 이 열에 추가합니다.

오른쪽 열에는 다음을 드래그합니다. GD > Map 다음 설정으로 블록을 추가합니다.
열 설정
패딩: 0px
여백: 0px

GD > 지도 단축코드 설정을 기본값으로 되돌리고
Height: 100%
Width: 100vh

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

.scrolling-gd-loop{
    overflow-y: scroll !important;
    max-height: 1000px;
}

이제 이 작업이 완료되면 아카이브 페이지가 준비됩니다.

검색 페이지 레이아웃을 만들기 위해.

다음의 모든 콘텐츠를 복사하세요. GD Archive Elementor 템플릿을 복사하여 GD Search 페이지 Elementor 템플릿에 붙여넣으세요.

검색 페이지는 다음 위치에서 찾을 수 있습니다. Geodirectory > Settings > General > Pages.

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

이제 상세 페이지 템플릿을 만들 차례입니다. 다음으로 이동하여 GD Detail Elementor에서 페이지 템플릿을 사용합니다.

다음으로 이동하세요. Geodirectory > 설정(Settings) > 일반 > 페이지 > GD Detail 페이지 템플릿 편집 클릭.

이 템플릿에서는 Geodirectory가 생성한 기본 콘텐츠를 이미 확인할 수 있습니다.
이제 이 기본 콘텐츠를 모두 제거하고 Elementor를 사용하여 편집하겠습니다.

빈 컨테이너를 추가해 봅시다.
콘텐츠 너비: 전체 너비
간격: 0
여백: 상하 50px
패딩: 0px
방향: 열 수직
가운데 정렬: 가운데
항목 정렬: 가운데

이제 다음 항목을 드래그해 봅시다. Gd > Post Images 단축코드를 아래 설정과 함께 안에 넣으세요.
이미지 제한: 10
표시 제한: 3
출력 유형: 슬라이더
자동 시작: 활성화

컨테이너가 너비: 전체 너비(100%)인지

두 열 레이아웃을 추가해 봅시다.

왼쪽 열에 순서대로 추가합니다.

여기에는 GD > Post Title, GD > Single Taxonomies, 그리고 GD > Single Tabs.
오른쪽 열에는 다음을 추가하겠습니다. (BB) 게시물 작성자, GD > Author Action, 그리고 GD > Output Location 블록.

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

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

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

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

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

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

다음 온라인 사업을 위한 필수 단계를 여기서 알아보세요: 성공적인 디렉토리 웹사이트를 만드는 단계.

이 범용 튜토리얼은 어떤 테마나 페이지 빌더에도 적용할 수 있습니다.

가능성은 무한합니다.