Cara Membuat Kotak Meta Khusus dengan CMB2

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

Pertama, Apa itu CMB2?

CMB adalah singkatan dari Custom Meta Boxes dan per deskripsi di halaman plugin, “CMB2 adalah meta box, custom field, dan form library untuk WordPress yang akan membuat Anda teringat.” Itu 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 mengakui bahwa mereka melakukan kesalahan dan menyetujui CMB2 sebagai plugin padahal seharusnya tidak.

Lihat, plugin biasanya dapat melakukan sesuatu langsung dari kotak; mereka memiliki beberapa fungsi yang melekat. CMB2 sebenarnya adalah kerangka kerja. Seperti yang pernah dijelaskan Sternberg, "Ini adalah kerangka kerja pengembang untuk membuat formulir dan bidang dengan mudah ke tema dan plugin Anda." Nyatanya, saat 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 bisa menulis kode dan menambahkannya ke file functions.php Anda. Oleh karena itu, saya menyebutnya plugin 'non-plugin'.

Kabar baiknya adalah 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 Menyiapkan CMB2

Untuk memulai, Anda perlu mencari file example-functions.php dari direktori plugin dan menyalinnya ke dalam tema Anda. Itu dapat disalin langsung ke folder root tema, tetapi agar proyek Anda tetap teratur, saya sarankan untuk menyalinnya ke folder seperti /lib/ atau /includes/ . Jika Anda sudah tahu bagaimana Anda ingin menggunakan CMB2, Anda mungkin ingin melanjutkan dan mengganti nama file menjadi sesuatu yang lebih sesuai. Misalnya, jika Anda ingin menggunakannya untuk membuat kolom khusus untuk halaman testimonial, Anda dapat menamainya 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 dari hampir semua jenis bidang yang mungkin, tetapi dia juga membuat fungsi untuk menampilkan bidang berdasarkan beranda, kategori, id pos, dll.

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

Jadi, mari kita kembali membangun beberapa kotak meta khusus untuk sesuatu yang sederhana seperti testimonial. Pertama, tentukan jumlah dan jenis bidang yang Anda perlukan. Demi membuatnya sederhana, katakanlah kita membutuhkan tiga bidang. Satu untuk kesaksian sebenarnya, satu untuk nama orang yang memberikan kesaksian, 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' => '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', ) );

Ketiga kolom 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->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', ) ); }

Dan itu saja! Kode akhir Anda akan terlihat seperti:

 <?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', ) ); }

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

Menggunakan CMB2 adalah cara yang bagus untuk memberikan situs web Anda apa yang Anda butuhkan, karena opsinya 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 menambahkan bidang dasar dengan CMB2, coba tambahkan Grup Bidang Berulang. Dengan ini, Anda akan dapat menambahkan sebanyak mungkin jenis konten apa pun yang Anda inginkan, dan kemudian menggunakan perulangan untuk setiap putaran, Anda dapat mulai membuat tayangan slide atau komidi putar.

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