다음은 Blocksy 테마와 Stackable – Page Builder Gutenberg Blocks 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 단계별 가이드입니다:
- Blocksy 테마 설치
- Stackable – Page Builder Gutenberg Blocks 플러그인 설치
- GeoDirectory 설치 및 설정
- 다음을 사용하여 디렉토리 웹사이트를 디자인하세요: Blocksy 테마와 Stackable – Page Builder Gutenberg Blocks plugin
Blocksy 테마는 GeoDirectory 플러그인 및 Stackable – Page Builder Gutenberg Blocks 플러그인과 결합하여, 정교한 온라인 디렉토리를 구축하기 위한 다용도의 고급 플랫폼을 만들어 줍니다.
이 통합을 통해 사용자는 위치 기반 기능을 원활하게 통합하고, 레이아웃 옵션을 커스터마이징하며, 동적 콘텐츠 블록을 추가하여 사용자 친화적이고 매력적인 인터페이스를 구현할 수 있습니다.
이 통합 시스템을 통해 웹 개발자와 디자이너는 특정 산업의 요구사항이나 더 넓은 커뮤니티의 필요에 맞춘 최고 수준의 디렉토리 웹사이트를 제작할 수 있습니다.
이를 어떻게 실현할 수 있는지 자세히 살펴보겠습니다.
이 튜토리얼에서는 다음을 다룹니다:
테마 및 플러그인 설치.
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 키를 생성하세요.
필수 단계는 다음과 같습니다:
- 키를 활성화합니다.
- 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
- 키를 발급받습니다.
- 결제 계정을 활성화합니다.
- 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:
- 홈
- 소개
- 블로그
- Places and add places
- 프로필
- 로그인
- 로그아웃
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디렉토리 웹사이트
원하신다면, 이제 디렉토리에 다음과 같은 프리미엄 기능을 추가할 수 있습니다:
- 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 사용하면 리스팅 등록에 대한 가격을 설정할 수 있습니다. 각 가격 등급별로 다음과 같은 기능을 활성화/비활성화할 수 있습니다: 무료 리스팅의 사진 수 제한 및 유료 리스팅의 사진 수 확대 허용. 태그 및 카테고리 수 조정. 특정 커스텀 필드 활성화 또는 비활성화. 더 길거나 짧은 설명 제출.
- Claim Listings: 이것은 디렉토리의 핵심 기능으로, 관리자가 데이터베이스를 생성하고 비즈니스 소유자를 초대하여 무료 리스팅을 관리할 수 있게 합니다. 리스팅 소유권을 이전하기 위해 유료 리스팅으로의 업그레이드를 요구하는 과정이 클레임 리스팅 절차에 포함될 수 있습니다.
- 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화입니다. 트래픽이 많다면 광고 네트워크를 활용할 수 있습니다. 그렇지 않은 경우, 비즈니스가 웹사이트의 특정 영역에 배너를 추가하거나 리스팅이 광고 형태로(예: 유기적 검색 결과 상단에) 표시되도록 허용하는 방식으로 광고를 직접 판매할 수 있습니다.
이것은 세 가지 예시에 불과합니다. 하지만 디렉토리 웹사이트는 온라인으로 수익을 창출하는 다양한 방법을 제공합니다.
온라인 비즈니스를 시작하려고 고민 중이라면, 디렉토리 웹사이트를 만드는 것이 가장 쉬운 시작 방법일 수 있습니다.
이 가이드로 온라인 디렉토리의 비밀을 알아보세요: 디렉토리 웹사이트 제작 가이드.