WordPress 사용자 정의 필드에 대한 필수 가이드

WordPress에 대해 다른 CMS(콘텐츠 관리 시스템)와 차별화되는 기능이 하나 있다면 바로 맞춤화입니다. WordPress의 사용자 정의 필드는 표시하는 메타데이터와 정보를 확장할 수 있을 뿐만 아니라 게시물이나 페이지의 기능과 유용성을 완전히 변경할 수 있는 CMS의 기본 제공 부분입니다. 기본을 이해하는 데 도움이 되고자 합니다. 우리는 사용자 정의 필드가 무엇인지, 왜 유용한지 논의하고 어떻게 사용되는지에 대한 실제 사례를 제공할 것입니다.

YouTube 채널 구독

WordPress 사용자 정의 필드란 무엇입니까?

간단히 말해서 WordPress 사용자 정의 필드는 페이지에 특정 요소를 추가하는 방법을 제공합니다. 그것은 특정한 종류의 이미지나 바이라인 또는 저자 약력일 수도 있고, 사용자 정의 필드에 대한 Codex 항목에서 말하듯이, 등급 또는 그와 같은 것일 수도 있습니다. 기분, 현재 읽고 있는 것, 듣고 있는 것 또는 날씨 상자.

이 필드는 게시물의 메타데이터(기본적으로 기사의 주요 콘텐츠에 포함되지 않은 모든 것)를 구성합니다. 기본적으로 WordPress에는 태그, 카테고리, 영구 링크, 추천 이미지 등과 같은 일반 정보에 대한 메타 상자가 있습니다. 더 추가하려면 사용자 정의 필드를 사용하게 됩니다.

팀의 각 작성자가 게시물을 게시하기 위해 완료해야 하는 정보를 추가할 수도 있습니다.

특정 기준이 선택 해제될 때까지 게시물이 게시되지 않도록 하는 필수 필드를 만들 수 있습니다. 따라서 이러한 사용자 정의 필드는 프론트 엔드에 대한 정보만을 위한 것이 아닙니다. 백엔드에도 유용할 수 있습니다.

WordPress 게시물에 사용자 정의 필드 추가

기본적으로 WordPress 사용자 정의 필드는 페이지 및 포스트 편집기에서 비활성화되어 있습니다. 블록 편집기를 사용하는 경우 쉽게 활성화할 수 있습니다. 화면 오른쪽 상단에 있는 톱니바퀴 아이콘 을 클릭하기만 하면 됩니다. 옵션 을 선택 합니다.

그런 다음 팝업 화면 하단 근처에서 사용자 정의 필드 를 활성화하도록 선택합니다. 페이지를 새로고침해야 하므로 먼저 작업을 저장해야 합니다.

활성화하고 다시 로드하면 사용자 정의 필드 메타 상자가 화면 하단에 나타납니다. 화면의 콘텐츠 편집기 부분 아래.

WordPress 사용자 정의 필드는 매우 강력하지만 기본 필드는 텍스트 값으로 제한됩니다. 더 강력해지기 위해서는 PHP와 개발이 필요합니다. 다행히도 이 작업을 수행하는 플러그인이 있으며 이를 실행하는 방법을 안내해 드리겠습니다. 일부 게시물의 텍스트 필드만 필요하고 플러그인을 원하지 않는 경우 테마의 프런트 엔드에 WordPress 사용자 정의 필드를 추가하는 방법에 대해 아래를 건너뛰어도 됩니다. 이는 고급 사용자 정의 필드와 같은 플러그인에서 생성된 필드뿐만 아니라 기본 필드에도 적용됩니다.

고급 사용자 정의 필드 플러그인 사용

WordPress의 대부분의 작업과 마찬가지로 구현에는 두 가지 옵션이 있습니다. PHP 파일을 수동으로 편집하여 사용자 정의 필드 기능을 추가하거나 플러그인을 사용할 수 있습니다. 이 경우 플러그인 경로를 사용하는 것이 좋습니다. 그러나 PHP를 편집하고 코드에 들어갈 필요가 있다고 생각되면 모양 – 테마 편집기 에서 수행할 수 있습니다. 다음은 사용자 정의 필드에 대한 WP Codex 페이지입니다. 작동하는 데 필요한 다양한 템플릿 태그 및 후크에 연결됩니다.

그러나 코드를 조정하는 것보다 고급 사용자 정의 필드 플러그인을 사용하는 것이 좋습니다. 플러그인은 사용자 정의 필드(및 일부)에서 원하는 모든 것을 허용하므로 바퀴를 재발명할 필요가 없습니다. 작동하면 작동합니다. 사용해.

ACF가 설치되고 활성화되면 WordPress 관리자 패널의 왼쪽 사이드바에 사용자 정의 필드 항목이 표시됩니다. 필드 그룹 , 새로 추가 및 도구의 세 가지 옵션이 제공됩니다.

필드 그룹 은 집합으로 생각할 수 있습니다. 동일한 상자에 표시하려는 모든 항목은 동일한 그룹에 포함됩니다. 새로 추가를 사용하면 새 그룹 과 새 사용자 정의 필드를 모두 추가할 수 있습니다. 도구 는 다른 WordPress 사이트에서 다른 기존 사용자 정의 필드 세트를 가져오고 내보내는 곳입니다.

ACF의 기초

필드 자체를 만드는 것은 매우 간단합니다. 새로 추가 창으로 이동합니다.

무엇이든 ACF 사용자 정의 필드는 필드 그룹에 포함됩니다. 이것은 동일한 상자에 포함된 특정 필드를 의미합니다. 따라서 게시물 편집기에 표시할 이름을 원하는 대로 지정할 수 있습니다. 그룹에 개별 항목을 추가할 때마다 필드 추가 버튼을 클릭합니다. 동일한 메타 상자에서 다른 필드를 원할 때마다 이 작업을 수행하십시오. 위치 규칙은 상자가 표시될 위치와 시기를 결정합니다. 이 예에서 Post Type Is Equal To Post 이므로 Posts에만 표시됩니다. 페이지 또는 기타 사용자 정의 게시물 유형이 아닙니다.

다음으로 필드 자체에 대한 설정 을 실제로 선택하게 됩니다. 사이트에서 수행할 작업과 기능.

기본적으로 배치(편집기의 게시물 콘텐츠 아래, 사이드바, 콘텐츠 위 등)와 텍스트 및 필드 자체의 배치를 선택합니다. 화면에서 숨기기 영역이 가장 흥미롭습니다. 사용자 정의 필드를 어떻게 사용해야 하는지에 따라 초안에서 다른 모든 메타 상자를 제외할 수 있습니다. 이 사용자 정의 필드의 모양에 대한 조건을 선택한 다음 함께 표시할 다른 상자를 결정합니다(있는 경우). 많은 경우 당신은 이것에 대해 걱정하지 않을 것입니다.

ACF로 사용자 정의 필드 생성

필드 그룹의 이름을 지정했으면 필드 추가 버튼을 클릭할 수 있습니다. 동일한 그룹 내에서 필드를 얼마든지 가질 수 있지만 모두 서로 관련되어 있어야 합니다. ACF로 상상할 수 있는 거의 모든 종류의 입력 필드를 만들 수 있습니다.

이 예에서 영화를 보고 사용자 정의 필드에 등급을 표시하고 영화가 스트리밍 중인지 여부와 스트리밍 중인 경우 찾을 수 있는 위치를 나열하는 대중 문화 WordPress 사이트를 실행한다고 가정해 보겠습니다.

이들은 모두 동일한 필드 그룹 아래에 있지만 다른 필드입니다. 위에서 볼 수 있듯이 스트리밍입니까? 필드는 게시 전에 필요한 예/아니요 선택기가 있는 라디오 버튼으로 설정됩니다. 또한 필드가 Yes 로 표시된 경우 조건부 필드가 표시되기를 원합니다 . 필드 추가를 다시 누르면 됩니다.

조건부 논리 토글이 활성화된 상태 에서 어떤 필드가 적용되고 어떤 값이 필요한지 선택하기만 하면 됩니다. 이 경우 스트리밍입니까? 예와 같아야 합니다 .

게시물 편집기에서 사용자 정의 필드 항목은 다음과 같습니다.

그리고 게시물을 게시하면 입력한 메타데이터가 게시물의 일부가 됩니다. 하지만 아직 한 가지 문제가 있습니다. 당신도 그것을 볼 수 없으며 방문자도 볼 수 없습니다.

WordPress 프런트 엔드에 사용자 정의 필드를 표시하는 방법

이 모든 작업을 완벽하게 수행했더라도 약간의 조정 없이는 입력한 데이터가 사이트 프론트 엔드에 표시되지 않습니다. 결국, 그것은 어디에 나타날까요? 여러 번 테마에는 메타 데이터와 사용자 정의 필드를 표시하는 방법이 있지만 테마마다 다릅니다. 문서에 대한 테마 옵션을 확인하십시오.

프런트 엔드에 사용자 정의 필드를 표시하는 또 다른 방법은 기본 제공 ACF 단축 코드입니다. ACF에 내장된 커스터마이저나 빌더는 없지만 텍스트 필드에만 다음 단축 코드를 사용할 수 있습니다.

그러나 텍스트 필드에 국한되어 있기 때문에 많은 사람들에게 사용이 제한될 수 있습니다. 문서 예제에서와 같이 PHP로 이동하여 ACF 코드를 사용할 수도 있습니다. 또한 ACF Pro로 업그레이드하고 빌더에서 스타일을 지정하는 그대로 사용자 정의 필드를 표시하는 내장 Gutenberg 블록에 액세스할 수 있습니다.

그러나 우리가 말했듯이 요즘 많은 테마가 사용자 정의 필드 통합으로 가득 차 있으며 Divi에서 어떻게 처리되는지 보여 드리겠습니다.

Divi를 사용하여 프런트 엔드에 사용자 정의 필드를 표시하는 방법

먼저 많은 Divi 모듈이 단축 코드를 렌더링할 수 있음을 기억하십시오. 위에서 언급한 것처럼 ACF에서 생성된 텍스트 사용자 정의 필드는 단축 코드를 사용하여 간단히 삽입할 수 있는 경우가 많습니다.

조건부 논리와 라디오 버튼을 사용하는 위의 예에서는 Divi의 동적 콘텐츠 기능을 사용할 것입니다. 사용법도 매우 간편합니다. 우리는 이것을 Divi 테마 빌더를 통해 보여줄 것이지만, 말 그대로 일반 Divi 빌더에서 이를 지원하는 모든 모듈에서 사용할 수 있습니다. 검은색 +를 클릭하고 원하는 모듈을 선택합니다. 이를 위해 Text Module 입니다.

다음으로 사용자 정의 필드를 삽입할 모듈 부분을 찾으십시오. 기능을 지원하는 모든 위치의 오른쪽에 있는 동적 콘텐츠 아이콘을 찾으십시오.

모든 사용자 정의 필드를 포함하여 사용 가능한 모든 종류의 동적 콘텐츠의 드롭다운 메뉴에서 선택하려면 클릭합니다. 그들은 가장 바닥에있을 수 있습니다.

Divi는 기본적으로 필드 내용에 전후 레이블을 추가하는 옵션을 제공합니다. 우리는 게시물의 일부로 자연스럽게 읽히기를 원하므로 이 영화를 온라인으로 스트리밍할 수 있습니까? 필드가 렌더링될 때 값 앞에 배치됩니다. 또한 ACF 값에서 레이블을 구분하기 위해 끝에 공백을 추가했습니다.

모듈 영역당 하나의 동적 콘텐츠만 가질 수 있으므로 다른 필드에 대해 이 과정을 반복합니다. 그러나 사용자 정의 필드가 조건부임에도 불구하고 Divi 모듈은 . 따라서 조건부 필드에서 이전/이후 레이블을 사용하면 해당 레이블이 계속 표시됩니다. 공백으로 두면 값이 전혀 렌더링되지 않습니다.

또한 원시 HTML 활성화 옵션을 사용하면 다양한 플랫폼에 대한 링크 등과 같이 ACF 필드에 입력한 모든 코드를 렌더링할 수 있습니다.

마무리

보시다시피 꽤 복잡한 것처럼 보이지만 WordPress 사용자 정의 필드는 개발자가 올바르게 작동하도록 하지 않는 기능입니다. ACF를 설치하고 귀하와 귀하의 팀이 정보를 입력하는 방법을 사용자 정의하기 시작하십시오. 리뷰 사이트, 전자 상거래 시장 또는 일상 생활에서 일어나는 일을 공유하고 싶은 친근한 블로그이든, 게시물과 페이지의 메타데이터를 수정하고 완성할 수 있으면 웹사이트가 새로운 수준으로 올라갈 수 있습니다.

WordPress 사용자 정의 필드는 무엇을 위해 사용합니까?

SurfsUp/Shutterstock.com의 주요 이미지