Apakah ada cara mudah untuk membuat kotak meta memiliki tab seperti yang dimiliki kotak meta Kategori?


13

Pertanyaan saya cukup banyak disimpulkan dalam judul. Saya menjatuhkan kotak meta di halaman Admin Posting Baru / Edit Posting, dan saya ingin dapat mengaturnya dengan tab seperti yang dimiliki kotak meta Kategori. Saya berasumsi ada cara mudah untuk menghubungkan ini, tapi saya tidak ingat caranya. Adakah yang tahu


lihat mark-up yang dimiliki meta kategori, gunakan struktur dan kelas html yang sama, dan Anda harus memiliki tab
onetrickpony

Terima kasih - melakukan itu dan saya pikir JS (seharusnya) menggunakan ID untuk menyembunyikan tab tidak aktif. Tidak dapat menggandakan ID, jadi saya mungkin perlu menulis JS sendiri.
Jason Rhodes

Jawaban:


13

Inilah contoh yang sangat mendasar ..

/*
    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 untuk mytabs.js direferensikan di enqueue.

jQuery(document).ready(function($) {
    $("#mytabs .hidden").removeClass('hidden');
    $("#mytabs").tabs();
});

CATATAN:

  • Digunakan di dalam plugin, enqueue harus memanggil plugins_url( '/mytabs.js', __FILE__ )menggantikan get_bloginfostring.
  • Tautan jangkar untuk setiap tab harus cocok dengan ID elemen konten yang dimaksud, misalnya. frag1, frag2, dll.
  • Kelas tersembunyi diterapkan untuk setiap DIV konten setelah yang pertama sehingga mereka disembunyikan di halaman memuat (kalau tidak Anda akan melihat lompatan singkat di halaman), kelas dihapus setelah memuat halaman, kalau tidak mereka akan tetap tersembunyi.
  • Tindakan teratas harus diperbarui untuk mencerminkan jenis posting yang ingin Anda efek add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, saya gunakan postdalam contoh ..
  • Anda harus merender kotak metabox di samping untuk memanfaatkan CSS WordPress yang ada yang menempatkan elemen LI tab inline (Anda selalu dapat memuat stylesheet Anda sendiri untuk berurusan dengan CSS).

Lihat di sini untuk info lebih lanjut tentang cara mengkonfigurasi skrip tab.
http://docs.jquery.com/UI/Tabs

Semoga itu bisa membantu ..


t31os, saya telah mengubah wp_enqueue_script menjadi: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', array ('jquery-ui-tabs')); dan saya telah meletakkan mytabs.js ke folder / js / di root tema tetapi tidak berhasil
Philip

1
@ Philip - Kode ini adalah contoh yang berfungsi, periksa sumber output dan verifikasi jalur enqueue sedang diproduksi dengan benar .. (atau bahwa mereka telah output bersama-sama) ..
t31os

saya membuat kesalahan ... maaf atas kebingungan! semuanya bekerja dengan baik.
Philip

@ Pilip - Tidak ada pasangan masalah, tidak ada salahnya dilakukan ..;)
t31os
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.