Uso de las pestañas de Bootstrap 3 para mostrar publicaciones en una taxonomía de tipo de publicación personalizada

Las pestañas Bootstrap son excelentes para mostrar una gran cantidad de contenido en un área pequeña. En resumen, ¡tienen mucho impacto por muy poco espacio en la pantalla!

En este tutorial, veremos una buena forma de mostrar un tipo de publicación personalizada dividida en diferentes términos de taxonomía.

Para este ejemplo, he configurado un tipo de publicación personalizada de "películas" y las vamos a agrupar por una taxonomía de "géneros". Son estos géneros los que se convertirán en las pestañas de arranque, y el contenido de la pestaña serán las películas que pertenecen a estos géneros en particular.

Esto es lo que estamos tratando de lograr:

Configurar el tipo de publicación y la taxonomía

Lo primero es lo primero, necesitamos crear el tipo de película de publicación personalizada. La forma más sencilla de hacerlo es instalar la excelente interfaz de usuario de tipo de publicación personalizada.

Utilice la siguiente configuración:

Luego, debemos configurar la taxonomía de géneros para poder agrupar todas nuestras películas en su género correcto. Con la interfaz de usuario de tipo de publicación personalizada, cree la taxonomía con la siguiente configuración:

Asegúrese de establecer jerárquico como verdadero, ya que esto garantizará que la taxonomía utilice cuadros de selección de estilo de categoría en lugar de etiquetas.

El siguiente trabajo es crear algunas películas y clasificarlas en sus géneros correctos. Acabo de agregar algunas películas de prueba para poder mostrarles el siguiente proceso.

Para simplificar, voy a crear una página en WordPress llamada "películas" y luego hacer una anulación de esta página donde colocaremos nuestro código. La forma de hacer esto es crear un archivo llamado page-films.php en su carpeta de temas, y luego WordPress usará este archivo para mostrar la página de películas. De esta manera, podemos agregar el código que necesitamos y que solo aparezca cuando acceda a la página de la película del sitio.

La página no tiene que llamarse "películas", pero asegúrese de que la barra de la página coincida con la segunda parte de la plantilla de página. Entonces, si el slug de la página es "películas", el archivo de plantilla se llamará page-movies.php.

Creando las pestañas

Si visita el sitio de Bootstrap y visita la sección de pestañas, podemos obtener el marcado que vamos a necesitar. Siempre que tenga todos los archivos javascript Bootstrap cargados (especialmente tabs.js y transitions.js), las pestañas que acaba de pegar en su página deberían funcionar bien.

Sin embargo, lo que queremos hacer es mostrar los nombres de nuestros géneros en las pestañas. Para hacer esto vamos a tener que usar la función de WordPress get_terms. Básicamente, esta función solo devuelve todos los términos con publicaciones relacionadas con una taxonomía. Entonces, necesitamos usar get_terms para devolver información sobre todos los géneros que tenemos.

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

En este ejemplo, configuré get_terms con la variable $ film_genres, pero puedes usar lo que quieras.

A continuación, necesitamos hacer un bucle foreach sobre esta variable para devolver todos los géneros que hemos agregado. Queremos hacer esto sobre la lista desordenada de las pestañas de navegación así:

 <ul class = "nav nav-tabs nav-justified">
  <li class = "activo">
    <a data-toggle="tab" href="#all"> Todo </a>
  </li>
  <? php foreach ($ film_genres como $ film_genre) {?>
    <li>
      <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> name?> </a>
    </li>
  <? }?>
</ul>

Asegúrese de establecer un li "Todo" antes de cada una, ya que queremos que la primera pestaña muestre por defecto todas las películas, y luego filtramos por género usando las otras pestañas.

El contenido de la pestaña

Luego queremos establecer el contenido de la pestaña para la pestaña de todas las películas, y lo hacemos usando un wp_query sobre el tipo de publicación de películas así:

 <div class = "tab-pane active">
  <? php 	
  $ args = matriz (
    'post_type' => 'películas',
    'posts_per_page' -1,
    'orderby' => 'título',
    'order' => 'ASC'
  );
  $ all_films = new WP_Query ($ args);		
  ?>

  <? php if ($ all_films-> have_posts ()): // asegúrese de que tengamos películas para mostrar antes de hacer nada?>
  <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 "> Leer más </a>
        </td>
      </tr>
      <? php end while; ?>
      <? php wp_reset_query ()?>
    </table>
  </div>
  <? php endif; ?>

</div> <! - panel de pestañas de todas las películas ->

Asegúrese de establecer el valor clave del tipo de publicación en el nombre de su tipo de publicación (si no está usando películas), es decir, 'post_type' => 'su tipo de publicación aquí'. Luego, devolvemos todas las publicaciones en el tipo de publicación de películas y ordenamos por título, en forma ascendente.

Luego ejecutamos un bucle normal de WordPress sobre este objeto wp_query y devolvemos todas las publicaciones de la película.

Para este ejemplo, elegí generar una tabla de arranque dentro de cada panel de pestañas, pero puede generar sus datos cuando lo desee. Lo que hay que recordar es que al usar un bucle wp_query podemos usar todas las excelentes funciones de WordPress, como the_title, the_excerpt, the_post_thumbnail, etc.

Al final de este ciclo, no olvide ejecutar wp_reset_query, ya que esto evitará cualquier posible problema que podamos tener si vamos a ejecutar otros ciclos en esta página.

Una vez que hayamos ordenado el contenido de la pestaña que muestra todas las películas, queremos poder mostrar todas las películas que se han agrupado en géneros. Queremos que esto sea dinámico, de modo que si elegimos agregar más géneros en el futuro, no necesitamos codificar en otros wp_quires para cada uno de estos. Para lograr esto, necesitaremos ejecutar otro bucle foreach sobre el siguiente div tab-content y dentro de esto, ejecutaremos un wp_query con algunos parámetros de taxonomía en él.

 <? php foreach ($ film_genres como $ film_genre) {?>
  <div class = "tab-pane">
    <? php 	
    $ args = matriz (
      'post_type' => 'películas',
      'posts_per_page' -1,
      'orderby' => 'título',
      'order' => 'ASC',
      'tax_query' => matriz (
        formación(
          'taxonomy' => 'géneros',
          'campo' => 'babosa',
          'terms' => $ film_genre-> slug
        )
      )
    );
    $ films = new WP_Query ($ args);		
    ?>

    <? php if ($ films-> have_posts ()): // asegúrese de que tengamos películas para mostrar antes de hacer nada?>
    <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 "> Leer más </a>
        </td>
      </tr>
      <? php end while; ?>
      <? php wp_reset_query ()?>
    </table>
    <? php endif; ?>

  </div>
<? }?>

Envolvemos el mismo foreach que usamos antes alrededor del div del panel de pestañas. Necesitamos hacer esto para poder tener acceso a los valores del objeto $ film_genre que hemos establecido, ya que necesitaremos usar el valor slug para pasar a nuestro wp_query, y también para establecer la identificación del panel de pestañas.

Una vez que hemos creado wp_query usamos el mismo bucle de WordPress que en el panel de pestañas "todas" películas, recordando cambiar la variable wp_query a algo único como $ film_genres.

Y de eso se trata realmente. Las pestañas de Bootstrap deberían funcionar perfectamente, y cuando agrega un nuevo género con películas adjuntas, debería aparecer como una nueva pestaña.

Aquí está el código completo:

 <section class = "films-tabs">

  <? php $ film_genres = get_terms ('géneros'); // obtener todos los géneros?>

  <! - Pestañas de navegación ->
  <ul class = "nav nav-tabs nav-justified">
    <li class = "activo">
      <a data-toggle="tab" href="#all"> Todo </a>
    </li>
    <? php foreach ($ film_genres como $ film_genre) {?>
      <li>
        <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> name?> </a>
      </li>
    <? }?>
  </ul>

  <! - Paneles de pestañas ->
  <div class = "tab-content">

    <div class = "tab-pane active">
      <? php 	
      $ args = matriz (
        'post_type' => 'películas',
        'posts_per_page' -1,
        'orderby' => 'título',
        'order' => 'ASC'
      );
      $ all_films = new WP_Query ($ args);		
      ?>

      <? php if ($ all_films-> have_posts ()): // asegúrese de que tengamos películas para mostrar antes de hacer nada?>
      <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 "> Leer más </a>
            </td>
          </tr>
          <? php end while; ?>
          <? php wp_reset_query ()?>
        </table>
      </div>
      <? php endif; ?>

    </div> <! - panel de pestañas de todas las películas ->

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

      <div class = "tab-pane">
        <? php 	
        $ args = matriz (
          'post_type' => 'películas',
          'posts_per_page' -1,
          'orderby' => 'título',
          'order' => 'ASC',
          'tax_query' => matriz (
            formación(
              'taxonomy' => 'géneros',
              'campo' => 'babosa',
              'terms' => $ film_genre-> slug
            )
          )
        );
        $ films = new WP_Query ($ args);		
        ?>

        <? php if ($ films-> have_posts ()): // asegúrese de que tengamos películas para mostrar antes de hacer nada?>
        <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 "> Leer más </a>
            </td>
          </tr>
          <? php end while; ?>
          <? php wp_reset_query ()?>
        </table>
        <? php endif; ?>

      </div>
    <? }?>

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

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

Si necesita ayuda con su no dude en contactarnos.