Usando guias do Bootstrap 3 para exibir postagens em uma taxonomia de tipo de postagem personalizada

As guias de bootstrap são ótimas para mostrar muito conteúdo em uma área pequena. Resumindo, eles têm muita força por muito pouco espaço na tela!

Neste tutorial, veremos uma boa maneira de exibir um tipo de postagem personalizado dividido em diferentes termos de taxonomia.

Para este exemplo, configurei um tipo de postagem personalizado de “filmes” e vamos agrupá-los por uma taxonomia de “gêneros”. São esses gêneros que se tornarão as guias de bootstrap, e o conteúdo da guia serão os filmes pertencentes a esses gêneros específicos.

Aqui está o que estamos tentando alcançar:

Configurando o tipo de postagem e a taxonomia

Em primeiro lugar, precisamos criar o tipo de postagem personalizada de filmes. A maneira mais fácil de fazer isso é instalar a excelente IU do tipo de postagem personalizada.

Use as configurações abaixo:

Em seguida, precisamos configurar a taxonomia dos gêneros para que possamos agrupar todos os nossos filmes em seus gêneros corretos. Usando a IU do tipo de postagem personalizada, crie a taxonomia usando as configurações abaixo:

Certifique-se de definir hierárquico como verdadeiro, pois isso garantirá que a taxonomia use caixas de seleção de estilo de categoria em vez de marcas.

O próximo trabalho é criar alguns filmes e categorizá-los em seus gêneros corretos. Acabei de adicionar alguns filmes de teste para mostrar o próximo processo.

Para simplificar, vou criar uma página no WordPress chamada “filmes” e, em seguida, fazer uma substituição de página dessa página onde colocaremos nosso código. A maneira de fazer isso é criar um arquivo chamado page-films.php em sua pasta de temas e, em seguida, o WordPress usará esse arquivo para mostrar a página de filmes. Desta forma, podemos adicionar o código de que necessitamos e fazê-lo aparecer somente quando você acessar a página de filmes do site.

A página não precisa ser chamada de “filmes”, mas certifique-se de que o slug da página corresponda à segunda parte do modelo de página. Portanto, se o slug da página for “movies”, o arquivo de modelo será chamado de page-movies.php.

Criação das guias

Se você visitar o site Bootstrap e visitar a seção sobre guias, podemos obter a marcação de que precisaremos. Contanto que você tenha todos os arquivos javascript do Bootstrap carregados (especialmente tabs.js e transitions.js), as guias que você acabou de colar em sua página devem funcionar bem.

O que queremos fazer, porém, é mostrar os nomes dos nossos gêneros nas guias. Para fazer isso, vamos ter que usar a função get_terms do WordPress. Essa função basicamente retorna todos os termos com postagens relacionadas a uma taxonomia. Portanto, precisamos usar get_terms para retornar informações sobre todos os gêneros que temos.

 <? php $ film_genres = get_terms ('gêneros'); ?>

Neste exemplo, eu defini get_terms em relação à variável $ film_genres, mas você pode usar o que quiser.

Em seguida, precisamos fazer um loop foreach sobre essa variável para retornar todos os gêneros que adicionamos. Queremos fazer isso na lista desordenada das guias de navegação, da seguinte forma:

 <ul class = "nav nav-tabs nav-basis">
  <li class = "ativo">
    <a data-toggle="tab" href="#all"> Todos </a>
  </li>
  <? php foreach ($ film_genres as $ film_genre) {?>
    <li>
      <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> name?> </a>
    </li>
  <? }?>
</ul>

Certifique-se de definir um li “Todos” antes de cada um, pois queremos que a primeira guia padrão exiba todos os filmes e, em seguida, filtramos por gênero usando as outras guias.

O conteúdo da guia

Em seguida, queremos definir o conteúdo da guia para a guia todos os filmes, e fazemos isso usando uma wp_query sobre o tipo de postagem de filmes como:

 <div class = "tab-pane active">
  <? php 	
  $ args = array (
    'post_type' => 'filmes',
    'posts_per_page' -1,
    'orderby' => 'title',
    'pedido' => 'ASC'
  );
  $ all_films = novo WP_Query ($ args);		
  ?>

  <? php if ($ all_films-> have_posts ()): // certifique-se de que temos filmes para mostrar antes de fazer qualquer coisa?>
  <div class = "table-responsive">
    <table class = "table">
      <? php while ($ all_films-> have_posts ()): $ all_films-> the_post (); ?>	
      <tr>
        <td> <? php the_post_thumbnail ()?> </td>
        <td> <h3> <? php the_title ()?> </ h3 </td>
        <td>
          <p class = "lead"> <? php the_excerpt ()?> </p>
          <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Leia mais </a>
        </td>
      </tr>
      <? php endwhile; ?>
      <? php wp_reset_query ()?>
    </table>
  </div>
  <? php endif; ?>

</div> <! - painel da guia de todos os filmes ->

Certifique-se de definir o valor-chave do tipo de postagem para o nome do seu tipo de postagem (se você não estiver usando filmes), ou seja, 'post_type' => 'seu tipo de postagem aqui'. Estamos, então, retornando todas as postagens no tipo de postagem dos filmes e ordenando por título, em ordem crescente.

Em seguida, executamos um loop normal do WordPress sobre esse objeto wp_query e retornamos todas as postagens do filme.

Para este exemplo, optei por gerar uma tabela de bootstrap em cada painel de guias, mas você pode gerar seus dados sempre que desejar. O que devemos lembrar é que, usando um loop wp_query, podemos usar todas as ótimas funções do WordPress, como the_title, the_excerpt, the_post_thumbnail etc.

No final deste loop, não se esqueça de executar wp_reset_query, pois isso evitará quaisquer possíveis problemas que possamos ter se formos executar quaisquer outros loops nesta página.

Depois de classificar o conteúdo da guia que mostra todos os filmes, queremos poder mostrar todos os filmes que foram agrupados em gêneros. Queremos que isso seja dinâmico, de modo que, se decidirmos adicionar mais gêneros no futuro, não precisemos codificar em outros wp_quires para cada um deles. Para conseguir isso, precisaremos executar outro loop foreach sobre a próxima div do conteúdo da guia e, dentro disso, executaremos um wp_query com alguns parâmetros de taxonomia nele.

 <? php foreach ($ film_genres as $ film_genre) {?>
  <div class = "tab-pane">
    <? php 	
    $ args = array (
      'post_type' => 'filmes',
      'posts_per_page' -1,
      'orderby' => 'title',
      'pedido' => 'ASC',
      'tax_query' => array (
        variedade(
          'taxonomia' => 'gêneros',
          'campo' => 'slug',
          'termos' => $ film_genre-> slug
        )
      )
    );
    $ movies = new WP_Query ($ args);		
    ?>

    <? php if ($ films-> have_posts ()): // certifique-se de que temos filmes para mostrar antes de fazer qualquer coisa?>
    <table class = "table">
      <? php while ($ films-> have_posts ()): $ films-> the_post (); ?>	
      <tr>
        <td> <? php the_post_thumbnail ()?> </td>
        <td> <h3> <? php the_title ()?> </ h3 </td>
        <td>
          <p class = "lead"> <? php the_excerpt ()?> </p>
          <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Leia mais </a>
        </td>
      </tr>
      <? php endwhile; ?>
      <? php wp_reset_query ()?>
    </table>
    <? php endif; ?>

  </div>
<? }?>

Envolvemos o mesmo foreach que usamos antes em torno do div do painel de guias. Precisamos fazer isso para obter acesso aos valores do objeto $ film_genre que definimos, pois precisaremos usar o valor slug para passar para o nosso wp_query e também para definir o id do painel de guias.

Depois de criar o wp_query, usamos o mesmo loop WordPress do painel da guia “all” movies, lembrando de alterar a variável wp_query para algo único como $ film_genres.

E isso realmente é tudo. As guias do Bootstrap devem funcionar perfeitamente, e quando você adiciona um novo gênero com filmes anexados a ele, isso deve aparecer como uma nova guia.

Aqui está o código completo:

 <section class = "films-tabs">

  <? php $ film_genres = get_terms ('gêneros'); // obter todos os gêneros?>

  <! - Guias de navegação ->
  <ul class = "nav nav-tabs nav-basis">
    <li class = "ativo">
      <a data-toggle="tab" href="#all"> Todos </a>
    </li>
    <? php foreach ($ film_genres as $ film_genre) {?>
      <li>
        <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> name?> </a>
      </li>
    <? }?>
  </ul>

  <! - Painéis de guia ->
  <div class = "tab-content">

    <div class = "tab-pane active">
      <? php 	
      $ args = array (
        'post_type' => 'filmes',
        'posts_per_page' -1,
        'orderby' => 'title',
        'pedido' => 'ASC'
      );
      $ all_films = novo WP_Query ($ args);		
      ?>

      <? php if ($ all_films-> have_posts ()): // certifique-se de que temos filmes para mostrar antes de fazer qualquer coisa?>
      <div class = "table-responsive">
        <table class = "table">
          <? php while ($ all_films-> have_posts ()): $ all_films-> the_post (); ?>	
          <tr>
            <td> <? php the_post_thumbnail ()?> </td>
            <td> <h3> <? php the_title ()?> </ h3 </td>
            <td>
              <p class = "lead"> <? php the_excerpt ()?> </p>
              <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Leia mais </a>
            </td>
          </tr>
          <? php endwhile; ?>
          <? php wp_reset_query ()?>
        </table>
      </div>
      <? php endif; ?>

    </div> <! - painel da guia de todos os filmes ->

    <? php foreach ($ film_genres as $ film_genre) {?>

      <div class = "tab-pane">
        <? php 	
        $ args = array (
          'post_type' => 'filmes',
          'posts_per_page' -1,
          'orderby' => 'title',
          'pedido' => 'ASC',
          'tax_query' => array (
            variedade(
              'taxonomia' => 'gêneros',
              'campo' => 'slug',
              'termos' => $ film_genre-> slug
            )
          )
        );
        $ movies = new WP_Query ($ args);		
        ?>

        <? php if ($ films-> have_posts ()): // certifique-se de que temos filmes para mostrar antes de fazer qualquer coisa?>
        <table class = "table">
          <? php while ($ films-> have_posts ()): $ films-> the_post (); ?>	
          <tr>
            <td> <? php the_post_thumbnail ()?> </td>
            <td> <h3> <? php the_title ()?> </ h3 </td>
            <td>
              <p class = "lead"> <? php the_excerpt ()?> </p>
              <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Leia mais </a>
            </td>
          </tr>
          <? php endwhile; ?>
          <? php wp_reset_query ()?>
        </table>
        <? php endif; ?>

      </div>
    <? }?>

  </div> <! - tab-content ->

</section> <! - film-tabs ->

Se precisar de ajuda com o seu, não hesite em nos contatar.