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

몇 년 전 나는 게시물을 쿼리하고 게시물이 작성된 위치를 Google 지도에 표시하는 방법을 찾고 있었습니다. 내 연구에서 CMB2 및 Google 지도를 사용하여 매장 찾기를 구축하는 방법에 대한 블로그 게시물을 우연히 발견했습니다. 그 이후로 CMB2는 내가 가장 좋아하는 플러그인 중 하나가 되었으며 대부분의 프로젝트에서 사용됩니다.

먼저 CMB2는 무엇입니까?

음, CMB는 Custom Meta Boxes의 약어이며 플러그인 페이지의 설명에 따르면 "CMB2는 마음을 사로잡을 WordPress용 메타 상자, 사용자 정의 필드 및 양식 라이브러리입니다." WebDevStudios의 Justin Sternberg가 개발했으며 2년 조금 넘게 플러그인 저장소에 있었습니다. 그러나 지난 2월 WordPress 플러그인 저장소의 좋은 사람들은 그들이 있어서는 안 되는 플러그인으로 CMB2를 승인하고 바보짓을 한다는 것을 인식했습니다.

플러그인은 일반적으로 즉시 사용할 수 있습니다. 그들은 몇 가지 고유한 기능을 가지고 있습니다. CMB2는 실제로 프레임워크입니다. Sternberg가 한 번 설명했듯이 "테마 및 플러그인에 대한 양식과 필드를 쉽게 구축하기 위한 개발자의 프레임워크입니다." 실제로 CMB2를 설치하면 아무 일도 일어나지 않습니다. 관리자 페이지가 표시되지 않으며 관리자 사용자 인터페이스도 없습니다. CMB2를 사용하려면 코드를 작성하고 functions.php 파일에 추가할 수 있어야 합니다. 그런 이유로 나는 그것을 '비플러그인' 플러그인이라고 부른다.

좋은 소식은 플러그인 승인 팀이 저장소에 플러그인을 남겨두는 데 동의했기 때문에 계속해서 저장소에서 다운로드하고 업데이트할 수 있다는 것입니다. 여기 Justin의 사이트에서 모든 역사를 읽을 수 있습니다.

CMB2를 설정하는 방법

시작하려면 플러그인 디렉토리에서 example-functions.php 파일을 찾아 테마에 복사해야 합니다. 테마의 루트 폴더에 직접 복사할 수 있지만 프로젝트를 깔끔하게 정리하려면 /lib/ 또는 /includes/ 와 같은 폴더에 복사하는 것이 좋습니다. CMB2를 어떻게 사용하고 싶은지 이미 알고 있다면 더 적절한 이름으로 파일 이름을 바꿀 수 있습니다. 예를 들어, 평가 페이지에 대한 사용자 정의 필드를 생성하는 데 사용하려는 경우 이름을 testimonial-functions.php 로 지정할 수 있습니다.

다음으로, functions.php 파일에 require_once 문을 추가하여 WordPress가 새 파일을 찾는지 확인해야 합니다. 다음과 같이 보일 것입니다.

require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

이제 실제로 파고들 시간입니다. testimonial-functions.php 파일(또는 이름을 지정한 파일)을 엽니다. Justin은 가능한 모든 유형의 필드에 대한 예제를 만들었을 뿐만 아니라 홈페이지, 카테고리, 게시물 ID 등으로 필드를 표시하는 기능도 만들었습니다.

WordPress에서 JavaScript를 로드하는 방법

JavaScript는 주변에서 가장 인기 있는 코딩 언어 중 하나입니다. 웹사이트나 애플리케이션을 구축할 때 매우 유용하며 활용할 수 있는 JavaScript 라이브러리와 프레임워크가 셀 수 없이 많습니다.

참고: 이 문서는 CMB2를 소개하기 위한 것입니다. 모든 측면을 사용하는 방법에 대한 전체 자습서는 아니며, 프레임워크이며 프로그래머를 지원하기 위해 개발되었기 때문에 PHP와 WordPress의 내부 작동에 대한 기본 이해가 있어야 합니다. 관리 사용자 인터페이스가 있는 Custom Meta Box 플러그인을 찾고 있다면 Advanced Custom Fields 플러그인을 확인하는 것이 좋습니다.

자, 후기와 같은 간단한 것을 위한 몇 가지 커스텀 메타 박스를 만드는 것으로 돌아가 봅시다. 먼저 필요한 필드의 수와 유형을 결정하십시오. 간단하게 하기 위해 세 개의 필드가 필요하다고 가정해 보겠습니다. 하나는 실제 사용후기, 하나는 사용후기, 하나는 사용후기입니다.

testimonial-functions.php 파일에서 작업하면서 새 기능을 등록하고 추가하기 위한 섹션을 찾아야 합니다. 그 코드는 다음과 같습니다.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

다음으로 기능 이름을 테마 및 프로젝트와 관련된 이름으로 바꾸는 것이 좋습니다.

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

또한 접두사 이름을 바꾸는 것이 좋습니다.

// Start with an underscore to hide fields from custom fields list
$prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

선택할 수 있는 여러 필드 유형이 있습니다. 나는 사용할 것이다:

'type' => 'textarea_small' // for the author field
'type'    => 'wysiwyg' // for the testimonial in case we want to include html
'type' => 'file' // for the image of the project or author

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );

이 세 개의 새 필드를 새 함수에 추가해야 하므로 다음과 같습니다.

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

그리고 그게 다야! 최종 코드는 다음과 같아야 합니다.

<?php
/**
 * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory)
 *
 * Be sure to replace all instances of 'yourprefix_' with your project's prefix.
 * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/
 *
 * @category YourThemeOrPlugin
 * @package  Demo_CMB2
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/WebDevStudios/CMB2
 */

/**
 * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS!
 */

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

// This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10

$cmb_demo = new_cmb2_box( array(
		'id'            => $prefix . 'metabox',
		'title'         => __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  => array( 'page', ), // Post type
		'show_on'      => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

완료되면 다음과 같은 페이지가 표시됩니다.

옵션이 정말 무궁무진하기 때문에 CMB2를 사용하면 웹사이트에 필요한 것을 정확하게 제공할 수 있습니다. 예를 들어, CMB2를 사용하여 로고용 메타 상자, 소셜 미디어 사이트 URL 또는 비디오가 있는 테마 옵션 페이지를 만들 수 있습니다. 클라이언트용 웹사이트를 구축하는 경우 CMB2는 관리자를 사용자 지정하는 데 적합하므로 클라이언트가 테마 스타일에 맞게 콘텐츠 형식을 지정할 필요가 없습니다. 그리고 데이터가 입력되면 HTML 및 CSS에 이미 적용된 모든 스타일을 사용하여 콘텐츠를 표시할 수 있습니다.

CMB2로 기본 필드 추가를 마스터했으면 반복 가능한 필드 그룹을 추가해 보십시오. 이를 통해 원하는 만큼 콘텐츠 유형을 추가할 수 있으며 for-each 루프를 사용하여 슬라이드쇼 또는 캐러셀 만들기를 시작할 수 있습니다.

CMB2를 통해 WordPress 사이트를 다음 단계로 끌어올릴 수 있었으며 귀하에게도 동일한 기능을 제공하기를 바랍니다.

다음 단계: 플러그인!

사이트 개발 속도를 높이는 완벽한 WordPress 플러그인을 찾는 것은 일련의 코드에서 단일 오타를 찾는 것과 약간 비슷합니다. 시간이 걸릴 수 있습니다. 그리고 요즘에는 다양한 작업을 위한 플러그인이 너무 많아 사이트에 필요한(또는 필요하지 않은) 기능이 무엇인지, 어떤 플러그인이 이를 효율적으로 제공하는지 정확히 파악하기 어려울 수 있습니다.

개발자를 위한 가장 권장되는 플러그인 목록을 보려면 이 eBook을 다운로드하십시오!