최근 저희는 Blockstrap을 개발했습니다. Blockstrap은 플러그인(페이지 구성 요소 제공)이자 블록 테마(FSE – Full Site Editing)로, WordPress의 새로운 사이트 편집기와 Bootstrap 5의 강점을 결합합니다.
저희는 새로운 디렉토리 테마 시리즈의 프레임워크로 Blockstrap을 개발했습니다. 곧 일반 비즈니스 디렉토리 및 이벤트 테마, 부동산 테마, 구인 게시판 테마, 중고거래 테마 등 WordPress용 다양한 디렉토리 템플릿이 추가될 예정입니다.
이 모든 테마는 GeoDirectory를 사용하여 완벽한 디렉토리 사이트를 만들 수 있도록 특별히 설계되었습니다.
이 튜토리얼에서는 Blockstrap 테마, Directory 차일드 테마, 그리고 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 단계별 가이드를 확인할 수 있습니다:
- Blockstrap/Directory 테마 설치
- GeoDirectory 설치 및 설정
- 블록 테마 빌더를 사용한 디렉토리 웹사이트 디자인
이 가이드에서는 Directory 테마와 GeoDirectory 플러그인을 사용하여 멋진 온라인 디렉토리를 만드는 방법을 안내해 드립니다.
이 설정을 통해 위치 기반 기능을 손쉽게 추가하고, 사이트를 멋지게 꾸미며, 동적으로 변하는 다양한 콘텐츠를 추가할 수 있습니다.
하지만 지금은 최대한 간단하고 이해하기 쉽게 설명하겠습니다.
이 튜토리얼에서 다루는 내용:
테마 및 플러그인 설치.
1. Blockstrap 테마 및 Directory 차일드 테마
우선, Directory 테마를 설치해 보겠습니다. 이 테마는 Blockstrap 의 차일드 테마이므로 메인 테마도 자동으로 설치됩니다.
Blockstrap 테마를 설치하면 Blockstrap 플러그인 설치도 함께 안내됩니다.
Blockstrap 플러그인은 저희의 페이지 빌더로, 디렉토리 웹사이트의 디자인을 향상시키기 위한 다양한 Blockstrap 블록 컬렉션을 추가하는 데 필요합니다. 디렉토리 웹사이트.
테마의 별점 1점 리뷰 3개가 궁금하신 분들께 안내드립니다. 해당 리뷰들은 현재 버전이 아닌, 다른 개발자들이 제작한 매우 오래된 버전에 대한 리뷰입니다. 저희는 "Directory" 테마의 콘셉트가 마음에 들어 새 제품에 활용하고자 원본 테마와 해당 URL(wordpress.org/themes/directory/)을 인수했습니다. 아쉽게도 이 과정에서 과거의 부정적인 리뷰도 함께 이어받게 되었습니다.
WordPress 웹사이트로 이동한 후
WP-Admin >> 외관 >> 테마 >> 새로 추가에서: Search Directory를 검색하여 첫 번째 테마 옵션을 설치하세요.
2. GeoDirectory 설치
다음 단계를 따라하세요:
- "플러그인"으로 이동한 후 "새로 추가"를 클릭하세요.
- GeoDirectory를 검색하세요.
- 설치 후 활성화하세요.
완료! 플러그인 설정이 모두 끝났습니다.
3. GeoDirectory 설치 마법사
GeoDirectory를 사용하려면 설정 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 더미 리스팅을 가져와야 합니다.
지도 시스템 선택 (Google Maps 또는 OpenStreetMap)
설정의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택합니다: Google Maps와 OpenStreetMaps. 이 가이드에서는 OpenStreetMaps를 사용합니다.
Google Maps를 선호하신다면 몇 가지 추가 단계가 필요합니다:
- "키 생성" 버튼을 클릭하고 여기에 제공된 지침에 따라 유효한 API 키를 만드세요.
- 다음은 중요한 단계들입니다:
- 키를 활성화하세요.
- 새 프로젝트를 만들거나 기존 프로젝트를 선택하세요.
- 키를 발급받으세요.
- 결제 계정을 설정하세요.
- 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 웹사이트
원하신다면, 이제 디렉토리에 다음과 같은 프리미엄 기능을 추가할 수 있습니다:
- 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 사용하면 리스팅 등록 비용을 직접 설정할 수 있습니다. 옵션별로 다른 가격을 지정할 수 있습니다. 예를 들어, 유료 리스팅에는 더 많은 사진 업로드 등 추가 기능을 제공하고, 무료 리스팅에는 기능을 제한할 수 있습니다. 또한 어떤 특수 필드를 사용할 수 있는지, 설명의 최대 길이를 얼마로 할지도 설정할 수 있습니다.
- Claim Listings: 이 기능은 디렉토리에서 매우 중요합니다. 작동 방식은 다음과 같습니다. 먼저 관리자가 데이터베이스를 설정합니다. 그런 다음 비즈니스 소유자를 초대하여 무료 리스팅을 관리하게 합니다. 비즈니스 소유자가 완전한 제어권을 원한다면 유료 리스팅으로 업그레이드해야 할 수도 있습니다.
- 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화. 방문자가 많은 웹사이트라면 광고 네트워크를 활용할 수 있습니다. 그렇지 않다면 광고를 직접 판매할 수 있습니다. 즉, 비즈니스가 사이트의 특정 영역에 배너를 표시하거나, 검색 결과 상단과 같이 광고 형태로 리스팅을 노출하도록 비용을 받을 수 있습니다.
이것은 세 가지 예시에 불과합니다. 하지만 디렉토리 웹사이트는 온라인으로 수익을 창출하는 다양한 방법을 제공합니다.
핸드메이드 제품을 위한 글로벌 마켓을 만들거나, 이벤트 티켓을 판매하거나, 할인 쿠폰을 제공할 수도 있습니다.
시작하는 데 관심이 있다면 다음 자료를 참고하세요: 처음부터 디렉토리 웹사이트 만드는 방법.
이 튜토리얼은 다목적으로 활용 가능하며, 어떤 테마나 페이지 빌더와도 함께 사용할 수 있습니다.
웹사이트로 할 수 있는 것들은 무궁무진합니다.
결론
저희는 가장 인기 있는 테마와 페이지 빌더를 사용하여 디렉토리를 구축하는 방법에 관한 수많은 튜토리얼을 게시했습니다.
그 중 하나라도 읽어보셨다면, Blockstrap 프레임워크와 그 디렉토리 차일드 테마를 사용한 구축이 훨씬 더 쉽다는 것을 알 수 있을 것입니다.
결과물도 훨씬 더 멋져 보입니다.
마지막으로, Blockstrap 디렉토리 웹사이트를 테스트해보시면 지금까지 저희가 튜토리얼을 만든 다른 어떤 것보다 훨씬 빠르다는 것을 알 수 있을 것입니다.
가장 좋은 점은, Blockstrap 테마와 플러그인, 그리고 디렉토리 차일드 테마 모두 100% 무료라는 것입니다!
그러니, 무엇을 기다리고 계신가요? 지금 바로 Blockstrap과 GeoDirectory 플러그인으로 디렉토리 웹사이트를 시작하고 온라인으로 수익을 창출해 보세요!