Existe uma maneira fácil de fazer uma caixa de meta ter guias como a caixa de categorias Categorias?


13

Minha pergunta está resumida no título. Estou soltando uma caixa de meta na página de administrador Nova postagem / edição de postagem e quero poder configurá-la com guias como a caixa de meta Categorias. Suponho que haja uma maneira fácil de se conectar a isso, mas não me lembro como. Alguém sabe?


olhar para os mark-up das categorias meta tem, use a mesma estrutura html e aulas, e você deve ter guias
onetrickpony

Obrigado - fiz isso e acho que o JS (justamente) está usando IDs para ocultar as guias inativas. Não é possível duplicar IDs, por isso talvez seja necessário escrever meu próprio JS.
Jason Rhodes

Respostas:


13

Aqui está um exemplo muito básico ..

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

O jQuery para o mytabs.js mencionado no enfileiramento.

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

NOTAS:

  • Utilizado dentro de um plug-in, o enfileiramento deve chamar plugins_url( '/mytabs.js', __FILE__ )no lugar da get_bloginfostring.
  • O link da âncora para cada guia deve corresponder ao ID do elemento de conteúdo ao qual se refere, por exemplo. frag1, frag2, etc.
  • Uma classe oculta é aplicada a cada DIV de conteúdo após o primeiro, para que sejam ocultados no carregamento da página (caso contrário, você notará um breve salto na página), a classe é removida após o carregamento da página, caso contrário, eles permanecerão ocultos.
  • A ação principal deve ser atualizada para refletir o tipo de postagem que você deseja efetuar add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, que usei postno exemplo.
  • Você precisará renderizar a metabox ao lado para utilizar o CSS existente do WordPress que posiciona os elementos da guia LI em linha (você sempre pode carregar sua própria folha de estilo para lidar com o CSS).

Veja aqui para mais informações sobre como configurar o script de guias.
http://docs.jquery.com/UI/Tabs

Espero que ajude..


t31os, alterei o wp_enqueue_script para: wp_enqueue_script ('mytabs', get_bloginfo ('template_directory'). '/js/mytabs.js', array ('jquery-ui-tabs')); E ponho as mytabs.js à / js / pasta na raiz do tema, mas isso não funciona
Philip

1
@Philip - O código é um exemplo de trabalho, verifique a fonte de saída e verificar os caminhos de enfileirar estão sendo produzidos corretamente .. (ou que eles estiveram saída todos juntos) ..
t31os

eu cometo um erro ... desculpe por qualquer confusão! tudo está funcionando bem.
Philip

@Philip - Não tem problema, companheiro, não faz mal ..;)
t31os
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.