Utilisation des onglets Bootstrap 3 pour afficher les publications dans une taxonomie de type de publication personnalisée
Publié: 2021-07-19Les onglets Bootstrap sont parfaits pour afficher beaucoup de contenu dans une petite zone. Bref, ils ont beaucoup de punch pour très peu d'espace d'écran !
Dans ce didacticiel, nous allons examiner une manière intéressante d'afficher un ou plusieurs types de publication personnalisés divisés en différents termes de taxonomie.
Pour cet exemple, j'ai configuré un type de publication personnalisé de « films » et nous allons les regrouper par une taxonomie de « genres ». Ce sont ces genres qui deviendront les onglets bootstrap, et le contenu des onglets sera les films qui relèvent de ces genres particuliers.
Voici ce que nous essayons de réaliser :
Configuration du type de publication et de la taxonomie
Tout d'abord, nous devons créer le type de post personnalisé de films. Le moyen le plus simple de le faire est d'installer l'excellente interface utilisateur Custom Post Type.
Utilisez les paramètres ci-dessous :
Ensuite, nous devons mettre en place la taxonomie des genres afin de pouvoir regrouper tous nos films dans leur genre correct. À l'aide de l'interface utilisateur de type de publication personnalisée, créez la taxonomie à l'aide des paramètres ci-dessous :
Assurez-vous que vous définissez hierarchical sur true, car cela garantira que la taxonomie utilise des zones de sélection de style de catégorie plutôt que des balises.
Le prochain travail consiste à créer des films et à les classer dans leurs genres corrects. Je viens d'ajouter quelques films de test afin que je puisse vous montrer le prochain processus.
Pour simplifier, je vais créer une page dans WordPress appelée « films » puis faire une page override de cette page où nous mettrons notre code. La façon de le faire est de créer un fichier appelé page-films.php dans votre dossier de thème, puis WordPress utilisera ce fichier pour afficher la page des films. De cette façon, nous pouvons ajouter le code dont nous avons besoin et le faire apparaître uniquement lorsque vous accédez à la page film du site.
La page n'a pas besoin de s'appeler « films », mais assurez-vous que le slug de la page correspond à la deuxième partie du modèle de page. Donc, si le slug de la page est "films", le fichier modèle s'appellera page-movies.php.
Création des onglets
Si vous visitez le site Bootstrap et visitez la section sur les onglets, nous pouvons récupérer le balisage dont nous aurons besoin. Tant que tous les fichiers javascript Bootstrap sont chargés (en particulier tabs.js et transitions.js), les onglets que vous venez de coller dans votre page devraient fonctionner correctement.
Ce que nous voulons faire, c'est montrer les noms de nos genres dans les onglets. Pour ce faire, nous allons devoir utiliser la fonction WordPress get_terms. Cette fonction renvoie essentiellement tous les termes avec des articles liés à une taxonomie. Nous devons donc utiliser get_terms pour renvoyer des informations sur tous les genres que nous avons.
<?php $film_genres = get_terms('genres'); ?>Dans cet exemple, j'ai défini get_terms par rapport à la variable $film_genres, mais vous pouvez utiliser ce que vous voulez.
Ensuite, nous devons faire une boucle foreach sur cette variable afin de renvoyer tous les genres que nous avons ajoutés. Nous voulons le faire sur la liste non ordonnée des onglets de navigation comme ceci :
<ul class="nav nav-tabs nav-justified">
<li class="actif">
<a data-toggle="tab" href="#all">Tous</a>
</li>
<?php foreach($film_genres as $film_genre) { ?>
<li>
<a href="#<?php echo $film_genre->slug ?>" data-toggle="tab"><?php echo $film_genre->nom ?></a>
</li>
<? } ?>
</ul>
Assurez-vous de définir un li "Tous" avant de foreach, car nous voulons que le premier onglet affiche par défaut tous les films, puis nous filtrons par genre en utilisant les autres onglets.
Le contenu de l'onglet
Nous voulons ensuite définir le contenu de l'onglet pour l'onglet tous les films, et nous le faisons en utilisant un wp_query sur le type de publication de films comme ceci :
<div class="volet tab actif">
<?php
$args = tableau(
'post_type' => 'films',
'messages_par_page' -1,
'orderby' => 'titre',
'commande' => 'ASC'
);
$all_films = new WP_Query( $args );
?>
<?php if ( $all_films->have_posts() ) : // assurez-vous que nous avons des films à montrer avant de faire quoi que ce soit ?>
<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">En savoir plus</a>
</td>
</tr>
<?php endwhile; ?>
<?php wp_reset_query() ?>
</table>
</div>
<?php endif; ?>
</div><!-- volet d'onglet tous les films -->Assurez-vous de définir la valeur de la clé de type de publication sur le nom de votre type de publication (si vous n'utilisez pas de films), c'est-à-dire 'post_type' => 'votre type de publication ici'. Nous renvoyons ensuite tous les messages dans le type de message des films et triés par titre, par ordre croissant.
Nous exécutons ensuite une boucle WordPress normale sur cet objet wp_query et renvoyons tous les messages du film.
Pour cet exemple, j'ai choisi de sortir une table d'amorçage dans chaque volet d'onglet, mais vous pouvez sortir vos données quand vous le souhaitez. La chose à retenir, c'est qu'en utilisant une boucle wp_query, nous pouvons utiliser toutes les grandes fonctions WordPress telles que the_title, the_excerpt, the_post_thumbnail etc.
À la fin de cette boucle, n'oubliez pas d'exécuter wp_reset_query, car cela évitera tout problème éventuel que nous pourrions avoir si nous allons exécuter d'autres boucles sur cette page.
Après avoir trié le contenu de l'onglet montrant tous les films, nous voulons ensuite pouvoir montrer tous les films qui ont été regroupés en genres. Nous voulons que cela soit dynamique, de sorte que si nous choisissons d'ajouter d'autres genres à l'avenir, nous n'ayons pas besoin de coder dans d'autres wp_quires pour chacun d'eux. Pour y parvenir, nous devrons exécuter une autre boucle foreach sur la prochaine div tab-content et à l'intérieur de celle-ci, nous exécuterons une wp_query avec quelques paramètres de taxonomie.
<?php foreach($film_genres as $film_genre) { ?>
<div class="tab-pane">
<?php
$args = tableau(
'post_type' => 'films',
'messages_par_page' -1,
'orderby' => 'titre',
'commande' => 'ASC',
'tax_query' => tableau(
déployer(
'taxonomie' => 'genres',
'field' => 'slug',
'terms' => $film_genre->slug
)
)
);
$films = new WP_Query( $args );
?>
<?php if ( $films->have_posts() ) : // assurez-vous que nous avons des films à montrer avant de faire quoi que ce soit ?>
<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">En savoir plus</a>
</td>
</tr>
<?php endwhile; ?>
<?php wp_reset_query() ?>
</table>
<?php endif; ?>
</div>
<? } ?>Nous enveloppons le même foreach que nous avons utilisé auparavant autour de la div du volet de tabulation. Nous devons le faire pour pouvoir accéder aux valeurs de l'objet $film_genre que nous avons défini, car nous devrons utiliser la valeur du slug pour la transmettre à notre wp_query, et également pour définir l'ID du volet de tabulation.
Une fois que nous avons créé le wp_query, nous utilisons la même boucle WordPress que dans le volet d'onglets « tous » des films, sans oublier de changer la variable wp_query en quelque chose d'unique comme $film_genres.
Et c'est vraiment tout. Les onglets Bootstrap devraient fonctionner parfaitement, et lorsque vous ajoutez un nouveau genre avec des films qui y sont attachés, cela devrait apparaître comme un nouvel onglet.
Voici le code complet :
<section class="films-tabs">
<?php $film_genres = get_terms('genres'); // obtenir tous les genres ?>
<!-- Onglets de navigation -->
<ul class="nav nav-tabs nav-justified">
<li class="actif">
<a data-toggle="tab" href="#all">Tous</a>
</li>
<?php foreach($film_genres as $film_genre) { ?>
<li>
<a href="#<?php echo $film_genre->slug ?>" data-toggle="tab"><?php echo $film_genre->nom ?></a>
</li>
<? } ?>
</ul>
<!-- Volets d'onglets -->
<div class="tab-content">
<div class="volet tab actif">
<?php
$args = tableau(
'post_type' => 'films',
'messages_par_page' -1,
'orderby' => 'titre',
'commande' => 'ASC'
);
$all_films = new WP_Query( $args );
?>
<?php if ( $all_films->have_posts() ) : // assurez-vous que nous avons des films à montrer avant de faire quoi que ce soit ?>
<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">En savoir plus</a>
</td>
</tr>
<?php endwhile; ?>
<?php wp_reset_query() ?>
</table>
</div>
<?php endif; ?>
</div><!-- volet d'onglet tous les films -->
<?php foreach($film_genres as $film_genre) { ?>
<div class="tab-pane">
<?php
$args = tableau(
'post_type' => 'films',
'messages_par_page' -1,
'orderby' => 'titre',
'commande' => 'ASC',
'tax_query' => tableau(
déployer(
'taxonomie' => 'genres',
'field' => 'slug',
'terms' => $film_genre->slug
)
)
);
$films = new WP_Query( $args );
?>
<?php if ( $films->have_posts() ) : // assurez-vous que nous avons des films à montrer avant de faire quoi que ce soit ?>
<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">En savoir plus</a>
</td>
</tr>
<?php endwhile; ?>
<?php wp_reset_query() ?>
</table>
<?php endif; ?>
</div>
<? } ?>
</div><!-- tab-content -->
</section><!-- onglets-films -->
Si vous avez besoin d'aide avec votre n'hésitez pas à nous contacter.