WordPress에서 사용자 정의 필드를 만들고 사용하는 방법

WordPress 사용자 정의 필드는 사이트의 일반적인 게시물 또는 페이지 콘텐츠를 확장할 수 있는 좋은 방법입니다. 워드프레스 사이트의 게시물이나 페이지에 첨부되는 메타데이터입니다. 즉, 이 방법을 사용하면 콘텐츠에 모든 종류의 추가 정보를 추가할 수 있습니다.

키/값 형식으로 구성된 사용자 지정 필드는 여러 게시물 또는 페이지에 데이터를 추가하는 데 사용됩니다. 키는 일관성을 제공하고 "항목"과 같은 특정 필드를 식별하는 이름입니다. 이것은 항상 동일합니다. 값은 필드에 표시되는 정보입니다. 입력한 정보에 따라 게시물마다 값이 달라집니다.

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

다음 단계는 게시물에서 사용자 정의 필드를 사용하는 방법을 보여줍니다. 페이지에서 사용하려는 경우 동일한 아이디어가 적용되지만 게시물이 아닌 페이지 작성을 담당하는 템플릿 파일에서 구현해야 합니다.

1. 포스트 에디터 화면으로 이동하여 “커스텀 필드”를 체크합니다.

2. 게시물 편집의 일부로 사용자 정의 필드 상자를 찾습니다. 게시물 페이지에 있을 때 하단에 "사용자 지정 필드"라는 제목이 있는 새 섹션이 표시됩니다.

이제 실행 중인 WordPress 사용자 정의 필드의 매우 기본적인 예를 살펴보겠습니다. 피트니스 블로그에 대한 이 예를 통해 모든 것이 정리될 것입니다. 사용자 지정 필드를 사용하여 게시물에 대한 다양한 유형의 신체 활동을 추적하고 나열합니다.

3. 키를 추가합니다. 이 경우에는 "운동 유형"입니다. 이 상자를 사용하여 게시물에 특정 세부 정보를 추가합니다. "새 항목 입력"을 클릭하고 필드에 키를 입력합니다.

4. 값을 추가합니다. 이를 위해 Zumba와 함께 갑시다. 이 특정 게시물에만 표시됩니다. 다른 게시물에서 "타원형" 또는 다른 유형의 운동과 같은 다른 값을 입력할 수 있습니다.

5. 게시물을 저장합니다.

지금은 실제로 많이 보지 못할 것입니다. 정보를 표시하려면 일부 서식을 추가해야 합니다. 지금까지 이 추가 정보는 데이터베이스에 저장되어 표시되도록 호출할 수 있습니다. 이 자습서에서는 게시물(페이지 대신)에 이러한 사용자 지정 필드를 표시하도록 선택했으므로 모든 형식을 지정하는 가장 기본적인 방법을 살펴보겠습니다.

게시물에 사용자 정의 필드 표시

템플릿 수정을 사용하여 사용자 정의 필드를 반복 사이트 데이터로 추가하는 것은 효율적인 방법입니다. 게시물 시작 부분에 사용자 정의 필드를 표시하는 것으로 시작했지만 나중에 하단에서 더 잘 보이도록 결정했다고 가정해 보겠습니다. 템플릿 수정을 사용하면 템플릿을 변경하면 전체 사이트가 업데이트되므로 쉽게 변경할 수 있습니다. 이 방법을 사용하지 않고 각 게시물에 개별적으로 정보를 저장한 경우 변경을 위해 모든 게시물을 편집해야 하므로 변경이 훨씬 더 어려워집니다.

이 예에서는 독자가 전체 게시물을 읽기 전에 운동 유형을 바로 볼 수 있도록 게시물 앞에 사용자 지정 필드가 표시됩니다. 이런 식으로 표시하기 위해 WordPress 루프 전에 데이터가 호출됩니다.

참고: 이러한 사용자 정의는 물론 하위 테마에서 수행해야 하며 single.php 파일을 사용합니다. 항상 그렇듯이 이와 같은 사용자 정의는 개발 환경에서 가장 잘 테스트됩니다.

1. single.php 파일을 열고 다음 코드를 WordPress 루프 외부에 추가합니다.

 <?php the_meta(); ?>

다음과 같이 표시됩니다.

이것을 페이지의 다른 곳에 표시하려면 해당 스니펫을 루프 안에 또는 루프 뒤에 배치해 보십시오. 예를 들어 <main> 태그 안에 함수를 배치하면 사용자 정의 필드 정보가 기본 콘텐츠의 일부로 표시됩니다.

 <div class="content-area"> <main class="site-main" role="main">

이 접근 방식은 사용자가 만든 다른 사용자 정의 필드도 표시하는 데 효과적입니다.

이 예에 대해 언급할 한 가지: 하위 테마는 매우 인기 있는 WordPress Twenty Fifteen 상위 테마에서 생성되었습니다. 사용자 지정 필드를 표시할 위치를 실험하는 경우 single.php 파일 외에 자식 테마에 필요한 다른 템플릿이 있을 수 있습니다. 게시물에 정보를 표시하기 위해 자식 테마에 content.php 추가했습니다. 위의 스니펫은 게시물의 일부로 나타나도록 페이지의 콘텐츠 내에 배치되었습니다.

2. 필드 스타일을 지정합니다. 인스펙터로 이동하면 페이지에 추가된 몇 가지 새 클래스를 볼 수 있습니다.

다음은 서로 다른 두 개의 사용자 지정 필드가 있는 예제의 모습입니다.

• 운동의 종류: 줌바
• 시간: 아침

목록으로 작업하는 것은 매우 간단합니다. 일부 스타일을 사용하면 사이트 스타일과 더 통합된 것처럼 보입니다. 몇 가지 간단한 CSS 수정만으로 텍스트 색상과 목록 스타일을 조정할 수 있습니다.

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

더 많은 사용자 정의 필드 사용자 정의

이전 예제의 스타일링은 잘 작동하지만 더 많은 작업이 있습니다. 다음 예는 특정 사용 사례에 대한 추가 표시 옵션을 사용하여 사용자 정의 필드를 조정하는 방법을 보여줍니다. 사용자 지정 필드를 게시물의 일부로 읽게 만들고 유용한 제목으로 컨텍스트를 설정하면 게시물에 큰 도움이 됩니다. 단계별로 따라하고 있다면 <?php the_meta(); ?> <?php the_meta(); ?> 이전 예제에서 추가한 것입니다.

이 예에서는 내용이 약간 수정되었습니다. 키를 "exercises"로 단순화하여 템플릿에 더 쉽게 추가할 수 있도록 했으며, 자식 테마의 content.php 파일에 코드 스니펫을 추가하여 게시물 콘텐츠 전후가 아닌 게시물 콘텐츠에 표시되도록 했습니다. .

 <?php $exercises = get_post_meta($post->ID, 'exercises', false); ?> <h3>Today's exercise:</h3> <ul> <?php foreach($exercises as $exercise) { echo '<li>'.$exercise.'</li>'; } ?> </ul>

이제 사용자 지정 필드가 목록 형식으로 "오늘의 연습:"이라는 머리글 아래에 표시됩니다. 이것은 <h3> 로 설정되었지만 다른 제목이나 단락 스타일로 쉽게 조정할 수 있습니다. 목록 형식을 원하지 않는 경우 원하는 대로 구조화할 수도 있습니다.

조건부 사용자 지정

필드

사용자 정의 필드가 포함되지 않은 경우가 있을 수 있습니다. 예를 들어 운동값이 없는 게시물이 있다고 합시다. 이렇게 하면 대체 정보를 표시할 수 있으므로 그냥 비워두는 것이 아닙니다.

 <?php $exercises = get_post_meta($post->ID, 'exercises', true); ?> <h3>Today's exercise:</h3> <ul> <?php if ($exercises) { ?> <?php echo '<li>' .$exercises. '</li>'; ?> <?php } //if there is nothing for exercises then display else { ?> <li>Today was a rest day.</li>

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

해당 자습서를 따르면 쉽게 사용자 지정 필드를 시작하고 실행할 수 있습니다. f 사용자 정의 필드를 추가하기 위해 플러그인을 사용하고 싶지만 이를 위해 사용 가능한 옵션도 있습니다. 고급 사용자 정의 필드는 매우 인기 있는 옵션입니다. 이것은 WordPress의 기본 사용자 정의 필드 인터페이스를 대체합니다. 이 튜토리얼에서 만든 최종 제품도 이 플러그인으로 만들 수 있습니다.

필드 그룹

고급 사용자 정의 필드 플러그인은 위의 튜토리얼과 밀접하게 관련되어 있기 때문에 언급할 가치가 있는 필드 그룹을 허용합니다. 기본적으로 미니 필드 그룹의 매우 기본적인 버전을 만들었습니다. 고급 사용자 정의 필드 그룹에는 사용자 정의 필드, 위치 규칙 및 표시 옵션이 포함됩니다. 각 필드 그룹은 위치 규칙을 사용하여 필요할 때 올바른 위치에 필드를 표시합니다. 수동 작업 방식과 마찬가지로 이러한 표시 옵션을 사용하여 원하는 대로 페이지를 사용자 지정할 수 있습니다. 이 플러그인으로 선택할 수 있는 필드 그룹이 많이 있습니다.

이것은 이 플러그인으로 수행할 수 있는 작업의 표면을 간신히 긁습니다. 전체 그림을 보려면 Advanced Custom Fields 웹 사이트를 방문하십시오.

사용자 정의 필드는 WordPress의 기본 기능입니다. 몇 가지 템플릿만 수정하면 이 기능을 웹 사이트에 쉽게 추가할 수 있습니다. 이러한 단계는 기본 사항을 다루며 약간의 실험을 통해 사용자 지정 필드를 구현하는 방법을 명확하게 이해할 수 있습니다. 다음 프로젝트를 계획할 때 사용자 정의 필드가 제공하는 유연성을 고려해야 합니다. 다양한 유형의 콘텐츠를 수용할 수 있으며 사이트 전체를 쉽게 변경할 수 있습니다.