고급 사용자 정의 필드로 할 수 있는 7가지 일

ACF(Advanced Custom Fields)는 WordPress 개발과 거의 동의어입니다. 450만 개 이상의 사이트를 지원하는 이 플러그인은 WordPress가 새로운 차원으로 성장하는 데 도움이 되었습니다. 당신은 플러그인을 알고 있습니다. 아마도 플러그인으로 빌드했을 것입니다. 그러나 당신은 그것을 충분히 활용하고 있습니까?

이 세션에서는 ACF를 활용하여 지금까지 가장 역동적이고 강력하며 매력적인 WordPress 경험을 구축할 수 있는 잘 알려지지 않은 몇 가지 방법을 빠르게 살펴보겠습니다.

스피커:

• Iain Poulson, WP Engine 수석 제품 관리자
• WP Engine의 제품 마케팅 관리자 Rob Stinson

세션 슬라이드:

성적 증명서:

Iain Poulson: 안녕하세요. Advanced Custom Fields 플러그인 세션에 오신 것을 환영합니다. 저는 WP Engine의 ACF 제품 관리자인 Iain Poulson이고 여기 제품 마케팅 관리자인 Rob Stinson이 있습니다. 오늘은 Advanced Custom Fields 플러그인으로 수행할 수 있는 7가지 작업, 상당히 새로운 작업 및 잘 알려지지 않은 작업에 대한 상당히 빠른 세션을 안내해 드리겠습니다. Rob이 설계한 가상의 사이트를 중심으로 할 기능은 기본적으로 추상적인 것보다는 실제 사례의 팬이지만 영화의 열렬한 팬이기도 합니다.

따라서 이 사이트는 최고의 영화 시대, 아마도 틀림없이 90년대의 영화를 기념하는 곳입니다. 따라서 이 사이트는 90년대의 가장 인기 있고 가장 사랑받은 영화를 인정하고 시상하는 데 기반을 두고 있습니다. 사이트는 영화를 선보이고 사용자가 좋아하는 영화에 투표할 수 있도록 해야 하며 진정한 Rob 스타일에서는 사이트가 멋져 보입니다. 이제 시작하고 처음부터 시작하여 ACF를 설치해 보겠습니다. 방법을 알려주세요, 롭.

ROB Stinson: 좋습니다. 감사합니다. Iain. 그래, 고마워. 꽤 괜찮아 보이지 않나요? 그것을 디자인하는 데 꽤 많은 시간이 걸렸고 재미있었습니다. 그래서 우리는 계약을 이겼습니다. 우리는 프로젝트를 얻었고 작업을 시작하고 있으며 가장 먼저 한 일은 ACF에 대해 먼저 이것이 의미가 있다는 것을 확인하는 것입니다. 일부 사용자 지정 게시물 유형에 대한 전체 사용자 지정 필드를 설정하고 흥미로운 템플릿 등을 수행해야 합니다. ACF는 여기서 작업을 위한 도구입니다. 물론 먼저 ACF를 설치해야 합니다. 이것이 여기서 첫 번째입니다. 따라서 일반적으로 우리는 플러그인을 zip 파일로 잡고 WordPress 관리자에 훌륭하고 간단하게 업로드할 수 있다는 것을 알고 있습니다.

이것이 플러그인을 설치하는 표준 방법이지만 요즘 개발자들은 종속성을 조금 다르게 관리하기를 원한다는 것도 알고 있습니다. 나는 일반적으로 코드 내에서 관리하고 PHP 세계 내에서 일반적으로 Composer로 수행됩니다. 이제 한동안 Composer를 사용하여 WordPress.org 리포지토리에서 WordPress 플러그인을 아주 쉽게 설치할 수 있었지만 ACF Pro와 같은 프리미엄 플러그인을 사용하는 것이 조금 더 어려워졌습니다.

그러나 몇 주 전, 사실 약 한 달 전에 가장 최근에 출시된 릴리스에서는 Composer를 통해 지금 ACL Pro를 설치할 수 있는 기능을 실제로 활성화했습니다. 이는 환상적이므로 지금 바로 실행하겠습니다. 이를 수행하는 방법은 첫 번째 단계로 ACF Pro Composer Repo URL을 composer.JSON 파일에 추가해야 합니다. 두 번째 단계는 자격 증명에 대한 auth.JSON 파일을 생성하고 로컬에서 그리고 배포할 위치와 해당 파일에 필요한 자격 증명은 이제 advancedcustomfields.com의 계정 영역에서 사용할 수 있습니다.

따라서 로그인하면 라이선스 영역이 표시되고 몇 개의 추가 탭과 같은 항목이 있습니다. 실제로 전체 코드 덩어리를 가져와서 전체를 복사하여 붙여넣거나 개별 사용자 이름을 가져와서 암호를 만들고 만든 파일인 auth.JSON 파일로 가져옵니다.

세 번째 단계는 Composer 명령을 실행하는 것입니다. 3단계 프로세스로 훌륭하고 쉽습니다. 하지만 환상적입니다. 그들은 프로젝트의 종속성을 관리합니다. 이제 ACF Pro로 이 작업을 수행할 수 있습니다. 환상적입니다. 물론 그것에 대한 더 많은 문서가 있으므로 더 자세히 살펴보고 압축을 푸는 방법을 보려면 웹 사이트의 문서로 이동하십시오. 좋아요, 2번을 위해 Iain에게 토할 것입니다.

Iain Poulson: 좋습니다. 이제 사이트의 데이터 설정에 대해 이야기하겠습니다. 따라서 사용자 정의 게시물 유형은 게시물이나 페이지에 관한 것이 아닌 사이트를 구축하는 방법에서 WordPress의 매우 기본입니다. 이는 WordPress 버전에 관계없이 적절한 CMS로 전환되는 사용자 지정 게시물 유형 기능이며 일반적으로 개발자가 사이트를 구축할 때 수행하는 첫 번째 단계입니다. 그리고 그것은 항상 ACF 외부에서 일어난 일이었습니다. 역사적으로 게시물 유형을 코드로 등록하거나 다른 플러그인을 사용하여 이를 수행했지만 ACF와 꽤 잘 연결되는 여정의 일부입니다. 따라서 ACF 6.1의 일부로 해당 기능이 플러그인에 제공되므로 여정의 자연스러운 시작점이 됩니다.

데이터 구조 데이터로 사이트를 구축하려면 포스트 유형을 구축해야 합니다. 여기에 필드를 추가하고 일부 분류를 추가한 다음 해당 데이터 편집을 시작합니다. 예, 그것은 우리가 6.1에 넣은 것입니다. CMS에서 빌드의 전체 흐름을 갖는 것은 매우 신나는 일입니다. 그럼 VHS 어워드 사이트를 찾아보자. 우리는 데이터를 구조화하고 WordPress가 필요한 작업을 수행하도록 해야 합니다. 게시물 유형과 관련하여 게시물과 페이지를 사용하지 않기 때문에 사용자 정의 게시물을 만들 것입니다. 영화 데이터, 데이터 개체 또는 데이터 모델을 저장하기 위한 영화 유형이지만 분명히 WordPress 용어에서는 사용자 지정 게시물 유형입니다.

우리는 사용자가 장르 유형의 영화를 쉽게 볼 수 있도록 분류법으로 영화를 분류하고 싶습니다. 그런 다음 특정 장르의 영화에 액세스할 수 있는 간단한 URL인 간단한 프런트 엔드 보기를 얻을 수 있습니다. 장르. 그리고 영화에 대한 구조화된 데이터를 저장하기 위해 몇 가지 추가 필드가 필요할 것입니다. 예를 들어 director는 텍스트 필드입니다. 우리는 숫자로 영화가 나온 연도가 필요하고, 영화를 서로 연결하기 위한 어떤 형태의 관계가 필요합니다. 이것이 숫자 필드입니다.

이제 ACF 6.1에서 어떻게 할 것인지 간단히 살펴보겠습니다. 이것은 ACF 6.1 화면이고 약간 다른 점을 눈치채셨을 것입니다. 사이드바에 메뉴가 있습니다. 이제 사용자 정의 필드가 아닌 ACF이며 게시물 유형 화면입니다. 그래서 이것은 내가 영화 포스트 유형을 설정하는 것입니다. 여기에서 가장 간단한 워크플로는 게시물 유형(영화)에 대한 단일 레이블과 복수 레이블을 추가하고 게시물 유형 키를 자동으로 생성하는 것입니다. 공개 설정은 프런트 엔드, 게시물 유형에 표시하고 관리자에서 편집할 수 있기를 원하기 때문에 기본값으로 설정됩니다.

일단 저장하고 추가하면 여기에서 ACF와의 연결에 대한 좋은 점은 여정의 다음 단계가 게시물 유형을 생성했다는 사실입니다. 게시물 유형에 필드를 추가할 것인지, 아니면 원하는 것인지 게시물 유형에 기존 필드를 연결하거나 분류를 만들려면? 그래서 우리는 여기 그 시점부터 모든 것을 할 수 있습니다. 그래서 분명히 우리는 그 필드를 추가해야 합니다. 확인을 클릭하여 영화 게시물 유형에 새 필드를 추가하기 위해 해당 알림을 클릭하면 필드 그룹 편집기가 표시되고 설정 Metabox의 하단에 미리 채워집니다.

따라서 위치 규칙은 이미 영화의 게시물 유형을 편집할 때 이러한 필드를 표시하도록 설정되어 있습니다. 그런 다음 스크린샷에서 이미 수행한 필드를 추가할 수 있습니다. 감독, 연도, 투표, 관련 영화가 있습니다. 그러면 물론 우리가 이야기한 사용자 정의 분류를 등록하고 장르를 추가하고 장르 분류를 포스트 유형의 영화에 연결할 수 있습니다. 하지만 이것들은 영화 객체에 첨부된 우리가 추가한 필드들입니다. 하지만 좀 더 전역적이거나 사이트 전체일 수 있는 데이터를 저장하는 데 필요한 필드는 어떻습니까? 롭, 우리가 뭘 알아냈어?

Rob Stinson: 좋아요. 감사합니다. Iain, 좋아보이네요. 우리의 콘텐츠 모델은 순조롭게 진행되고 있지만 아직 끝나지 않았습니다. 이제 우리는 이미 Composer를 통해 ACF Pro를 설치하는 방법을 다루었으며 ACF에서 맞춤 게시물 유형 및 맞춤 분류를 살펴보았습니다. 이제 그 두 가지가 아주 아주 신선하지만 제가 지금 다루고 싶은 세 번째 것은 오래되었지만 좋은 것입니다. 그래서 지금까지 꽤 오랫동안 플러그인에 있었지만 모든 사람이 그것에 대해 아는 것은 아니며 모든 사람이 이것의 가치를 완전히 이해하는 것은 아니므로 이제 옵션 페이지에서 전역 필드를 살펴보겠습니다.

이제 일반적으로 사용자 지정 필드와 특정 게시물, 페이지 또는 사용자 지정 게시물 유형에 대한 데이터를 저장하는 방법에 대해 생각합니다. 그러나 때때로 우리는 사이트 전체에 연결된 데이터를 저장할 필요가 있으며 멋진 VHS 어워드 사이트의 좋은 예는 이러한 종류의 최고 알림 또는 홍보 표시줄입니다. 그리고 이것은 우리가 사이트 홈 페이지의 모든 단일 페이지에 걸쳐 유지하려는 막대입니다. 영화 페이지로 이동하면 거기에 있습니다. 정보 페이지, 연락처 페이지 또는 블로그 페이지로 이동하면 이 작은 막대는 사용자가 어디를 탐색하든 전체 사이트에 표시되므로 관련 데이터를 게시물이나 영화.

사이트와 연결되어야 하는 항목입니다. 따라서 설정을 원하기 때문에 이 막대를 켜고 끌 수 있기를 원하지만 아마도 일년 중 특정 시간에 이 막대를 켜고 싶을 수도 있습니다. 특정 프로모션이나 캠페인이 있을 수 있으므로 부울 필드를 포함하는 기능을 원하므로 이 항목을 켜고 끌 수 있습니다. 또한 호출된 작업 자체 또는 버튼의 텍스트를 업데이트할 수 있기를 원하므로 물론 사용자 정의 필드가 많은 의미가 있습니다.

이제 옵션 페이지를 설정하기 위해 ACF 내에 있는 기능으로 이를 수행할 수 있습니다. 첫 번째 단계는 일반적으로 함수인 .PHP 파일에 있거나 물론 다른 위치에 등록할 수 있습니다. 개발 중인 플러그인. 하지만 옵션 페이지 자체를 등록하게 되며 설정에서 수행할 수 있는 몇 가지 작은 구성이 있습니다. 하나의 옵션 페이지를 가질 수 있지만 실제로는 여러 개를 가질 수도 있고 일종의 중첩되어 하위 페이지 또는 상위 페이지와 같은 것들이 있으므로 흥미로운 작업을 수행할 수 있습니다.

우리에게는 매우 간단합니다. 여기에서는 알림 표시줄을 설정하는 중이므로 단일 페이지만 필요하므로 1단계는 해당 옵션 페이지를 등록하는 것입니다. 2단계는 평소와 같이 필드 그룹을 만듭니다. 프로모션 표시줄 필드 또는 알림 표시줄 필드라고 합니다. 상단에 부울 필드가 있으므로 프로모션 표시줄이 활성인지 여부가 true인지 false인지 알 수 있습니다. 그런 다음 메시지를 위한 텍스트 필드, 버튼 텍스트를 위한 텍스트 필드, 버튼 링크를 위한 URL 필드가 있고 알림 유형도 있을 수 있지만 알림이나 판촉 스타일을 원할 수도 있습니다. 알림, 그리고 아마도 우리는 거기에서 선택된 것을 기반으로 몇 가지 흥미로운 조건부 스타일링을 할 것입니다.

따라서 필드 그룹을 추가하고 필드를 추가합니다. 그 바로 아래에 3단계가 있습니다. 아시다시피, 위치 규칙에서 이제 옵션 페이지가 다음과 같음을 선택할 수 있습니다. 여기에 있는 사이트 설정이 표시됩니다. 이것이 1단계에서 등록한 옵션 페이지입니다. 모든 작업이 완료되면 이제 WordPress 관리자의 왼쪽에 관리 표시줄에 사이트 설정이 있고 이를 클릭하면 예상한 대로 모든 필드가 표시됩니다.

알림 표시줄을 켜거나 끌 수 있습니다. 텍스트를 업데이트하고 버튼을 업데이트하면 해당 데이터를 템플릿에 사용할 수 있으므로 옵션 페이지 내의 데이터 필드에 대한 템플릿 경험은 일반적으로 다른 방법과 동일합니다. 이것이 게시물이 아니라 옵션 페이지라는 사실을 구체적으로 타겟팅하는 방법에는 몇 가지 작은 뉘앙스가 있지만 advancedcustomfields.com의 문서로 이동하면 이를 처리하는 방법을 모두 안내합니다. 넷째, Iain, 당신에게 다시 던질 것입니다.

Iain Poulson: 고마워요, Rob, 네. 이제 프로그래밍 방식으로 ACF에 필드를 등록하는 방법에 대해 이야기하고 싶습니다. 따라서 ACF에서 필드를 만드는 것은 필드 편집기 사용자 인터페이스를 사용하여 매우 쉽습니다. 우리가 이전에 보았고 좋아하지만 필드를 정의하는 다른 방법이 있습니다. ACF를 사용하면 필드 정의가 있는 JSON 및 PHP 파일을 모두 내보낼 수 있으며 필드를 만드는 데 사용할 수 있습니다.

그러나 실제로 ACF 커뮤니티에 ACF 빌더라는 패키지가 있다는 사실을 알고 계셨습니까? 이 패키지를 사용하면 PHP 코드와 함께 일종의 유창한 API를 사용하여 필드를 만들 수 있습니다. 실제로 타사 패키지이며 StoutLogic의 ACF Builder Package라고 합니다. 예, GitHub 링크가 있습니다. 기본적으로 ACF가 PHP에서 필드 데이터를 필요로 하는 복잡한 방법을 몰라도 코드에서 직접 필드를 생성할 수 있습니다. 정말 표현적인 방법을 사용합니다. 재사용 및 휴대가 가능합니다.

PHP 파일을 버전 제어에 사용하면 협업이 쉽기 때문에 필드 정의를 커밋할 수 있습니다. 배포 메커니즘으로 쉽게 보낼 수 있고 필드 그룹 편집기 UI도 제거할 수 있으므로 코드에서 해당 필드를 정의하여 클라이언트가 UI를 터치할 필요가 없도록 합니다. 해. 패키지이기 때문에 설치하려면 이전에 Composer에 대해 이야기했습니다. 다음 명령으로 설치할 수 있는 Composer 패키지입니다. Composer는 StartLogic, 공급업체, ACF Builder를 인수하고 코드는 다음과 같습니다.

Fields Builder의 인스턴스를 일종의 인스턴스화하고 있고 여기에 필드 그룹이 될 슬러그를 제공하고 있습니다. 그런 다음 이 필드 그룹에 Director라는 텍스트 필드를 추가하겠습니다. 연도라는 숫자 필드를 추가한 다음 중요한 것은 게시물 유형의 동영상에 표시할 필드 그룹의 위치를 ​​설정하는 것입니다.

그리고 이 모든 것이 당신이 그것에 대해 생각할 필요 없이 당신을 위해 많은 일을 합니다. 그래서 당신이 그것에 필드 레이블에 대한 감독 이름을 부여하면 그것은 진행되고 분명히 당신이 생각하지 않고도 필드에 대한 슬러그나 키를 생성할 것입니다. 이를 추가하면 많은 타이핑, 많은 생각, 오류가 발생하기 쉬운 생성이 필요하지 않습니다. 그런 다음 두 번째 부분은 해당 필드 정의를 ACF에 로드하는 곳이며 필드 그룹이 자동으로 빌드됩니다.

Rob Stinson: 좋습니다. 여기서 5번은 양방향 관계입니다. 자, 이것은 흥미 롭습니다. 나는 내가 실제로 이것을 알아 낸 에이전시 시절에 일했던이 특정 프로젝트를 기억하는 것 같고 일종의 게임 체인저였습니다. 따라서 이것이 이전에 ACF로 수행한 작업이 아닌 경우 주의를 기울이십시오. 이는 정말 유용한 작업이므로 예를 살펴보겠습니다. 물론 우리의 VHS 어워드 사이트를 보면 100편의 영화 목록이 있고 분명히 이러한 것들을 연결하는 다양한 방법이 있습니다.

이전에는 장르 맞춤 분류 체계가 있습니다. 태그나 그룹화와 같은 것을 처리하는 두 개의 서로 다른 필드가 있을 수 있으므로 양방향 관계는 두 게시물 또는 이 경우 두 영화 사이에 특정 유형의 양방향 연결을 생성하려는 경우에 유용합니다. 예를 들어 데이터베이스에 이 세 편의 영화가 있고 모두 애니메이션화되어 있으므로 그들과 양방향 관계를 만들고 싶다고 가정해 보겠습니다.

이제 이것이 의미하는 바는 여기에 우리의 첫 번째 영화인 "토이 스토리"가 있고 훌륭한 영화가 있고 우리가 연관시키고자 하는 두 개의 다른 관련 영화가 있음을 확인했다는 것입니다. 그래서 우리는 영화인 사용자 지정 게시물 유형에 대한 관계 필드를 만들 수 있고 거기에 관계 필드가 있고 영화 "라이온 킹"과 모논 왕자를 선택합니다. 정말 죄송합니다. 나는 이 말에 계속해서 걸려 넘어진다. 나는 그것을 도살하고 있지만 영화는 "원령공주"입니다. 하, 하, 하. 저를 미워하지 마세요. 어떤 이유로 그 단어를 발음하는 데 어려움을 겪고 있습니다.

그리고 이 두 영화가 관련되어 있음을 확인하므로 관계 필드에서 선택합니다. 이 경우 예를 들어 "The Lion King"은 "Toy Story"와 관련이 있으므로 "Toy Story"는 "The Lion King"과 관련이 있습니다. 따라서 일반적으로 "라이온 킹" 편집 화면으로 이동한 다음 "토이 스토리"를 찾아 거기에 추가하지만 작업을 두 배로 늘리고 있습니다. 따라서 양방향 관계가 하는 일은 자동으로 우리를 위한 연결을 생성한다는 것입니다. 이는 정말 정말 유용합니다.

예를 들어 "Toy Story"에 "The Lion King"을 추가하면 "Toy Story"가 자동으로 "Lion King"에 추가되는데 정말 정말 유용합니다. 콘텐츠 제작자와 콘텐츠 관리자의 시간을 크게 절약해 줍니다. 잊어버릴 위험이 줄거나 한 게시물에서 하나를 제거한 다음 다른 게시물에서 제거하는 것을 잊을 수 있습니다. 콘텐츠 편집 경험을 정말, 정말 단순화하므로 특히 이와 같은 흥미로운 사이트에서 사용할 수 있는 정말 유용한 것입니다. 어떻게 해야 할까요? 음, 현재 이를 수행하는 두 가지 방법이 있으며 세 번째 방법에 대해 이야기하겠습니다.

이것이 어떻게 이루어졌는지, 첫 번째는 코드에서 이를 수행할 수 있다는 것입니다. 따라서 ACF Pro 플러그인만 설치하면 이를 위한 코드를 작성할 수 있습니다. 그리고 ACF 업데이트 값 필터에 연결하는 함수를 작성할 수 있습니다. 이 필터는 값이 저장되기 전에 실행되며 기본적으로 수행하는 작업은 편집 중인 현재 게시물을 가져오고 게시물의 게시물 ID를 식별하는 것입니다. 추가된 다음 다른 게시물을 업데이트하고 백그라운드에서 그런 종류의 일치 작업을 수행하므로 매우 유용합니다.

약간의 코드, 그래서 당신이 그것에 익숙해지는 한 너무 무겁지 않습니다. 그러나 다시 한 번 고급 사용자 정의 필드 문서에서 확인할 수 있는 링크 또는 URL이 있어 어떻게 할 수 있는지 확인할 수 있습니다. 하지만 옵션 2는 코드가 없는 것인데, 이는 때때로 좋은 일입니다. 이것은 실제로 ACF Extended라는 생태계 플러그인입니다. WordPress.org에서 사용할 수 있으며 그 기능을 ACF UI 자체에 가져옵니다.

따라서 이 확장 프로그램인 ACF Extended를 설치하고 ACF Pro를 설치한 경우 관계 필드를 만들 때 설정할 수 있는 양방향 토글이 있는 옵션이 표시됩니다. 그런 다음 다음을 수행할 수 있습니다. UI 내에서 바로 컬렉션으로 설정하면 매우 편리합니다. 이제 이 프로젝트와 함께 일이 정말 흥미롭게 진행되고 있습니다. 이안, 너에게.

Iain Poulson: 예, 감사합니다 Rob. ACF에 관해서는 헤드리스를 부를 가치가 있습니다. ACF에는 헤드리스 지원이 있으므로 기본 헤드리스 사이트, 사이트의 분리된 특성이 있습니다. 많은 API 통신이 진행되고 있으며 ACF는 API를 지원합니다. 5.11 또는 5.11부터 기본적으로 ACF에 추가한 REST API와 WP GraphQL용 ACF 추가 기능이 있는 WP GraphQL 플러그인으로 GraphQL을 지원하므로 ACF는 헤드리스 사이트를 지원합니다. 적절한 헤드리스 WordPress 사이트를 위해 WP Engine Atlas 프로그램과 통합되어 있지만 VHS WordPress 사이트에 있는 데이터를 분리된 방식으로 사용하는 방법에 대한 일종의 실제 예에 대해 이야기해 보겠습니다.

예를 들어 – 제 말을 들어보세요 – 사람들은 기본적으로 VHS 어워드 사이트에서 투표를 하고 있습니다. 가장 인기있는 것을 볼 수 있습니다. 우리는 지역 영화관을 보유하고 있으며 가장 많은 득표를 받은 90년대 영화를 두 배로 늘리고 있습니다. 그래서 그들은 영화관에 광고판을 가지고 있고 온라인에 있습니다. 웹에 연결되어 있고 해당 빌보드에 표시되는 내용에 동적으로 전원을 공급할 수 있으므로 WordPress 사이트에 연결해야 합니다.

예를 들어 게시판은 간단한 노드 앱이고 VHS 사이트에서 데이터를 가져와야 하므로 사용자 지정 REST API 엔드포인트로 어떻게 할 수 있는지 간단히 살펴보겠습니다. GraphQL 지원을 받았습니다. 두 가지 방법으로 모두 수행할 수 있지만 이것은 아마도 보여주기에 더 간단한 예일 것입니다. 우선, 기본적으로 필요한 데이터를 가져오는 함수를 만들 것입니다. 따라서 이를 통과하면 영화를 원하거나 특정 유형의 영화를 게시하는 WP 쿼리입니다. 두 개를 원해. 하지만 ACF 필드로도 정렬하고 싶습니다. 필드 이름은 votes이고 내림차순으로 정렬하므로 맨 위를 얻을 것이고 맨 위를 얻을 것입니다. 둘.

그런 다음 이전 슬라이드에서 만든 콜백 함수를 사용하는 사용자 지정 REST 끝점을 만들겠습니다. 이 끝점은 두 영화를 가져오기 위해 누를 수 있는 끝점을 제공합니다. 실제로 실제 모습은 테스트일 뿐입니다. URL은 vhsawards.com, WP-JSON이고 API를 변경하려는 경우를 대비하여 VHS 버전 1의 네임스페이스를 제공했습니다. 우리는 매우 단순한 대중적인 URL 구조를 얻었습니다.

그리고 그것은 단지 "Fight Club"과 "Goodfellas"라는 두 개의 항목이 있는 JSON 개체를 반환하는 것입니다. ACF가 분리된 사이트와 헤드리스 사이트에 어떻게 힘을 실어주는지 보여주는 것은 확실히 좋은 일이지만 현재로서는 블록을 언급하지 않고 WordPress에 대해 이야기하기가 매우 어렵습니다. 블록을 언급하지 않고 지금까지 왔다는 것이 믿기지 않습니다. Rob, 우리가 그것을 바꾸기 위해 무엇을 얻었습니까?

Rob Stinson: 우리는 확실히 블록에 대해 이야기할 필요가 있습니다. 그 전에 나는 우리가 양방향 관계에 관한 5번을 살펴보기 직전에 세 번째 방법을 암시했다는 것을 깨달았습니다. 나는 그것을 다루지 않았습니다. 그래서 제가 말하고 싶은 것은 우리가 로드맵에 있기 때문에 플러그인 자체에 기본적으로 더 나은 양방향 관계 지원을 추가하는 것을 계획하고 있기 때문에 이 공간을 지켜보는 것입니다. 서드 파티가 필요하지 않은 ACF 플러그인 내에서 시간에 대한 약속 없이 이 공간을 지켜보십시오. 그것이 우리가 보고 있는 것입니다.

7번, 네. ACF로 사용자 지정 블록을 만드는 방법을 살펴보겠습니다. 이제 대부분의 사람들은 이제 ACF에서 이 작업을 수행할 수 있다는 것을 알고 있지만 모든 사람이 시도한 것은 아닙니다. 따라서 해당 진영에 있고 오랜 ACF 사용자이고 현재 사용자 정의 블록 기능을 사용하지 않은 경우 이 기능의 값을 확인하라는 메시지만 표시될 수 있으므로 이 기능을 시청하십시오. 하지만 이것을 VHS 어워드에 어떻게 사용할 것입니까? 아마도 우리는 다양한 위치를 추가할 수 있는 사이트용 블록 구성 요소를 원할 것입니다. 사용자 지정 블록 또는 모든 블록의 장점은 사이트 전체의 페이지와 게시물에 사용하고 배치할 수 있다는 것입니다. 액션 블록에 대한 사용자 지정 호출을 생성합니다.

이제 이것은 매우 간단한 블록이며 사용자 지정 블록을 사용하여 확실히 더 흥미로운 작업을 수행할 수 있습니다. 지금 간단하게 유지하겠습니다. 하지만 액션 블록에 대한 호출인 이 파란색 배너를 홈 페이지나 일부 블로그 게시물 등에 배치하여 독자와 사이트 방문자가 해당 버튼을 클릭하고 이동하도록 독려하고 싶습니다. 가장 좋아하는 90년대 영화에 투표하세요. 그렇다면 ACF로 이 커스텀 블록을 어떻게 구축할까요? 그리고 우리가 맞춤형 블록으로 작업하는 이유는 고유한 디자인이 있기 때문입니다.

이 반복되는 도트 패턴에 대해 흥미로운 배경 그라데이션이 진행되고 있으며, 우리는 이를 미세 조정된 제어 기능이 있는 사용자 지정 블록으로 구축하는 것이 외부 블록으로 수행할 수 있는 작업보다 더 쉽다는 것을 깨달았습니다. WordPress 코어가 있는 선반. 어떻게 해야 할까요? 첫 번째 단계는 일반적으로 functions.PHP 또는 이러한 종류의 코드를 작성하는 모든 위치에 사용자 지정 블록을 등록하는 것입니다. 훌륭하고 간단합니다. 템플릿 파일이 궁극적으로 사용자 정의 블록에 대한 디렉토리를 가리키므로 이것이 첫 번째 단계입니다.

두 번째 단계에서는 필드 그룹을 만들고 필드를 추가합니다. 따라서 Called Action 블록의 경우 텍스트, 버튼 텍스트, 버튼 링크 및 배경색도 포함해야 합니다. 아마도 우리는 이것을 위한 스타일링에 대한 약간의 변형을 위한 옵션을 제공하고 싶을 것입니다. 세 번째는 위치 규칙에서 블록을 선택하고 is equal to라고 말할 것입니다. 방금 전에 CTA 블록을 등록했습니다. 드롭다운에 있습니다. 이제 템플릿 파일로 이동하여 모든 필드와 모든 것이 설정되었으며 일부 템플릿을 수행할 것입니다. 이제 템플릿은 기존에 ACF를 사용한 템플릿 방식과 몇 가지 측면에서 다릅니다.

그러나 다른 많은 방법에서는 매우 매우 유사하므로 일반적으로 개발에 사용하는 많은 패턴을 사용자 정의 블록을 구축할 때 사용하게 됩니다. 이는 환상적입니다. 따라서 프로젝트에서 사용자 정의 테마라고 말할 것입니다. 우리는 블록 디렉토리를 가지고 있고, 우리가 등록한 블록과 일치하는 CTA 디렉토리를 가지고 있습니다. 그리고 일반적으로 HTML 마크업인 block.JSONsomething.PHP와 우리를 위한 점 CSS라는 세 개의 템플릿 파일이 있습니다. 스타일링.

이것은 블록 유형 JSON이고 이것은 우리가 블록을 등록한 일종의 위치이지만 이것이 우리가 사물을 조금 더 파악할 수 있는 방법이며 여기에서 구성 및 다양한 기본 코어 기능과 관련하여 할 수 있는 일이 많습니다. 켜거나 끌 수 있으며 사용자 지정 블록을 사용할 수 있습니다. 따라서 이것에 대한 문서를 확인하고 수행할 수 있는 작업을 이해하십시오. 제가 말했듯이 블록을 사용할 수 있는 방법을 구성하고 전달할 수 있는 핵심 기능과 기능을 표시할 수 있기 때문입니다. 사용자 지정 블록에.

그런 다음 템플릿 파일, PHP 파일이 있습니다. 여기에서 Get 필드와 상호 작용하는 변수를 설정하고 필드 데이터와 상호 작용하고 스타일에 대한 매우 간단한 조건부 논리를 볼 수 있습니다. 그런 다음 블록 자체에 대한 HTML입니다. 그런 다음 CSS를 살펴보지 않겠습니다. 당신은 CSS가 무엇인지 알고 있고 내가 여기에 작성한 것보다 더 나은 CSS를 작성할 수 있다고 확신하지만 아이디어를 얻습니다. 블록의 스타일을 지정하기 위한 CSS 파일이 있고 글꼴과 관련하여 흥미로운 점과 그런 종류의 도트 배경에 대한 방사형 그라데이션 배경이 있다는 것을 알 수 있습니다.

하지만 다시 말하지만, 이 사용자 정의 블록을 만드는 이유는 CSS와 스타일을 정말 미세하게 조정하여 우리가 작업 중인 디자인을 실제로 구현할 수 있기를 원하기 때문입니다. 이것이 에디터에서 어떻게 보이는지 보여드리기 위해 Called Action 블록을 선택하고 조명을 넓게 할 수 있습니다. 우리는 필드와 상호 작용하고, 텍스트와 버튼에 대한 텍스트를 추가하고, 버튼에 대한 링크를 추가할 수 있습니다. 이는 콘텐츠 편집기에 전달할 수 있는 매우 보기 좋은 사용자 정의 블록입니다.

Iain Poulson: 네, 감사합니다, Rob. 정말 보기 좋은 광경입니다. 우리는 그것을 실제로 적용할 필요가 있습니다. 굉장하다. 자, 오늘 이야기한 내용을 살펴보겠습니다. 그래서 ACF Pro를 Composer로 설치하는 방법을 살펴보았습니다. ACF에서 사용자 지정 게시물 유형 및 분류를 등록하는 방법에 대해 이야기했습니다. 옵션 페이지를 사용하여 전역 또는 사이트 전체 필드를 등록하는 방법을 살펴보고 패키지를 사용하여 프로그래밍 방식으로 필드를 등록하는 다른 방법을 살펴보았습니다.

Rob은 관계와 양방향 관계를 생성하는 방법을 탐구했습니다. 우리는 ACF로 헤드리스를 다루었고 Rob은 이제 ACF로 사용자 지정 블록을 생성하는 훌륭한 예를 수행했습니다. 일부 PHP, HTML 및 CSS 외에는 거의 아무것도 사용하지 않고 전혀 반응하지 않으므로 정말 좋습니다. 정말 잘했어요, 롭. 투표는 무엇입니까? 우리는 무엇으로 나왔습니까?

Rob Stinson: 90년대 최고의 영화는 부정할 수 없이 Robin Williams의 "Hook"입니다. 저에 대한 많은 향수가 저를 감싸고 있습니다. 저는 그 영화를 좋아합니다. 너는 어때, 이안?

Iain Poulson: 저에게는 Kevin Costner의 "Robin Hood, Prince of Thieves"가 되어야 합니다. 그것은 고전입니다. 나쁜 머리, 숭어, 영국식 억양도 아닌 엉뚱한 영어 억양은 잊어버리세요. 그것은 역대 최고의 로빈 후드 영화이고, 그것은 내가 기꺼이 죽고 싶은 언덕입니다.

Rob Stinson: 하, 하, 아니, 충분해. 봐봐, 모두들 놀아줘서 고마워. 뭔가를 배웠기를 바라며 ACF로 무엇을 빌드할지 정말 기대됩니다. 건배.