webentwicklung-frage-antwort-db.com.de

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

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?

12
Jason Rhodes

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();
});

HINWEISE:

  • In einem Plugin sollte die Warteschlange plugins_url( '/mytabs.js', __FILE__ ) anstelle der Zeichenfolge get_bloginfo aufrufen.
  • 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' );, ich habe post im Beispiel verwendet.
  • 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

Hoffentlich hilft das..

13
t31os