Accueil » Codage » Divi » Personnaliser facilement votre page « Catégorie » / Customize easily your « Category » page

Le thème Divi créé par ElegantThemes est proche du sans faute ; néanmoins il lui manque une chose dont son petit frère a hérité et qui est la personnalisation facile de la page des catégories.
Ainsi, avec le thème Extra on peut facilement changer le rendu graphique et le contenu de chacune des pages de nos catégories mais il n’existe aucune manière pour le faire facilement avec Divi.

En partant du code de Fabrice Esquirol que je remercie au passage ;), j’ai voulu assouplir la méthode permettant cette personnalisation. Pour cela j’ai créé pour vous un fichier « category.php« . Je l’ai préparé pour les langues les plus couramment utilisées. C’est-à-dire :

  • l’anglais : la catégorie que vous souhaitez personnaliser devra se nommer « Category suivie du nom de votre catégorie »,
  • le français : la catégorie que vous souhaitez personnaliser devra se nommer « Catégory suivie du nom de votre catégorie »,
  • l’espagnol : la catégorie que vous souhaitez personnaliser devra se nommer « Categoria suivie du nom de votre catégorie »,
  • l’italien : la catégorie que vous souhaitez personnaliser devra se nommer « Categoria suivie du nom de votre catégorie »,
  • l’allemand : la catégorie que vous souhaitez personnaliser devra se nommer « Kategorie suivie du nom de votre catégorie ».

Maintenant la procédure pour pouvoir l’utiliser 🙂 !

  • placer le fichier « category.php » dans le dossier de votre thème enfant de Divi :).
  • Créez un modèle avec le nom d’une catégorie existante que vous souhaitez personnaliser de votre site avec la syntaxe suivante. Pour la catégorie « Exemple » nommez votre modèle « Catégorie Exemple« .
    Comme WordPress va remplacer tous les caractères spéciaux/accentués et les espaces, le slug de mon modèle deviendra « categorie-exemple » (et c’est ce type de nom que mon fichier « category.php » va chercher pour savoir si une catégorie doit être personnalisée ;)…).
  • Personnalisez votre modèle comme vous le souhaitez en ajoutant tous les éléments que vous voulez. N’oubliez pas d’ajouter un module blog avec la catégorie en cours sélectionnée et un nombre d’articles égal ou supérieur à la valeur entrée dans le champ « Nombre d’articles affichés sur la page des catégories » des options de Divi, sinon vous n’afficherez rien pour votre catégorie ou vous aurez des problèmes avec la pagination 😀 !
  • J’ai ajouté une nouvelle possibilité. Définir un modèle par défaut pour tourtes les catégories 😀 ! Pour cela, comme pour les catégories que vous souhaitez personnaliser, ajouter tous les éléments que vous souhaitez y voir (n’oubliez pas le module « blog ») et enregistrez votre modèle « Catégorie ».
  • Merci à Surya grâce à qui j’ai découvert que les anglais utilisaient une version spécifique de WordPress (avec l’encodage « en_GB ») et qui m’a permit d’ajouter cette « particularité » à mon fichier
  • Merci à Gary Armstrong qui m’a permit d’optimiser l’aspect international de la page category.php 😉 !
  • Appréciez le nouveau rendu de votre catégorie 😀 !!

Cliquez-ici pour télécharger le fichier « category.php » à placer dans le dossier de votre thème enfant de Divi.

EUR


The Divi theme created by ElegantThemes is close to the no-fault; Nevertheless it misses one thing that his little brother inherited and that is the easy customization of the category page.
So with the Extra theme you can easily change the rendering and content of each page of our categories but there is no way to do it easily with Divi.

Starting from the code of Fabrice Esquirol which I thank in passing;), I wanted to relax the method allowing this personalization. For this I created for you a file « category.php« . I have prepared it for the most commonly used languages. That is to say :

  • English: the category that you wish to customize will have to be named « Category followed by the name of your category »,
  • French: the category that you wish to customize will have to be named « Catégorie followed by the name of your category »,
  • Spanish: the category that you wish to customize will have to be named « Categoria followed by the name of your category »,
  • Italian: the category that you wish to customize will have to be named « Categoria followed by the name of your category »,
  • German: the category that you wish to customize will have to be named « Kategorie followed by the name of your category ».

Now the procedure to be able to use it :)!

  • Place the file « category.php » in the folder of your child theme of Divi :).
  • Create a template with the name of an existing category in your site that you wish to customize with the following syntax. For the « Example » category, name your model « Category Example« .
    As WordPress will replace all special / accented characters and spaces, the slug of my model will become « category-example » (and it is this type of name that my file « category.php » will look for to know if a category must be customized 😉 …).
  • Customize your model as you like by adding all the elements you want. Don’t forget to add a blog module with the current category selected and a number of posts equal to or greater than the value entered in the « Number of Posts displayed on Category page » section of the Divi options, otherwise nothing will be shown for your category or you’ll get problem with the pagination 😀 !
  • I’ve added a new possibility. Define a template by default for all the categories 😀 ! For that, like for the categories that you wish to customize, add all the elements that you wish to see (don’t forget the « blog » module) and save your layout with the name « Category » (« Catégorie » in French, « Categoria » in Italian and Spanich, « Kategorie » in Deutch).
  • Thanks to Surya thanks to whom I discovered that the English used a specific version of WordPress (with encoding « en_GB ») and that allowed me to add this « peculiarity » to my file
  • Thanks to Gary Armstrong who allowed me to optimize the international aspect of the page category.php;)!
  • Appreciate the new rendering of your category 😀 !!

Click here to download the file « category.php » to place in the folder of your child theme of Divi.

USD

 

Information : Véritablement conquis par ce thème, je me suis inscrit sur le site de ElegantThemes en tant qu'affilié, ce qui signifie que si vous cliquez sur le lien ci-dessous et achetez le thème, je recevrai une commission :).

Information: Truly conquered by this theme, I registered on the site of ElegantThemes as an affiliate, which means that if you click on the link below and buy the theme I will receive a commission :).

 

Après avoir visité les coulisses, découvrez le site :) !

44 Commentaires

  1. Guilamu

    J’ai également testé de créer un modèle qui s’appliquerait à toutes mes catégories en créant un modèle divi intitulé « Catégorie » et cela ne fonctionne pas du tout, le modèle n’est pas appliqué.

    Réponse
    • Pierre

      Re-Bonjour Guilamu :).

      Bon et bien là, sans URL, pas évident de pouvoir t’aider… As-tu bien vérifié que le « slug » (le « nom cours ») de ton modèle est bien « categorie » ? Tu peux le voir en plaçant ta souris au-dessus de ton modèle dans ta bibliothèque Divi et en cliquant sur « Modification rapide ».
      Tiens-moi au courant.

      Amicalement,

      Pierre.

      Réponse
    • Pierre

      Bonjour Guilamu 🙂 !

      Et bien tu dois procéder exactement de la même manière qu’avec une catégorie. C’est-à-dire que si ta sous-catégorie s’appelle « test » tu va devoir créer un modèle « Catégorie Test » dans ta Bibliothèque Divi ;).
      Passe une très belle journée 😀 !!

      Amicalement,

      Pierre.

      Réponse
  2. Alexandre Guiet

    Bonjour,
    Merci pour votre tuto, par contre cela ne fonctionne pas pour les page catégorie produit de WooCommerce ?

    En attente de votre réponse merci bien 🙂

    Réponse
    • Pierre

      Bonjour Alexandre 🙂 !
      Je n’en ai aucune idée, je n’ai pas d’install de test avec Woo ;). Mais à toi aussi, je ne peux que te conseiller de jeter un oeil sur le plugin de Sean Barton (https://elegantmarketplace.com/downloads/woo-layout-injector/) qui je pense devrait parfaitement répondre à tes besoins ;).

      Passe une belle journée 😀 !

      Amicalement,

      Pierre.

      Réponse
  3. Gary Armstrong

    So… thanks for your work here. Just one small change I’d make to the code is to allow for other countries who speak the same language. It’s great that you accounted for en_US and en_GB, but what about en_CA, or how about fr_CA. If you added Portuguese, you’d have Portuguese in Angola and Brazil… which have 10x as many Portuguese speakers than Portugal.

    From a development perspective, it may be a better idea to only use the first two characters in the locale.

    I wrote a blog post detailing how to refine this code for any country.

    Réponse
    • Pierre

      Hi Gary 🙂 !

      Yeah, great idea!! Just read your post, it’s simple, logic and brillant 😀 !! I think that, I will follow your idea and implement it in the next release (I’m not going to do it just now, because it’s very late, here, but I’ll try to do it tomorrow).

      Thanks again for your code 😀 !

      Have a great day 😀 !!

      Amicably,

      Pierre.

      Réponse
  4. Fulvio

    Wow thanks a lot a solved my problem was about 3 weeks a was looking for a solution for change the structure of category, and the support of divi don’t give me any nice support for this … Thanks a lot Pierre
    Divi is very nice, but may obvius change need a customization

    Thanks a lot, and sorry but i can read french but i prefer don’t write on in it i’m not able to write in correct way

    thanks
    Fulvio (from italy)

    Réponse
    • Pierre

      Hi Fulvio 🙂 !

      Great 🙂 ! Happy you like it and to be able to help you 😉 !! I can read italian a little but for the same reason, I do my best to write in english ;)…

      Have a great day Fulvio 😀 !!

      Amicably,

      Pierre.

      Réponse
  5. Céline

    Bonjour Pierre,

    Merci beaucoup pour votre article.
    J’ai suivi vos instructions à la lettre, cependant je me retrouve avec deux problèmes…
    (Je précise que je suis novice en la matière).

    J’aurais souhaité faire une mosaïque d’images cliquables (sans texte dessous) dans chaque catégories (5 sur mon site), cela apparaissant impossible avec un seul module image, je décide d’en ajouter un au dessus du module blog et je copie l’ensemble pour en avoir 2 par lignes en pleine largeur.

    > Avec ce modèle type, pour qu’un visuel remonte automatiquement dans le module image, faut-il obligatoirement ajouter une image en UNE des articles ? (car je ne peux malheureusement pas la masquer de mon bloc de contenu par la suite et cela fait doublon avec les vidéos des articles).

    > Mais le vrai problème est que les articles se dédoublent, ce qui parait logique puisqu’il y a un second ensemble modules image/blog vide à côté, mais si je n’en ajoute pas, les nouveaux articles se mettent automatiquement sous le premier (aligné à gauche) laissant un grand vide à droite de la page… (> https://feedmenow.fr/category/afternoon-delight/)

    Je suis assez confuse, j’espère être suffisamment claire, mais tout cela me semble compliqué je me demande s’il ne vaut pas mieux abandonner l’idée d’apparence en mosaïque…

    Un grand merci d’avance pour votre avis professionnel sur la situation…

    Céline.

    Réponse
    • Pierre

      Bonjour Céline :).

      Puis-je me permettre le tutoiement ? Ce sera plus simple et plus sympa ;). Bon alors je vais être clair, j’avoue ne rien comprendre à ce que tu cherches à faire :)… Du coup, j’ai du mal à savoir quelle piste te donner pour pouvoir t’aider. Si tu veux mettre plusieurs modules « blog » (c’est la seule chose que je crois avoir compris), tu peux très bien n’afficher qu’un seul article pour chacun d’entre eux et leur définir un nombre de décalage à chacun ;). Pour le premier tu laisse la valeur de « Nombre de décalage » à 0, puis tu incrémentes les suivants à chaque fois de 1.
      A mon tour j’espère avoir été asses clair pour que tu puisses me comprendre ;).

      Passe une belle soirée 😀 !!

      Amicalement,

      Pierre.

      Réponse
      • Céline

        Bien sûr et merci pour ton retour rapide 🙂
        En effet, je ne suis pas claire du tout (et entre temps le pb image est résolu !).

        Je pense être obligée de mettre deux modules blog pour essayer d’avoir un effet « mosaïque » (je vais trouver un moyen d’enlever les extraits textes par la suite).

        J’ai bien essayé le décalage, cela fonctionne car les articles ne se mettent plus les uns sous les autres mais ils se dédoublent toujours (sûrement du au fait des deux modules blogs côtes à côtes… ?)

        Aurais-tu une idée de ce à quoi c’est du ?

        Encore merci beaucoup vraiment !

        Céline.

        Réponse
        • Pierre

          Bonjour Céline :).

          Bon concrètement, je ne comprends toujours pas ce que tu tentes de faire :)…
          Si tu souhaites afficher les articles d’une catégorie à l’aide du module « Blog » pourquoi ne tentes-tu pas de l’utiliser de manière classique avec un affichage en « grille » pour x enregistrements ?

          Amicalement,

          Pierre.

          Réponse
          • Céline

            Bonjour Pierre,

            Ce n’est pas grave du tout, j’ai trouvé un compromis 🙂
            Et quand j’aurai plus d’articles, j’utiliserai l’affichage en grille !

            Merci tout de même car je viens de loin avec ces catégories !!! 🙂

            Amicalement,

            Céline.

  6. Belen

    Hello Pierre,
    Thanks a lot for this trick. It’s working fine for me except for one thing. Could you please help me?

    When I try to go to a category with just 2 posts it shows no results. It works with all the rest with more than 5 posts..

    I set in Divi options to show 8 results in Categories, and set the same in the template.
    What am I doing wrong? Any ideas?

    Here you can see my blog with the categories list https://buscopilates.com/i-love-pilates/

    Thank you very much

    Réponse
    • Pierre

      Hi Belen 🙂 !

      Sadly, if you want to make it works, you have to the set the number of posts equal to or greater than the value entered in the « Number of Posts displayed on Category page » section of the Divi options…
      Otherwise you’ll have pagination problems ;)…

      Have a great day 🙂 !

      Amicably,

      Pierre.

      Réponse
      • Belen

        Thank you Pierre,
        I’ve realised someting happens with categories. The list says there are 14 posts for example, but it only shows 11. Or says 5 and shows 1… Weird.

        And for some categories page it doesn’t show pagination…

        I don’t know whats wrong.
        Thank you anyway.

        Réponse
        • Pierre

          Hi Belen :).

          It can’t be the category.php that doing that :)… All you’re talking about is in your back-office, that’s it?

          I’ve sent you a mail ;).

          Amicably,

          Pierre.

          Réponse
  7. Emilie

    Haaa mais c’est exactement ce que je cherchais ! Merci beaucoup ! Ma vie serait encore plus merveilleuse si on pouvait aussi appliquer le modèle aux résultats de la page de recherche…tu n’aurais pas une petite idée de comment étendre la mise en page jusque là par hasard ? 😉

    Merci beaucoup en tout cas !

    Réponse
    • Pierre

      Bonjour Emilie 🙂 !

      Je t’en prie :). Content que tu trouves mon fichier utile ;). Pour ta page de recherche, il va falloir que tu te tournes vers un plugin.
      Je te suggère, à toi aussi, de faire un saut sur le site d’ElegantMarketPlace sur la page de Sean Barton, ici : https://elegantmarketplace.com/downloads/search-layout-injector/ pour éventuellement acheter son plugin « Search Layout Injector ». Il t’en coûtera 15 $ ;).

      Passe une belle soirée 😀 !!

      Amicalement,

      Pierre.

      Réponse
  8. Pascal

    Hi Pierre! Thanks for your great tutorial and file category.php. It works great!
    Do you know if it is good also for SEO ?
    I mean: category pages built in this way will be easily founded by Google?
    Thanks 😉

    Réponse
    • Pierre

      Hi Pascal :).

      Don’t worry, there’s no reason that the category page will be less or less well indexed than your normals Divi page ;).
      Have a great day 😀 !!

      Amicably,

      Pierre.

      Réponse
  9. Samuel Winter

    Hi
    How would i go about doing this for my search results page?

    Réponse
    • Pierre

      Hi Samuel :).
      If you want to customize your search page, I suggest that you have a look to the « Search Layout Injector » (https://elegantmarketplace.com/downloads/search-layout-injector/), here too, from Sean Barton.
      It will cost you 15$ but I’m sure it will do the job for you, even if I haven’t yet bought it myself ;).

      Have a great day 😀 !

      Amicably,

      Pierre.

      Réponse
  10. SaliX

    Bonjour !
    Merci du post! Par contre j’aimerai savoir si vous avez une solution pour ceux qui utilisent WooCommerce ? J’ai envie d’utiliser des catégories très personnalisées de produits sans utiliser la mise en forme standard de WC … Une idée? Merci !

    Réponse
    • Pierre

      Bonjour SaliX :).

      Je t’en prie :).
      Pour le plugin, oui, je pense que Woo Layout Injector de Sean Barton que tu pourras trouver ici :
      https://elegantmarketplace.com/downloads/woo-layout-injector/
      remplira exactement les fonctions que tu recherches ;). Il est à 22 $ avec une licence « à vie » et illimitée ;).
      J’ai toujours été ravi des achats des plugins que Sean a développé (mais je n’ai pas encore acheté celui-ci).

      Passe une belle journée et un excellent week-end.

      Amicalement,

      Pierre.

      Réponse
  11. Surya Osborne

    I have tried for 4 hours to get this working. I think I must be missing out an important step.

    I have moved the category.php into my child theme folder. I do not edit this file.

    I then go to divi library and create a template for my uncategorized category. I save this template with the file name ‘category uncategorized’ I build a template using the blog module and select the uncategorized category from the module.

    I save this layout. Then I go to my blog and click uncategorized and nothing. Just the same as before. I would really appreciate any help you can give me to get this working.

    Surya.

    Réponse
    • Pierre

      Hi Surya.

      Could you verify in your Divi Library that the slug of your file is: « category-uncategorized »?
      To do that, go in your Divi Library and click on the « Quick Edit » link and verify the slug.
      The « common » error is to rename the layout. BTW the title seems to be the good one but the slug is keeping its old name.
      For being sure too, could you confirm, after you’ve verified the slug of your layout, that the « uncategorized » category exists ;)?
      Last but not least, don’t you have an other category that would permit to do the test?

      Waiting for your feedback ;).

      Amicably,

      Pierre.

      Réponse
      • Surya Osborne

        Pierre, bonjour, merci pour votre rapid reponse a mon commenatire.

        Back to English.

        The slug names seem to be correct. I have tried with other categories, e.g. simple things which I tried to get it working.

        I have 1 post in uncategorized and one in simple things. I tried making a layout for category-simple-things when uncategorized didn’t work.

        Do you mean to say uncategorized has to exist in the Divi library or in the blog categories? It exists in both.

        Yours very gratefully, Surya.

        Réponse
        • Pierre

          I just had a look to your website and try to show the « simple-things » but it shows me a 404 error ;)…
          I just sent you an email ;).

          Amicably,

          Pierre

          Réponse
  12. Eric

    Excellent !

    Merci beaucoup de ce tips tip top
    Ça faisait un moment que je cherchais

    Réponse
    • Pierre

      Je t’en prie Eric 🙂 !

      Heureux d’avoir pu répondre à ton attente 😉 !

      Réponse
  13. Reinout

    Hi Pierre,

    Thanks for your trick, it worked great for me!

    However, what if I don’t use the blog module in my layout? I’m asking because I want to use your trick to create a layout for my project portfolio archive page as well.

    The trick seems to work with a layout that contains no blog module but a portfolio module instead… However I’m not sure if I’ll run into problems at a later stage?

    Thanks again!

    Réponse
    • Pierre

      Hi Reinout :).

      Happy you like it. You can do a test and give me feedback ;). There no risk to do that. But I confess I have not tried your solution ;).

      Have a great day !

      Réponse
    • nowe

      would you be willing to help me out a bit with getting it to work for projects

      Réponse
  14. Pierre

    Hi Martin 🙂 !
    Great, you make it to work without any help from me (you’ve been too speed and/or wake-up too soon for me 😉 )
    Thanks for sharing the video it may help some other users ;).

    Have a great day 🙂 !!

    Réponse
    • NoWe

      Would it be possible that you could help me out with this
      I can not seem to figure this out

      Réponse
      • Pierre

        Hi NoWe.

        I would like to be able to help you, but without any information/link… I can’t ;).
        Waiting for your feedback :).

        Amicably,

        Pierre.

        Réponse
        • nowe

          sorry
          I am trying to do the same for the project archive.
          The site is bilingual Norwegian and UK
          question is how do is set this up

          ps working local until all works fine

          Réponse
  15. Martin Pfeffer

    Hello Pierre, thanks for this excellent post. This worked for me (mostly)!
    My blog is running WPML. For the German defaults it is 100% working, but on the English version I still get the « old » category/archive pages.
    My categories are accessed like this:
    Development in German: « development »
    Development in English: « development-en »

    Do you have any idea how to get it working?

    I’m quite sure to know the issue: I can’t set the category « Development » in the English layout-builder in divi-lib. There is only shown « Entwicklung » (the German word for development)..
    Even echoing the ID of the « cat » and use it in the translation of the builded layout didn’t work.

    $catID = get_query_var( ‘cat’ );
    echo $catID . «  »;
    echo $cat_slug;

    Réponse

Rétroliens/Pings

  1. Creating Custom Category Layouts using the Divi theme – Armstrongest - […] it turns out someone has done the hard work and published this tutorial on how to easily customize a category…

Poster le commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Accueil » Codage » Divi » Personnaliser facilement votre page « Catégorie » / Customize easily your « Category » page