ACF 필드를 사용하여 콘텐츠 가시성을 결정하는 방법

게시 됨: 2022-04-20

ACF(Advanced Custom Fields) 플러그인을 사용하여 ACF 필드를 웹사이트에 추가할 수 있습니다. 반면에 콘텐츠 가시성은 Visibility Logic For Elementor 플러그인을 사용하여 적용할 수 있습니다. 이 두 플러그인은 실제로 콘텐츠 가시성을 구현하기 위해 함께 작동할 수 있습니다. 그러나 Visibility Logic 플러그인은 Elementor 플러그인과 함께 사용해야 하므로 Elementor 플러그인도 설치해야 합니다. 가시성 설정을 적용할 수 있는 범위를 넓히려면 Visibility Logic Pro 플러그인도 함께 설치하는 것이 좋습니다.

이 기사에서는 게시물에 사용자 정의 필드를 추가하고 단일 게시물 템플릿에 설정을 적용하여 ACF 필드를 사용하여 콘텐츠 가시성을 구현하는 방법의 예를 살펴보겠습니다.

이 기사에서는 Visibility Logic 플러그인(무료 및 프로)과 Elementor 플러그인이 이미 설치되어 있다고 가정합니다.

목차

ACF 플러그인 설치

게시물에 사용자 정의 필드 설정하기

  • 사용자 정의 필드 추가
  • 사용자 정의 필드에 콘텐츠 보기 및 추가

단일 게시물 템플릿 만들기

가시성 설정 구성

게시물 미리보기

결론

ACF 플러그인 설치

ACF 플러그인을 설치하려면 WordPress 대시보드에서 플러그인 > 새로 추가 섹션으로 이동하여 "고급 사용자 정의 필드"를 검색하십시오.

다음으로, Delicious Brains의 Advanced Custom Fields 플러그인을 설치하고 활성화하십시오.

게시물에 사용자 정의 필드 설정하기

사용자 정의 필드 추가

플러그인을 활성화하면 WordPress 대시보드에서 사용자 정의 필드 > 새로 추가 섹션으로 이동합니다.

다음 화면에는 아래와 같이 채워야 하는 여러 사용자 지정 데이터 필드가 표시됩니다.

"새 필드 그룹 추가"에서 원하는 필드 그룹 제목을 채울 수 있습니다. 여기서는 "추가 게시물 콘텐츠"로 사용하겠습니다.

그런 다음 "필드 추가"를 클릭하여 첫 번째 필드 추가를 시작합니다.

그렇게 하면 이제 필드 세부 정보를 채울 필드 섹션이 생성됩니다.

필드 레이블: 필드를 식별하는 데 사용할 문구를 입력합니다. 여기서는 "결론"으로 설정했습니다.

필드: 이름 이 필드는 필드 레이블을 추가하면 자동으로 채워집니다.

필드 유형: 사용자 정의 필드에 사용할 필드 유형을 설정합니다. 여기서는 "텍스트 영역"으로 설정되어 있습니다.

지침: 여기에서 게시물 작성자가 필드 데이터를 제출할 때 보게 될 몇 가지 안내 콘텐츠를 설정할 수 있습니다.

필수: 이 필드를 항상 채워야 하는지 여부에 따라 yes 또는 no로 설정합니다. 우리의 경우 이것을 "아니오"로 설정합니다.

기본값: 이 필드 내에서 게시물을 작성할 때 나타나는 기존 값을 설정할 수 있습니다. 이것은 선택 사항이므로 여기에서는 이 항목을 공백으로 두었습니다.

자리 표시자 텍스트: 여기에서 입력 필드 내에서 렌더링되는 텍스트를 지정할 수 있습니다.

문자 제한: 여기에서 필드가 보유할 수 있는 최대 문자 수를 지정할 수 있습니다. 우리의 경우 문자 제한을 추가할 의도가 없으므로 이 필드를 비워 둡니다.

행 및 새 줄: 이 필드 가용성은 선택한 필드 유형을 기반으로 합니다. 예를 들어 우리의 경우 필드가 렌더링되는 "텍스트 영역"을 선택했습니다. 그 안에서 텍스트 영역에 포함될 행 수와 새 줄에 적용할 서식을 설정할 수 있습니다.

조건부 논리: 여기에서 필드에 대한 표시 논리를 설정할지 여부를 선택할 수 있습니다. 여기서는 표시 논리를 설정하지 않습니다.

래퍼 속성: 이 필드를 사용하면 필드 래퍼에 너비를 추가할 수 있습니다. 우리의 경우 이것을 50%로 설정했습니다. CSS를 위해 클래스와 ID를 래퍼에 추가할 수도 있습니다. 그러나 이들을 추가하는 것은 선택 사항입니다.

다음으로, 위치 세그먼트 내에서 필드 그룹이 나타날 위치에 대한 규칙을 설정합니다. 우리의 경우 이것을 포스트 포스트 유형으로 설정할 것입니다.

"설정" 세그먼트 내에서 필드 그룹이 "활성"인지 확인합니다. 세그먼트 내의 나머지 설정을 기본 설정으로 두거나 기본 설정에 따라 변경할 수 있습니다.

위의 작업이 수행되면 필드 그룹을 게시할 수 있습니다.

사용자 정의 필드에 콘텐츠 보기 및 추가

WordPress 대시보드의 게시물 섹션으로 이동하여 게시물 중 하나를 선택하여 편집합니다.

포스트 편집 화면 내에서 이제 우리의 경우 "결론"이라는 새 필드를 볼 수 있습니다.

이 필드 내에서 이제 일부 결론 콘텐츠를 추가하고 변경 사항을 저장할 수 있습니다.

단일 게시물 템플릿 만들기

그런 다음 웹 사이트 내의 모든 게시물에 사용할 수 있는 Elementor 템플릿을 만듭니다. 이렇게 하려면 WordPress 대시보드에서 템플릿 > 새로 추가 섹션으로 이동합니다.

렌더링된 팝업 내에서 템플릿 유형을 "Single Post"로 설정하고 템플릿 이름을 추가한 후 생성을 진행합니다.

다음으로, 게시물에 포함하려는 섹션과 단일 게시물 위젯을 추가할 수 있습니다.

완료되면 게시를 클릭하고 표시 조건을 "게시물"로 설정합니다.

다음은 이에 대한 샘플 스크린캐스트입니다.

가시성 설정 구성

다음으로 생성한 ACF 필드를 기반으로 가시성 설정을 지정해야 합니다. 여기 예제에서는 결론이 있는 게시물에서 "작성자 상자"를 숨기는 설정을 추가합니다.

이렇게 하려면 이전에 만든 단일 포스트 Elementor 템플릿을 편집하도록 선택합니다. 그 안에서 "작성자 상자"를 편집하도록 선택합니다.

왼쪽 패널에서 "Stax Visibility" 탭을 클릭합니다.

"가시성 논리 활성화" 설정을 사용하면 여러 가시성 세그먼트가 있어야 합니다.

"일반" 설정 내에서 다음을 지정합니다.

  • 표시/숨기기: 숨기기
  • 조건 유형: 모두

게시물/페이지 세그먼트에서 게시물/페이지를 활성화하고 다음을 설정합니다.

  • 사용자 정의 게시물 유형: 게시물
  • 메타: 결론
  • 메타 조건: 비어 있지 않음

메타는 "결론"이 우리가 만든 ACF 필드에서 나온 것입니다.

이 작업이 완료되면 변경 사항을 업데이트하십시오.

게시물 미리보기

이제 결론을 추가한 게시물을 확인할 수 있으며, 이 게시물 내에는 결론이 없는 다른 게시물에 비해 작성자 상자가 표시되지 않아야 합니다.

다음은 샘플 그림입니다.

결론

사이트 내에서 사용자 정의 필드를 생성하는 동안 필드를 렌더링하는 섹션 또는 요소에 가시성 설정을 적용할 수 있습니다. 위의 가이드에서는 이를 쉽게 달성할 수 있는 방법에 대한 예제 시나리오를 다룹니다.

이러한 구성은 사이트 내에 있을 수 있는 모든 게시물 유형에도 적용할 수 있습니다. 예를 들어 전자 상거래 상점에서 상점 내에서 제품을 구매한 사용자에 대한 특정 사용자 정의 필드 데이터를 숨기거나 표시하려는 경우 유용할 수 있습니다.