Semi Toko Online: Cara Membuat Metabox di Custom Post-Type

Metabox adalah salah satu fitur wordpress yang mengijinkan kita untuk menambahkan data lain selain title, post, taxonomy, thumbnail di dalam menu Posts atau dihalaman untuk membuat artikel. pada tutorial wordpress kali ini kita akan belajar membuat Metaboxes.

Nah seperti apa sebenarnya metabox itu? kalian bisa melihatnya digambar berikut.

biasanya terletak di bawah Editor (tempat untuk menulis artikel).

Gimana sudah taukan?

Secara umum metabox ini sering ditambahkan di menu Posts untuk artikel seperti yang diterapkan beberapa plugin SEO, atau plugin metabox yang khusus untuk menambahkan field di dalam menu post. Tapi kali ini kita akan gunakan metabox ini pada Custom Post Type untuk keperluan Membuat Toko Online super duper sederhana kita.

Memasang Metabox di Custom Post Type

Di post type product, akan kita tambahkan beberapa kolom yaitu :

Harga
SKU
checkbox best seller

Pertama kita akan mulai dengan kode berikut, copy-paste di file metaboxes.php :

<?php
/**
 * Register meta box(es).
 */
function onphpid_register_meta_boxes()
{
    add_meta_box( 'metabox-price', __( 'Attribut Products', 'semi-toko-online' ), 'onphpid_render_metabox', 'onphpid_products' );
}
add_action('add_meta_boxes', 'onphpid_register_meta_boxes');
/**
 * Meta box display callback.
 *
 * @param WP_Post $post Current post object.
 */
function onphpid_render_metabox($post)
{
    wp_nonce_field('onphpid-nonce', "meta-box-nonce");
    $sku = get_post_meta($post->ID, "meta-box-sku", true);
    $price = get_post_meta($post->ID, "meta-box-price", true);
    $checked = (get_post_meta($post->ID, "meta-box-best", true)) ? 'checked' : '';
    ?>
    <div>
    <table>
        <tr>
            <td><label for="meta-box-sku">SKU</label></td>
            <td>:</td>
            <td><input name="meta-box-sku" type="text" value="<?php echo $sku; ?>"></td>
        </tr>
        <tr>
            <td><label for="meta-box-price">Price</label></td>
            <td>:</td>
            <td>
                <input name="meta-box-price" type="text" value="<?php echo $price; ?>">
            </td>
        </tr>
        <tr>
            <td><label for="meta-box-best">Best Seller</label></td>
            <td>:</td>
            <td>
                <input name="meta-box-best" type="checkbox" value="best-seller" <?php echo $checked;?>>
            </td>
        </tr>
    </table>
    </div>
    <?php
}

<?php

/**

* Register meta box(es).

function onphpid_register_meta_boxes()

{

add_meta_box( 'metabox-price', __( 'Attribut Products', 'semi-toko-online' ), 'onphpid_render_metabox', 'onphpid_products' );

}

add_action('add_meta_boxes', 'onphpid_register_meta_boxes');

/**

* Meta box display callback.

* @param WP_Post $post Current post object.

function onphpid_render_metabox($post)

{

wp_nonce_field('onphpid-nonce', "meta-box-nonce");

$sku = get_post_meta($post->ID, "meta-box-sku", true);

$price = get_post_meta($post->ID, "meta-box-price", true);

$checked = (get_post_meta($post->ID, "meta-box-best", true)) ? 'checked' : '';

<div>

<table>

<tr>

</tr>

<tr>

<td><label for="meta-box-price">Price</label></td>

<td>

</td>

</tr>

<tr>

<td><label for="meta-box-best">Best Seller</label></td>

<td>

</td>

</tr>

</table>

</div>

<?php

}

kode diatas adalah kode untuk mendaftarkan metabox baru yang akan ditampilkan di post-type product yang perlu kita perhatikan adalah id onphpid_products merupakan id dari post-type ( cek tutorial registrasi post-type ). kemudian onphpid_render_metabox adalah box/ field / kolom yang akan ditampilkan bawah Editor post-type yang terdiri dari kolom harga, sku dan checkbox.

Dari kode diatas hanya sebatas menampilkan belum sampai pada tahap penyimpanan data metabox, meskipun kita sudah klik tombol publish, kenapa? karena belum ada fungsi untuk simpan.

Nah pada step ini kita akan tambahkan fungsi simpan untuk metabox kita :

/**
 * Save meta box content.
 *
 * @param int $post_id Post ID
 */
function onphpid_save_meta_box($post_id)
{
    // Save logic goes here. Don't forget to include nonce checks!
     if (!isset($_POST["meta-box-nonce"]) || !wp_verify_nonce($_POST["meta-box-nonce"], 'onphpid-nonce')) {
     	 return $post_id;
     }
     if (!current_user_can("edit_post", $post_id)) {
        return $post_id;
     }
    if (defined("DOING_AUTOSAVE") && DOING_AUTOSAVE) {
        return $post_id;
    }
    $sku = $_POST['meta-box-sku'];
    $price = $_POST['meta-box-price'];
    $checked = $_POST['meta-box-best'];
    update_post_meta($post_id, 'meta-box-sku', $sku);
    update_post_meta($post_id, 'meta-box-price', $price);
    update_post_meta($post_id, 'meta-box-best', $checked);
}
add_action('save_post', 'onphpid_save_meta_box');

/**

* Save meta box content.

* @param int $post_id Post ID

function onphpid_save_meta_box($post_id)

{

// Save logic goes here. Don't forget to include nonce checks!

if (!isset($_POST["meta-box-nonce"]) || !wp_verify_nonce($_POST["meta-box-nonce"], 'onphpid-nonce')) {

return $post_id;

}

if (!current_user_can("edit_post", $post_id)) {

return $post_id;

}

if (defined("DOING_AUTOSAVE") && DOING_AUTOSAVE) {

return $post_id;

}

$sku = $_POST['meta-box-sku'];

$price = $_POST['meta-box-price'];

$checked = $_POST['meta-box-best'];

update_post_meta($post_id, 'meta-box-sku', $sku);

update_post_meta($post_id, 'meta-box-price', $price);

update_post_meta($post_id, 'meta-box-best', $checked);

}

add_action('save_post', 'onphpid_save_meta_box');

letakkan dibaris paling bawah file metaboxes.php.

sampai disini metabox kita sudah selesai. bisa kalian buktikan dengan membuat produk baru isi kolom metabox, publish, kemudian kalian edit, dan pastikan kolom metabox yang sudah kalian isi tadi memiliki isi sesuai seperti yang kalian isi sebelumnya.

oke sampai disini dulu tutorial membuat metabox-nya ya. lho kenapa tidak kita tampilkan langsung? karena halaman depan belum kita buat hehehe.
nantikan tutorial berikutnya untuk membuat halaman depan. sebagai bocor kalian bisa mempelajari :
– Page Template

Namun Di Next Tutorial Membuat Semi Toko Online kita akan Menambahkan Taxonomy untuk menambahkan Tags dan Category Product.

Sekian selamat belajar dan jangan lupa Like FP ONPHPID Tutorial dan Subscriber ONPHPID Youtube Channel 🙂