커스텀 포스트 타입과 커스텀 필드 사용법(Custom Post Type UI, ACF 플러그인)

, ,

Custom Post Type UI(CPT UI)와 사용자 정의 필드, Advanced Custom Fields(ACF)를 조합하여 커스텀 포스트 타입을 생성하고 사용자 정의 필드를 추가하는 방법을 단계별로 설명하겠습니다.

워드프레스 기본 타입의 페이지와 포스트 이외에 커스텀 필드가 추가된 다른 형식의 페이지와 포스트 발행을 위해 Custom Post Type UI와 ㅁ플러그인을 활용하여 멤버십 또는 포트폴리오와 같은 포스트를 생성하고 포트폴리오는 작품명, 제작 날짜, 장르, 저자 등과 같은 입력필드를, 멤버십의 경우 닉네임, 이름, 지역, 나이, 특이사항 등의 사용자 정의 필드를 추가하여 커스텀 할 수 있습니다.

커스텀 포스트 타입(Custom Post Type)이란?

워드프레스에서 기본적으로 제공하는 포스트와 페이지 이외에도 사용자가 원하는 새로운 컨텐츠 유형을 추가하는 기능입니다. 위와 다른 예시로 블로그 글을 제공한다고 할 때 CPT를 통해 뉴스, 포트폴리오 등 다른 형식의 글을 CPT를 통해 추가하여 기존 블로그 글과 다르게 구분하여 뉴스, 포트폴리오 관련된 정보만 구체적으로 정의하고 따로 구분하여 저장하고 관리할 수 있습니다.

커스텀 필드(Custom Field)란?

포스트, 페이지 등과 관련된 추가 메타 데이터를 저장하는데 사용되는 Key와 Value에 쌍을 말합니다.

<?php get_post_meta($post->ID, 'membership-category', true)?> 이와 같이 커스텀 필드값을 불러오는 내장 함수를 이용하여 사이트에 보다 많은 정보를 불러올 수 있습니다.

플러그인 설치

Custom Post Type UI 설치
ACF 설치 1

관리자 페이지에서 플러그인 > 새로 추가에서 Custom Post Type UI, ACF를 검색하여 설치 > 활성화 합니다.

Custom Post Type UI

Custom Post Type 생성

CPT UI 설정

Custom Post Type UI를 사용하여 Membership 이라는 커스텀 포스트 타입 생성합니다.

Post Type 입력

  • Post Type Slug: 포스트명(소문자, 공백 없이)
  • Plural Label: 포스트명
  • Singular Label
CPT UI 설정 후

기존의 글이 있지만 아래에 Membership이라는 별도의 메뉴가 추가되는 것을 확인할 수 있습니다. 이제 일반 글은 글에서 관리하고, Membership과 관련된 글은 Membership에서 따로 관리해 나갈 수 있습니다.

Custom Post Type 편집 및 세팅

CPT UI 찾기

Edit Post Types 탭 > Select에서 해당 콘텐츠를 선택한 후 편집할 수 있습니다.

Post Type 세팅

  • Hierarchical: True
  • Menu Icon: 적절한 것으로 선택

Taxonomies 생성 및 설정

CPT UI 편집 카테고리 생성

관리자 페이지 > CPT UI > Add/Edit Taxonomies 페이지로 이동하여 아래 사항을 입력합니다.

Taxonomies 입력

  • Taxonomy Slug: 분류명(소문자, 공백 없이)
  • Plural Label: 분류명
  • Singular Label
  • Attach to Post Type: 앞에서 추가한 Post Type으로 선택

Taxonomies 세팅

  • Hierarchical: True
  • Rewrite Hierarchical: True
CPT UI 카테고리명 추가

Memership-categories라는 Taxonomy가 생성되었고, 여성 회원, 남성 회원과 같은 소분류를 추가 생성하여 소분류를 생성해줍니다.

ACF

CleanShot 2024 06 08 at 12.19.45@2x

관리자 페이지 > ACF > 필드 그룹 페이지에서 새로 추가하여 필드 상세 정보를 입력합니다.

필드 입력

  • 레이블
  • 필드명 (소문자)
  • 필드 유형 (숫자, 텍스트, 범위, 비밀번호, 이미지, 파일, 편집기 등)

필드 위치 설정

만든 Post Type에만 적용되도록 설정한 후 Publish를 클릭하여 해당 필드 그룹을 저장합니다.

CleanShot 2024 06 08 at

Membership 글쓰기 하단에 지정한 필드가 항상 표시되어 나타납니다.

CleanShot 2024 06 08 at
<?php echo esc_html(get_field('슬러그명')); ?>

원하는 위치에 숏코드를 추가하여 저장된 필드 값을 불러와 페이지와 글에서 표시할 수 있습니다.

📚 함께 읽으면 좋은 글

CSS, Javascript 파일 삽입 (functions.php)

ALL RIGHTS ARE RESERVED.
magnifiercrossmenucross-circle