Channel : WPTuts
Date : 2019/08/09
5/5

0. 필요한 Plugin들 [1:03]

시작에 앞서 본 강좌에서 사용하는 Plugin들을 알아본다.

  • Advanced Custom Fields / Pro : custom fields를 다룬다. 1
  • Custom Post Type UI : custom post type, custom taxonomies를 다룬다.
  • Elementor / Pro
  • FacetWP / FacetWP Elementor : custom post의 list를 filtering 할 때 사용한다.
  • SearchWP : custom field를 포함하여 search 하기 위해 사용한다.
  • WP User Frontend / Pro – business : post, page, custom post type을 위한 frontend 화면을 생성/변경할 수 있다.
  • elementor custom skin : Loop에 대한 templete을 추가할 수 있게한다.

이제 business 목록을 보여주는 웹사이트를 만들어보자.


Part I. 내 Biz 요구사항에 맞는 Custom Type 만들기

1. Custom Post Type 만들기 [3:37]

필요한 플러그인들을 설치했다면, 다음으로 Custom Post Type을 만들어보자.

CPT UI > Add/Edit Post Types 메뉴를 선택하여 ‘Business’ Custom Post Type을 만든다.


2. Custom Taxonomies 만들기 [5:44]

위에서 생성한 Custom Post Type에 대한 Taxonomy로 ‘Business Type’을 생성한다. 2

‘Business Type’과 같은 방법으로 ‘Business Location’ Taxonomy도 추가한다.


3. Custom Fields 만들기 [8:03]

Custom Fields > Field Groups 메뉴 선택하고, Add New 버튼을 누른다.

Custom Fields Group으로 ‘Business Listing’을 생성하고, ‘Business Address’, ‘Business Strapline’ 등 Custom Field를 생성한다. 모든 Field를 추가했다면 Publish한다.


4. Custom Taxonomy Type에 Taxonomy 추가하기 [12:18]

‘Business Type’에 ‘Art Supplies’, ‘Bakery’ 등 적절한 유형을 추가한다.


Part II. Custom Type을 보여주는 Frontend 화면 만들기

5. Elementor로 Archive Template 편집하기 [14:37]

1) ‘Business Listing’이라는 빈 Page를 생성하고, Edit with Elementor를 시작한다.

2) Posts Widget을 추가한다.

우리가 만든 Custom Post가 아닌 기본 Post가 나오는 것을 확인할 수 있다.

3) Posts Widget > Content Tab > Query Section 에서 Source를 Post에서 Businesses로 변경한다.

skin을 cards로 바꾸고, 불필요한 meta data, read more 등을 제거한다.

현재까지는 여전히 custom field를 사용하고 있지 않다. 기본 Post 타입을 위해 정의된 Loop를 돌고 있기 때문이다. 편집 화면을 나가서 우리 만의 Loop을 만들어보자.

4) Elementor Custom Skin 플러그인을 추가 설치한다. [16:45]

5) Elementor의 Templates > Theme Builder를 실행한다. Loop 이란 Tab이 추가된 것을 확인할 수 있다. Add Loop을 해보자.

이름은 Default Business Loop이라고 해보자. 먼저 Featured Image를 추가하고, 원하는 모양대로 편집을 해본다. Publish하고 빠져나온다.

6) ‘Business Listing’ 페이지 편집화면으로 돌아간다.

편집하던 Posts Widget을 선택하여 Content > Layout > Skin을 선택한다. 이제 custom 항목이 추가된 것을 확인할 수 있다. custom을 선택하면 select template 메뉴가 나오고, 여기에서 위에서 생성한 Loop를 선택한다.


6. Elementor로 Single Template 편집하기 [22:46]

1) New Template > Single > Business 선택 > Create Template을 선택한다.

Template Name은 Default Business Single이라 하자.


Part III. Frontend에 기능 추가하기

7. Facet으로 Fitering 추가하기

1) 어드민 화면의 Settings > FacetWP 선택하고, Add New를 선택한다.

플러그인 설치 시 기본으로 생성된 Facet은 삭제해도 좋다.

2) 다음과 같이 새로운 Facet을 입력하고 저장한다. 저장되면 Indexing을 시작한다.

Label: Business Type

Facet Type: Checkboxes (원하는 다른 Type을 선택해도 무방하다)

Data Source : Business Type (under Taxonomy)

Hierarchical : True

Show Ghosts : True

3) 같은 방법으로 ‘Business Location’ Facet도 추가한다.

4) Templates > New Template에서 ‘Filter Section’이라는 이름의 ‘Section’ 타입의 Template을 생성한다.

5) Template 편집 화면에서 shortcode widget을 추가하고, shortcode에 위에서 생성한 Facet의 shortcode를 입력해준다.

6) 이제 Publish 하면 Facet이 적용된 Section Template이 생성되었다.

7) 위 Section을 적용하기 위해, ‘Business Listing’ 페이지 편집화면을 오픈한다.

8) Toggle Widget을 추가하고, Toggle Widget의 Description 부분에 위 Section Template의 shortcode를 추가한다. 작업 끝 [39:30]


8. Submission Form 만들기 [41:08]

1) 어드민 화면의 User Frontend > General Options에서 ACF Compatibility 항목을 Yes로 변경한다.

2) 어드민 화면의 User Frontend > Post Forms 메뉴를 선택한다. Add Form 한다.

3) Blank Form을 선택하고, Create Form 한다. 이름은 Submit New Business라 하자.

4) 다음과 같이 설정하고 저장한다.

Settings Tab > Post Settings 아래에

  • Post Type : business
  • Post Status : Pending Review

5) Form Editor Tab을 선택하고, 필요한 Field들을 추가하고 Form을 저장한다.

6) ‘Submit Your Business’라는 새로운 Page를 만들고, Elementor 편집기로 오픈하고, 위 5)에서 생성한 Form의 shortcode를 추가하여 폼을 추가한다. [50:15]

7) 이제 입력 Form이 완성되었다. 데이터를 추가해서 제대로 동작하는 지 확인해보자.


9. Seach 구현하기 [53:58]

워드프레스의 기본 검색을 사용하는 경우 우리가 추가한 custom field의 값으로 검색을 할 수 없다. SearchWP 플러그인을 사용해서 이 문제를 해결해 보자.

1) 어드민 화면의 Settings > SearchWP 메뉴를 선택하고, Add Post Type 버튼을 눌러 Business 타입을 선택한다.

2) 이제 Business 타입을 클릭해서, Attribute의 weight를 조절하고, 우리가 추가한 taxonomy나 custom field를 검색 attribute로 추가하여 설정한다.

3) 설정이 완료되면, Save Engine 버튼을 누르면, Indexing 작업이 시작된다.

4) Advanced Tab을 선택하면 추가 설정이 가능하다. [57:51]

5) 이제 기본 Search 위젯에서 우리가 설정한 custom field 등을 활용한 검색이 가능해졌다.

6) 이제 Search 결과를 보여주는 화면(Search Archive)을 만들어보자. Elementor 로 Archive 타입의 Template을 생성한다. [1:00:18]

7) Archive Posts 위젯 등을 사용하여 Template을 완성하고, Publish 버튼을 누르면 나오는 Display Option에서 Include : Search Result 로 설정한다.


Footnotes

  1. 본 강좌에서 gallery feature를 사용하는데, Pro version을 사용한다. 만약 gallery를 개별 image를 사용하는 것으로 바꾼다면 Pro version을 사용하지 않아도 본 강좌를 따라하는데 문제가 없다.
  2. 제대로 생성이 되었다면 Admin 화면의 Business 메뉴 아래에 All Businesses, Add New 외에 Business Type이 추가된 것을 볼 수 있다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다