시나리오

글 편집 시, 아래 정보를 입력하면 글 하단에 자동으로 CTA(Call-to-Action) 버튼이 들어간다.

• 짧은 설명글
• 버튼 이름
• 버튼 URL

버튼 URL이 없으면 CAT 버튼이 보이지 않는다.

리소스

Advanced Custom Fields

컨텐트 모델링

① 커스텀 필드를 만들기

아래와 같이 필요한 커스텀 필드를 만듭니다. 정리된 관리자 UI를 위해 ‘그룹’ 필드의 서브 필드로 넣었으나, 그냥 필드로 넣어도 무방합니다.

② 위치 정하기

위치에서 포스트 타입을 선택합니다. 여기서는 글을 선택하고 저장했습니다.

프리젠테이션

여기서는 Divi Theme을 사용한 예입니다. Dynamic, Conditional Display, Post Type Template을 지원하는 다른 빌더로 사용해도 무방합니다.

①  CTA 버튼 만들기

템플릿 빌더에서 해당하는 포스트 타입의 템플릿을 클릭해, CTA 모듈을 넣습니다. Dynamic Content를 이용해 각각의 필드를 넣습니다. 물론 다른 모듈을 사용해도 무방하나, 모듈을 적게 쓰는 게 좋겠죠?

• 제목: CAT: 안내 텍스트
• 버튼: CAT:버튼 이름
• 버튼 링크 URL: CAT: 버튼 URL

② 표시 조건 지정하기

Display Conditions 기능을 버튼 URL 값이 있는 경우에만, CTA 버튼이 보이게 합니다.

만약, 정확한 필드 Key를 모른다면 JSM’s Show Post Metadata 같은 플러그인을 설치한 후 샘플로 값을 입력하면 쉽게 알 수 있습니다.\

③ 디자인

테마 빌더나 CSS를 이용해 원하는 디자인을 입힙니다.

결과 보기

글 아래에 아래와 같은 CAT 버튼이 나타납니다.