WordPress 메타 상자 – 빠른 가이드

WordPress 메타 상자는 편집 화면에 표시되는 드래그 가능한 상자이며 분류 용어와 같은 추가 데이터를 처리하는 데 사용됩니다. 이 기사에서는 WordPress 메타 상자를 살펴보고 사용자 정의 메타 상자를 만드는 방법, 변경 사항을 저장하는 방법 및 웹 사이트의 프런트 엔드에 해당 콘텐츠를 표시하는 방법을 알아봅니다.

시작하자!

사용자 정의 필드, 메타 상자 및 메타데이터

이 세 용어의 차이점에 대해 많은 혼란이 있습니다. 이 세 가지가 무엇이며 어떻게 작동하는지 더 잘 이해하기 위해 세 가지를 모두 살펴보겠습니다.

메타데이터

게시물의 메타 데이터는 데이터베이스 postmeta 테이블에 저장된 게시물에 대한 추가 정보입니다.

모든 키/값 쌍은 '게시 필드'로 간주됩니다. 이 테이블이 가질 수 있는 메타 항목의 수에는 제한이 없습니다.

사용자 정의 필드

기술적으로 사용자 정의 필드인 기능 이미지와 같이 WordPress에 의해 사전 정의된 필드가 있습니다. 다른 것들은 플러그인 또는 사용자 정의 코드로 추가하고 관리자가 정의할 수 있습니다. 사용자 정의 필드에 대한 자세한 내용은 'WordPress 사용자 정의 필드 시작하기' 기사를 참조하십시오.

메타박스

편집을 위해 WordPress 게시물을 열면 페이지가 여러 섹션으로 나누어져 있는 것을 볼 수 있습니다(많은 섹션이 오른쪽 사이드바에 있음).

이 모든 섹션은 기술적으로 '메타 상자'입니다. 따라서 주요 게시물 편집기, 카테고리 선택, 게시물 게시, 태그 추가, 추천 이미지 추가를 위한 컨테이너는 모두 게시물의 메타데이터와 상호 작용하는 HTML 요소를 포함하는 메타 상자입니다. 웹사이트에서 메타데이터를 처리하는 방법에 따라 이러한 상자는 화면의 다른 위치에 나타납니다.

추가 예를 들어 추천 이미지 메타 상자를 살펴보겠습니다. 이것은 일반적으로 게시물 관리 화면의 오른쪽 사이드바에서 찾을 수 있습니다. 거기에서 이미지를 쉽게 변경할 수 있습니다. 이렇게 하면 실제로 해당 게시물 메타데이터의 _thumbnail_id 를 업데이트하는 것입니다.

'source'(커스텀 필드에 대한 튜토리얼에서 추가한)와 같은 커스텀 필드 메타 박스는 일반적으로 메인 포스트 에디터 아래에서 찾을 수 있습니다.

사용자 정의 게시물 유형에 대한 메타 상자 만들기

이제 메타 상자가 정확히 무엇인지에 대한 명확한 아이디어를 얻었으므로 계속 진행하여 웹 사이트에 대한 사용자 정의 메타 상자를 구축할 수 있습니다. 이 튜토리얼은 사용자 정의 게시물 유형에 대한 튜토리얼에서 이어집니다... 단계별로 따르려면 해당 문서를 확인하고 '레시피'라는 사용자 정의 게시물 유형을 만든 다음 몇 가지 '레시피'를 설정해야 합니다. ' 추천 이미지가 선택된 테스트 게시물.

이 튜토리얼에서는 확인란을 선택하여 레시피가 비건인지 여부를 정의하는 데 사용할 새 메타 상자를 추가하여 사용자 정의 게시물 유형을 확장할 것입니다.

1단계 – 메타박스 등록

사용자 정의 게시물 유형에 메타 상자를 추가하려면 WordPress에서 제공하는 add_meta_box 기능을 사용합니다. 다음은 사용할 인수가 있는 함수의 구조입니다.

 add_meta_box( $id, $title, $callback, $screen, $context )

고유 ID에는 is_vegan 을 사용하고 메타 상자의 제목에는 Is Vegan 문자열을 사용합니다.

상자 내용을 표시하는 콜백 함수는 display_vegan_meta_box 입니다. $screen 속성은 메타 박스가 표시될 관리 화면을 나타냅니다. 우리의 경우 이것은 레시피의 포스트 편집 영역이므로 앞에서 언급한 것처럼 고유한 포스트 유형 이름이 recipes 입니다. $context 매개변수는 관리자 화면에 따라 다릅니다.

여기에서 사용할 편집 후 화면 컨텍스트에는 사용 가능한 컨텍스트 값으로 일반, 측면 및 고급이 포함됩니다. 사이드 값을 사용하여 포스트 편집 페이지의 사이드바에 메타 상자를 표시합니다.

따라서 요약하면 my-custom-post-type.php 에 추가해야 하는 코드 위에 정의된 매개변수를 사용하면 다음과 같아야 합니다.

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

보시다시피, 사용자가 관리 영역에 액세스할 때 다른 후크보다 먼저 트리거되는 admin_init 후크를 사용했습니다.

이제 레시피 게시물의 편집 페이지를 방문하면 사이드바에 상자가 표시되어야 합니다. 물론 현재 내용은 비어 있습니다.

다음 단계는 원하는 내용으로 상자를 채우는 것입니다.

2단계 – Meta Box 기본 콘텐츠 표시

이 상자의 내용은 단순하게 유지하겠습니다. 설명과 체크박스만 있으면 됩니다. 언급했듯이 콘텐츠는 display_vegan_meta_box 함수에서 반환됩니다.

계속 진행하여 my_metabox 함수 아래에 아래 코드를 추가하세요.

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

이 함수에서 우리가 한 것은 현재 선택되지 않은 HTML 체크박스를 출력하는 것입니다. 저장 기능을 도입한 후에는 편집 후 페이지가 로드될 때 확인란이 저장된 확인란 상태를 검색하도록 코드의 이 섹션으로 돌아가 몇 가지를 더 변경할 것입니다.

3단계 – 메타 상자 값을 데이터베이스에 저장

메타박스의 입력 필드 값을 저장하기 위해 다음과 같이 WordPress에서 제공하는 save_post 작업 후크를 사용합니다.

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

$post_id 인수가 있는 update_vegan_bo x 함수 내부에 몇 가지 조건이 포함되었습니다. 먼저 사용자에게 게시물 편집 권한이 있는지 확인하고 recipes 게시물 유형을 편집하고 있는지 확인하고 싶습니다.

따라서 게시물이 recipes 유형에 속하는 경우 확인란의 값을 검사합니다. 기본적으로 체크박스가 체크되면 데이터베이스 값이 'yes'로 저장되고 그렇지 않으면 값이 NULL임을 기억하십시오. 채식주의 메타 상자를 선택하지 않고 게시물을 저장할 때 '아니오' 값이 저장되도록 이것을 약간 조정했습니다.

여기서 우리는 update_post_meta WordPress 함수 update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' ) 사용했습니다.

인수에서 포스트 ID, 메타 키, 메타 값을 정의했습니다. 이 함수는 $prev_value 인수를 하나 더 받아들일 수 있습니다.
업데이트하기 전에 이전 값을 확인하고 동일한 경우에만 진행하고 업데이트합니다.

4단계 – Meta Box 콘텐츠 코드 수정

이제 메타 상자 내용을 출력하는 이전 함수로 돌아가서 데이터베이스에서 관련 데이터를 검색하는 코드 줄을 추가해 보겠습니다.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

따라서 먼저 is_vegan 메타 값을 검색한 다음 해당하는 경우 checked 된 값이 $checked 변수에 전달되고 HTML 출력에 반영됩니다.

그리고 그게 다야. 이제 사용자 정의 게시물의 레시피가 완전 채식인지 여부를 정의하는 데 사용할 수 있는 작동하는 메타 상자가 있습니다.

결론

메타 상자는 게시물에서 향상된 수준의 제어와 유연성을 제공하며 다양한 방식으로 활용될 수 있습니다. 그들에 대해 특히 좋은 점은 게시물의 나머지 내용과 분리되어 있는 동시에 동일한 관리자 화면에 상주하여 WordPress 관리자의 다른 위치에 있는 것보다 훨씬 쉽게 관리할 수 있다는 것입니다.

대부분의 WordPress 코딩과 마찬가지로 메타 상자 사용에 익숙해지는 데 시간이 걸릴 수 있습니다. 위의 정보가 시작하기에 충분하기를 바랍니다. 즐거운 코딩!