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

Breakdance Website Builder 플러그인을 사용하여 디렉토리 웹사이트를 만드는 방법에 대한 이해하기 쉬운 가이드입니다:

1. Breakdance 플러그인 설치
2. GeoDirectory 설치 및 설정
3. 다음을 사용하여 디렉토리 웹사이트를 디자인하세요: Breakdance 플러그인

The Breakdance 플러그인은 GeoDirectory 플러그인과 함께 사용하면 유연한 온라인 디렉토리를 만드는 탁월한 방법입니다. 이 조합을 통해 위치 기반 기능을 손쉽게 추가하고, 레이아웃을 커스터마이즈하며, 사용자 친화적인 경험을 위한 동적 콘텐츠를 포함할 수 있습니다.

이 시스템을 통해 웹 개발자와 디자이너는 특정 산업이나 더 넓은 커뮤니티의 요구에 맞는 고품질 디렉토리 웹사이트를 구축할 수 있습니다.
이를 수행하는 방법의 세부 사항을 살펴보겠습니다.

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

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

플러그인 설치 및 설정하기.

1. 설치하기 Breakdance 플러그인

Breakdance 플러그인은 breakdance.com에서 구매하실 수 있습니다. 플러그인 zip 파일을 받게 됩니다. 설치하려면  플러그인 >> 새로 추가 >> 플러그인 업로드 클릭

설치 후, 다음 경로에서 WordPress 테마를 비활성화합니다. Breakdance >> 설정 >> 테마 >> 테마 비활성화

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는 user management plugin 사용자가 웹사이트에 회원가입하고 로그인할 수 있게 해줍니다.

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

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

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

더미 데이터 추가

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

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

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

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

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

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

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

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

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

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

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

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

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

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

새 페이지를 만들거나 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.

타이포그래피

Let’s set global Typography settings from the Breakdance >> 설정 >> 글로벌 스타일 >> Breakdance 실행

다음은 타이포그래피 설정입니다
제목 폰트: Poppins
본문 폰트: Poppins
기본 크기: 16px
비율: 1.2

헤더 설정

사이트 헤더를 설정하기 위해 다음으로 이동해 보겠습니다. Breakdance >> Header 를 클릭하세요. Add header.

여기서 헤더에 제목을 지정하고 다음을 선택합니다.
위치: 모든 곳
우선순위: 1

다음을 클릭하세요. 새로 추가 왼쪽 상단 모서리의 버튼을 클릭하세요. 사용 가능한 블록 요소를 사용하여 헤더를 만들거나 라이브러리 를 클릭하여 이미 제작된 헤더 템플릿을 사용할 수 있습니다.

저는 다음의 기존 헤더 템플릿 중 하나를 사용하고 있으며 라이브러리에서 업로드했습니다. 로고 를 선택하고 메뉴 를 선택했습니다.

이제 헤더가 준비되었으니, 홈페이지 콘텐츠로 넘어가겠습니다.

콘텐츠

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

이를 위해 홈페이지에 히어로 헤더가 필요합니다.

먼저 Breakdance 에서 홈페이지를 Edit in Breakdance 버튼을 클릭하여 편집해 보겠습니다.

왼쪽 상단의 추가 버튼을 클릭하여 빈 섹션을 드래그합니다.

섹션 스타일 탭에서 다음을 설정합니다.
정렬: 가운데
배경 유형: 이미지
이미지 크기: 전체
크기: 커버
반복: no-repeat
위치: 가운데
첨부: 스크롤
이미지 해제 위치: 데스크톱
높이: 사용자 지정
사용자 지정 높이: 400px

이제 다음 설정으로 제목 요소를 드래그해 보겠습니다.

텍스트: 필라델피아 최고의 레스토랑 찾기
색상: #FFFFFFFF
글꼴 크기: 48
글꼴 두께: 600

다음 숏코드가 포함된 숏코드 블록을 추가하겠습니다. [gd_search] 그 아래에 숏코드를 입력하세요.

이제 카테고리 목록을 표시하기 위해 다음 숏코드를 사용하여 아래에 빈 컨테이너를 하나 더 추가해 보겠습니다.

[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" rounded="rounded"]

상단과 하단에 50px의 패딩을 적용합니다.

이제 최근 리스팅 섹션이 필요합니다. 다음 숏코드를 사용하여 숏코드 요소를 추가하겠습니다.

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

이제 리스팅 지도를 표시하기 위해 숏코드를 하나 더 추가해 보겠습니다.

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

마지막으로 CTA 가 필요한데, 기존 CTA 템플릿을 사용하겠습니다.

푸터 설정

이제 마지막으로 사이트 푸터를 설정해 보겠습니다. Breakdance >> Footer 를 클릭하세요. 추가 Footer.

푸터를 처음부터 만들 수도 있고 기존 푸터를 사용할 수도 있습니다. 저는 기존 푸터 템플릿을 사용하겠습니다. 필요에 따라 푸터 메뉴를 손쉽게 커스터마이징할 수 있습니다.
지금은 그대로 유지하겠습니다.

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

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

리스팅 페이지

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

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

GeoDirectory는 기본적으로 일반 레이아웃으로 페이지를 생성합니다. 이 튜토리얼에서는 Breakdance Builder를 사용하여 이 페이지들의 레이아웃을 만들고 커스터마이징하겠습니다.

다음으로 이동합니다 Breakdance >> Templates >> Add Template

다음 옵션에서 아래 설정을 선택하고 클릭합니다 Add Template 버튼을 클릭하여 편집해 보겠습니다.
위치: 아카이브/포스트 타입 아카이브
조건: 포스트 타입 = Places

템플릿에서 빈 섹션을 추가하고 섹션 블록에 다음 설정을 적용합니다.
레이아웃
정렬: 가운데
수직 정렬: 가운데
배경:
색상: F5F8FFFF
유형: 그라디언트

이제 그 안에 Archive Title 블록을 추가해 보겠습니다.

두 가지 옵션이 있으며, 둘 다 안내해 드리겠습니다:

더 간단한 방법은 단일 열을 사용하고 다음 숏코드를 활용하는 것입니다: [gd_simple_archive layout="2″ height="100vh" maptype="ROADMAP" marker_cluster="1″]

2) 디자인을 완전히 제어하고 싶다면, 대신 2열 레이아웃의 열 블록을 추가해야 합니다.

설정에서 다음을 사용합니다 너비: 전체

이제 숏코드 컨테이너를 드래그하여 그 안에 필요한 숏코드를 사용합니다.

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

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

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

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

이제 다음 항목을 추가하겠습니다 gd-archive-left-container 클래스를 왼쪽 섹션에 추가합니다.

왼쪽 열에 다음 클래스를 추가하겠습니다 gd-archive-left-column.

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

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

.gd-archive-left-column{
	overflow:hidden;
}

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

검색 페이지

이제 GeoDirectory 검색 페이지용 템플릿을 만들겠습니다. 먼저 Breakdance >> Templates >> Add Template >> 검색 결과

이제 다음 템플릿의 모든 콘텐츠를 GD Archive 템플릿에서 GD Search 템플릿으로 복사하겠습니다.

이제 GD 검색 및 아카이브 페이지 템플릿이 모두 준비되었습니다.

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

다음으로 이동합니다 Breakdance >> Templates >> Add Template

다음 옵션에서 아래 설정을 선택하고 클릭합니다 Add Template 버튼을 클릭하여 편집해 보겠습니다.
위치: Single/Places
조건: 포스트 타입 = Places

모든 면에서 패딩이 0인 빈 섹션을 추가하겠습니다.

이미지 슬라이더를 표시하기 위해 다음 숏코드를 추가합니다.

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

이제 섹션을 하나 더 추가하고 그 안에 두 열 레이아웃을 추가해 보겠습니다.

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

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

[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false'  mt=''  mr=''  mb='2'  ml=''  pt=''  pr=''  pb=''  pl='' ]
[gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

오른쪽 열에는 GD > Author Action 및 GD > Output Location 블록.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

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

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

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

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

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

이 필수 가이드로 핵심 내용을 익혀보세요: 디렉토리 웹사이트 제작의 기본 요소.

가능성은 무한합니다.

Beaver Builder 테마와 Beaver Builder 플러그인을 사용하여 디렉토리 웹사이트를 만드는 방법을 쉽게 설명한 가이드입니다:

1. Beaver Builder 테마 설치
2. GeoDirectory 설치 및 설정
3. Beaver Builder 플러그인 설치 & Beaver Themer
4. 다음을 사용하여 디렉토리 웹사이트를 디자인하세요: Beaver Builder 플러그인

The Beaver Builder 테마는 GeoDirectory 플러그인 및 Beaver Builder 플러그인과 함께 사용하면 유연한 온라인 디렉토리를 만드는 탁월한 방법입니다. 이 조합을 활용하면 위치 기반 기능을 손쉽게 추가하고, 레이아웃을 자유롭게 커스터마이즈하며, 사용자 친화적인 경험을 위한 동적 콘텐츠를 포함할 수 있습니다.

이 시스템을 통해 웹 개발자와 디자이너는 특정 산업이나 더 넓은 커뮤니티의 요구에 맞는 고품질 디렉토리 웹사이트를 구축할 수 있습니다.
이를 수행하는 방법의 세부 사항을 살펴보겠습니다.

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

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

테마 및 플러그인 설치.

1. Beaver Builder 테마 설치

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

https://www.wpbeaverbuilder.com 에 접속하여 Beaver Builder Pro 플러그인(Beaver 테마 및 Beaver Themer 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

해당 제품들을 내 계정 페이지로 연결되는 링크를 설정해 보겠습니다.

다음으로 이동하세요 외관 >> 테마 포함)을 구매하세요.

새로 추가를 선택하고, Beaver 테마와 자식 테마를 설치한 후 활성화하세요. 자식 Beaver 테마를 설치합니다.

2. 설치하기 Beaver Builder Pro & Beaver Themer 플러그인

Beaver Builder Pro와 Beaver Themer는 웹사이트 구축 및 커스터마이징 경험을 향상시키기 위해 설계된 강력한 WordPress 플러그인입니다.

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

플러그인 zip 파일을 업로드하고 두 플러그인을 하나씩 활성화하세요.

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

3. GeoDirectory 설치

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

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

4. 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 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

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

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

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

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

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

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

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

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

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

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

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

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

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

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

새 페이지를 만들거나 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.

타이포그래피

이제 웹사이트 텍스트 폰트와 크기를 위한 타이포그래피를 설정해 보겠습니다. 모든 사이트 텍스트에 적용될 글꼴 패밀리, 글꼴 굵기, 글꼴 크기를 전역으로 설정하고 있습니다.

외모 > 사용자 정의 > 일반 > 레이아웃으로 이동합니다. 다음 설정을 지정합니다
너비: 전체 너비
콘텐츠 너비: 1200

외모 > 사용자 정의 > 일반 > 텍스트로 이동합니다.

글꼴 패밀리: Outfit
글꼴 두께: 라이트
글꼴 크기: 18
줄 높이: 1.45

콘텐츠

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

이를 위해 홈페이지에 히어로 헤더가 필요합니다.

먼저 Beaver Builder 실행을 클릭하여 Beaver Builder에서 홈페이지를 편집해 보겠습니다.

이제 오른쪽 상단의 플러스 아이콘을 클릭하여 행 컨테이너를 드래그하세요.

행 스타일 탭에서 설정
너비: 전체 너비
콘텐츠 너비: 고정
최소 높이: 600px
배경 유형: 사진
배경 사진 소스: 미디어 라이브러리
위치: 가운데
크기: 채우기

이제 헤더와 GD > Seach 블록을 이 행 위로 드래그해 보겠습니다.

이제 빈 행 컨테이너를 하나 추가하고, GD > Categories 블록을 그 안에 추가하겠습니다.

다음과 같이 GD > Categories 블록 설정을 지정하세요
디자인 유형: 이미지 배경
행 항목: 4
활성화 the 카테고리 이미지 사용 옵션

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

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

이제 1열 레이아웃으로 빈 행을 추가하겠습니다.

다음 설정으로
색상: rgba(234,240,255,0.64)
너비: 전체 너비
콘텐츠 너비: 고정

이제 헤더 요소를 추가하겠습니다
텍스트: 최근 비즈니스 목록
크기: 42
정렬: 가운데

다음으로, 이 항목의 일부 설정을 편집하겠습니다 GD > Listings 블록.

다음을 설정하겠습니다: 정렬: 최신
그리드: 4

다음 설정으로 행 컨테이너를 추가하겠습니다.
너비: 전체 너비
콘텐츠 너비: 전체 너비

Add the GD > Map 블록을 그 안에 추가하고 설정은 기본값으로 유지합니다.

이제 마지막으로 하단에 CTA가 필요합니다.

두 열 레이아웃과 다음 설정으로 빈 행을 추가하겠습니다.
너비: 전체 너비
콘텐츠 너비: 고정

왼쪽 열에는 제목과 콘텐츠를 추가하고, 오른쪽 열에는 사용자를 목록 추가 페이지로 이동시키는 버튼을 추가하겠습니다.

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

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

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

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

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

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

목록 페이지 레이아웃은 왼쪽에 목록을, 오른쪽에는 목록의 정확한 위치를 보여주는 고정 지도를 배치하기로 결정했습니다.

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

리스팅 페이지

Beaver Builder > Themer Layout > 새로 추가로 이동하여 선택하세요
제목: GD Archive
유형: Themer Layout
레이아웃: Archive
클릭하세요 테마 레이아웃 추가 버튼

다음 페이지에서 선택하세요 위치: 장소 아카이브.

이 설정을 저장한 후, Launch Beaver Builder를 클릭하세요. 1열 레이아웃의 빈 행을 추가할 것입니다.
너비: 전체 너비
배경색: #577196

여기에 아카이브 제목을 추가할 것입니다.

이제 2열 레이아웃의 행을 추가해 보겠습니다.
너비: 전체 너비
콘텐츠 너비: 전체 너비

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

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

GD > Map의 모든 설정은 기본값으로 유지합니다. 높이를 지정해 보겠습니다. 저는 높이를 100vh.

다음 스타일을 테마 커스터마이저에서 추가하세요.  외관 => 사용자 정의 => CSS 추가.

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

이후, 리스팅 아카이브 페이지가 완성됩니다.

또 다른 옵션은 GD > Simple Archive 블록을 사용하는 것입니다. 이 방법은 다음 튜토리얼에서 설명합니다: Elementor로 디렉터리 웹사이트 만들기.

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

검색 페이지

다음으로 이동하세요 Beaver Builder > Themer Layout > Add new 를 선택하고
제목: GD Search
유형: Themer Layout
Add 버튼을 클릭하세요. Theme Layout 버튼

다음의 모든 콘텐츠를 복사하세요. GD Archive Themer Layout 템플릿의 내용을 복사하여 GD Search Themer Layout 템플릿에 붙여넣으세요.

이제 다음으로 이동하세요 Geodirectory > Settings > General > Pages 에서 Search Page Themer Layout 에서 GD Search를 선택하세요

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

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

Beaver Builder > Themer Layout > 새로 추가로 이동하여 선택하세요
제목: GD Details
유형: Themer Layout
레이아웃: 단일
클릭하세요 Themer Layout 추가 버튼을 클릭하여 편집해 보겠습니다.

다음 페이지에서 선택하세요 위치: 모든 장소

이 설정을 저장한 후, Launch Beaver Builder를 클릭하세요. 1열 레이아웃의 빈 행을 추가할 것입니다.
너비: 전체 너비
콘텐츠 너비: 전체 너비
패딩: 0

먼저, 리스팅 상세 페이지 상단에 이미지 슬라이더를 추가하세요.

다음 항목을 드래그하여 GD > Post Image 블록을 이 컨테이너에 다음 설정으로 드래그합니다.

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

이제 두 개의 열 레이아웃이 있는 행을 추가해 보겠습니다.

이제 왼쪽 열에 필요한 모든 GD 상세 페이지 단축 코드를 개별적으로 추가해 보겠습니다.

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

추가할 항목 GD > Author Action 및 GD > Output Location 블록을 추가합니다.

완료 후, 리스팅 상세 페이지가 완성됩니다.

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

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

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

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

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

단계별 접근 방법은 이 튜토리얼을 참고하세요: 튜토리얼: 디렉토리 웹사이트 만드는 방법.

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

가능성은 무한합니다.

Neve 테마와 Otter 블록 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 단계별 가이드:

1. 설치하기 Neve 테마
2. GeoDirectory 설치 및 설정
3. Otter 플러그인 설치
4. Neve 테마와 Gutenberg를 사용하여 디렉토리 웹사이트 디자인 편집기

Neve 테마는 GeoDirectory 플러그인 및 Otter 플러그인과 함께 사용할 때, 정교한 온라인 디렉토리를 개발하기 위한 포괄적이고 유연한 플랫폼을 제공합니다.

이 조합을 활용하면 사용자는 위치 기반 기능을 손쉽게 통합하고, 레이아웃 구성을 세밀하게 조정하며, 동적 콘텐츠 블록을 추가하여 사용자 친화적이고 몰입감 있는 인터페이스를 완성할 수 있습니다.

이 통합 시스템은 웹 개발자와 디자이너가 특정 업계 요구 사항이나 더 넓은 커뮤니티의 니즈를 충족하는 최고 수준의 디렉토리 웹사이트를 구축할 수 있도록 지원합니다.

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

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

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

테마 및 플러그인 설치.

1. 설치하기 Neve 테마

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

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

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

2. 설치하기 Otter 플러그인

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

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

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

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

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

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 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

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

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

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

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

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

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

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

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

로고

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

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

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

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

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

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

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

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

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

내비게이션 메뉴

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

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

타이포그래피

이제 웹사이트 텍스트 폰트와 크기를 위한 타이포그래피를 설정해 보겠습니다. 모든 사이트 텍스트에 적용될 글꼴 패밀리, 글꼴 굵기, 글꼴 크기를 전역으로 설정하고 있습니다.

외모 > 커스터마이저 > 타이포그래피 > 일반 > 본문으로 이동합니다. 다음을 설정합니다: 
글꼴 패밀리: Inter 
추가 폰트 변형: Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
변환: 없음
굵기: 400
글꼴 크기: 16
줄 높이: 1.7
글꼴 패밀리: Arial, Helvetica, sans-serif

모양 > 레이아웃 > 페이지에서 헤더 레이아웃: 커버

콘텐츠

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

이를 위해 홈페이지에 히어로 헤더가 필요합니다. 다음에서 제공하는 행 블록을 추가해 보겠습니다. WordPress.

다음을 추가할 것입니다. 섹션 블록 전체 크기 레이아웃으로.

수직 정렬: 가운데 정렬(스크린샷 참조)을 섹션 블록 설정에서 선택하고 섹션 구조 설정을 다음과 같이 지정합니다.
최소 높이: 사용자 지정
사용자 지정 높이: 600

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

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

배경 오버레이 설정을 선택하고
오버레이 불투명도: 50
배경 오버레이 색상: #000000 (검정)

히어로 이미지 오버레이 색상 설정

히어로 이미지를 더 어둡게 만들었으니 이제 텍스트를 추가할 수 있습니다.

이미지 중앙을 클릭하세요(더하기 버튼이 희미하게 보입니다). 그러면 새 블록을 선택할 수 있습니다. Section 블록을 추가하세요.
이미지 중앙을 다시 클릭하고Advanced Heading 블록.
텍스트 블록에 다음과 같은 텍스트를 추가하세요:Find The Best Restaurant Philadelphia”.

블록 선택 H1 으로 HTML Tag. 텍스트 정렬 가운데. (스크린샷에 표시된 대로.)

제목 블록의 Advanced Heading 블록 스타일 설정
글꼴 크기: 48
글꼴 변환: 첫 글자 대문자
텍스트 색상: #FFFFFF

이제 Neve 디렉토리 웹사이트의 히어로 섹션에 검색 양식을 추가할 수 있습니다.
제목 섹션의 오른쪽 하단 모서리에 있는 + 버튼을 클릭하여 새 섹션을 추가합니다.
홈페이지 헤더에 GD 검색을 추가하려면, 히어로 컨테이너 안으로 GD > Search 블록을 드래그하세요.

이제 상위 항목에 다음 설정을 추가해 보겠습니다. Section 블록.
제목 블록의 구조 설정 설정
최대 콘텐츠 너비: 1170
수평 정렬: 가운데

이제 히어로 섹션 아래에 여백을 추가하겠습니다. 스페이서 블록을 사용하여 높이 = 40.

이제 홈페이지에 몇 가지 필수 섹션을 더 추가할 시간입니다. 플러스 아이콘을 클릭하여 섹션 블록 전체 크기 레이아웃으로 추가하세요.

다음을 변경하세요 섹션 블록 설정을 변경하고 섹션 구조 설정을 다음으로 업데이트하세요
최대 콘텐츠 너비: 1170 및 수평 정렬: 가운데.

이제 히어로 헤더 아래에 빈 섹션을 추가하고 GD > Categories 블록을 추가합니다.

블록 옵션을 다음과 같이 설정하세요
디자인 유형: 이미지 배경
행 항목: 4
카테고리 이미지 사용 활성화

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

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

이제 웹사이트의 세 번째 섹션을 추가해 보겠습니다. 이 섹션의 이름을최근 비즈니스 목록“.
플러스 아이콘을 클릭하고 'Advanced Heading'을 검색한 후 추가되면 다음과 같이 텍스트 설정을 구성하세요: HTML 태그를 H3 로 설정하고 정렬을 가운데.

추가하세요 GD > Listing 블록을 추가하려면 플러스 아이콘을 클릭한 후 블록 설정에 접근합니다. 반드시 활성화 the 고급 설정 표시 옵션.

블록의 스타일 탭에서 다음을 업데이트하세요. 레이아웃: 그리드 보기 (4열).

표시할 게시물 수 변경: 8로 설정하고 '위치 필터 활성화' 옵션을 체크한 후 정렬 기준: Latest.

이제 콘텐츠와 너비가 100인 빈 컬럼을 추가해 보겠습니다.

Add the GD > Map 블록을 추가하고 설정은 기본값으로 유지하세요.

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

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

리스팅 페이지

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

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

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

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

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

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

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

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

페이지 설정을 다음과 같이 지정합니다
사이드바 레이아웃: 사이드바 없음
푸터 위젯: 기본
콘텐츠 컨테이너: 전체 너비

이제 Section 블록을 추가하고 1:1 레이아웃.

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

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

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

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Neve 테마는 GD > 아카이브 페이지 제목과 약간의 호환성 문제가 있기 때문에, 이 페이지 상단에 제목 컨테이너를 만들겠습니다.

빈 섹션을 드래그하여 블록 설정을 다음과 같이 지정합니다
배경: #444444
패딩: 50 px, 20 px, 50 px, 20 px
카테고리 목록을 표시하기 위해 아카이브 제목 블록을 그 안에 추가합니다.

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

또 다른 옵션은 이 튜토리얼에서 설명하는 GD > Simple Archive 블록을 사용하는 방법입니다. Elementor로 디렉토리 웹사이트 구축하기.

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

검색 페이지

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

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

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

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

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

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

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

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

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

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

이제 하나 더 섹션 블록 을 아래에 추가하겠습니다 2:1 레이아웃.

다음을 변경하겠습니다 섹션 블록 설정을 변경하고 섹션 구조 설정을 다음으로 업데이트하세요 최대 콘텐츠 너비: 1170 및 수평 정렬: 가운데

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

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

이제 클래스( single-gd-section )를 이 전체 부모 섹션에 추가하여 마무리 작업을 하겠습니다.

마지막으로, 다음 CSS를 테마 커스터마이저에서 추가하세요. 외관 => 사용자 정의 => CSS 추가

.single-gd-section{
	max-width:1170px;
	margin:auto;
}

이 작업을 완료한 후, 저희 리스팅 상세 페이지 가 완성되었습니다.

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

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

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

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

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

지금 바로 이 상세 가이드로 사이트 구축을 시작하세요: 디렉토리 웹사이트 구축 가이드. 이 튜토리얼은 모든 테마 또는 페이지 빌더에 맞게 응용할 수 있는 범용 가이드입니다.

가능성은 무한합니다.

WordPress용 Ollie 테마를 활용해 디렉토리 웹사이트를 구축하는 단계별 가이드입니다:

1. Ollie 테마 설치
2. GeoDirectory 설치 및 설정
3. OllieWP 테마와 Gutenberg를 사용하여 디렉토리 웹사이트 디자인 편집기

GeoDirectory는 Ollie와 같은 FSE 블록 테마와 완벽하게 호환되므로, 이 경우 페이지 빌더나 추가 블록 플러그인이 필요하지 않습니다.

GeoDirectory는 어떤 테마나 페이지 빌더를 사용해서도 역동적인 온라인 디렉토리를 손쉽게 구축할 수 있는 강력하고 유연한 솔루션을 제공합니다.

이 튜토리얼에서는 OllieWP 테마와 GeoDirectory 플러그인을 함께 사용하여 디렉토리 웹사이트를 구축하는 방법을 알아보겠습니다.

이 두 가지를 조합하면 위치 기반 기능을 원활하게 통합하고, 레이아웃 디자인을 맞춤 설정하며, 인터랙티브 콘텐츠 블록을 추가하여 직관적이고 매력적인 사용자 경험을 제공할 수 있습니다.

이 통합 접근 방식을 통해 웹 개발자와 디자이너는 특정 틈새 시장이나 폭넓은 커뮤니티 요구에 맞춘 전문가 수준의 디렉토리 사이트를 손쉽게 구현할 수 있습니다.

자세한 방법을 살펴보겠습니다.

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

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

테마 및 플러그인 설치.

1. OllieWP 테마 설치

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

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

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

2. GeoDirectory 설치

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

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

3. 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 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

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

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

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

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

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

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

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

다음으로 외관 > 편집기 > 페이지 > 홈 로 디렉토리 웹사이트 디자인을 시작하고 편집 버튼을 클릭합니다.

로고

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

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

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

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

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

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

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

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

내비게이션 메뉴

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

상단의 메뉴를 클릭하고 기존 메뉴를 모두 제거합니다.

이제 두 열 레이아웃의 컬럼 블록을 추가해 보겠습니다.

왼쪽 열에 사이트 로고 블록을 추가합니다.

메인 헤더 컨테이너를 클릭한 후 블록 설정에서 배경: #FFFFF

오른쪽 열에 탐색 메뉴를 추가합니다.

다음과 같은 주요 탐색 링크와 몇 가지 하위 탐색 링크를 추가했습니다:

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

로그인/로그아웃 블록은 사용자의 로그인 상태에 따라 로그인 및 로그아웃 링크만 표시합니다.

콘텐츠

저는 OllieWP 및 Gutenberg 블록.

다음으로 이동하세요 외관 > 편집기 > 디자인 > 페이지 그리고 홈 페이지 편집 버튼을 클릭합니다.

홈페이지에 히어로 헤더가 필요합니다. 이를 위해 이 페이지의 모든 콘텐츠를 제거하고 커버 블록.

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

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

이 커버 블록에 다음 설정을 추가합니다

콘텐츠: 1200
와이드: 100
불투명도: 50
패딩 및 마진: 0
커버의 최소 높이: 600

이제 이 커버 블록 안에 다음을 사용하여 헤더 태그를 추가해 보겠습니다
텍스트: 필라델피아 최고의 레스토랑 찾기

헤더 태그에 추가 클래스( heading-text-center )를 추가하여 스타일을 적용합니다.

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

.heading-text-center{
    text-align:center;
}

이제 다음을 추가해 보겠습니다 GD > search 블록을 이 제목 아래에 추가합니다.

그 아래에 높이가 다음과 같은 스페이서 블록을 사용하여 공간을 추가해 보겠습니다: 60

이제 빈 열을 추가하고 GD > Categories 블록을 그 안에 넣겠습니다.

블록 옵션을 다음과 같이 설정하세요
디자인 유형: 이미지 배경
행 항목: 3
카테고리 이미지 사용 활성화

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

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

히어로 섹션 아래에 하나 더 열 을 추가하려면 플러스 아이콘을 클릭하고 GD > Listings 블록을 추가하세요.

이제 이 항목에서 몇 가지 필요한 설정을 진행하겠습니다. GD > Listings 블록. 정렬 설정: 최신순으로 지정합니다.

이제 콘텐츠와 너비가 100인 빈 컬럼을 추가해 보겠습니다.

Add the GD > Map 블록을 추가하고 설정은 기본값으로 유지합니다.

푸터를 클릭하고 OllieWP 이미 몇 가지 미리 만들어진 푸터 템플릿을 제공합니다. 그 중 하나를 선택하겠습니다.

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

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

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

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

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

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

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

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

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

리스팅 페이지

외모 > 편집기 > 디자인 > 템플릿으로 이동하여 편집을 클릭합니다. GD Archive 페이지 템플릿

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

이제 빈 행을 추가해 보겠습니다.

이 안에 두 개의 컬럼 레이아웃을 추가합니다.

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

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

다음에 대한 모든 설정을 기본값으로 유지합니다. GD > Map. 높이를 지정해 보겠습니다. 저는 높이를 다음과 같이 설정하기로 했습니다. 100vh.

다음 스타일을 테마 커스터마이저에서 추가하세요.  외관 => 사용자 정의 => CSS 추가

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

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

또 다른 옵션은 이 튜토리얼에서 설명하는 GD > Simple Archive 블록을 사용하는 방법입니다. Elementor로 디렉토리 웹사이트 구축하기.

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

검색 페이지

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

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

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

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

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

GD Detail 페이지를 편집하고 커스터마이즈하려면 외모 > 편집기 > 디자인 > 템플릿 그리고 편집을 클릭하세요. GD Single 페이지 템플릿.

빈 열 추가

먼저 리스팅 상세 페이지 상단에 이미지 슬라이더를 추가하겠습니다. 다음 GD > Post Image 블록을 이 컨테이너에 다음 설정으로 드래그합니다.

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

이제 빈 행을 추가해 봅시다.
콘텐츠: 1200
와이드: 100

그 안에 두 개의 열을 추가합니다.

이제 왼쪽 열에 필요한 GD 상세 페이지 숏코드를 하나씩 추가해 봅시다.

여기에는 GD > 단일 택소노미, GD > 단일 탭, GD > 단일 이전/다음이 포함됩니다.

오른쪽 열에는 GD > Author Action 및 GD > Output Location 블록.

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

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

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

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

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

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

다음 조언으로 디렉토리 웹사이트 프로젝트를 시작해 보세요: 지금 바로 디렉토리 웹사이트를 시작하세요.

가능성은 무한합니다.

Generatepress 테마와 Generatepress 블록 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 단계별 가이드입니다:

1. Generatepress 테마 설치
2. GeoDirectory 설치 및 설정
3. 설치하기 GenerateBlocks 플러그인
4. 다음을 사용하여 디렉토리 웹사이트를 디자인하세요: Generatepress 테마와 Gutenberg 편집기

Generatepress 테마를 GeoDirectory 플러그인 및 GenerateBlocks 플러그인과 함께 사용하면 동적인 온라인 디렉토리를 구축하기 위한 강력하고 유연한 솔루션을 제공합니다.

이 세 가지 조합을 통해 사용자는 위치 기반 기능을 원활하게 통합하고, 레이아웃 디자인을 맞춤 설정하며, 인터랙티브 콘텐츠 블록을 추가하여 직관적이고 매력적인 사용자 경험을 보장할 수 있습니다.

이 통합 접근 방식을 통해 웹 개발자와 디자이너는 특정 틈새 시장이나 폭넓은 커뮤니티 요구에 맞춘 전문가 수준의 디렉토리 사이트를 손쉽게 구현할 수 있습니다.

자세한 방법을 살펴보겠습니다.

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

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

테마 및 플러그인 설치.

1. Generatepress 테마 설치

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

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

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

2. 설치 GenerateBlocks 플러그인

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

이 플러그인은 맞춤형 GenerateBlocks 을 제공하며, 기본 블록보다 뛰어나고 페이지 템플릿 디자인에 도움이 됩니다.

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

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

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

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%의 디렉토리에 충분히 활용할 수 있습니다.

기본 도시 설정

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

기본 도시를 뉴욕으로 설정합니다.

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

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

추가 기능 설정

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

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

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

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

더미 데이터 추가

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

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

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

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

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

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

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

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

로고

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

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

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

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

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

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

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

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

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

내비게이션 메뉴

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

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

타이포그래피

이제 웹사이트 텍스트 폰트와 크기를 위한 타이포그래피를 설정해 보겠습니다. 모든 사이트 텍스트에 적용될 글꼴 패밀리, 글꼴 굵기, 글꼴 크기를 전역으로 설정하고 있습니다.

외관 > 사용자 정의 > 타이포그래피 > 본문으로 이동합니다. 글꼴 패밀리: Poppines 카테고리: sans-serif 및 변형: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

콘텐츠

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

홈페이지에 히어로 헤더가 필요합니다. 이를 위해 GenerateBlocks 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

블록 정렬을 다음으로 설정합니다 와이드.

그리드 설정에서 레이아웃 설정을 다음으로 지정하세요
사이드바 레이아웃: 사이드바 없음
푸터 위젯: 기본
콘텐츠 컨테이너: 전체 너비
요소 비활성화: 콘텐츠 제목
그리드 항목 너비: 100

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

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

간격 설정에서 패딩을 100px 상단 및 하단 여백에 적용합니다.

이제 헤더 태그를 추가하여 텍스트를 입력해 보겠습니다.

텍스트:: 최고의 레스토랑 을 Philadelphia에서 찾아보세요
크기: 작게
모양: 작은 굵게
텍스트 색상: #FFFFFF

동일한 그리드 안에 GD > Search 블록을 추가하고 위아래 패딩을 200px로 설정합니다.

이제 히어로 헤더 아래에 빈 그리드를 추가하고 해당 그리드에 GD > Categories 블록을 추가합니다.

블록 옵션을 다음과 같이 설정하세요
디자인 유형: 이미지 배경
행 항목: 3
카테고리 이미지 사용 활성화

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

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

Generateblocks에서 그리드를 콘텐츠 레이아웃으로 만드는 작동하는 설정을 찾지 못했습니다. 카테고리 상위 그리드에 home-container 클래스를 추가합니다.

히어로 섹션 아래에 하나 더 그리드 을 추가하려면 플러스 아이콘을 클릭하고 GD > Listings 블록을 추가하세요.

이제 이 항목에서 몇 가지 필요한 설정을 진행하겠습니다. GD > Listings 블록. 정렬 설정: 최신순으로 지정합니다.

카테고리 블록과 마찬가지로, 최근 목록 상위 그리드에 home-container 클래스를 추가합니다.

이제 빈 그리드를 추가하고 그 안에 GD > Map 블록을 추가한 다음 설정을 기본값으로 유지합니다.

다른 것들과 마찬가지로, home-container 클래스를 GD > 맵 부모 그리드에 추가합니다.

마지막으로, 다음 CSS를 테마 커스터마이저에서 추가하세요. 외관 => 사용자 정의 => CSS 추가

.home-container{
	max-width:1200px;
	margin:auto;
}

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

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

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

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

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

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

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

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

리스팅 페이지

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

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

페이지 설정을 다음과 같이 지정합니다.
사이드바 레이아웃: 사이드바 없음
푸터 위젯: 기본
콘텐츠 컨테이너: 전체 너비

이제 두 열로 구성된 빈 그리드를 추가합니다.

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

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

다음에 대한 모든 설정을 기본값으로 유지합니다. GD > Map. 높이를 지정해 보겠습니다. 저는 높이를 다음과 같이 설정하기로 했습니다. 150vh.

아카이브 페이지 레이아웃을 전체 너비로 만들기 위해, 테마 커스터마이저에서 다음 CSS를 추가합니다. 외관 => 사용자 정의 => CSS 추가

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

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

또 다른 옵션은 이 튜토리얼에서 설명하는 GD > Simple Archive 블록을 사용하는 방법입니다. Elementor로 디렉토리 웹사이트 구축하기.

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

검색 페이지

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

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

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

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

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

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

이 템플릿에서는 Geodirectory가 생성한 기본 콘텐츠를 이미 확인할 수 있습니다.

이 기본 콘텐츠를 모두 제거하고 새 그리드를 추가합니다.

먼저 리스팅 상세 페이지 상단에 이미지 슬라이더를 추가하겠습니다. 다음 GD > Post Image 블록을 이 컨테이너에 다음 설정으로 드래그합니다.

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

이제 아래에 두 열 레이아웃으로 구성된 빈 그리드 블록을 하나 더 추가합니다.

블록 설정에서 이 그리드에 클래스(single-details-container )를 추가합니다.

이제 왼쪽 열에 필요한 GD 상세 페이지 숏코드를 하나씩 추가해 봅시다.

여기에는 GD > 단일 택소노미, GD > 단일 탭, GD > 단일 이전/다음이 포함됩니다.

오른쪽 열에는 GD > Author Action 및 GD > Output Location 블록.

마지막으로, 다음 CSS를 테마 커스터마이저에서 추가하세요. 외관 => 사용자 정의 => CSS 추가

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

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

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

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

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

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

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

다음의 핵심 전략으로 웹사이트를 한 단계 높이세요: 디렉토리 웹사이트 구축을 위한 핵심 전략.

가능성은 무한합니다.

Divi 테마로 디렉토리 웹사이트를 만드는 방법?

Divi WordPress 테마를 사용하여 디렉토리 웹사이트를 구축하는 가장 쉬운 방법은 다음 3단계를 따르는 것입니다:

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

비즈니스 디렉토리를 단계별로 만드는 방법에 대한 자세한 내용을 설명하기 전에, 2023년 9월 11일에 Divi 테마 개발사인 Elegantthemes 공식 블로그에 게재된 글을 하나 인용하고자 합니다.

GeoDirectory는 Divi 테마로 비즈니스 디렉토리 웹사이트를 만들기 위한 최고의 WordPress 플러그인일까요?

Elegant Themes 블로그에는

GeoDirectory 플러그인이 순위에서 1위를 차지했습니다. 본문에서 저자는 왜 GeoDirectory가 디렉토리 웹사이트를 만들기 위한 최고의 WordPress 플러그인인지.

이 글을 꼭 읽어보시길 권장합니다. 아래는 해당 글의 FAQ 섹션에서 발췌한 내용입니다.

WordPress에서 가장 좋은 디렉토리 플러그인은 무엇인가요?
GeoDirectory는 최고의 WordPress 디렉토리 플러그인입니다. 커스터마이징 가능한 리스팅, 고급 검색, 사용자 리뷰, Google Maps 연동, 수익화 옵션, 그리고 뛰어난 테마/플러그인 호환성을 제공합니다. GeoDirectory를 사용하면 기능이 풍부한 디렉토리 웹사이트를 손쉽게 만들 수 있습니다.

기사 FAQ 섹션에서 발췌: 7 Best WordPress Directory Plugins in 2023 (Ranked).

2013년에 제가 처음 만든 WordPress 사이트는 전용 플러그인 없이 구축한 비즈니스 디렉토리였습니다.

WP GeoDirectory의 창시자인 Paolo Tajani와 Stiofan O'Connor가 Templatic의

그들은 성능을 개선하고, 이후 10년여 전에 GeoTheme을 선보였습니다.

이후 진화하는 WordPress 생태계에 적응하고 자신들의 경험을 바탕으로, 그들은 테마 개발에서 방향을 전환했습니다.

이 기반을 바탕으로, 그들은 거의 모든 종류의 디렉토리 사이트 제작을 가능하게 하는 GeoDirectory 플러그인을 개발했습니다.

저는 디렉토리 웹사이트 제작을 지원하는 WordPress 플러그인과 테마 대부분을 테스트해 보았습니다.

앞서 언급한 경험과 저의 11년 경력 모두, WP GeoDirectory가 이 목적에 가장 적합한 플러그인임을 확인해 줍니다.

Divi 테마와 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 만드는 방법에 대한 단계별 가이드

GeoDirectory와 Divi 테마를 활용하여 디렉토리 웹사이트를 구축하는 방법을 자세히 살펴보겠습니다.

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

목차

• Divi 테마로 디렉토리 웹사이트를 만드는 방법?
  • GeoDirectory는 Divi 테마로 비즈니스 디렉토리 웹사이트를 만들기 위한 최고의 WordPress 플러그인일까요?
  • Divi 테마와 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 만드는 방법에 대한 단계별 가이드
• 테마 및 플러그인 설치.
  • 1. Divi 테마 설치
  • 2. GeoDirectory 설치
  • 3. GeoDirectory 설치 마법사
    • 지도 시스템 선택 (Google Maps 또는 OpenStreetMap)
    • 기본 도시 설정
    • 추가 기능 설정
    • 더미 데이터 추가
• Divi 디렉토리 웹사이트 디자인
  • 1. Divi 디렉토리 웹사이트 홈 페이지 디자인
    • 로고
    • 내비게이션 메뉴
    • 콘텐츠
    • 글로벌 푸터 만들기
  • Divi 디렉토리 웹사이트 목록 및 검색 페이지 디자인
    • 검색 페이지
    • 단일 목록 페이지
  • Divi 디렉토리 사이트 세부 조정
  • 색상 및 타이포그래피
• DiviGeo로 Divi 디렉토리의 잠재력을 극대화하세요
• Divi 디렉토리 웹사이트에 프리미엄 기능 추가하기

테마 및 플러그인 설치.

1. Divi 테마 설치

먼저 Divi 테마를 설치해야 합니다

외모 >> 테마 >>로 이동하세요

새로 추가, 테마 업로드, 설치, Divi 테마 활성화를 선택하세요.

2. GeoDirectory 설치

이제 GeoDirectory 플러그인을 설치해야 합니다.

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

완료되었습니다. Divi 테마와 GeoDirectory 플러그인이 활성화되면 다음 단계로 넘어갈 수 있습니다.

3. GeoDirectory 설치 마법사

Divi Builder의 간편함을 높이 평가하신다면, GeoDirectory 플러그인에 내장된 설정 마법사도 분명 마음에 드실 것입니다.

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

이제 설정 마법사를 완료하여 구성해야 합니다. 마법사의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택할 수 있습니다. Google Maps와 Open Street Maps(API 키가 필요하지 않습니다)입니다.

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

OpenStreetMap을 선택하고 계속을 클릭하세요.

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

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

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

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

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

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

기본 도시 설정

그런 다음 기본 위치를 설정합니다. 이는 디렉토리가 생성되는 도시입니다. GeoDirectory는 Philadelphia를 기본 도시로 사용합니다.

이 튜토리얼에서 선택한 니치를 고려하여, 기본 도시를 크로아티아의 Split으로 설정하겠습니다.

지도 마커를 드래그하여 원하는 위치를 설정하거나, "고급 설정 표시"를 클릭하여 고급 설정을 사용할 수 있습니다.

두 개 이상의 도시에 리스팅을 추가해야 하는 경우에는 Location Manager 애드온.

추가 기능 설정

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

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

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

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

더미 데이터 추가

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

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

Divi 디렉토리 웹사이트 디자인

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

1. Divi 디렉토리 웹사이트 홈 페이지 디자인

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

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

다음으로 설정(Settings) > 읽기(Reading) > 홈페이지 설정 을 선택하고 홈을 선택하세요.

게시물 페이지는 나중에 선택하겠습니다.

로고

초기 로고를 위해 디자이너에게 비용을 지출하지 마세요.

시장 적합성을 평가하기 전에 많은 투자를 하는 실수를 범하는 경우가 많습니다.

빠르고 합리적인 가격으로 고품질 디자인을 원한다면 Canva 같은 앱을 활용하세요.

MVP의 경우, Canva로 디자인한 로고로도 충분합니다.

처음부터 완벽할 필요는 없으며, 프로젝트가 성공하면 로고를 개선할 수 있습니다.

평범한 로고가 프로젝트 실패의 원인이 되지는 않는다는 점을 기억하세요.

로고 디자인을 완료한 후 Divi > Theme Options로 이동하여 업로드를 클릭하고 Canva.com에서 만든 로고를 선택하세요.

자르기를 건너뛰거나 (또는 필요에 따라 이미지를 자르세요) 화면 왼쪽 상단의 변경 사항 저장을 클릭하세요.

내비게이션 메뉴

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

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션에서 "기본 메뉴" 옵션을 선택할 수 있습니다.

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

총 12개의 링크를 추가했습니다:

1. 홈
2. 소개
3. 블로그
4. 계정
5. 프로필 ( 로그인한 사용자에게 표시)
6. 비밀번호 변경 ( 로그인한 사용자에게 표시)
7. 로그아웃 ( 로그인한 사용자에게 표시.)
8. 회원가입 ( 로그인하지 않음)
9. 로그인 (로그인하지 않은 사용자에게 표시)
10. 비밀번호를 잊으셨나요? (표시 대상: 로그인하지 않음)
11. 검색 페이지
12. 리스팅 추가

UserWP 엔드포인트의 링크는 동적입니다. 위의 괄호를 참조하세요.

콘텐츠

Divi 테마는 330개 이상의 완성된 레이아웃 팩을 제공합니다.

이 튜토리얼에서는 Divi 모듈의 스타일링이라는 번거로운 작업 없이도 매력적인 비즈니스 디렉토리를 만들 수 있는 바로 사용 가능한 레이아웃을 선택하겠습니다.

이 튜토리얼에서는 미리 만들어진 Charter Divi Layout Pack을 선택했습니다.

홈페이지로 이동하여 '비주얼 빌더 활성화'를 클릭한 다음 '레이아웃 찾아보기'를 클릭하세요.

미리 만들어진 레이아웃 라이브러리에서 'Charter Boat Landing Page'를 선택하고 '이 레이아웃 사용'을 클릭하세요.

두 번째 텍스트 모듈 뒤에 코드 모듈을 추가하고 단축코드 추가를 클릭하세요.

Divi는 Gutenberg 블록 사용을 지원하지 않지만, GeoDirectory 플러그인 개발팀이 단축코드 생성기를 구현해 두었습니다.

덕분에 Divi 코드 모듈을 사용하여 동적 위젯을 손쉽게 추가할 수 있습니다.

따라서 단축코드 생성기 기능은 Divi에서 디렉토리 웹사이트를 만들 때 유용한 도구입니다.

드롭다운 목록에서 "gd_search"(GD > Search)"를 선택하고 단축코드 복사를 클릭하세요.

복사된 숏코드가 클립보드에 있습니다. 복사된 코드를 코드 모듈에 붙여넣으세요. 그런 다음 체크 표시 아이콘을 클릭하세요.

첫 번째 텍스트 모듈의 콘텐츠를

콘텐츠 탭의 헤더 내용을 Yacht Delivery로 변경하세요. 디자인 탭에서 h1 헤더 글꼴 크기를 70px로 변경하고 체크 표시를 클릭하세요.

Remove the “Book a Trip” button module.

이제 히어로 섹션이 완성되었습니다.

다음 섹션에서는 미리 정의된 Divi 랜딩 페이지 템플릿을 사용하여 H2 헤더의 내용을

헤딩 아래의 텍스트 모듈을 삭제(금색 글꼴)하거나 내용을 직접 변경하세요. 저는 웹사이트 디자인을 더욱 흥미롭게 만들기 위해 Lorem Ipsum 단락을 그대로 두겠습니다.

사진과 텍스트가 있는 두 열 행을 삭제한 다음 코드 모듈이 포함된 새 행을 추가하세요. 추가할 때 검색 폼과 동일한 방식으로 'Add Shortcode'를 클릭하세요.

드롭다운 목록에서

아래와 같은 카테고리 컬럼 모양을 구현하기 위해 숏코드 생성기에서 변경한 옵션:

Filters 탭:
CPT당 최대 카테고리 표시 수: 3
표시: 빈 항목 숨기기
Card Design 탭:
디자인 유형: 이미지 배경
행 정렬: 가운데
카드 그림자: 크게
아이콘 / 이미지 탭:
표시: 카테고리 이미지 사용
이미지 크기: 크게

아래의 숏코드를 복사하여 코드 모듈에 붙여넣을 수도 있습니다.

생성된 숏코드:

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" 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"]

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

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

또한 이 튜토리얼에서 선택한 틈새 시장에 맞게 카테고리 이름도 변경했습니다.

다음 섹션을 사용하여 최신 항목을 표시하겠습니다.

"Our boats" 제목을 "Latest Yacht providers"로 변경하세요. 제목 아래 행을 삭제하고 Divi 코드 모듈이 포함된 새 섹션을 추가하세요.

검색 양식 및 카테고리와 마찬가지로, 최신 리스팅을 표시할 숏코드를 생성해야 합니다.

드롭다운 목록에서 "gd_listings "(GD > Listings)"을 선택하세요.

아래와 같은 모습을 구현하기 위해 숏코드 생성기에서 변경한 옵션:

Filters 탭:
표시할 게시물 수: 3
디자인 탭:
레이아웃: 그리드 보기 (3열)

아래의 숏코드를 복사하여 코드 모듈에 붙여넣을 수도 있습니다.

생성된 숏코드:[gd_listings post_type=

이 섹션은 필요하지 않으므로 삭제하세요.

다음 섹션은 CTA 섹션으로 사용됩니다. 텍스트를 "요트 배송 서비스를 제공하시나요?"로 변경하세요. 텍스트 모듈의 디자인 탭에서 h2 헤더의 크기를 60px로 변경하세요.

버튼 모듈 텍스트를 수정하여 리스팅 추가를 넣고 링크를 "/add-listing/places/"로 설정하세요.

다음 "FAQ" 섹션은 제거할 수 있지만, 프로젝트를 더 흥미롭게 만들기 위해 저는 제거하지 않겠습니다.

FAQ 섹션에는 비즈니스 디렉토리를 만들고 있는 틈새 시장과 관련된 콘텐츠를 채워 넣는 것을 권장합니다.

주제에 맞는 콘텐츠가 많을수록 검색 엔진에서 웹사이트 최적화에 유리합니다.

다음 섹션도 마찬가지로, 이 가이드에서는 제거하겠지만 검색 엔진 최적화에 활용할 수 있습니다.

더 나은 홈페이지 디자인을 위해 리뷰 섹션은 제거하지 않겠습니다. 원하시는 대로 하셔도 됩니다.

글로벌 푸터 만들기

Divi 디렉토리 웹사이트의 홈페이지가 완성되었습니다. 이제 사이트의 글로벌 푸터를 만들어 보겠습니다.

섹션을 라이브러리에 저장 아이콘을 클릭하고, 섹션 이름 필드에 "global-footer"를 입력한 후 라이브러리에 저장을 클릭하세요. 마지막으로, 화면 오른쪽 하단의 저장 버튼으로 홈페이지 레이아웃을 저장하세요.

Divi 라이브러리에 저장한 섹션을 삭제하고 프로젝트를 다시 저장하세요.

WordPress 대시보드로 이동한 후 Divi > Theme Builder를 클릭하고, 글로벌 푸터 추가를 클릭한 다음 글로벌 푸터 빌드를 선택하세요.

새 섹션을 삽입하고, 라이브러리에서 추가를 클릭한 후 이전에 만든 섹션을 선택하고 이 섹션 사용을 클릭하세요.

글로벌 푸터 섹션은 사진 모듈, 텍스트 모듈 4개, 소셜 아이콘 모듈로 구성되어 있습니다.

텍스트 모듈의 콘텐츠와 링크를 변경하세요. 저는 텍스트 모듈을 활용해 비즈니스 디렉토리의 카테고리를 웹사이트에 다시 표시하여 탐색을 더 쉽게 만들 것입니다.

소셜 미디어 팔로우 모듈에 적절한 링크를 입력하세요.

빈 섹션을 삭제하고 글로벌 푸터를 저장한 후, 화면 오른쪽 상단의 닫기 버튼을 클릭하세요. 

매우 중요: Divi 테마 빌더로 돌아가면 반드시 변경사항 저장 버튼을 클릭하세요.

디렉토리 웹사이트의 홈 페이지와 글로벌 푸터가 완성되었습니다.

Divi 디렉토리 웹사이트 목록 및 검색 페이지 디자인

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

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

GeoDirectory는 기본적으로 이 페이지들을 생성하지만, 이 튜토리얼에서는 기본 페이지에 소폭의 변경을 가할 것입니다.

지도와 동적 제목이 있는 텍스트 모듈을 추가해야 합니다.

WordPress 대시보드의 '모든 페이지' 탭으로 이동하여 'GD Archive' 페이지를 찾고, 'Divi로 편집'을 클릭한 후 기존 콘텐츠를 편집하세요.

텍스트 모듈을 삭제하고 코드 모듈 두 개를 추가하세요.

이제 카테고리나 최근 리스팅의 숏코드를 생성할 때와 동일한 방식으로 숏코드 생성기를 사용하세요.

드롭다운 목록에서 다음 숏코드를 순서대로 선택하여 복사하고 붙여넣으세요:

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

다음 숏코드를 코드 모듈에 직접 붙여넣을 수도 있습니다.

첫 번째 코드 모듈에는 지도를 담당하는 숏코드를 추가해야 합니다:

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

두 번째 코드 모듈:

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

[gd_notifications]

[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=”]

이제 Divi 코드 모듈 섹션 위에 Divi 제목 모듈이 포함된 새 섹션을 추가해야 합니다.

아카이브 페이지의 제목을 표시하려면 동적 콘텐츠 표시를 위한 Divi의 기본 제공 옵션을 사용합니다.

콘텐츠 탭에서 제목 필드 위에 마우스를 올린 후 오른쪽에 있는 동적 콘텐츠 사용을 클릭합니다. 드롭다운 목록에서 페이지/아카이브 제목을 선택합니다.

확인 표시를 클릭하고 GD 아카이브 Divi 레이아웃을 저장합니다.

검색 페이지

검색 페이지의 경우 비슷한 과정을 반복하지만, 푸터를 만들 때와 마찬가지로 Divi Theme Builder를 사용합니다.

WordPress 대시보드에서 Divi > Theme Builder로 이동합니다. 새 템플릿 추가를 클릭한 후 새 템플릿 빌드를 클릭합니다.

템플릿 설정이 표시됩니다. 사용 위치 탭의 기타 섹션에서 GD Search Results Page를 선택하고 템플릿 만들기를 클릭합니다.

GD 검색 페이지를 담당하는 새 템플릿이 표시됩니다.

사용자 지정 본문 추가를 클릭한 후 기존 페이지 탭에서 라이브러리에서 추가를 클릭합니다. GD Archive Layout을 클릭한 다음 이 레이아웃 사용을 클릭합니다.

연필 아이콘을 클릭하여 사용자 지정 본문을 편집합니다. 별도로 작업할 내용은 없으며, 레이아웃을 저장하고 Divi Builder Theme에서 변경 사항을 저장하면 됩니다.

단 한 단계만 더 거치면 Divi로 구축한 디렉토리 웹사이트가 완벽하게 작동합니다.

단일 목록 페이지

단일 리스팅 페이지는 디렉토리 웹사이트에서 개별 항목을 표시하는 역할을 합니다.

GD 아카이브 및 GD 검색 페이지와 마찬가지로, 이 페이지 템플릿은 GD 설치 마법사에 의해 생성되었습니다.

WordPress 대시보드의 페이지 목록으로 이동하여 Divi GD Details 페이지를 편집하세요.

콘텐츠를 삭제하고 아래 이미지와 같이 2열 행을 추가하세요.

왼쪽 코드 모듈에는 게시물 콘텐츠와 갤러리를 담당하는 숏코드를 추가합니다.

오른쪽 코드 모듈에는 전화번호, 주소, 소셜 미디어 링크 등 게시물 세부 정보를 표시하는 숏코드를 추가합니다.

숏코드 생성기 사용 방법을 이미 알고 계시니, 다음 숏코드를 생성하여 복사한 후 붙여넣으세요. 아래에 바로 복사할 수 있는 숏코드도 준비해 두었습니다.

왼쪽 코드 모듈

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

오른쪽 코드 모듈

[gd_output_location location="detail" list_style="wrap"]

거의 다 왔습니다!

이제 GD 아카이브 페이지 템플릿을 만들 때와 마찬가지로, 동적 리스팅 제목을 표시하는 Heading 모듈을 추가해야 합니다.

코드 모듈 위 첫 번째 열에 새 Divi Heading 모듈을 추가하고, Dynamic title을 Page/Archive Title로 설정하세요.

체크 표시를 클릭하고 레이아웃을 저장하세요. 단일 게시물 페이지는 다음과 같이 표시됩니다.

Divi 디렉토리 사이트 세부 조정

Divi 디렉토리 웹사이트가 거의 완성되었습니다. 이제 몇 가지 옵션을 설정하여 웹사이트를 다듬어 보겠습니다.

색상 및 타이포그래피

이 웹사이트를 위해 선택한 메인 색상은 네이비 블루 계열입니다. 헥스 코드: #1e2d44.

Theme Customizer > General Settings > Layout settings로 이동하여 Divi 테마 강조 색상을 다음으로 변경하세요: #1e2d44.

이제 GeoDirectory 플러그인의 기본 색상을 변경해야 합니다.

테마 커스터마이저에서 AyeCode UI를 클릭하고 기본 색상을 다음과 같이 설정하세요: #1e2d44.

이제 전체 폰트를 설정해야 합니다. 테마 커스터마이저 > 일반 설정 > 타이포그래피로 이동하여 헤더 폰트를 Cinzel로 변경하세요.

보시다시피, WpGeodirectory에서 생성된 헤더의 폰트가 Cenzel 폰트로 변경되지 않았습니다.

테마 커스터마이저의 추가 CSS 탭으로 이동하여 다음 CSS 코드를 붙여넣으세요.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

BootStrap 버전 변경

WordPress 대시보드에서 설정 및 AyeCode UI를 클릭하고 버전을 BootStrap V5로 변경한 후 저장하세요.

Divi 디렉토리 웹사이트가 완성되었습니다.

DiviGeo로 Divi 디렉토리의 잠재력을 극대화하세요

이것은 GeoDirectory와 Divi로 디렉토리를 구축하는 간단한 방법입니다.

이 프로젝트를 혼자 진행하기 부담스럽거나 더 정교한 결과물이 필요하시다면, 주저하지 말고 저에게 연락해 주세요.

제 웹사이트를 방문하여 미리 디자인된 제품 중 하나를 구매하거나 Divi Business GeoDirectory 차일드 테마 DiviGeo, 또는 저를 고용하여 귀하의 요구에 맞춘 맞춤형 웹사이트를 제작하세요.

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

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

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

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

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

다음 팁으로 구축 과정에 대한 인사이트를 얻어보세요: 디렉토리 웹사이트 구축: 팁과 노하우.

가능성은 무궁무진합니다.

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

OceanWP 테마를 사용하여 디렉토리 웹사이트를 구축하는 단계별 가이드입니다:

1. OceanWP 테마 설치
2. GeoDirectory 설치 및 설정
3. Spectra Gutenberg Blocks Plugin 설치
4. OceanWP 테마와 Gutenberg를 사용하여 디렉토리 웹사이트 디자인하기 편집기

OceanWP 테마를 GeoDirectory 플러그인 및 Gutenberg 블록 플러그인과 함께 사용하면 역동적인 온라인 디렉토리를 제작하기 위한 강력하고 유연한 솔루션을 제공합니다.

이 세 가지 조합을 통해 사용자는 위치 기반 기능을 원활하게 통합하고, 레이아웃 디자인을 맞춤 설정하며, 인터랙티브 콘텐츠 블록을 추가하여 직관적이고 매력적인 사용자 경험을 보장할 수 있습니다.

이 통합 접근 방식을 통해 웹 개발자와 디자이너는 특정 틈새 시장이나 폭넓은 커뮤니티 요구에 맞춘 전문가 수준의 디렉토리 사이트를 손쉽게 구현할 수 있습니다.

자세한 방법을 살펴보겠습니다.

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

• 테마 및 플러그인 설치 및 설정
  1. OceanWP 테마 설치
  2. Spectra Blocks 설치
  3. GeoDirectory 설치
  4. GeoDirectory 설치 마법사
     • 지도 시스템 선택 (Google Maps 또는 OpenStreetMap)
     • 기본 도시 설정
     • 추가 기능 설정
     • 더미 데이터 추가
• OceanWP 디렉토리 웹사이트 디자인
  1. 홈 페이지 디자인
     • 로고
     • 내비게이션 메뉴
     • 타이포그래피
     • 콘텐츠
  2. 리스팅 및 검색 페이지 디자인
  3. 단일 리스팅 페이지 디자인

테마 및 플러그인 설치.

1. OceanWP 테마 설치

테마를 설치해야 합니다. 이 튜토리얼에서는 OceanWP 테마를 설치하겠습니다.

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

새로 추가를 선택하고, 설치, 및 활성화 OceanWP 테마.

2. Spectra Blocks 플러그인 설치

기본 Gutenberg 플러그인만으로는 템플릿을 스타일링하기에 충분하지 않으므로 Spectra Blocks 플러그인을 설치하겠습니다. (대신 Astra 테마와 Spectra 플러그인으로 디렉토리 웹사이트를 만들고 싶다면 이 튜토리얼을 확인하세요. Astra 테마와 Spectra 플러그인으로 디렉토리 웹사이트 만들기)

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

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

Spectra 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%의 디렉토리에 충분히 활용할 수 있습니다.

기본 도시 설정

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

기본 도시를 뉴욕으로 설정합니다.

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

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

추가 기능 설정

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

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

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

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

더미 데이터 추가

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

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

OceanWP 디렉토리 웹사이트 디자인

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

1. OceanWP 디렉토리 웹사이트 홈페이지 디자인

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

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

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

로고

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

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

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

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

초기 MVP(최소 기능 제품)의 경우, Canva로 제작한 로고면 충분합니다.

Canva는 다양한 로고 템플릿을 제공하며, 처음 만든 로고가 완벽하거나 독창적이지 않아도 괜찮습니다.

프로젝트가 진행되면서 언제든지 로고를 다듬거나 완전히 새롭게 바꿀 수 있습니다.

프로젝트의 성공은 로고의 완성도로 결정되지 않는다는 점을 기억하세요.

이제 다음으로 이동하세요 외관 > 사용자 정의 > 헤더 > 로고, 로고 선택을 클릭하고 PNG 파일을 업로드하세요. 자르기를 건너뛰거나(또는 필요에 따라 이미지를 잘라내고) 게시를 클릭하세요. 로고 크기가 큰 경우 로고의 최대 높이와 너비를 설정할 수도 있습니다.

내비게이션 메뉴

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

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

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

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

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

1. 홈
2. 소개
3. 블로그
4. Places and add places
5. 검색 페이지
6. 로그인
7. Account > Profile > Forgot Password > Logout

The Login link (from UsersWP Endpoints)는 로그아웃된 사용자에게만 표시되며, 로그아웃, 계정 및 프로필 링크는 로그인된 사용자에게만 표시됩니다.

타이포그래피

이제 웹사이트 텍스트 폰트와 크기를 위한 타이포그래피를 설정해 보겠습니다. 모든 사이트 텍스트에 적용될 글꼴 패밀리, 글꼴 굵기, 글꼴 크기를 전역으로 설정하고 있습니다.

외관 > 사용자 정의 > 타이포그래피 > 본문으로 이동합니다. 글꼴 패밀리: Red Hat Text 및 글꼴 두께: Normal: 400

그리고 Appearance > Customiser > Typography > main menu 설정에서 다음을 설정합니다. 글꼴 두께: Medium 500, 글꼴 크기: 13px

이제 외모 > 사용자 정의하기 > 일반 옵션 > 일반 스타일링으로 이동합니다 기본 색상: #ff914d 및 호버 기본 색상: #ff731c

콘텐츠

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

홈페이지에 히어로 헤더가 필요하므로 spectra blocks 플러그인에서 제공하는 컨테이너 블록을 추가해 보겠습니다.

다음으로 상단 탭에서 스타일을 클릭하세요. 배경 유형으로 > 유형 이미지를 선택하세요.

히어로 섹션에는 이미지가 필요하며, 다음에서 무료 이미지를 다운로드할 것입니다. Pexels.com 에서 제공하는 필라델피아의 무료 이미지를 사용할 것입니다. (감사합니다, @Kelly)

추가된 섹션을 클릭하고 아래 스크린샷에 표시된 대로 콘텐츠 너비 옵션에서 전체 너비를 선택하세요.

컨테이너 블록 설정의 스타일 탭에서 선택하세요 반복 에서 반복 없음 및 크기 에서 커버.

히어로 이미지 안으로 제목 요소를 드래그 앤 드롭하세요.

이제 홈페이지 히어로 이미지에 제목을 붙일 시간입니다.

스타일 탭에서 텍스트 색상을 흰색(#FFFFFF)으로 변경하여 대비와 가독성을 높이세요.

이 튜토리얼에서는 "Find the Best"와 같이 간단한 문구를 사용하겠습니다 Restaurants in New York" 여기에 원하는 슬로건을 추가할 수 있습니다.

정렬 옵션을 사용하여 텍스트를 가운데 정렬하는 것을 잊지 마세요.

홈페이지 헤더에 GD 검색을 추가하려면, 히어로 컨테이너 안으로 GD > Search 블록을 드래그하세요.

다음으로, 이 히어로 컨테이너에 최소 높이를 추가하세요. 저는 다음과 같이 설정하겠습니다 650 x 600 px ( 너비 및 높이)로 설정하고, 컨테이너 너비도 설정합니다: 박스형 및 콘텐츠 너비: 박스형.

이제 헤더 섹션에서 이 페이지 제목과 여분의 공간을 제거할 차례입니다.

페이지 오른쪽 상단의 O 아이콘을 클릭하세요. 클릭하면 General 섹션에서 다음을 설정할 수 있습니다 padding: 비활성화, 그리고 Title 선택 항목 내부에서 제목: 비활성화

이제 홈페이지에 필요한 섹션을 몇 가지 더 추가할 차례입니다. 지금은 최근 목록 섹션을 추가하겠습니다.

히어로 섹션 아래에 하나 더 container 을 추가하려면 플러스 아이콘을 클릭하고 GD > Listings 블록을 추가하세요.

이제 이 항목에서 몇 가지 필요한 설정을 진행하겠습니다. GD > Listings 블록. 정렬 설정: 최신순으로 지정합니다.

이제 비즈니스 소유자들이 자신의 비즈니스를 등록하도록 유도하는 CTA를 추가하겠습니다. 빈 컨테이너를 추가하고 스타일 설정에서
배경을 설정해 보겠습니다.

이제 컨테이너 스타일을 추가해 보겠습니다:

오버레이 유형: 색상
이미지 오버레이 색상: #FF6900
오버레이 불투명도: 0.3
컨테이너 너비: 전체 너비
콘텐츠 너비: 박스형

이제 다음도 추가하겠습니다: 콜 투 액션 이 컨테이너 안에 spectra에서 제공하는 블록입니다.

CTA 섹션의 타이포그래피.
색상: #fffff
글꼴 크기: 32px

버튼에 스타일을 추가해 보겠습니다.
텍스트 색상: #000000
배경색: #FFFFFF
반경: 모든 면 30px
패딩: 10px, 30px, 10px, 30px

버튼 텍스트를 다음으로 변경해 보겠습니다. 리스팅 추가 그리고 링크를 리스팅 추가 페이지 링크로 설정합니다.

이제 CTA 섹션이 완성되었습니다. 아래에 섹션을 하나 더 추가하겠습니다. GD > Categories 바로 아래 섹션입니다.

설정은 다음과 같습니다.
디자인 유형: 이미지 배경
행 항목: 3
카테고리 이미지 사용 활성화

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

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

자, 이제 소셜 미디어 링크 표시를 위한 마지막 섹션을 추가해 보겠습니다. 이름은 STAY IN TOUCH.

배경이 있는 새 빈 컨테이너를 추가합니다. #000000.

이제 이 컨테이너에 다음과 함께 제목을 추가하겠습니다. 정렬: 가운데 정렬 및 제목: H3

텍스트를 추가하겠습니다. "Stay in Touch"
색상: #ffffff
글꼴 크기: 24px

이제 그 아래에 단락을 추가하여 텍스트를 입력해 보겠습니다.

스타일 추가
텍스트 색상: #ffffff
크기: 소형

이제 그 아래에 소셜 아이콘 블록을 추가하겠습니다.

이 소셜 아이콘 블록에 다음 스타일을 추가하세요
크기: 15px
배경 크기: 10px
테두리 반경: 100
색상: #ffffff

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

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

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

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

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

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

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

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

리스팅 페이지

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

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

이제 두 개의 열이 있는 컨테이너를 추가합니다.

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

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

다음에 대한 모든 설정을 기본값으로 유지합니다. GD > Map. 높이를 지정해 보겠습니다. 저는 높이를 다음과 같이 설정하기로 했습니다. 100vh.

이제 아래 이미지에 나온 지침에 따라 메인 컨테이너를 전체 너비로 설정하세요.

이제 아카이브 페이지 템플릿을 전체 너비로 설정하겠습니다

또한 테마 커스터마이저 > 일반 옵션 > 일반 설정에서 모든 페이지의 헤더 스타일 섹션을 조정할 것입니다.
스타일 적용
제목 스타일: 가운데 정렬
패딩: 20px
배경색: #1e73be
텍스트 색상: #ffffff

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

또 다른 옵션은 이 튜토리얼에서 설명하는 GD > Simple Archive 블록을 사용하는 방법입니다. Elementor로 디렉토리 웹사이트 구축하기.

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

검색 페이지

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

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

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

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

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

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

이 템플릿에서는 Geodirectory가 생성한 기본 콘텐츠를 이미 확인할 수 있습니다.

기본 콘텐츠를 모두 제거하고 새 컨테이너를 추가합니다.

먼저 리스팅 상세 페이지 상단에 이미지 슬라이더를 추가하겠습니다. 다음 GD > Post Image 이 컨테이너 안의 블록.

이 GD > 이미지 블록에서 다음 설정을 조정하세요.

이미지 제한: 50

표시 제한: 2

이제 이 컨테이너 아래에 컨테이너를 하나 더 추가해 보겠습니다. 여기에 필요한 다른 블록들을 추가할 것입니다. Geodirectory Detail 페이지.

이제 필요한 GD 상세 페이지 단축코드를 하나씩 추가해 보겠습니다. 포함 항목은 다음과 같습니다. GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

이제 사이드바 위젯을 추가할 차례입니다. wp-admin > 외모 > 위젯으로 이동합니다.

메인 사이드바에 GD > 작성자 액션 위젯을 추가하세요. 이 위젯은 편집, 삭제 리스팅 옵션을 제공합니다.

위젯 하나 더 추가하기 GD > Output Location. 이 위젯은 상세 페이지에 표시되도록 설정된 주요 리스팅 정보를 모두 보여줍니다.

이 작업을 마치면 리스팅 상세 페이지 가 완성되었습니다.

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

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

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

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

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

이 가이드를 따라 디렉토리 웹사이트를 돋보이게 만드세요: 전문적인 디렉토리 웹사이트 만들기.

가능성은 무한합니다.