Cara membuat kotak meta khusus dengan CMB2

Diterbitkan: 2016-07-25

Beberapa tahun yang lalu, saya sedang mencari cara untuk menanyakan postingan dan menunjukkan lokasi di mana sebuah postingan ditulis di Google Map. Dalam penelitian saya, saya menemukan posting blog tentang cara membangun pencari toko menggunakan CMB2 dan Google Maps. Sejak itu, CMB2 telah menjadi salah satu plugin favorit saya dan digunakan di sebagian besar proyek saya.

Pertama, apa itu CMB2?

Nah, CMB adalah akronim untuk Custom Meta Boxes dan sesuai deskripsi di halaman plugin, "CMB2 adalah kotak meta, bidang khusus, dan perpustakaan formulir untuk WordPress yang akan membuat Anda berpikir." Ini dikembangkan oleh Justin Sternberg dari WebDevStudios dan telah berada di repositori plugin selama lebih dari dua tahun. Namun, Februari lalu, orang-orang baik di repositori plugin WordPress menyadari bahwa mereka melakukan kesalahan dan menyetujui CMB2 sebagai plugin padahal seharusnya tidak.

Lihat, plugin biasanya dapat melakukan sesuatu secara langsung; mereka memiliki beberapa fungsi yang melekat. CMB2 sebenarnya adalah sebuah kerangka kerja. Seperti yang pernah dijelaskan Sternberg, “Ini adalah kerangka kerja pengembang untuk dengan mudah membangun formulir dan bidang ke tema dan plugin Anda.” Faktanya, ketika Anda menginstal CMB2, tidak akan terjadi apa-apa. Anda tidak akan mendapatkan halaman admin dan tidak ada antarmuka pengguna admin. Untuk menggunakan CMB2 Anda harus dapat menulis kode dan menambahkan ke file functions.php Anda. Untuk alasan itu, saya menyebutnya plugin 'non-plugin'.

Kabar baiknya adalah bahwa tim persetujuan plugin telah setuju untuk meninggalkannya di repositori, sehingga Anda dapat terus mengunduh dan memperbaruinya dari sana. Anda dapat membaca semua tentang sejarah di sini di situs Justin.

Cara mengatur CMB2

Untuk memulai, Anda perlu menemukan file example-functions.php dari direktori plugin dan menyalinnya ke tema Anda. Itu dapat disalin langsung ke folder root tema, tetapi untuk menjaga proyek Anda tetap terorganisir dengan baik, saya sarankan menyalinnya ke folder seperti /lib/ atau /includes/ . Jika Anda sudah tahu bagaimana Anda ingin menggunakan CMB2, maka Anda mungkin ingin melanjutkan dan mengganti nama file menjadi sesuatu yang lebih sesuai. Misalnya, jika Anda ingin menggunakannya untuk membuat bidang khusus untuk halaman testimonial, Anda dapat menamakannya testimonial-functions.php .

Selanjutnya, Anda perlu memastikan bahwa WordPress menemukan file baru dengan menambahkan pernyataan require_once ke file functions.php Anda. Itu akan terlihat seperti ini:

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

Sekarang saatnya untuk benar-benar menggali. Buka file testimonial-functions.php (atau apa pun namanya). Anda akan melihat bahwa Justin tidak hanya membuat contoh hampir setiap jenis bidang yang mungkin, tetapi ia juga telah membuat fungsi untuk menampilkan bidang berdasarkan beranda, kategori, id posting, dll.

Cara memuat JavaScript di WordPress

JavaScript adalah salah satu bahasa pengkodean paling populer. Ini sangat berguna saat membangun situs web atau aplikasi, dan ada banyak pustaka dan kerangka kerja JavaScript untuk dimanfaatkan,...

Catatan: Artikel ini dimaksudkan untuk memperkenalkan Anda ke CMB2; itu tidak akan menjadi tutorial lengkap tentang cara menggunakan setiap aspeknya, dan karena ini adalah kerangka kerja dan dikembangkan untuk membantu programmer, Anda harus memiliki pemahaman dasar tentang PHP dan cara kerja WordPress. Jika Anda mencari plugin Custom Meta Box yang memiliki antarmuka pengguna admin, Anda mungkin ingin memeriksa plugin Advanced Custom Fields.

Jadi, mari kembali membangun beberapa kotak meta khusus untuk sesuatu yang sederhana seperti testimonial. Pertama, tentukan jumlah dan jenis bidang yang Anda perlukan. Agar tetap sederhana, katakanlah kita membutuhkan tiga bidang. Satu untuk testimoni yang sebenarnya, satu untuk nama orang yang memberikan testimoni, dan satu lagi untuk gambar orang tersebut.

Bekerja di file testimonial-functions.php , Anda perlu menemukan bagian untuk mendaftar dan menambahkan fungsi baru Anda. Kode itu terlihat seperti ini.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

Selanjutnya, saya sarankan Anda mengganti nama fungsi Anda menjadi sesuatu yang relevan dengan tema dan proyek Anda.

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() {

Saya juga menyarankan Anda mengganti nama awalan.

// 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.

Ada beberapa jenis bidang yang berbeda untuk dipilih. Saya akan menggunakan:

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

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

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

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

Ketiga bidang baru ini perlu ditambahkan ke fungsi baru, sehingga akan terlihat seperti berikut:

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-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

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

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

Dan itu saja! Kode akhir Anda akan terlihat seperti:

&amp;amp;lt;?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'            =&amp;amp;gt; $prefix . 'metabox',
		'title'         =&amp;amp;gt; __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  =&amp;amp;gt; array( 'page', ), // Post type
		'show_on'      =&amp;amp;gt; array( 'id' =&amp;amp;gt; array( 10, ) ), // Specific post IDs to display this metabox
		) );

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

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

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

Setelah selesai, Anda harus memiliki halaman yang terlihat seperti berikut:

Menggunakan CMB2 adalah cara yang bagus untuk memberikan situs web Anda persis apa yang Anda butuhkan, karena pilihannya benar-benar tidak terbatas. Misalnya, CMB2 dapat digunakan untuk membuat halaman opsi tema dengan kotak meta untuk logo, URL ke situs media sosial, atau video. Dalam hal membangun situs web untuk klien, CMB2 sangat cocok untuk menyesuaikan admin sehingga klien tidak perlu memformat konten agar sesuai dengan gaya tema Anda. Dan setelah data dimasukkan, Anda dapat menampilkan konten dengan semua gaya yang sudah ada di HTML dan CSS Anda.

Setelah Anda menguasai penambahan bidang dasar dengan CMB2, coba tambahkan Grup Bidang yang Dapat Diulang. Dengan ini, Anda akan dapat menambahkan sebanyak mungkin jenis konten apa pun yang Anda inginkan, dan kemudian menggunakan loop untuk setiap loop, Anda dapat mulai membuat tayangan slide atau carousel.

CMB2 telah memungkinkan saya untuk membawa situs WordPress saya ke tingkat berikutnya dan saya berharap itu akan melakukan hal yang sama untuk Anda.

Apa selanjutnya: Plugin!

Menemukan plugin WordPress yang sempurna yang mempercepat pengembangan situs agak mirip dengan mencoba menemukan satu kesalahan ketik dalam serangkaian kode – ini bisa memakan waktu. Dan hari ini, ada begitu banyak plugin untuk tugas yang berbeda sehingga sulit untuk menentukan dengan tepat fungsionalitas apa yang dibutuhkan situs (atau tidak), dan plugin apa yang menyediakannya dengan cara yang efisien.

Unduh ebook ini untuk daftar plugin yang paling direkomendasikan untuk pengembang!