세계에서 가장 진보하고 확장 가능한 WordPress 디렉토리 플러그인

최근 저희는 Blockstrap을 개발했습니다. Blockstrap은 플러그인(페이지 구성 요소 제공)이자 블록 테마(FSE – Full Site Editing)로, WordPress의 새로운 사이트 편집기와 Bootstrap 5의 강점을 결합합니다.

저희는 새로운 디렉토리 테마 시리즈의 프레임워크로 Blockstrap을 개발했습니다. 곧 일반 비즈니스 디렉토리 및 이벤트 테마, 부동산 테마, 구인 게시판 테마, 중고거래 테마 등 WordPress용 다양한 디렉토리 템플릿이 추가될 예정입니다.

이 모든 테마는 GeoDirectory를 사용하여 완벽한 디렉토리 사이트를 만들 수 있도록 특별히 설계되었습니다.

이 튜토리얼에서는 Blockstrap 테마, Directory 차일드 테마, 그리고 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 단계별 가이드를 확인할 수 있습니다:

1. Blockstrap/Directory 테마 설치
2. GeoDirectory 설치 및 설정
3. 블록 테마 빌더를 사용한 디렉토리 웹사이트 디자인

이 가이드에서는 Directory 테마와 GeoDirectory 플러그인을 사용하여 멋진 온라인 디렉토리를 만드는 방법을 안내해 드립니다.

이 설정을 통해 위치 기반 기능을 손쉽게 추가하고, 사이트를 멋지게 꾸미며, 동적으로 변하는 다양한 콘텐츠를 추가할 수 있습니다.

하지만 지금은 최대한 간단하고 이해하기 쉽게 설명하겠습니다.

이 튜토리얼에서 다루는 내용:

• 테마 및 플러그인 설치 및 설정
  1. Blockstrap/Directory 테마 설치
  2. GeoDirectory 설치
  3. GeoDirectory 설치 마법사
     • 지도 시스템 선택
     • 기본 도시 설정
     • 추가 기능 설정
     • 더미 데이터 추가
• Blockstrap/Directory 디렉토리 웹사이트 디자인
  1. 로고
  2. 홈 페이지 디자인
     • 헤더
     • 콘텐츠
  3. 리스팅 및 검색 페이지 디자인
  4. 단일 리스팅 페이지 디자인

테마 및 플러그인 설치.

1. Blockstrap 테마 및 Directory 차일드 테마

우선, Directory 테마를 설치해 보겠습니다. 이 테마는 Blockstrap 의 차일드 테마이므로 메인 테마도 자동으로 설치됩니다.

Blockstrap 테마를 설치하면 Blockstrap 플러그인 설치도 함께 안내됩니다.

Blockstrap 플러그인은 저희의 페이지 빌더로, 디렉토리 웹사이트의 디자인을 향상시키기 위한 다양한 Blockstrap 블록 컬렉션을 추가하는 데 필요합니다. 디렉토리 웹사이트.

테마의 별점 1점 리뷰 3개가 궁금하신 분들께 안내드립니다. 해당 리뷰들은 현재 버전이 아닌, 다른 개발자들이 제작한 매우 오래된 버전에 대한 리뷰입니다. 저희는 "Directory" 테마의 콘셉트가 마음에 들어 새 제품에 활용하고자 원본 테마와 해당 URL(wordpress.org/themes/directory/)을 인수했습니다. 아쉽게도 이 과정에서 과거의 부정적인 리뷰도 함께 이어받게 되었습니다.

WordPress 웹사이트로 이동한 후 

WP-Admin >> 외관 >> 테마 >> 새로 추가에서: Search Directory를 검색하여 첫 번째 테마 옵션을 설치하세요.

2. GeoDirectory 설치

다음 단계를 따라하세요:

1. "플러그인"으로 이동한 후 "새로 추가"를 클릭하세요.
2. GeoDirectory를 검색하세요.
3. 설치 후 활성화하세요.

완료! 플러그인 설정이 모두 끝났습니다.

3. GeoDirectory 설치 마법사

GeoDirectory를 사용하려면 설정 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 더미 리스팅을 가져와야 합니다.

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

설정의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택합니다: Google Maps와 OpenStreetMaps. 이 가이드에서는 OpenStreetMaps를 사용합니다.

Google Maps를 선호하신다면 몇 가지 추가 단계가 필요합니다:

1. "키 생성" 버튼을 클릭하고 여기에 제공된 지침에 따라 유효한 API 키를 만드세요.
2. 다음은 중요한 단계들입니다:
   • 키를 활성화하세요.
   • 새 프로젝트를 만들거나 기존 프로젝트를 선택하세요.
   • 키를 발급받으세요.
   • 결제 계정을 설정하세요.
   • API 키를 제한하세요 (웹사이트 URL에서만 작동하도록).

네 번째 단계는 필수이지만, 월 $200를 초과하는 경우에만 요금이 부과됩니다. 그러나 무료 크레딧은 대부분의 디렉토리 요구 사항을 충족하기에 충분합니다.

이제 기본 도시 설정으로 넘어가겠습니다.

기본 도시 설정

그런 다음 디렉토리에 소개될 주요 도시인 기본 위치를 선택합니다.

기본 도시로 Philadelphia를 선택했지만, 원하는 위치를 자유롭게 선택하셔도 됩니다.

여러 도시를 포함하는 디렉토리를 만들 경우, Location Manager 애드온이 필요합니다.

추가 기능 설정

이 단계에서는 다음을 위한 플러그인인 UsersWP를 설정합니다: 사용자 등록. 이를 통해 사용자가 웹사이트에 가입하고 로그인할 수 있습니다.

UsersWP는 사용자가 자신의 리스팅을 관리하고, 프로필을 생성하며, 리뷰와 같은 기능에 접근하는 데 필수적입니다.

또한, 다음을 설치합니다 Ninja Forms, 이는 모든 리스팅에 문의 양식을 추가합니다. 이 양식은 리스팅 소유자에게 직접 이메일을 발송합니다. (참고: BlockStrap에는 이를 위해 사용할 수 있는 간단한 문의 양식이 있으며, Ninja Forms는 더 고급 양식에 유용합니다)

이 튜토리얼에서는 WordPress 대시보드에서 직접 프리미엄 GeoDirectory 애드온을 추가하려는 경우가 아니라면 AyeCode Connect가 필요하지 않습니다.

더미 데이터 추가

설치 마법사에서 마지막으로 할 일은 샘플 리스팅을 추가하는 것입니다. 이 과정에서 리스팅 카테고리도 생성되지만, 나중에 언제든지 변경할 수 있습니다.

디자인하기 Blockstrap/Directory Theme 디렉토리 웹사이트

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

저희 Blockstrap의 차일드 테마인 Directory 테마는 GeoDirectory 페이지를 위한 사전 제작된 블록 템플릿을 이미 제공합니다.

이 글에서는 이러한 사전 제작된 템플릿을 직접 커스터마이즈할 것입니다.

1. Blockstrap/Directory 홈페이지 디자인

홈페이지 디자인을 맞춤 설정하려면.
다음으로 이동하세요 외관 >> 편집기 >> 템플릿 클릭

이제 Front page 템플릿을 선택하고 편집 아이콘을 클릭하세요.

홈페이지 템플릿을 편집하기 전에 먼저 웹사이트용 로고를 만들어 보겠습니다.

1. 로고

가장 먼저 해야 할 일은 웹사이트에 사용할 로고를 준비하는 것입니다.

로고의 첫 번째 버전을 만들기 위해 디자이너를 고용할 필요는 없습니다.

새로운 디렉토리를 시작할 때 저지를 수 있는 가장 큰 실수 중 하나는, 사람들이 실제로 원하는지 테스트해보기도 전에 너무 많은 시간과 돈을 쏟아붓는 것입니다.

Canva 같은 앱을 사용하면 단 5분 만에 로고를 만들 수 있습니다. Canva는 정말 훌륭하고 무료로 사용할 수 있으며(프리미엄 플랜을 선택해도 제공하는 기능에 비해 저렴합니다).

제품의 기본 버전(MVP, 즉 최소 기능 제품이라고도 함)에는 Canva로 만든 로고로도 충분합니다.

선택할 수 있는 로고 템플릿이 매우 많으며, 첫 번째 로고가 완벽하지 않거나 독창적이지 않아도 괜찮습니다.

프로젝트가 잘 진행되기 시작하면, 나중에 언제든지 로고를 개선하거나 완전히 새롭게 바꿀 수 있습니다.

일반적으로 로고 때문에 프로젝트가 실패하는 경우는 드뭅니다.

웹사이트 헤더를 만들 때 이 로고를 사용할 것입니다.

헤더

이제 아래 스크린샷에 나와 있는 것처럼 왼쪽에서 적절한 블록을 선택하여 이 로고 이미지를 추가해 보겠습니다.

이제 필요한 메뉴 항목을 몇 가지 추가해 보겠습니다. 예를 들면 홈, 장소, 그리고 Blogs, Contact, About 과 같이 추가할 수 있습니다.

다음을 사용할 수 있습니다. BS > Nav item 블록을 사용하여 새 메뉴 항목을 추가하세요.

PRO TIP: 홈페이지에 투명 헤더를 사용하기로 결정했다면, 일반 헤더와 투명 헤더 모두에 로고를 추가해야 합니다.

콘텐츠

다음은 기본 홈페이지가 Blockstrap's Directory Child Theme.

이미 그 자체로 완성된 것처럼 보이지만, 몇 가지 사소한 변경을 가할 것입니다.

The gd_location 숏코드는 Geodirectory Location Manager 애드온에 속합니다. 현재 이 애드온을 사용하지 않으므로 아래 스크린샷에 표시된 숏코드들을 제거하겠습니다.

이제 홈페이지가 어떻게 바뀌었는지 확인해 보세요.

새 섹션을 추가하거나 페이지 콘텐츠를 변경하려면 Blockstrap 테마 내장 블록 중 BS >

2. Blockstrap/Directory 웹사이트 리스팅 및 검색 페이지 디자인

앞서 언급했듯이 Blockstrap 및 Directory 테마에는 GD 페이지용 사전 제작 템플릿이 이미 포함되어 있습니다.

이 모든 템플릿은 그 자체로 완성되어 있으므로 별도의 수정이 필요하지 않습니다.

내부 페이지는 히어로 헤더를 사용하므로, 아카이브 페이지의 헤더 섹션을 커스터마이즈하고 새 로고와 메뉴 항목으로 업데이트해야 합니다.

다음으로 이동하세요: 외관 >> 편집기 >> 템플릿 클릭 >> 선택 GD Archive 아카이브 페이지 레이아웃에 사용됩니다.

홈페이지와 마찬가지로, GD 아카이브 페이지 헤더에 새 로고와 메뉴 항목을 업로드할 것입니다.

기본 디자인이 적용된 GD 아카이브 페이지의 모습입니다.

마찬가지로, GD Search 페이지에서 GD Search Archive 템플릿을 선택하고 필요한 변경 사항을 적용하세요.

이 글에서는 레이아웃을 기본값으로 유지하겠습니다.

3. Blockstrap/Directory 웹사이트 단일 리스팅 페이지 디자인

를 커스터마이즈하려면 GD Detail 페이지에서 GD Single 페이지 템플릿을 선택하고 필요한 변경 사항을 적용하세요.

GD 상세 페이지의 기본 템플릿 모습입니다. 완성도가 높고 필요한 모든 요소를 갖추고 있어 별도로 편집하지 않겠습니다.

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

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

1. 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 사용하면 리스팅 등록 비용을 직접 설정할 수 있습니다. 옵션별로 다른 가격을 지정할 수 있습니다. 예를 들어, 유료 리스팅에는 더 많은 사진 업로드 등 추가 기능을 제공하고, 무료 리스팅에는 기능을 제한할 수 있습니다. 또한 어떤 특수 필드를 사용할 수 있는지, 설명의 최대 길이를 얼마로 할지도 설정할 수 있습니다.
2. Claim Listings: 이 기능은 디렉토리에서 매우 중요합니다. 작동 방식은 다음과 같습니다. 먼저 관리자가 데이터베이스를 설정합니다. 그런 다음 비즈니스 소유자를 초대하여 무료 리스팅을 관리하게 합니다. 비즈니스 소유자가 완전한 제어권을 원한다면 유료 리스팅으로 업그레이드해야 할 수도 있습니다.
3. 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화. 방문자가 많은 웹사이트라면 광고 네트워크를 활용할 수 있습니다. 그렇지 않다면 광고를 직접 판매할 수 있습니다. 즉, 비즈니스가 사이트의 특정 영역에 배너를 표시하거나, 검색 결과 상단과 같이 광고 형태로 리스팅을 노출하도록 비용을 받을 수 있습니다.

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

핸드메이드 제품을 위한 글로벌 마켓을 만들거나, 이벤트 티켓을 판매하거나, 할인 쿠폰을 제공할 수도 있습니다.

시작하는 데 관심이 있다면 다음 자료를 참고하세요: 처음부터 디렉토리 웹사이트 만드는 방법.

이 튜토리얼은 다목적으로 활용 가능하며, 어떤 테마나 페이지 빌더와도 함께 사용할 수 있습니다.

웹사이트로 할 수 있는 것들은 무궁무진합니다.

결론

저희는 가장 인기 있는 테마와 페이지 빌더를 사용하여 디렉토리를 구축하는 방법에 관한 수많은 튜토리얼을 게시했습니다.

그 중 하나라도 읽어보셨다면, Blockstrap 프레임워크와 그 디렉토리 차일드 테마를 사용한 구축이 훨씬 더 쉽다는 것을 알 수 있을 것입니다.

결과물도 훨씬 더 멋져 보입니다.

마지막으로, Blockstrap 디렉토리 웹사이트를 테스트해보시면 지금까지 저희가 튜토리얼을 만든 다른 어떤 것보다 훨씬 빠르다는 것을 알 수 있을 것입니다.

가장 좋은 점은, Blockstrap 테마와 플러그인, 그리고 디렉토리 차일드 테마 모두 100% 무료라는 것입니다!

그러니, 무엇을 기다리고 계신가요? 지금 바로 Blockstrap과 GeoDirectory 플러그인으로 디렉토리 웹사이트를 시작하고 온라인으로 수익을 창출해 보세요!

Bricks Builder로 디렉토리 웹사이트를 만드는 방법은?

🚨 새로운 Bricks 템플릿 출시! 🚨
GeoDirectory 기반 디렉토리 사이트를 100배 더 쉽고 빠르게 구축할 수 있는 멋진 Bricks Builder 템플릿을 방금 출시했습니다!
🎯 라이브 데모: 여기서 확인하세요
📥 다운로드 및 튜토리얼: Bricks Directory template
💬 대화에 참여하세요: 커뮤니티 포럼에서 토론하기
직접 사용해 보고 의견을 알려주세요!

직접 템플릿을 디자인하고 싶다면, Bricks Builder와 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 시작 가이드를 참고하세요:

1. Bricks 테마 설치
2. GeoDirectory 설치 및 설정
3. Bricks Builder로 디렉토리 웹사이트 디자인하기

Bricks Builder와 GeoDirectory 플러그인을 함께 사용하면 매우 정교한 온라인 디렉토리를 만들 수 있습니다.

이 조합을 통해 위치 기반 기능의 손쉬운 통합, 디자인 커스터마이징, 동적 콘텐츠 블록 추가가 가능하며, 사용자 친화적이고 매력적인 웹사이트 경험을 제공합니다.

이번 튜토리얼에서는 단순함과 사용 편의성에 초점을 맞추겠습니다.

주로 GeoDirectory 쇼트코드와 함께 Bricks 빌더를 사용할 예정입니다.

앞으로 몇 주 안에 Bricks 엘리먼트와 쿼리 루프(동적 데이터)를 활용해 각 GD 템플릿을 디자인하는 방법에 대한 상세 튜토리얼을 게시할 예정입니다.

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

• 테마 및 플러그인 설치 및 설정
  1. Bricks 테마 설치하기
  2. GeoDirectory 설치
  3. GeoDirectory 설치 마법사
     • 지도 시스템 선택
     • 기본 도시 설정
     • 추가 기능 설정
     • 더미 데이터 추가

• Bricks 디렉토리 웹사이트 디자인하기
  1. 로고
  2. 홈 페이지 디자인
     • 내비게이션 메뉴
     • 헤더
     • 콘텐츠
     • 푸터
  3. 리스팅 및 검색 페이지 디자인
  4. 단일 리스팅 페이지 디자인

테마 및 플러그인 설치.

1. 설치하기 Bricks 테마

먼저 다음 사이트에서 테마와 차일드 테마를 다운로드하세요: Bricks website.

다음 경로에서 WordPress 웹사이트에 테마를 설치하세요: WP-Admin >> 외관 >> 테마

테마 라이선스를 활성화하세요.

2. GeoDirectory 설치

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

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

3. GeoDirectory 설치 마법사

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

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

마법사의 첫 번째 단계에서 Google Maps와 OpenStreetMaps, 두 가지 지도 시스템 중 하나를 선택할 수 있습니다.

이 가이드에서는 OpenStreetMaps를 선택하겠습니다.

Google Maps를 사용하려면 몇 가지 추가 작업이 필요합니다:

• "Generate Key" 버튼을 클릭하고, 이 가이드의 안내에 따라 유효한 API 키를 생성하세요.
• 중요한 단계는 다음과 같습니다:
  1. Keys를 활성화하세요.
  2. 새 프로젝트를 만들거나 기존 프로젝트를 선택하세요.
  3. 키를 발급받습니다.
  4. 결제 계정을 설정하세요.
  5. API 키를 제한하세요 (웹사이트 URL에서만 작동하도록).

네 번째 항목은 반드시 해야 하지만, 월 $200을 초과할 때만 비용이 발생합니다.

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

기본 도시 설정

다음으로, 기본 위치를 선택하게 됩니다. 이는 디렉토리가 중심으로 삼는 도시입니다.

여기서는 Philadelphia를 기본 도시로 설정하지만, 원하는 곳 어디든 선택할 수 있습니다.

여러 도시를 위한 디렉토리를 만들 경우, Location Manager 애드온이 필요합니다.

추가 기능 설정

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

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

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

이 튜토리얼에서 AyeCode Connect를 반드시 사용할 필요는 없습니다. WordPress 대시보드에서 바로 프리미엄 GeoDirectory 애드온을 추가하고 설치하려는 경우에만 필요합니다.

더미 데이터 추가

설치 마법사를 완료하는 마지막 단계는 더미 리스팅을 추가하는 것입니다. 이 과정에서 리스팅 카테고리도 설정되며, 나중에 원하는 대로 변경할 수 있습니다.

지금은 사이드바 위젯이나 메뉴 항목을 추가하지 않겠습니다. 나중에 처리하도록 하겠습니다.

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

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

1. 로고

가장 먼저 해야 할 일은 웹사이트에 사용할 로고를 준비하는 것입니다.

로고의 첫 번째 버전을 만들기 위해 디자이너를 고용할 필요는 없습니다.

새 디렉토리를 시작할 때 가장 큰 실수 중 하나는, 사람들이 원하는지 테스트하기 전에 너무 많은 시간과 돈을 쏟는 것입니다.

Canva 같은 앱을 사용하면 단 5분 만에 로고를 만들 수 있으며, 저렴하면서도 품질이 뛰어납니다.

제품의 기본 버전(MVP, 즉 최소 기능 제품이라고도 함)에는 Canva로 만든 로고로도 충분합니다.

선택할 수 있는 로고 템플릿이 매우 많으며, 첫 번째 로고가 완벽하지 않거나 독창적이지 않아도 괜찮습니다.

프로젝트가 잘 진행되기 시작하면, 나중에 언제든지 로고를 개선하거나 완전히 새롭게 바꿀 수 있습니다.

일반적으로 로고가 프로젝트 실패의 원인이 되지는 않습니다. 웹사이트 헤더를 만들 때 이 로고를 사용하겠습니다.

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

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

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

이 페이지를 사이트 홈페이지로 설정해야 합니다. 이를 위해 다음으로 이동하세요 wp-admin >> 설정(Settings) >> 읽기(Reading)

이제 먼저 사이트 내비게이션 메뉴를 설정해 보겠습니다.

내비게이션 메뉴

다음으로 이동하세요 외관 > 메뉴, 에서 메뉴를 만드세요.

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

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. 계정
6. Register & Login pages

헤더

To set the site header go to wp-admin >> Bricks >> Templates >> 새로 추가

헤더용 Bricks 템플릿을 만듭니다.

30::70 비율의 두 열 레이아웃을 선택합니다.

왼쪽 열에 Logo 블록을 드래그하고 사이트 로고를 업로드합니다.

너비를 width:200px로 설정합니다.

오른쪽 열에 Nav menu 를 드래그합니다.

다음과 같은 설정을 사용합니다.
Algin main axis: center
Align cross axis: Right

타이포그래피
Text Transform: Poppins 500

콘텐츠

이제 홈페이지를 디자인합니다. Bricks로 편집 버튼을 클릭하여 홈페이지를 편집합니다.

다음 설정으로 빈 컨테이너를 추가합니다.
Align self: 가운데
Align Main Axes: 가운데
Align cross axis: 가운데

제목 블록의 스타일 섹션의 탭

패딩: 50px (위쪽) 50px (아래쪽)
최소 높이: 500
배경 이미지 업로드
배경 위치: 가운데 가운데
배경 반복: 반복

이제 이 컨테이너 위에 제목 태그를 추가해 보겠습니다.
텍스트: 필라델피아 최고의 레스토랑 찾기

이제 제목 태그의 스타일 탭에서 다음 설정을 추가합니다.
타이포그래피:
글꼴 크기: 48px
텍스트 정렬: 가운데
텍스트 변환: 첫 글자 대문자
폰트: Poppins

이제 아래에 숏코드 블록을 추가하고 [gd_search mb=”3″] 숏코드를 그 안에 추가합니다.

이제 빈 컨테이너를 하나 더 추가하고 다음 숏코드를 사용하여 그 안에 숏코드 블록을 추가해 보겠습니다.

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]

카테고리 컨테이너의 스타일 탭에서 레이아웃 > 여백으로 이동합니다.

패딩 위: 50px
패딩 아래: 50px
패딩 왼쪽: 50px
패딩 오른쪽: 50px

이제 최근 비즈니스를 표시하는 섹션을 추가하겠습니다.

헤더 태그가 있는 빈 섹션을 하나 더 추가하고
텍스트: 최근 비즈니스 목록

다음과 같은 타이포그래피 설정을 적용합니다
글꼴 크기: 32px

이제 그 아래에 다음 숏코드를 추가합니다

[gd_listings post_type="gd_place" post_limit="8" add_location_filter="1" sort_by="latest" title_tag="h3" layout="4" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]

이제 그 아래에 모든 비즈니스를 나열하는 지도를 추가하려고 합니다.
이를 위해 빈 컨테이너를 추가하고 그 안에 다음 숏코드를 포함한 숏코드 블록을 삽입합니다.
컨테이너에 다음 스타일을 적용합니다.
패딩 상단: 50px
패딩 하단: 50px

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

이제 CTA를 추가하기 위해 두 열 레이아웃을 사용하겠습니다.
다음 설정으로
방향: 수평(행)
Align self: 가운데
Align cross axis: 가운데
열 간격: 20
행 간격: 20

왼쪽 열에는 이미지를 드래그하고, 오른쪽 열에는 텍스트와 리스팅 페이지로 이동하는 버튼을 추가합니다.

푸터

이제 푸터를 디자인하고 생성하려면 다음으로 이동하세요 wp-admin >> Bricks >> Templates >> 새로 추가
그리고 템플릿 태그 를 푸터로 선택한 후 Bricks로 템플릿을 편집합니다.

이제 빈 컨테이너를 추가해 보겠습니다. 배경색: #072027

기본 텍스트 블록에 텍스트와 스타일을 추가하세요 텍스트 정렬: 가운데

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

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

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

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

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

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

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

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

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

이제 빈 섹션을 추가하고 그 안에 Post Title 블록.

섹션 스타일 설정에서 다음을 설정하세요
배경색: #072027
패딩: 30px 10px 30px 10px

Post Title 블록의 타이포그래피 설정을 다음으로 지정하세요
폰트: Poppins
색상: #fffff

이제 빈 섹션과 그 안에 두 개의 컬럼 컨테이너(50::50)를 추가해 보겠습니다.

다음으로 왼쪽 컨테이너에는 GD > Loop Action, GD > Loop, GD > Loop Pagination, GD > Search 등 GD 아카이브 페이지 관련 숏코드가 포함된 숏코드 블록을 추가합니다. 상단에 검색 기능을 배치하여 사용자가 아카이브 페이지에서 검색할 수 있도록 합니다.

[gd_search bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop_actions bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop layout='2'  row_gap=''  column_gap=''  card_border=''  card_shadow=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop_paging show_advanced=''  bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

오른쪽 컬럼에는 다음 설정으로 GD > Map 숏코드가 포함된 숏코드 블록을 추가하겠습니다.

[gd_map map_type="auto" post_settings="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]

스크롤 터치를 위해 클래스 scrolling-gd-loop 를 왼쪽 컬럼에 추가할 것입니다. 아래 스크린샷에서 표시된 옵션을 확인할 수 있습니다.

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

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

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

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

다음을 생성하겠습니다. GD Search 페이지 템플릿 출처: Bricks >> Templates >> 새로 추가. 반드시 선택하세요. 템플릿 유형 선택: GD Search Results

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

이렇게 하려면 GD 아카이브 페이지에서 Bricks Builder 오른쪽 열(Structure)의 복사(전체) 아이콘을 클릭하세요.

검색 페이지로 이동하세요. 검색 페이지는 다음에서 찾을 수 있습니다. Geodirectory > Settings > General > Pages.

Bricks로 편집하세요. Bricks Builder 오른쪽 열의 제거(전체) 아이콘을 클릭하세요:

마지막으로, Bricks Builder 오른쪽 열의 붙여넣기(전체) 아이콘을 클릭하세요:

이렇게 하면 검색 페이지와 아카이브 페이지가 동일하게 전체 너비로 표시되며, 왼쪽 열에는 결과가, 오른쪽 열에는 고정 지도가 표시됩니다.

검색 페이지의 경우, 개별 페이지에 이 템플릿을 표시하도록 Bricks에 지시해야 합니다.

이를 위해 기어 아이콘 > 템플릿 설정 > 조건 > 개별 > 검색 페이지 (검색 페이지의 제목).

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

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

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

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

빈 섹션을 추가하고 그 안에 숏코드 블록을 추가해 봅시다.

이미지 슬라이더를 표시하려면 다음 숏코드를 사용하세요.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide" image_size="large"]

이제 빈 섹션 안에 2열 컨테이너를 추가해 봅시다.

왼쪽 컨테이너에 다음 숏코드들을 추가합니다.

여기에는 GD > Post Title, GD > Single Taxonomies, 그리고 GD > Single Tabs.

[gd_page_title tag='h1'  no_wrap='false'  title_container='1'  strip_html=']
[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false']
[gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]

오른쪽 열에는 
GD > Author Action, 그리고 GD > Output Location 블록.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false']
[gd_output_location location="detail" list_style="wrap"]

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

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

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

1. 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 추가합니다. 리스팅 등록 비용을 직접 설정할 수 있습니다. 가격 수준별로 포함하거나 제외할 기능을 선택할 수 있습니다. 예를 들어, 유료 리스팅에는 더 많은 사진을 허용하고 무료 리스팅에는 제한을 둘 수 있습니다. 특정 커스텀 필드의 사용 가능 여부도 설정할 수 있으며, 설명의 길이를 길거나 짧게 조정할 수도 있습니다.

1. Claim Listings: 이 기능은 디렉토리에 있어 매우 중요합니다. 작동 방식은 다음과 같습니다: 관리자가 데이터베이스를 설정한 후 비즈니스 소유자를 초대하여 무료 리스팅을 관리하게 합니다. 비즈니스 소유자가 리스팅 소유권을 가져가려면 먼저 유료 리스팅으로 업그레이드해야 할 수도 있습니다.

1. 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화. 웹사이트 방문자가 많다면 광고 네트워크를 활용할 수 있습니다. 방문자가 많지 않다면 광고를 직접 판매할 수 있습니다. 즉, 비즈니스가 사이트의 특정 위치에 배너를 게재하거나, 검색 결과 상단 등에 리스팅이 광고 형태로 노출되도록 비용을 지불할 수 있습니다.

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

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

첫 번째 프로젝트를 시작하는 분들을 위한 가이드입니다: 나만의 디렉토리 웹사이트 구축하기.

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

가능성은 무한합니다.

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

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

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

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

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

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

• 테마 및 플러그인 설치 및 설정
  1. BuddyBoss 테마 및 BuddyBoss 플랫폼 설치
  2. Elementor 플러그인 설치
  3. GeoDirectory 설치
  4. GeoDirectory 설치 마법사
     • 지도 시스템 선택
     • 기본 도시 설정
     • 추가 기능 설정
     • 더미 데이터 추가
  5. GeoDirectory BuddyBoss 통합
• BuddyBoss 디렉토리 웹사이트 디자인
  1. 홈 페이지 디자인
     • 로고
     • 내비게이션 메뉴
     • 콘텐츠
  2. 리스팅 및 검색 페이지 디자인
  3. 단일 리스팅 페이지 디자인

테마 및 플러그인 설치.

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. 설치 후 활성화하세요.

3. GeoDirectory 설치

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

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

4. GeoDirectory 설치 마법사

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

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

마법사의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택할 수 있습니다. 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 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

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

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

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분 만에 로고를 디자인할 수 있으며, 가격도 저렴하고 놀라울 정도로 퀄리티가 좋습니다.

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

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

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

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

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

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

내비게이션 메뉴

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

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션,헤더 메뉴 – 로그인한 사용자 및 헤더 메뉴 – 로그아웃한 사용자” 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는 기본 디자인으로 이 페이지들을 자동으로 설정합니다. 이 가이드는 이 페이지들의 모양을 조금 더 다듬는 데 도움이 될 것입니다.

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

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

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

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. 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화입니다. 트래픽이 많다면 광고 네트워크를 활용할 수 있습니다. 그렇지 않은 경우, 비즈니스가 웹사이트의 특정 영역에 배너를 추가하거나 리스팅이 광고 형태로(예: 유기적 검색 결과 상단에) 표시되도록 허용하는 방식으로 광고를 직접 판매할 수 있습니다.

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

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

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

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

가능성은 무한합니다.

다음은 Blocksy 테마와 Stackable – Page Builder Gutenberg Blocks 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 단계별 가이드입니다:

1. Blocksy 테마 설치
2. Stackable – Page Builder Gutenberg Blocks 플러그인 설치
3. GeoDirectory 설치 및 설정
4. 다음을 사용하여 디렉토리 웹사이트를 디자인하세요: Blocksy 테마와 Stackable – Page Builder Gutenberg Blocks plugin

Blocksy 테마는 GeoDirectory 플러그인 및 Stackable – Page Builder Gutenberg Blocks 플러그인과 결합하여, 정교한 온라인 디렉토리를 구축하기 위한 다용도의 고급 플랫폼을 만들어 줍니다.

이 통합을 통해 사용자는 위치 기반 기능을 원활하게 통합하고, 레이아웃 옵션을 커스터마이징하며, 동적 콘텐츠 블록을 추가하여 사용자 친화적이고 매력적인 인터페이스를 구현할 수 있습니다.

이 통합 시스템을 통해 웹 개발자와 디자이너는 특정 산업의 요구사항이나 더 넓은 커뮤니티의 필요에 맞춘 최고 수준의 디렉토리 웹사이트를 제작할 수 있습니다.

이를 어떻게 실현할 수 있는지 자세히 살펴보겠습니다.

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

• 테마 및 플러그인 설치 및 설정
  1. Blocksy 테마 설치
  2. Stackable – Page Builder Gutenberg Blocks 플러그인 설치
  3. GeoDirectory 설치
  4. GeoDirectory 설치 마법사
     • 지도 시스템 선택
     • 기본 도시 설정
     • 추가 기능 설정
     • 더미 데이터 추가
• Blocksy 디렉토리 웹사이트 디자인
  1. 로고
  2. 홈 페이지 디자인
     • 내비게이션 메뉴
     • 콘텐츠
  3. 리스팅 및 검색 페이지 디자인
  4. 단일 리스팅 페이지 디자인

테마 및 플러그인 설치.

1. 설치하기 Blocksy 테마

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

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

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

2. 설치하기 Stackable – Page Builder Gutenberg Blocks 플러그인

기본 Gutenberg 플러그인만으로는 템플릿을 스타일링하기에 충분하지 않으므로 다음을 설치합니다. Stackable – Page Builder Gutenberg Blocks 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

이 플러그인은 기본 블록보다 더 뛰어난 맞춤형 블록을 제공하며, 페이지 템플릿을 디자인하는 데 도움을 줍니다.

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

검색하기 Stackable – Page Builder Gutenberg Blocks. 설치 후 활성화하세요.

설정 마법사의 모든 단계를 건너뛸 수 있습니다.

3. GeoDirectory 설치

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

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

4. GeoDirectory 설치 마법사

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

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

마법사의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택할 수 있습니다. 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 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

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

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

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

플러그인 설치와 GeoDirectory의 기본 설정을 마쳤으니, 이제 Blocksy 테마와 Stackable – Page Builder Gutenberg Blocks 플러그인.

1. 웹사이트 로고 디자인하기

무엇보다 먼저: 웹사이트에 사용할 로고가 필요합니다.

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

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

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

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

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

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

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

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

2. Blocksy 디렉토리 홈페이지 디자인

새 페이지를 만들거나 WordPress가 기본으로 제공하는 페이지(예: 샘플 페이지)를 사용할 수 있습니다.

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

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

내비게이션 메뉴

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

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션,기본” option.

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

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

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

1. 홈
2. 소개
3. 블로그
4. Places and add places
5. 프로필
6. 로그인
7. 로그아웃

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

메뉴 설정을 다음으로 지정하세요. 폰트: 기본 폰트 / 14px / 굵게 700

콘텐츠

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

이를 위해 홈페이지에 히어로 헤더가 필요합니다. 다음에서 제공하는 컬럼 블록을 추가해 보겠습니다. Stackable – Page Builder Gutenberg Blocks 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

컬럼 레이아웃 설정에서
블록 너비: 전체 너비 정렬
콘텐츠 너비: 전체 너비 정렬
콘텐츠 최대 너비: 1200px

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

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

이제 이미지 위에 다음 설정으로 제목 블록을 추가해 보겠습니다.
콘텐츠: 필라델피아 최고의 레스토랑 찾기
제목 HTML 태그: H1
크기: 48
텍스트 색상: #000000

이제 아래에 GD > Search 블록도 추가하겠습니다.

이제 상단과 하단에 패딩 50px을 적용한 빈 컬럼을 하나 더 추가해 보겠습니다.

카테고리 목록을 표시하기 위해 GD > Categories 블록을 그 안으로 드래그합니다.

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

블록 너비: 전체 너비 정렬
콘텐츠 너비: 전체 너비 정렬
콘텐츠 최대 너비: 1200px
색상: #00000

이제 웹사이트의 세 번째 섹션을 추가해 보겠습니다. 이 섹션의 이름을최근 비즈니스 목록“.

추가하세요 GD > Listing 블록을 추가하려면 플러스 아이콘을 클릭한 후 블록 설정에 접근합니다. 반드시 활성화 the 고급 설정 표시 옵션.
블록의 스타일 탭에서 다음을 업데이트하세요. 레이아웃: 그리드 보기 (4열).

표시할 게시물 수 변경: 8로 설정하고 반드시 위치 필터 활성화 옵션을 체크하고 정렬 기준: 최신순.

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

블록 너비: 전체 너비 정렬
콘텐츠 너비: 전체 너비 정렬

Add the GD > Map 블록을 추가하고 설정을 유지하세요.
너비: 100%
높이: 450px

마지막으로 CTA를 추가하겠습니다. 미리 정의된 템플릿 중 하나를 사용하겠습니다.

다음 설정을 사용하세요.

블록 너비: 전체 너비 정렬
콘텐츠 너비: 전체 너비 정렬

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

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

리스팅 페이지

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

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

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

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

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

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

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

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

다음 설정으로 빈 열을 추가해 보겠습니다
블록 너비: 전체 너비 정렬
콘텐츠 너비: 전체 너비 정렬
콘텐츠 최대 너비: 1200px
색상: #00000
패딩: 30px

여기에 GD > post title 숏코드를 추가해 보겠습니다.

이제 열 블록을 추가하고 50:50 레이아웃.

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

오른쪽 열에 GD > Map block, 그리고 모든 설정은 기본값으로 유지하겠습니다. 단, GD > Map block의 높이를 100vh로 설정하겠습니다.

마지막 마무리 작업으로, 다음 CSS를 테마 커스터마이저의 외관 => 사용자 정의 => CSS 추가

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
	  height:100vh;
		padding-right:15px;
}

.breakdance .bde-column-111-108.bde-column{
	overflow:hidden;
}

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

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

검색 페이지

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

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

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

마지막으로, 검색 페이지를 전체 너비로 만들려면 다음 CSS가 필요합니다.

.geodir-page-search #main article {
max-width: 100%;
}

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

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

먼저 Appearance > Customize > Places > Single Place에서 기본 제목을 비활성화하고, 아래에 설명된 대로 제목을 비활성화합니다.

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

이 템플릿에서는 Geodirectory가 생성한 기본 콘텐츠를 이미 확인할 수 있습니다.
기존의 모든 기본 콘텐츠를 제거하고 새 열 블록을 추가합니다.

먼저 리스팅 상세 페이지 상단에 이미지 슬라이더를 추가해 보겠습니다.

카테고리 목록을 표시하기 위해 GD > Post Image 블록을 이 컨테이너에 다음 설정으로 드래그합니다.

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

이제 하나 더 섹션 블록 을 아래에 추가하겠습니다 70/20 레이아웃.

이제 필요한 모든 GD Detail 페이지 숏코드를 왼쪽 열에 하나씩 추가해 보겠습니다.

여기에는 GD > Post Title, GD > Single Taxonomies, 그리고 GD > Single Tabs.
오른쪽 열에는 GD > Author Action 및 GD > Output Location 블록.

이후, 리스팅 상세 페이지 가 완성되었습니다.

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

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

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

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

온라인 비즈니스를 시작하려고 고민 중이라면, 디렉토리 웹사이트를 만드는 것이 가장 쉬운 시작 방법일 수 있습니다.

이 가이드로 온라인 디렉토리의 비밀을 알아보세요: 디렉토리 웹사이트 제작 가이드.

Avada 테마와 Avada Builder 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 방법에 대한 쉬운 가이드입니다:

1. Avada 테마 설치하기
2. GeoDirectory 설치 및 설정
3. Avada 빌더를 사용하여 디렉토리 웹사이트 디자인하기

Avada 테마는 GeoDirectory 플러그인 및 Avada Builder 플러그인과 함께 사용할 때, 유연한 온라인 디렉토리를 만드는 탁월한 방법입니다.

이 조합을 통해 위치 기반 기능을 손쉽게 추가하고, 레이아웃을 커스터마이징하며, 사용자 친화적인 경험을 위한 동적 콘텐츠를 포함할 수 있습니다.

웹 개발자와 디자이너가 특정 업종이나 더 넓은 커뮤니티 요구에 맞춘 고품질 디렉토리 웹사이트를 구축할 수 있도록 지원합니다.

이를 실현하는 방법에 대해 자세히 살펴보겠습니다.

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

• 테마 및 플러그인 설치 및 설정
  1. 설치하기 Avada 테마
  2. GeoDirectory 설치
  3. GeoDirectory 설치 마법사
     • 기본 도시 설정
     • 추가 기능 설정
     • 더미 데이터 추가
• 디자인하기 Avada 디렉토리 웹사이트
  1. 웹사이트 로고 디자인
  2. 홈 페이지 디자인
     • 내비게이션 메뉴
     • 헤더
     • 콘텐츠
     • 푸터
  3. 리스팅 아카이브 및 검색 페이지 디자인
  4. 단일 리스팅 페이지 디자인

테마 및 플러그인 설치.

1. Avada 테마 설치하기

Avada는 유연성과 강력한 기능으로 잘 알려진 다재다능하고 인기 있는 WordPress 테마입니다.

코딩 없이도 손쉽게 웹사이트를 디자인하고 커스터마이징할 수 있는 사용자 친화적인 드래그 앤 드롭 빌더를 갖춘 다목적 테마로, 다양한 유형의 웹사이트를 만들 수 있도록 커스터마이징이 가능합니다.

Avada 테마를 구매하고 다양한 기능을 살펴보려면 공식 ThemeForest 마켓플레이스를 방문하세요: Avada 테마 구매 링크.

이 동영상을 따라 Avada 테마를 설정할 수 있습니다.

2. GeoDirectory 설치

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

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

3. GeoDirectory 설치 마법사

GeoDirectory 플러그인의 경우, 설정 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 더미 목록을 가져와야 합니다.

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

마법사의 첫 번째 단계에서 Google Maps와 OpenStreetMaps(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 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

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

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

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

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

1. 웹사이트 로고 디자인하기

무엇보다 먼저: 웹사이트에 사용할 로고가 필요합니다.

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

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

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

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

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

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

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

2. Avada 디렉토리 홈페이지 디자인

새 페이지를 만들거나 WordPress가 기본으로 제공하는 페이지(예: 샘플 페이지)를 사용할 수 있습니다.

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

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

내비게이션 메뉴

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

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장합니다.

제목 블록의 메뉴 설정 > 위치 표시 섹션에서기본 내비게이션” option.

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

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

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

1. 홈
2. 소개
3. 블로그
4. Places and add places
5. 프로필
6. 로그인
7. 로그아웃

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

헤더 레이아웃 만들기

이제 Avada 빌더를 사용하여 사이트 헤더 레이아웃을 만들어 보겠습니다.
먼저 Avada > 레이아웃 로 이동하여 다음에서 헤더를 선택합니다. 글로벌 레이아웃.

클릭하세요 새 레이아웃 만들기 버튼을 클릭하여 편집해 보겠습니다.

이제 라이브 빌더 버튼을 클릭해 보겠습니다.

그러면 Avada Builder Library 가 열립니다.

다양한 섹션에 대한 사전 제작 템플릿을 많이 볼 수 있습니다.

이 예제에서는 studio 섹션.

이제 미리 만들어진 헤더의 로고 섹션을 클릭하여 로고를 교체하겠습니다.
다음을 설정합니다 이미지 최대 너비 에서 150px 로고 설정에서.

헤더 메뉴에서 사이트 헤더에 표시할 메뉴를 선택하거나 변경합니다.

아래 스크린샷에 표시된 대로 일부 스타일 및 정렬을 변경합니다.

사이트 헤더가 준비되었습니다. 이제 홈페이지 콘텐츠에 집중해 보겠습니다.

콘텐츠

다음을 편집합니다 홈 Live Builder에서 페이지를.

다음 설정으로 빈 컨테이너를 추가해 보겠습니다
내부 콘텐츠 너비: 100%
높이: 최소 높이
최소 높이: 500
행 정렬: 늘이기
열 정렬: 가운데
열 배치: 가운데

배경 설정에서 이미지를 추가합니다.
배경 위치: 가운데 가운데
배경 반복: 반복 없음
배경 크기: 가운데
패턴: 점
패턴 색상: rgba(0,0,0,0.41)

이제 이미지 위에 헤더 제목 태그를 추가해 보겠습니다.
텍스트: 필라델피아 최고의 레스토랑 찾기
타이포그래피:
글꼴 패밀리: Inter
변형: Bolt 700
글꼴 크기: 42px
글꼴 색상: #ffffff

이제 다음을 추가해 보겠습니다 GD > Search 블록을 추가하고 기본 설정을 유지합니다.

이제 빈 컨테이너를 추가해 보겠습니다. GD > Category 블록을 내부에.

디자인 유형: 아이콘 왼쪽
행 항목: 4

이제 다음과 함께 빈 컨테이너를 하나 더 추가해 보겠습니다. GD > Listing 블록을 내부에 추가하되 다음 설정을 사용합니다.
정렬: 최신
그리드: 4
표시할 게시물: 8

이제 다음 설정으로 빈 컨테이너를 추가해 보겠습니다.
내부 콘텐츠 너비: 100% 너비
높이: 자동

콘텐츠 간격: 좌, 우 0px

이제 다음을 추가할 것입니다. GD > Map 내부에.

마지막으로, CTA 섹션을 추가할 시간입니다. 빈 컨테이너를 추가할 것입니다.
여기에 Heading 태그를 추가할 것입니다.

다음 설정으로
정렬: 왼쪽
HTML 제목 태그: H3

이제 버튼 블록을 추가하고 리스팅 추가 페이지로 연결되는 링크를 설정해 보겠습니다.

푸터 레이아웃 만들기

마지막으로, 헤더 섹션에서 했던 것과 유사한 방식으로 글로벌 푸터 레이아웃을 만들겠습니다.

이 예제에서는 미리 만들어진 푸터 레이아웃을 사용합니다.

이 푸터 레이아웃을 원하는 대로 수정할 수 있습니다. 지금은 기본값으로 유지하겠습니다.

이 마지막 단계를 마치면 홈페이지가 완성됩니다.

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

이제 디렉토리에 꼭 필요한 두 개의 페이지를 디자인해야 합니다.

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

GeoDirectory는 기본 레이아웃으로 해당 페이지들을 자동으로 생성합니다. 이 튜토리얼에서는 Avada Builder를 사용하여 이 페이지들의 레이아웃을 직접 만들고 커스터마이즈해 보겠습니다.

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

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

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

리스팅 페이지

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

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

이제 라이브 빌더를 사용하여 페이지를 편집하세요.

상단과 하단의 콘텐츠 패딩을 0으로 설정한 빈 컨테이너를 추가하겠습니다.

이제 내부에 컬럼을 추가하고 GD > 페이지 제목을 드래그하여 넣겠습니다.

다음을 설정해 보겠습니다
배경색: #f6f6f9
패딩: 50px 0px 50px 0px
컨테이너 링크 색상: #efefef

이제 두 열 컨테이너를 추가해 보겠습니다.

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

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

지도를 설정해 보겠습니다
높이: 150vh
패딩: 30px 0px 30px 0px
설정은 기본값으로 유지합니다.

다음을 추가합니다 gd-loop-column 클래스를 왼쪽 열에 추가합니다.

테마 커스터마이저에 다음 CSS 스니펫을 추가합니다.

.gd-loop-column .fusion-column-wrapper{
    overflow-y: scroll;
    padding-right: 17px;
    max-height: 960px;
}

아카이브 페이지가 완성되었습니다.

검색 페이지 레이아웃을 만들기 위해.
이 레이아웃에 전역 헤더와 푸터를 지정합니다.

다음으로 이동합니다 Avada > 레이아웃
이것을 추가하고 검색 페이지에 이 레이아웃을 지정합니다.

검색 페이지에서 이제 검색 콘텐츠 템플릿을 생성합니다

그리고 모든 섹션을 복사합니다 GD > Archive 페이지에서 이 검색 페이지로 붙여넣습니다.
이제 검색 페이지 템플릿이 준비되었습니다.

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

이제 상세 페이지 템플릿을 만들 차례입니다. Avada Builder에서 GD Detail 페이지 템플릿을 편집합니다.

다음과 함께 빈 컨테이너를 추가합니다
내부 콘텐츠 너비: 100% 너비

다음 설정으로 GD > Post images 블록을 추가합니다.
이미지 제한: 10
표시 제한: 3
출력 유형: 슬라이더
자동 시작: 활성화

제목 블록의 GD Details 페이지에서 반드시 비활성화하세요 첫 번째 추천 이미지 표시.

이제 다시 아래와 같이 두 열 레이아웃의 컨테이너를 추가합니다.

이제 왼쪽 열에 필요한 모든 GD 상세 페이지 블록을 개별적으로 추가합니다.

여기에는 GD > post Title, GD > Single Taxonomies, GD > Single Tabs, 그리고 GD > Single Next Prev.

오른쪽 열에 GD > Author Action 및 GD > Output Location 블록을 추가합니다.

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

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

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

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

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

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

초보자라면 여기서 시작하세요: 디렉토리 웹사이트 만들기: 초보자 가이드.

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

가능성은 무한합니다.