มีวิธีง่าย ๆ ในการทำกล่องเมตามีแท็บเช่นเดียวกับกล่องประเภทเมตามีหรือไม่?


13

คำถามของฉันถูกสรุปในชื่อเรื่องค่อนข้างมาก ฉันกำลังวางกล่องเมตาในหน้าโพสต์ใหม่ / แก้ไขโพสต์ผู้ดูแลระบบและฉันต้องการที่จะสามารถตั้งค่าด้วยแท็บเช่นเดียวกับกล่องหมวดหมู่เมตาได้ ฉันคิดว่ามีวิธีง่าย ๆ ในการเชื่อมโยงกับสิ่งนี้ แต่ฉันจำไม่ได้ว่า มีใครรู้บ้าง


ดู mark-up หมวดหมู่ meta ที่มีใช้โครงสร้าง html และคลาสเดียวกันและคุณควรมีแท็บ
onetrickpony

ขอบคุณ - ทำอย่างนั้นและฉันคิดว่า JS นั้น (ถูกต้อง) โดยใช้รหัสเพื่อซ่อนแท็บที่ไม่ใช้งาน ไม่สามารถคัดลอก ID ได้ดังนั้นฉันอาจต้องเขียน JS ของตัวเอง
เจสันโรดส์

คำตอบ:


13

นี่เป็นตัวอย่างพื้นฐานมาก ..

/*
    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

หวังว่าจะช่วย ..


t31os, ฉันเปลี่ยน wp_enqueue_script เป็น: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', อาร์เรย์ ('jquery-ui-tabs'); และฉันได้นำ mytabs.js ไปไว้ที่ / js / โฟลเดอร์ในรูทของธีม แต่มันใช้งานไม่ได้
Philip

1
@Philip - รหัสเป็นตัวอย่างที่ใช้งานได้ตรวจสอบแหล่งที่มาของผลลัพธ์และตรวจสอบว่าเส้นทางของคิวถูกสร้างขึ้นอย่างถูกต้อง .. (หรือพวกมันถูกส่งออกมาพร้อมกันทั้งหมด) ..
t31os

ฉันทำผิดพลาด ... ขอโทษสำหรับความสับสนใด ๆ ! ทุกอย่างทำงานได้ดี
Philip

@Philip - ไม่มีปัญหากับเพื่อนไม่มีอันตรายใด ๆ เกิดขึ้น .. ;)
t31os
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.