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
  • 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 articles 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
  • 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 :) !

11 Commentaires

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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

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