사용자 정의 WordPress 메타 상자를 만드는 방법

게시 됨: 2015-06-09

사용자 지정 WordPress 메타 상자란 무엇입니까?

사용자 지정 메타 상자를 사용하면 WordPress 코어에 포함된 WordPress에서 "즉시 사용 가능한" 자동으로 사용할 수 있는 표준 메타 상자를 제외하고 게시물, 페이지 및 사용자 지정 게시물 유형에 추가 정보를 추가할 수 있습니다.

당신이 그것을 알고 있든 없든, 당신은 지금 잠시 동안 메타 박스를 사용하고 있습니다. 대시보드 위젯, 편집기, 사용자 정의 필드, 추천 이미지, 카테고리 및 태그와 같은 것이 메타 상자의 예입니다.

사용자 정의 WordPress 메타 상자를 만드는 방법

프로젝트에 좀 더 맞춤화된 추가 메타 상자를 만들어야 하는 경우 어떻게 됩니까? 훌륭한 옵션이 될 수 있는 사용자 정의 메타 상자를 만드는 데 도움이 되는 기존 플러그인이 있습니다. 이것이 당신이 택할 경로라고 결정하더라도 사용자 정의 메타 상자의 후드 아래에서 무슨 일이 일어나고 있는지에 대한 기본 개념을 이해하는 것이 여전히 중요합니다.

CSS Sprites를 사용하여 로고 반응형 만들기

CSS 스프라이트를 기억하십니까? 그것들은 하나의 파일로 결합된 다양한 그래픽 그룹이며 반응형 로고를 만드는 데 사용할 것입니다. 브라우저 성능을 최적화하는 데 사용되는 기술입니다...

이 매우 간단한 메타 상자를 만들 때 매우 높은 수준에서 개념을 살펴보겠습니다. 완료되면 제품 제목을 입력할 수 있는 사용자 정의 메타 상자가 생깁니다.

비록 우리가 간단하게 시작하지만, 이 아이디어는 더 복잡한 필요를 위해 확장될 수 있다는 것을 명심하십시오. 사용자 정의 메타 상자에 포함될 수 있는 많은 옵션과 추가 기능이 있습니다. 확인란, 파일 업로드 등과 같은 것은 모두 사용자 정의 메타 상자의 가능한 기능입니다. 이 튜토리얼에서는 필드의 스타일을 지정하는 데 필요한 CSS에 익숙하다고 가정합니다. 스타일링에 대해 자세히 설명하지는 않겠지만, 이는 메타 상자가 실행되고 나면 쉽게 수행할 수 있는 것입니다.

커스텀 메타 박스 개발

메타 박스에 대한 사용자 정의 코드는 functions.php 또는 플러그인에 포함될 수 있습니다. 이 예제는 플러그인 형태로 필요한 코드를 포함할 것입니다. 이것은 사용할 준비가 된 완전한 파일을 만들기 위해 단계별로 복사할 수 있습니다.

코덱스는 당신의 가이드입니다

Codex는 아직 없는 경우 가장 친한 친구가 될 것입니다. 다른 인수에는 다른 옵션이 있으며 Codex는 이에 대해 자세히 설명합니다. Codex는 여러분이 잘 알아야 하는 것입니다.

먼저 로컬에서 테스트

다음은 이 튜토리얼에 대한 유일한 면책 조항입니다. 먼저 로컬 개발 환경에서 시도하십시오. 우리 모두는 삶의 작은 모험에 감사하지만, 특히 라이브 사이트에서 죽음의 흰 화면을 좋아하는 사람은 아무도 없습니다. 우리는 이 튜토리얼을 단계별로 진행할 것이며, 진행하면서 발생하는 종속성이 있습니다. 이 때문에 중간에 저장하면 오류가 발생할 가능성이 높습니다.

1단계: 제목 생성 및 플러그인에 삽입

플러그인을 만드는 것이 복잡하게 들릴 수 있지만 모든 플러그인이 수백 줄이어야 하는 것은 아닙니다. 플러그인은 매우 간단할 수 있으며 이것이 그 좋은 예입니다. wp-content 폴더 로 이동하면 plugins 폴더 를 볼 수 있습니다. custom-post-meta-box.php -meta-box 라는 새 폴더를 만듭니다. 작업할 파일입니다. 

파일 경로 메타 상자

플러그인을 생성할 때 다음 정보가 사용자 정의 코드 앞에 나타나는지 확인하십시오.

<?php

/*

Plugin Name: Custom Meta Box

Plugin URI:  www.yourwebsite.com

Description: Creates a meta box in WordPress

Version:     1.0.0

Author:      Your Name

Author URI:  www.yourwebsite.com

License: GPL2

*/

플러그인 활성화

아직 코드를 넣지 않았지만 플러그인으로 이동하여 Custom Meta Box를 찾고 활성화를 선택하여 플러그인을 활성화할 수 있습니다. 아직까지는 아무 것도 바뀌지 않을 것임을 명심하십시오.

00-활성화-플러그인

선택적 CSS

이것은 선택 사항이지만 사용자 정의 CSS를 추가하려는 경우 플러그인 파일에 복사하십시오. .css 파일이 플러그인의 css 폴더에 있는지 확인하십시오.

function cmb_add_admin_styles() {

wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );

}

add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );

01-css-파일 위치

2단계: 메타 상자 추가

add_meta_box 함수는 사용자 정의 메타 상자를 만드는 데 사용됩니다. 이 기능은 사용자 정의 메타 상자를 등록하고 표시하는 역할만 합니다.

function cmb_add_meta_box() {

add_meta_box(

'custom_post_metabox',

'Our Products',

'cmb_display_meta_box',

'post',

'normal',

'high'

);

}

add_action( 'add_meta_boxes', 'cmb_add_meta_box' );

대시보드를 보면 "Our Products"라는 제목이 표시되지만 텍스트를 입력할 텍스트 필드가 없습니다.

01-메타-박스-스타트

3단계: 관리자에 메타 상자 필드 추가

정보에 대한 레이블과 필드가 있는지 확인해야 합니다. html을 사용하면 가능합니다.

function cmb_display_meta_box( $post ) {

wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );

$html = '<label id=&quot;product-title&quot; for=&quot;product-title&quot;>';

$html .= 'Product Title';

$html .= '</label>';

$html .= '<input type=&quot;text&quot; id=&quot;product-title&quot; name=&quot;product-title&quot; value=&quot;' . get_post_meta( $post->ID, 'product-title', true ) . '&quot; placeholder=&quot;What is the Product Title?&quot; />';

echo $html;

}

// this echoes a single stream of html

02-메타박스

<label> 에 어떻게 포장되어 있는지 보십시오. 사용자가 필드가 무엇이며 입력해야 하는 정보 유형을 이해하는 데 도움이 되는 설명 텍스트 "제품 제목"을 보게 됩니다. 또한 유용한 정보를 추가하는 자리 표시자 텍스트도 있습니다.

귀하의 입력이 그렇게 넓지 않을 수 있습니다. 모든 자리 표시자 텍스트가 표시될 수 있도록 일부 사용자 지정 CSS가 수행되었습니다. 레이블의 너비는 100%입니다.

4단계: 데이터 저장 및 nonce 사용의 중요성

3단계에서 텍스트를 입력했는데 실제로 저장되거나 페이지에 표시되지 않는다는 것을 깨달았을 수 있습니다. 이 단계는 실제로 모든 마법이 일어나는 곳입니다.

function cmb_save_meta_box_data( $post_id ) {

if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {

if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {

$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );

update_post_meta( $post_id, 'product-title', $product_title );

}

}

}

add_action( 'save_post', 'cmb_save_meta_box_data' );

function cmb_display_product( $content ) {

if ( is_single () ){

$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );

$content .= $html;

}

return $content;

}

add_action('the_content', 'cmb_display_product');

function cmb_user_can_save( $post_id, $nonce ) {

$is_autosave = wp_is_post_autosave( $post_id );

$is_revision = wp_is_post_revision( $post_id );

$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );

return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;

}

여기에 몇 가지 일이 있습니다. 기본적으로 cmb_save_meta_box_data 함수는 모든 저장이 일어나기 위해 필요한 것입니다. nonce 값으로 보안에 집중하겠습니다. 이것은 저장할 데이터가 올바른 소스에서 오는지 확인하는 보안 조치입니다. 또한 게시물이 자동 저장 또는 수정 사항이 아닌지 확인하고 싶습니다. 그러면 nonce가 검증되고 사용자가 저장할 수 있습니다.

이제 안전하게 저장할 수 있으므로 페이지에 메타 정보가 표시됩니다. 보시다시피 쉽게 스타일을 지정할 수 있지만 작동하고 데이터가 저장됩니다.

03-저장된 메타 정보

추가 읽기 및 숙제

보시다시피 몇 단계만 거치면 사용자 정의 메타 상자를 만들 수 있습니다. 대부분의 개발 프로젝트와 마찬가지로 동일한 작업을 수행하는 여러 가지 방법이 있으므로 이 동일한 작업에 대한 다른 접근 방식을 찾을 수 있습니다.

우리는 사용자 정의 메타 상자를 매우 높은 수준에서 살펴보았으므로 이러한 개념을 더 자세히 살펴보고 싶을 수도 있습니다. 사용자 정의 메타 상자가 더 많이 필요하다고 생각되면 추가 검색을 위한 몇 가지 훌륭한 소스가 있습니다.

  • 논스에 대한 추가 정보
  • 메타박스 플러그인
  • add_meta_box 함수에 대한 옵션