Astra 테마와 Spectra 플러그인으로 디렉토리 웹사이트 만들기
Astra 테마를 사용하여 디렉토리 웹사이트를 만드는 가장 좋은 방법은 무엇일까요?
Astra 테마로 디렉토리 웹사이트를 만드는 가장 좋은 방법은 GeoDirectory 플러그인과 Spectra Blocks 플러그인을 함께 사용하는 것입니다. 강력하고 맞춤화 가능한 온라인 디렉토리를 구축하는 훌륭한 방법입니다.
다음은 Astra 테마와 Spectra Website Builder Plugin
- Astra 테마 설치
- Spectra Blocks 설치
- GeoDirectory 설치 및 설정
- Astra 테마와 Spectra Block을 사용하여 디렉토리 웹사이트 디자인
GeoDirectory와 Astra 테마를 사용하여 디렉토리 웹사이트를 구축하는 방법을 자세히 살펴보겠습니다.
이 튜토리얼에서는 다음을 다룹니다:
테마 및 플러그인 설치.
1. Astra 테마 설치
먼저 테마를 설치해야 하며, 이 튜토리얼에서는 Astra 테마를 설치합니다.
다음으로 이동하세요 외관 >> 테마
새로 추가를 선택하고, 설치, 및 활성화 Astra 테마.
2. Spectra Blocks 플러그인 설치
이제 Spectra Blocks 플러그인을 설치해야 합니다. 이 플러그인은 Gutenberg 블록을 사용하여 페이지를 디자인할 수 있는 더 많은 옵션을 제공합니다.
다음으로 이동하세요 플러그인 >> 새로 추가.
Spectra Blocks를 검색하여 설치하고 활성화하세요.
설정 마법사의 모든 단계를 건너뛰어도 됩니다.
3. GeoDirectory 설치
마지막으로, 설치해야 합니다 GeoDirectory.
다음으로 이동하세요 플러그인 >> 새로 추가, GeoDirectory를 검색하세요. 플러그인을 설치하고 활성화하면 지금 단계에서의 플러그인 설치가 완료됩니다.
4. GeoDirectory 설치 마법사
GeoDirectory를 사용하려면 설치 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 샘플 목록을 가져와야 합니다.
지도 시스템 선택 (Google Maps 또는 OpenStreetMap)
마법사의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택할 수 있습니다. Google Maps와 Open Street Maps(API 키가 필요하지 않음)입니다.
이 튜토리얼에서는 Google Maps를 선택합니다.
키 생성 버튼을 클릭하고 이 문서 의 단계를 따라 유효한 API 키를 생성하세요.
필수 단계는 다음과 같습니다:
- 키를 활성화합니다.
- 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
- 키를 발급받습니다.
- 결제 계정을 활성화합니다.
- API 키를 제한합니다(내 웹사이트 URL에서만 사용할 수 있도록).
네 번째 항목에 대해: 이는 필수 요건입니다. 하지만 임계값인 월 $200를 초과하는 경우에만 요금이 부과됩니다.
이 무료 크레딧은 99%의 디렉토리에 충분히 활용할 수 있습니다.
기본 도시 설정
그 다음, 기본 위치를 설정합니다. 이는 디렉토리가 생성되는 도시입니다. 기본 도시는 변경하지 않고 그대로 두겠습니다.
GeoDirectory는 Philadelphia를 기본 도시로 사용합니다.
필요한 위치를 자유롭게 사용할 수 있습니다.
두 개 이상의 도시에 목록을 추가해야 하는 경우 Location Manager 애드온이 필요합니다.
추가 기능 설정
이 단계에서는 UsersWP를 사용자 등록 플러그인 설치하겠습니다. 이 플러그인은 사용자가 웹사이트에 회원가입하고 로그인할 수 있도록 해줍니다.
이 기능은 사용자가 리스팅을 추가하고 수정할 수 있도록 하는 데 필요합니다. 또한 사용자가 자신의 리스팅, 리뷰 및 기타 관련 정보를 확인할 수 있는 사용자 프로필을 생성합니다.
또한 설치할 플러그인은 Ninja Forms 입니다. 이를 통해 모든 리스팅에 리스팅 소유자에게 직접 이메일을 발송하는 문의 양식이 추가됩니다.
AyeCode Connect는 이 튜토리얼에서 필수 사항이 아닙니다. 주로 GeoDirectory 프리미엄 애드온을 추가하고 WordPress 대시보드에서 직접 설치하려는 경우에 필요합니다.
더미 데이터 추가
설치 마법사의 마지막 단계는 샘플 리스팅을 추가하는 것입니다. 이 과정에서 나중에 필요에 맞게 수정할 수 있는 리스팅 카테고리도 함께 추가됩니다.
사이드바 위젯과 메뉴 항목은 지금 추가하지 않으며, 이는 나중에 진행할 예정입니다.
Astra 디렉토리 웹사이트 디자인
테마, 플러그인을 설치하고 GeoDirectory의 초기 설정을 완료했으니, 이제 Astra로 디렉토리 웹사이트 디자인을 시작할 수 있습니다.
1. Astra 디렉토리 웹사이트 홈페이지 디자인
새 페이지를 만들거나 WordPress가 기본으로 생성하는 샘플 페이지(Sample Page)를 활용할 수 있습니다.
페이지로 이동하여 샘플 페이지를 편집하고 이름을 홈으로 변경하거나, 이 용도에 맞는 새 페이지를 만드세요.
다음으로 외관 > 사용자 정의 > 홈페이지 설정 을 선택하고 홈을 선택하세요.
로고
무엇보다 먼저, 웹사이트에 사용할 로고가 필요합니다.
로고의 첫 번째 버전을 제작하기 위해 디자이너에게 비용을 지불할 필요는 없습니다.
새로운 웹 디렉토리 비즈니스를 시작할 때 흔히 저지르는 가장 큰 실수 중 하나는, 제품 시장 적합성을 검증하기 전에 너무 많은 시간과 비용을 투자하는 것입니다.
Canva와 같은 앱을 사용하면 단 5분 만에 로고를 디자인할 수 있으며, 놀라울 정도로 저렴하고 효과적입니다.
MVP(최소 기능 제품)의 경우, Canva로 디자인한 로고로도 충분합니다.
다양한 로고 템플릿 중에서 선택할 수 있으며, 처음 만든 로고가 이상적이거나 완전히 독창적이지 않아도 괜찮습니다.
프로젝트가 성장하면 언제든지 로고를 개선하거나 나중에 대대적인 변경을 할 수 있습니다.
평범한 로고가 프로젝트 실패의 주된 원인이 되는 경우는 없습니다.
로고 디자인을 완료한 후 외관 > 사용자 정의 > 사이트 아이덴티티, 로고 선택을 클릭하고 PNG 파일을 업로드하세요. 자르기를 건너뛰고(또는 필요에 따라 이미지를 자르세요) 게시를 클릭하세요.
내비게이션 메뉴
로고를 만들고 추가한 후 외관 > 메뉴, 에서 메뉴를 만드세요.
필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션, "헤더" 옵션을 체크하실 수 있습니다.
원하신다면 같은 메뉴를 푸터에도 표시하거나, 푸터에 표시할 별도의 메뉴를 만들 수 있습니다.
이 예제에서는 헤더 탐색 메뉴만 사용합니다.
저희는 7개의 링크를 추가했습니다:
- 홈
- 소개
- 블로그
- 장소
- 프로필
- 로그인
- 로그아웃
The Login link (from UsersWP Endpoints)는 로그아웃 상태의 사용자에게만 표시되며, 로그아웃 및 프로필 링크는 로그인한 사용자에게만 표시됩니다.
타이포그래피
이제 웹사이트 텍스트 폰트와 크기를 위한 타이포그래피를 설정해 보겠습니다. 모든 사이트 텍스트에 적용될 글꼴 패밀리, 글꼴 굵기, 글꼴 크기를 전역으로 설정하고 있습니다.
콘텐츠
Spectra 블록 플러그인은 다양한 사전 제작 페이지 템플릿을 제공합니다. 편집 페이지 화면 상단의 템플릿 키트 버튼을 클릭하여 이를 이용할 수 있습니다.
이 페이지 템플릿이나 특정 패턴을 활용하여 사이트 페이지를 만들 수 있습니다.
Spectra Blocks 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.
홈페이지에 히어로 헤더가 필요합니다. Spectra Blocks 플러그인이 제공하는 컨테이너 블록을 추가해 보겠습니다.
추가된 섹션을 클릭하고 아래 스크린샷에 표시된 대로 콘텐츠 너비 옵션에서 전체 너비를 선택하세요.
다음으로 상단 탭에서 스타일을 클릭하세요. 배경 유형으로 > 유형 이미지를 선택하세요.
히어로 섹션에는 이미지가 필요하며, 아래에서 무료로 다운로드할 수 있습니다 Pexels.com 에서 제공하는 필라델피아의 무료 이미지를 사용할 것입니다. (감사합니다, @Kelly)
이미지를 업로드하고 선택하세요 반복 에서 반복 없음 및 크기 에서 커버.
이미지에 오버레이가 필요합니다. 그렇지 않으면 위에 올라가는 텍스트의 대비가 충분하지 않아 읽기 어려울 수 있습니다.
오버레이 유형: 색상, 색상: #1E293B, 불투명도: 0.3 선택
히어로 이미지를 더 어둡게 만들었으니 이제 텍스트를 추가할 수 있습니다.
히어로 이미지 안으로 제목 요소를 드래그 앤 드롭하세요.
이제 홈페이지 히어로 이미지에 제목을 붙일 시간입니다.
스타일 탭에서 텍스트 색상을 흰색(#FFFFFF)으로 변경하여 대비와 가독성을 높이세요.
이 튜토리얼에서는 "필라델피아 최고의 레스토랑 찾기"와 같은 간단한 예시를 사용하겠습니다. 원하는 슬로건을 여기에 추가할 수 있습니다. 정렬 옵션을 사용하여 텍스트를 가운데 정렬하는 것을 잊지 마세요.
홈페이지 헤더에 GD 검색을 추가하려면 GD > Search 블록을 히어로 컨테이너 안으로 드래그하세요.
다음으로, 이 히어로 컨테이너에 최소 높이를 추가하세요. 저는 높이와 너비를 800px로 설정하고, 컨테이너의 너비도 전체 너비 로, 콘텐츠 너비는 박스형.
이제 홈페이지 헤더는 페이지 제목과 약간의 여백이 추가된 상태로 이렇게 보입니다.
이제 헤더 섹션에서 이 페이지 제목과 여백을 제거할 차례입니다.
페이지 제목을 클릭하면 눈 모양 아이콘이 표시됩니다. 이를 클릭하면 페이지 제목이 숨겨지고 여백이 제거됩니다.
이제 홈페이지에 몇 가지 필수 섹션을 더 추가할 차례입니다. 지금 카테고리 섹션을 추가하겠습니다.
히어로 섹션 아래에서, 플러스 아이콘을 클릭하여 새 컨테이너를 추가한 다음 를 추가하세요 GD > Categories 블록을 추가하세요.
이제 이 GD > 카테고리 블록에서 몇 가지 필요한 설정을 구성하겠습니다. 디자인 유형을 이미지 배경으로 설정하고, 행 항목 수를 4개로 지정한 후, 카테고리 이미지 사용 설정을 활성화합니다.
wp-admin -> places -> Place Categories에서 카테고리를 편집하여 카테고리에 이미지를 설정할 수 있습니다.
각 카테고리에는 기본 이미지를 설정하는 옵션이 있습니다
이제 이 새 컨테이너에 패딩을 추가할 차례입니다. 외부 컨테이너를 클릭하고 Style 섹션에서 원하는 패딩을 설정하면 됩니다. 상단과 하단에 70px 패딩을 적용하겠습니다.
이제 빠르게 컨테이너를 몇 개 더 추가하겠습니다. 카테고리 섹션 아래에 GD > Listings 위젯을 사용하여 최근 리스팅을 추가하겠습니다.
변경해야 할 설정은 다음과 같습니다:
필터 > 표시할 게시물 수 = 4
정렬 > 정렬 기준 = 최신순
디자인 > 레이아웃 = 그리드 보기 (4열)
래퍼 스타일 > 상단 여백 = 5
사용자들이 다양한 필터로 리스팅을 정리하고 지도에서 확인할 수 있도록 지도를 추가해 보겠습니다.
다음 설정으로 GD > Map을 사용해 보겠습니다:
지도 유형: Directory Map
지도 옵션: 모두 활성화
스타일 탭을 클릭하고 너비를 설정하여 스타일을 추가해 보겠습니다. 100% 및 높이를 600px 로 설정하여 잘 표시되도록 합니다.
또한 지도 컨테이너를 전체 너비로 설정하여 더 넓어 보이고 보기 좋게 만들겠습니다.
지도의 외부 컨테이너를 클릭하고, 일반 설정에서 컨테이너 너비: 전체 너비, 콘텐츠 너비: 전체 너비로 설정하세요.
이제 최근 게시물을 표시하는 컨테이너를 하나 더 추가해 보겠습니다. 다음을 사용할 수 있습니다. Post Grid Spectra Blocks 플러그인에서 제공하는 블록 컨테이너입니다.
축하합니다! 홈페이지가 완성되었습니다.
원하신다면 다른 컨테이너나 CTA를 여러 개 추가할 수 있습니다.
2. Astra 디렉토리 웹사이트 리스팅 및 검색 페이지 디자인
이제 모든 디렉토리에 필수적인 두 개의 페이지를 디자인해야 합니다.
리스팅 페이지(일반 아카이브, 카테고리, 태그)와 검색 결과 페이지입니다.
GeoDirectory는 기본적으로 일반 레이아웃으로 이 페이지들을 생성합니다. 이 튜토리얼에서는 이 페이지들의 디자인을 조금 커스터마이즈해 보겠습니다.
리스팅 페이지와 검색 페이지는 대부분 동일하므로, 한 번 만들고 레이아웃을 다른 페이지에 복사합니다.
리스팅 페이지 레이아웃은 왼쪽에 리스팅 목록, 오른쪽에 리스팅의 정확한 위치를 표시하는 고정 지도로 구성하기로 결정했습니다.
이 작업은 매우 간단합니다.
리스팅 페이지
GeoDirectory > 설정 > 일반 > 페이지 > GD Archive 페이지 템플릿 편집 클릭으로 이동하세요.
이 항목의 모든 콘텐츠를 삭제하세요. GD Archive 페이지 템플릿.
이제 두 개의 열이 있는 컨테이너를 추가합니다.
이제 왼쪽 컨테이너에 GD > Loop Action, GD > Loop, GD > Loop Pagination, GD > Search 등 GD 아카이브 페이지 관련 위젯을 상단으로 드래그하여 사용자가 아카이브 페이지에서 검색할 수 있도록 합니다.
오른쪽 열에는 다음을 드래그합니다. GD > Map 블록.
GD > Map의 모든 설정은 기본값으로 유지합니다. 높이를 설정해 보겠습니다. 저는 높이를 100vh.
이제 이미지에 나온 안내에 따라 메인 컨테이너를 전체 너비로 설정하세요.
이 작업이 끝나면 리스팅 아카이브 페이지가 완성됩니다.
Astra 무료 버전은 설정이 제한되어 있으므로, 왼쪽 컨테이너 콘텐츠의 크기를 오른쪽 지도 컨테이너와 동일하게 맞추려면 아래 CSS 코드 조각이 필요할 수 있습니다. wp-admin > Appearance > Customise에서 테마 커스터마이저에 붙여넣을 수 있습니다.
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{ overflow-y: scroll; max-height: 100vh; }
더 쉬운 방법이 있습니다. 페이지를 전체 너비로 설정하면, 튜토리얼에서 설명한 대로 GD > Simple Archive Block을 추가할 수 있습니다. Elementor로 디렉토리 웹사이트 구축하는 방법.
검색 페이지도 동일한 과정을 반복합니다.
검색 페이지
Geodirectory > 설정 > 일반 > 페이지 > GD 검색 페이지 템플릿 편집 클릭으로 이동합니다.
이 항목의 모든 콘텐츠를 삭제하세요. GD Search 페이지 템플릿.
GD Archive 페이지의 모든 콘텐츠를 복사하여 GD Search 페이지에 붙여넣기 합니다.
이제 GD Search 및 Archive 페이지가 준비되었습니다.
3. Astra 디렉토리 웹사이트 단일 리스팅 페이지 디자인
이제 GD Detail 페이지를 편집하고 커스터마이즈하려면 다음으로 이동하면 됩니다. Geodirectory > 설정(Settings) > 일반 > 페이지 > GD Detail 페이지 템플릿 편집 클릭.
이 템플릿에서는 Geodirectory가 생성한 기본 콘텐츠를 이미 확인할 수 있습니다.
이 기본 콘텐츠를 모두 제거하고 다음 설정으로 컨테이너를 추가하겠습니다. 컨테이너 너비: 전체 너비 및 콘텐츠 너비: 전체 너비.
이제 리스팅 상세 페이지 상단에 이미지 슬라이더를 추가해 보겠습니다. 다음 항목을 드래그하여 GD > Post Image 이 컨테이너 안에 블록을 넣습니다.
이미지 제한을 10으로, 표시 제한을 1로 설정하면 각 슬라이드에 이미지가 하나씩만 표시됩니다.
이제 이 컨테이너 아래에 또 다른 컨테이너를 추가하겠습니다. 여기에는 Geodirectory Detail 페이지.
이제 필요한 GD Detail 페이지 숏코드를 하나씩 추가해 보겠습니다. 포함되는 항목은 다음과 같습니다. GD > Single Taxonomies, GD > Single Tabs
이제 사이드바 위젯을 추가할 차례입니다. wp-admin > 외모 > 위젯으로 이동합니다.
기본 사이드바에 GD > Author Action 위젯을 추가하세요. 이 위젯은 리스팅 작성자에게 편집 및 삭제 리스팅 옵션을 제공합니다.
위젯을 하나 더 추가하세요, GD > Output Location. 이 위젯은 상세 페이지에 표시되도록 설정된 주요 리스팅 정보를 모두 보여줍니다.
이 작업을 완료하면, 우리의 리스팅 상세 페이지 가 완성되었습니다.
Astra 디렉토리 웹사이트에 프리미엄 기능 추가하기
원하신다면, 이제 디렉토리에 다음과 같은 프리미엄 기능을 추가할 수 있습니다:
- 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 사용하면 리스팅 제출에 대한 가격을 설정할 수 있습니다. 각 가격 등급에 대해 다음과 같은 기능을 활성화/비활성화할 수 있습니다: 무료 리스팅의 사진 수를 제한하고 유료 리스팅에는 더 많은 사진을 허용하거나, 태그 및 카테고리 수를 늘리거나 줄이고, 특정 사용자 정의 필드를 활성화 또는 비활성화하기. 더 길거나 짧은 설명 제출하기.
- Claim Listings: 이것은 디렉토리의 핵심 기능으로, 관리자가 데이터베이스를 생성하고 비즈니스 소유자를 초대하여 무료 리스팅을 관리할 수 있게 합니다. 리스팅 소유권을 이전하기 위해 유료 리스팅으로의 업그레이드를 요구하는 과정이 클레임 리스팅 절차에 포함될 수 있습니다.
- 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화. 트래픽이 많다면 광고 네트워크를 활용할 수 있습니다. 그렇지 않은 경우, 광고를 직접 판매하여 비즈니스가 웹사이트의 특정 영역에 배너를 추가하거나, 예를 들어 자연 검색 결과 상단에 리스팅을 광고로 노출할 수 있도록 허용할 수 있습니다.
이것은 세 가지 예시에 불과합니다. 하지만 디렉토리 웹사이트는 온라인으로 수익을 창출하는 다양한 방법을 제공합니다.
수공예 아이템의 글로벌 마켓플레이스를 만들거나, 이벤트 티켓 또는 할인 쿠폰을 판매할 수 있습니다.
이 종합 가이드로 완벽한 디렉토리 사이트를 구축하세요: 디렉토리 웹사이트 구축하기: 종합 가이드.
가능성은 무한합니다.
뉴스레터 - 최신 소식을 받아보세요!
최신 뉴스, 팁, 독점 콘텐츠를 받은 편지함으로 직접 받아보세요.
