Gibt es eine einfache Möglichkeit, ein Meta-Feld mit Registerkarten wie dem Kategorien-Meta-Feld zu erstellen?


13

Meine Frage ist so ziemlich im Titel zusammengefasst. Ich lösche ein Meta-Feld auf der Admin-Seite "Neuer Beitrag / Beitrag bearbeiten" und möchte es mit Registerkarten einrichten können, die im Meta-Feld "Kategorien" enthalten sind. Ich gehe davon aus, dass es einen einfachen Weg gibt, sich daran zu beteiligen, aber ich kann mich nicht erinnern, wie. Weiß das jemand?


Schauen Sie sich das
Markup

Danke - habe das getan und ich denke, der JS verwendet (zu Recht) IDs, um die inaktiven Tabs auszublenden. IDs können nicht dupliziert werden, daher muss ich möglicherweise nur mein eigenes JS schreiben.
Jason Rhodes

Antworten:


13

Hier ist ein sehr einfaches Beispiel.

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

Die jQuery für die mytabs.js, auf die in der Warteschlange verwiesen wird.

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

ANMERKUNGEN:

  • In einem Plugin sollte die Enqueue plugins_url( '/mytabs.js', __FILE__ )anstelle des get_bloginfoStrings aufgerufen werden .
  • Der Ankerlink für jede Registerkarte sollte mit der ID des Inhaltselements übereinstimmen, auf das er verweist, z. frag1, frag2, etc.
  • Eine ausgeblendete Klasse wird nach dem ersten DIV auf jeden Inhalt angewendet, damit er beim Laden der Seite ausgeblendet wird (ansonsten ist ein kurzer Sprung auf der Seite zu sehen). Die Klasse wird nach dem Laden der Seite entfernt, ansonsten bleiben sie ausgeblendet.
  • Die Top-Aktion sollte aktualisiert werden, um den Beitragstyp widerzuspiegeln, den Sie ausführen möchten add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, den ich postim Beispiel verwendet habe.
  • Sie müssen die Metabox in der Seite rendern, um vorhandenes WordPress-CSS zu verwenden, das die LI-Elemente der Registerkarte inline positioniert (Sie können jedoch immer Ihr eigenes Stylesheet laden, um mit dem CSS umzugehen).

Weitere Informationen zum Konfigurieren des Registerkartenskripts finden Sie hier.
http://docs.jquery.com/UI/Tabs

Ich hoffe, das hilft..


In den folgenden Fällen habe ich das wp_enqueue_script geändert: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', array ('jquery-ui-tabs'); und ich habe die mytabs.js in den Ordner / js / im Stammverzeichnis des Themas gestellt, aber es funktioniert nicht
Philip

1
@Philip - Der Code ist ein funktionierendes Beispiel, überprüfen Sie die Ausgangsquelle und überprüfen Sie die enqueue Pfade richtig produziert werden .. (oder dass sie schon ausgegeben alle zusammen gewesen) ..
t31os

Ich mache einen Fehler ... Entschuldigung für die Verwirrung! Alles funktioniert gut.
Philip

@Philip - Kein Problem Kumpel, kein Schaden angerichtet ..;)
t31os
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.