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.