Ось дуже основний приклад ..
/*
Code assumes it will be in the theme functions.php file
Update the enqueue path if using it elsewhere
*/
add_action( 'add_meta_boxes_post', 'add_post_metabox' );
function add_post_metabox() {
wp_enqueue_script( 'mytabs', get_bloginfo( 'stylesheet_directory' ). '/mytabs.js', array( 'jquery-ui-tabs' ) );
add_meta_box( 'examplebox' , __('Example box'), 'my_example_metabox', 'post', 'side', 'core'/*,array()*/);
}
function my_example_metabox() {
?>
<div id="mytabs">
<ul class="category-tabs">
<li><a href="#frag1">Tab 1</a></li>
<li><a href="#frag2">Tab 2</a></li>
<li><a href="#frag3">Tab 3</a></li>
</ul>
<br class="clear" />
<div id="frag1">
<p>#1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag2">
<p>#2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag3">
<p>#3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<?php
}
JQuery для mytabs.js, на який посилається в анкеті.
jQuery(document).ready(function($) {
$("#mytabs .hidden").removeClass('hidden');
$("#mytabs").tabs();
});
ПРИМІТКИ:
- Використовуваний всередині плагіна, enqueue повинен викликати
plugins_url( '/mytabs.js', __FILE__ )
замість get_bloginfo
рядка.
- Якорна зв'язок для кожної вкладки повинен відповідати ідентифікатору елемента вмісту, на який вона посилається, наприклад. frag1, frag2 тощо.
- Прихований клас застосовується до кожного вмісту DIV після першого, щоб вони були приховані під час завантаження сторінки (інакше ви помітили короткий стрибок на сторінці), клас видаляється після завантаження сторінки, інакше вони залишаться прихованими.
- Верхню дію слід оновити так, щоб відображати тип публікації, яку ви хочете виконати
add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );
, як я використовував post
у прикладі.
- Вам потрібно буде візуалізувати метабокс у сторону, щоб використовувати існуючий CSS WordPress, який розміщує елементи вкладки LI у рядку (ви завжди можете завантажити свій власний таблицю стилів для роботи з CSS).
Дивіться тут для отримання додаткової інформації про налаштування сценарію вкладок.
http://docs.jquery.com/UI/Tabs
Сподіваюся, що це допомагає ..