İşte çok temel bir örnek ..
/*
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
}
Enqueue içinde başvurulan mytabs.js için jQuery.
jQuery(document).ready(function($) {
$("#mytabs .hidden").removeClass('hidden');
$("#mytabs").tabs();
});
NOTLAR:
- Bir eklentinin içinde kullanıldığında, enqueue dizenin
plugins_url( '/mytabs.js', __FILE__ )
yerine çağrı yapmalıdır get_bloginfo
.
- Her sekme için bağlantı bağlantısı, başvurduğu içerik öğesinin kimliğiyle eşleşmelidir, ör. frag1, frag2 vb.
- Her içerik DIV'sine gizli bir sınıf ilkinden sonra uygulanır, böylece sayfa yüklenirken gizlenirler (aksi takdirde sayfada kısa bir sıçrama fark edersiniz), sınıf sayfa yüklendikten sonra kaldırılır, aksi takdirde gizli kalırlar.
- Üst eylem etkisi istediğiniz yazı alanı yansıtacak şekilde güncellenmesi gerekir
add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );
, ben kullanılan post
örnekte ..
- Sekme LI öğelerini satır içinde konumlandıran mevcut WordPress CSS'yi kullanmak için meta kutuyu yanda oluşturmanız gerekir (yine de CSS ile başa çıkmak için kendi stil sayfanızı yükleyebilirsiniz).
Sekmeler komut dosyasının nasıl yapılandırılacağı hakkında daha fazla bilgi için buraya bakın.
http://docs.jquery.com/UI/Tabs
Umarım yardımcı olur..