นี่เป็นตัวอย่างพื้นฐานมาก ..
/*
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();
});
หมายเหตุ:
- ใช้ภายในปลั๊กอินการเข้าคิวควรโทร
plugins_url( '/mytabs.js', __FILE__ )
เข้ามาแทนที่get_bloginfo
สตริง
- ลิงค์จุดยึดสำหรับแต่ละแท็บควรตรงกับ ID ขององค์ประกอบเนื้อหาที่อ้างอิงเช่น frag1, frag2 ฯลฯ
- คลาสที่ถูกซ่อนจะถูกนำไปใช้กับแต่ละเนื้อหา DIV หลังจากครั้งแรกเพื่อให้ถูกซ่อนในการโหลดหน้า (มิฉะนั้นคุณจะสังเกตเห็นการกระโดดสั้น ๆ ในหน้า) คลาสจะถูกลบออกหลังจากการโหลดหน้ามิฉะนั้นพวกเขาจะซ่อนอยู่
- การดำเนินการด้านบนควรได้รับการอัปเดตเพื่อแสดงถึงประเภทโพสต์ที่คุณต้องการให้มีผล
add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );
ฉันใช้post
ในตัวอย่าง ..
- คุณจะต้องใช้เมตาโบท็อกซ์เพื่อใช้ WordPress CSS ที่มีอยู่ซึ่งวางตำแหน่งองค์ประกอบแท็บ LI แบบอินไลน์ (คุณสามารถโหลดสไตล์ชีทของคุณเองเพื่อจัดการกับ CSS ได้)
ดูที่นี่สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีกำหนดค่าสคริปต์แท็บ
http://docs.jquery.com/UI/Tabs
หวังว่าจะช่วย ..