Thème WooCommerce Storefront Créer plusieurs modèles de catégories

Publié: 2020-10-12

Thème WooCommerce Storefront Créer plusieurs modèles de catégories Il est courant dans de nombreuses boutiques en ligne d'utiliser différents modèles pour les catégories, les balises, les types de publication personnalisés et les taxonomies. Si vous utilisez différents modèles pour les catégories, vous pouvez ajouter des fonctionnalités spécifiques sur les pages de catégorie. Par exemple, vous pouvez ajouter des images de catégorie, afficher la description de la catégorie, autoriser les utilisateurs à s'abonner à des catégories et choisir une mise en page différente pour chaque catégorie.

Thème WooCommerce Storefront Créer plusieurs modèles de catégories

Dans ce bref tutoriel, je vais vous montrer comment créer des modèles de catégories dans votre boutique WooCommerce.

La hiérarchie des modèles pour les pages de catégorie

WordPress dispose d'un puissant système de modèles qui vous permet de créer des thèmes en utilisant différents modèles pour différentes sections de sites Web. Lors de l'affichage d'une page, WordPress recherche un modèle dans un ordre hiérarchique prédéfini. Par exemple, pour afficher une page de catégorie, il recherche les modèles dans l'ordre suivant :

category-slug.php > category-id.php > category.php > archive.php > index.php

Le premier modèle qu'il recherchera est celui spécifique à cette catégorie particulière en utilisant le slug de catégorie. Le template category-design.php sera utilisé pour afficher la catégorie 'Design'. Cependant, s'il ne trouve pas de modèle de slug de catégorie, WordPress recherchera un modèle d'ID de catégorie.

Il cherchera ensuite le modèle de catégorie générique, qui est généralement category.php. Cependant, s'il n'y a pas de modèle de catégorie générique, WordPress recherchera un modèle d'archive générique.

Après cela, il utilisera le modèle index.php pour afficher la catégorie.

Comment créer un modèle de catégorie

Le modèle typique de category.php ressemble à ceci :

 <?php

/**

* Un modèle de catégorie simple

*/

 get_header(); ?>

 <section id="primary" class="site-content">

<div id="content" role="main">

 <?php

// Vérifie s'il y a des messages à afficher

si ( have_posts() ) : ?>

 <header class="archive-header">

<h1 class="archive-title">Catégorie : <?php single_cat_title( '', false ); ?></h1>

 <?php

// Affiche la description facultative de la catégorie

 si ( catégorie_description() ) : ?>

<div class="archive-meta"><?php echo category_description(); ?></div>

<?php endif; ?>

</header>

 <?php

 // La boucle

tandis que ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Lien permanent vers <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> par <?php the_author_posts_link() ?></small>

 <div class="entry">

<?php le_contenu(); ?>

  <p class="postmetadata"><?php

  comments_popup_link( 'Aucun commentaire pour l'instant', '1 commentaire', '% commentaires', 'commentaires-lien', 'Commentaires fermés');

?></p>

</div>

 <?php pendant que ;

 sinon : ?>

<p>Désolé, aucun article ne correspond à vos critères.</p>

 <?php endif; ?>

</div>

</section>

 <?php get_sidebar(); ?>

<?php get_footer(); ?>

Supposons que vous ayez une catégorie appelée "Classy Clothes" avec la catégorie-slug "classy" et que vous souhaitiez afficher cette catégorie différemment des autres. Ce résultat peut être obtenu en créant un modèle pour cette catégorie particulière.

Pour ce faire, allez dans Apparence > Éditeur. Vous verrez des fichiers de thème sur votre droite. Cliquez sur archive.php . Si ce n'est pas le cas, recherchez category.php . Cependant, si vous utilisez le thème Storefront, vous trouverez archive.php . fichier archives.php

Copiez tout le contenu du fichier archive.php et collez-le dans un éditeur de texte comme Notepad. Enregistrez ce fichier sous category-design.php.

L'étape suivante consiste à accéder à wp-content > Themes > Storefront theme . Téléchargez le fichier category-design.php dans votre répertoire de thème.

Catégorie design.php

Il convient de mentionner que toute modification que vous apporterez à ce modèle n'apparaîtra que dans la page d'archives de cette catégorie particulière. Vous pouvez utiliser cette technique pour créer des modèles pour autant de catégories que vous le souhaitez. Il vous suffit d'utiliser category-{category-slug}.php comme nom de fichier. Les slugs de catégorie se trouvent dans la section des catégories de la zone d'administration de WordPress.

Ceci est un autre exemple de modèle category-slug.php. C'est le même que le template category.php, avec quelques changements :

 <?php

/**

* Un modèle de catégorie simple

*/

get_header(); ?>

<section id="primary" class="site-content">

<div id="content" role="main">

<?php

// Vérifie s'il y a des messages à afficher

si ( have_posts() ) : ?>

<header class="archive-header">

<?php

// Étant donné que ce modèle ne sera utilisé que pour la catégorie Design

// nous pouvons ajouter manuellement le titre et la description de la catégorie.

// ou même ajouter des images ou modifier la mise en page

?>

<h1 class="archive-title">Articles de conception</h1>

<div class="archive-meta">

Articles et tutoriels sur le design et le web.

</div>

</header>

<?php

// La boucle

tandis que ( have_posts() ) : the_post();

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Lien permanent vers <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> par <?php the_author_posts_link() ?></small>

<div class="entry">

<?php le_extrait(); ?>

<p class="postmetadata"><?php

comments_popup_link( 'Aucun commentaire pour l'instant', '1 commentaire', '% commentaires', 'commentaires-lien', 'Commentaires fermés');

?></p>

</div>

<?php pendant que ; // Terminer la boucle

sinon : ?>

<p>Désolé, aucun article ne correspond à vos critères.</p>

<?php endif; ?>

</div>

</section>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Cependant, si vous ne souhaitez pas utiliser le modèle category-slug, vous pouvez utiliser le modèle category-id pour créer un modèle pour un ID de catégorie spécifique.

Comment utiliser les balises conditionnelles pour une catégorie

Lorsque vous créez des modèles pour votre thème, vous devez vous assurer que vous avez besoin d'un modèle supplémentaire. En effet, dans certains cas, vous souhaitez que les modifications ne soient pas trop compliquées et peuvent être réalisées à l'aide de balises conditionnelles à l'intérieur d'un modèle générique.

WordPress prend en charge de nombreuses balises conditionnelles. L'un d'eux est la balise conditionnelle is_category(). Vous pouvez l'utiliser pour modifier vos modèles afin d'afficher une sortie différente si la condition est remplie. Par exemple, vous souhaiterez peut-être afficher des informations supplémentaires sur la page d'archive de catégorie pour une catégorie. Pour ce faire, ajoutez simplement ce code dans le fichier category.php juste après <?php if ( have_posts() ) : ?>.

 <header class="archive-header">

<?php if(is_category( 'Featured' )) : ?>

<h1 class="archive-title">Articles en vedette :</h1>

<?php sinon : ?>

<h1 class="archive-title">Archive de catégorie : <?php single_cat_title(); ?> </h1>

<?php endif; ?>

</header>

Conclusion

Dans cet article, j'ai souligné que vous pouvez utiliser différents modèles pour les catégories, les balises, les types de publication personnalisés et les taxonomies. De plus, j'ai partagé la hiérarchie des modèles utilisée dans WordPress pour les pages de catégories.

De plus, je vous ai montré comment vous pouvez créer un modèle de catégorie et comment vous pouvez utiliser des balises conditionnelles pour une catégorie.

Thème WooCommerce Storefront Créer plusieurs modèles de catégories

Thème WooCommerce Storefront Créer plusieurs modèles de catégories

La hiérarchie des modèles pour les pages de catégorie

Comment créer un modèle de catégorie

Comment utiliser les balises conditionnelles pour une catégorie

Conclusion

Articles similaires