Cara gampang buat custom metabox di wordpress seperti custom fields

Memulai WordPress Meta box


Kita akan memcoba membuat code untuk kotak metabox, Anda akan cukup melakukan copy  dalam file Plugin dan juga functions.php.

Saya sarankan agar Anda men-download file contoh dibawah, atau cut + paste kode dan markup di bawah ini. Ada tiga file contoh (Anda juga akan perlu untuk membuat folder dan namakan itu folder "custom") isinya yaitu :

/folder_theme_anda/functions.php
/folder_theme_anda/custom/meta.php
/folder_theme_anda/custom/meta.css

Yang pertama, copy code ini kedalam folder theme anda /folder_theme_anda/functions.php  :

<?php
 
define('MY_WORDPRESS_FOLDER',$_SERVER['DOCUMENT_ROOT']);
define('MY_THEME_FOLDER',str_replace("\",'/',dirname(__FILE__)));
define('MY_THEME_PATH','/' . substr(MY_THEME_FOLDER,stripos(MY_THEME_FOLDER,'wp-content')));
 
add_action('admin_init','my_meta_init');
 
function my_meta_init()
{
    // review the function reference for parameter details
    // http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    // http://codex.wordpress.org/Function_Reference/wp_enqueue_style
 
    //wp_enqueue_script('my_meta_js', MY_THEME_PATH . '/custom/meta.js', array('jquery'));
    wp_enqueue_style('my_meta_css', MY_THEME_PATH . '/custom/meta.css');
 
    // review the function reference for parameter details
    // http://codex.wordpress.org/Function_Reference/add_meta_box
 
    // add a meta box for each of the wordpress page types: posts and pages
    foreach (array('post','page') as $type)
    {
        add_meta_box('my_all_meta', 'My Custom Meta Box', 'my_meta_setup', $type, 'normal', 'high');
    }
     
    // add a callback function to save any data a user enters in
    add_action('save_post','my_meta_save');
}
 
function my_meta_setup()
{
    global $post;
  
    // using an underscore, prevents the meta variable
    // from showing up in the custom fields section
    $meta = get_post_meta($post->ID,'_my_meta',TRUE);
  
    // instead of writing HTML here, lets do an include
    include(MY_THEME_FOLDER . '/custom/meta.php');
  
    // create a custom nonce for submit verification later
    echo '<input type="hidden" name="my_meta_noncename" value="' . wp_create_nonce(__FILE__) . '" />';
}
  
function my_meta_save($post_id)
{
    // authentication checks
 
    // make sure data came from our meta box
    if (!wp_verify_nonce($_POST['my_meta_noncename'],__FILE__)) return $post_id;
 
    // check user permissions
    if ($_POST['post_type'] == 'page')
    {
        if (!current_user_can('edit_page', $post_id)) return $post_id;
    }
    else
    {
        if (!current_user_can('edit_post', $post_id)) return $post_id;
    }
 
    // authentication passed, save data
 
    // var types
    // single: _my_meta[var]
    // array: _my_meta[var][]
    // grouped array: _my_meta[var_group][0][var_1], _my_meta[var_group][0][var_2]
 
    $current_data = get_post_meta($post_id, '_my_meta', TRUE); 
  
    $new_data = $_POST['_my_meta'];
 
    my_meta_clean($new_data);
     
    if ($current_data)
    {
        if (is_null($new_data)) delete_post_meta($post_id,'_my_meta');
        else update_post_meta($post_id,'_my_meta',$new_data);
    }
    elseif (!is_null($new_data))
    {
        add_post_meta($post_id,'_my_meta',$new_data,TRUE);
    }
 
    return $post_id;
}
 
function my_meta_clean(&$arr)
{
    if (is_array($arr))
    {
        foreach ($arr as $i => $v)
        {
            if (is_array($arr[$i]))
            {
                my_meta_clean($arr[$i]);
 
                if (!count($arr[$i]))
                {
                    unset($arr[$i]);
                }
            }
            else
            {
                if (trim($arr[$i]) == '')
                {
                    unset($arr[$i]);
                }
            }
        }
 
        if (!count($arr))
        {
            $arr = NULL;
        }
    }
}
 
?>

Kedua, copy /folder_theme_anda/custom/meta.php dibawah ini :

<div class="my_meta_control">     
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras orci lorem, bibendum in pharetra ac, 
 luctus ut mauris. Phasellus dapibus elit et justo malesuada eget <code>functions.php</code>.</p> 
 <label>Name</label> 
 <p>
  <input type="text" name="_my_meta[name]" value="<?php if(!empty($meta['name'])) echo $meta['name']; ?>"/>
  <span>Enter in a name</span>
 </p> 
  <label>Description <span>(optional)</span></label> 
 <p>
  <textarea name="_my_meta[description]" rows="3"><?php if(!empty($meta['description'])) echo $meta['description']; ?></textarea>
  <span>Enter in a description</span>
 </p> 
</div>

Kemudian copy file CSS nya, /folder_theme_anda/custom/meta.css

.my_meta_control .description
{ display:none; }
 
.my_meta_control label
{ display:block; font-weight:bold; margin:6px; margin-bottom:0; margin-top:12px; }
 
.my_meta_control label span
{ display:inline; font-weight:normal; }
 
.my_meta_control span
{ color:#999; display:block; }
 
.my_meta_control textarea, .my_meta_control input[type='text']
{ margin-bottom:3px; width:99%; }
 
.my_meta_control h4
{ color:#999; font-size:1em; margin:15px 6px; text-transform:uppercase; }

Jika Anda telah mengatur semuanya dengan benar, Anda akan melihat kotak meta berikut dalam edit post atau mengedit halaman layar:

Menggunakan Value Meta Box Dalam Template Anda
Ingat.. contoh di atas menggunakan variabel tunggal ( _my_meta ) untuk menyimpan values sebagai array, jadi ketika Anda mendapatkan value meta kembali dari WordPress itu akan menjadi sebuah array dan Anda harus mengakses nilai dengan menggunakan sintaks array. Melakukan hal ini cukup lurus ke depan:

$my_meta = get_post_meta($post->ID,'_my_meta',TRUE);
echo $my_meta['name'];
echo $my_meta['description'];

Global $post variabel harus selalu tersedia, tapi di sini ada beberapa metode lain yang dapat Anda gunakan untuk mendapatkan pos saat ini atau halaman ID yang Anda akan perlu menggunakan dengan get_post_meta() :

// using $post global variable
echo $post->ID;
 
// get a page by its path (recommended over using a page ID)
$page = get_page_by_path('company/contact-us');
echo $page->ID;
 
// if you are working in the loop
echo get_the_ID();

Demikianlah tutorial dari kami, Selamat Menikmati! ^_^

Untuk lebih gampang lagi silahkan download beberapa file ini:
Download

Sumber: [farinspace]