Bir meta kutusunu Kategoriler meta kutusu gibi sekmelere sahip yapmanın kolay bir yolu var mı?


13

Sorum hemen hemen başlıkta özetleniyor. Yeni Gönderi / Gönderiyi Düzenle yönetici sayfasında bir meta kutu bırakıyorum ve Kategoriler meta kutusu gibi sekmelerle ayarlamak istiyorum. Sanırım bunu yapmanın kolay bir yolu var, ama nasıl olduğunu hatırlayamıyorum. Kimse biliyor mu?


meta kategorilerinin işaretlemesine bakın, aynı html yapısını ve sınıflarını kullanın ve sekmeleriniz olmalıdır
onetrickpony

Teşekkürler - bunu yaptı ve JS (haklı olarak) etkin olmayan sekmeleri gizlemek için kimlikleri kullanıyor düşünüyorum. Kimlikleri kopyalayamıyorum, bu yüzden sadece kendi JS'imi yazmam gerekebilir.
Jason Rhodes

Yanıtlar:


13

İş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..


t31os, wp_enqueue_script'i şu şekilde değiştirdim: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', dizi ('jquery-ui-tabs')); ve temanın kökünde / js / klasörüne mytabs.js'yi koydum ama işe yaramıyor
Philip

1
@Philip - Kod çalışan bir örnektir, çıkış kaynağını kontrol edin ve enqueue yollarının doğru bir şekilde üretildiğini doğrulayın .. (veya hepsi birlikte
çıktısıdır

bir hata yapıyorum ... herhangi bir karışıklık için özür dilerim! her şey iyi çalışıyor.
Philip

@Philip - Sorun yok dostum, hiçbir zarar yok ..;)
t31os
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.