Pages mises en avant en Customizr: comment changer leur nombre & disposition

Il y a quelques jours nous avons publié un tutoriel expliquant comment ajouter votre schéma de couleurs personnalisé au thème Customizr, sans altérer ceux déjà en place.

Faisons un pas de plus vers une personnalisation intégrale: allons changer le nombre des pages mises en avant sur la page d’accueil.

Comment changer le nombre des pages mises en avant sur la page d’accueil

Nous allons aborder aujourd’hui un autre sujet d’intérêt: comment modifier le nombre et la disposition des pages mises en avant sur la page d’accueil de votre site.


Nous allons passer par les étapes suivantes:


 

Pas 1. – Créer et activer un thème dérivé Customizr, si ce n’est pas déjà fait

Si vous avez besoin d’aide à ce sujet, laissez-vous guider par ce bref tutoriel.

Pas 2. – Créer la structure de répertoires nécessaire dans le thème dérivé

Si ce n’est pas déjà fait, créez dans le répertoire wp-content/themes/customizr-child un sous-répertoire nommé inc, puis un sous-repertoire à ce dernier nommé parts, de sorte que vous ayez wp-content/themes/customizr-child/inc/parts/.

Pas 3. – Ajouter les fichiers nécessires dans le thème dérivé

Rappel: tous les fichiers dans le thème dérivé qui portent un nom identique à des fichiers se trouvant dans le thème parent remplacent ces derniers. Allons donc copier les fichiers necessaires du thème parent dans les thème dérivé, où nous allons les modifier selon nos besoins.

wp-content/themes/customizr/inc/class-fire-init.php -> wp-content/themes/customizr-child/inc/class-fire-init.php

wp-content/themes/customizr/inc/class-fire-utils_settings_map.php -> wp-content/themes/customizr-child/inc/class-fire-utils_settings_map.php

wp-content/themes/customizr/inc/parts/class-content-featured-pages.php -> wp-content/themes/customizr-child/inc/parts/class-content-featured-pages.php

Nous ne toucherons plus désormais aux fichiers du thème parent, tous les opérations ultérieures se feront uniquement dans le thème dérivé.

Pas 4. – Changer le nombre des pages mises en avant

Dans le fichier wp-content/themes/customizr-child/inc/class-fire-init.php, cherchez le texte: $this -> fp_ids = array( ‘one’ , ‘two’ , ‘three’ ); (il devrait se trouver aux environs de la ligne 191) et ajotez à la liste autant d’éléments que vous souhaitez (chaque élément correspond à une page mise en avant).

Supposant que vous souhaitez afficher 4 pages mises en avant sur la page d’accueil, au lieu de 3, la ligne en question doit étre modifiée comme suit: $this -> fp_ids = array( ‘one’ , ‘two’ , ‘three’ , ‘four’ );

Si vous avez besoin de 6 pages mises en avant, la ligne sera changée comme ceci: $this -> fp_ids = array( ‘one’ , ‘two’ , ‘three’ , ‘four’ , ‘five’ , ‘six’ );

Pas 5. – Changer le nombre de pages mises en avant par ligne

Par défaut, Customizr affiche sur la page d’accueil 3 pages mises en avant par ligne. Si vous souhaitez changer ça, voici comment le faire.

Dans le fichier wp-content/themes/customizr-child/inc/parts/class-content-featured-pages.php, trouvez la fonction: function tc_fp_block_display() et cherchez cette ligne: $fp_per_row = apply_filters( ‘tc_fp_per_line’, 3 ); (ça devrait être la ligne #43 à peu près). C’est ici qu’il faut changer le nombre de pages mises en avant par ligne, en indiquant combien que vous souhaitez en afficher.

Supposant que vous aurez 4 pages mises en avant, les quatre sur la même ligne, la modification nécessaire est: $fp_per_row = apply_filters( ‘tc_fp_per_line’, 4 );.

Si vous souhaitez avoir 6 pages mises en avant, affichées sur deux lignes, alors aucune modification n’est nécessaire, donc la ligne restera inchangée: $fp_per_row = apply_filters( ‘tc_fp_per_line’, 3 );.

Le panneau "Pages mises en avant" de Customizr, après modification

Le panneau « Pages mises en avant » de Customizr, après modification

Pas 6. – Repercuter les changements dans le panneau de configuration

A présent il faut mettre à jour le paneau d’options (Appearance/ Customize/…/ FEATURED PAGES OPTIONS) pour avoir la possibilité de configurer nos pages mises en avant supplémentaires.

Dans le fichier wp-content/themes/customizr-child/inc/class-fire-utils_settings_map.php, trouvez la fonction: private function tc_generates_featured_pages() (la ligne #46 à peu près) et, pour chaque page mise en avant, ajoutez une ligne dans la liste dropdown array, puis une autre dans la liste text array .

Les lignes ajoutées dans la liste dropdown array afficheront, pour chaque page mise en avant, une liste déroulante permettant de choisir la page appropriée; celles de la liste text array afficheront une zone de texte pour saisir une description de la page mise en avant, si vous le désirez.

A titre d’exemple, voici ce que vous devriez avoir pour 4 pages mises en avant:

private function tc_generates_featured_pages() {
$default = array(
  'dropdown'  =>  array(
    'one'   => __('Home featured page one', 'customizr'),
    'two'   => __('Home featured page two', 'customizr'),
    'three' => __('Home featured page three', 'customizr'),
    'four' => __('Home featured page four', 'customizr')
  ),
  'text'    => array(
    'one'   => __('Featured text one (200 car. max)', 'customizr'),
    'two'   => __('Featured text two (200 car. max)', 'customizr'),
    'three' => __('Featured text three (200 car. max)', 'customizr'),
    'four' => __('Featured text four (200 car. max)', 'customizr')
  )
);
...

14 Commentaires

  1. 06 Jan 2016 à 5:51 · Répondre

    Bonjour,
    Ca c’est de l’info.
    Merci a toi.

  2. Nely
    16 Jan 2016 à 12:20 · Répondre

    Lu, comment changer la couleur du background de ces pages justement ? j’ai reussi à changer tous mes background mais impossible de changer la couleur de fond des pages en avant, un css stp ?^^ merci

    • Manuela Kherouf
      18 Jan 2016 à 9:48 · Répondre

      Pour changer le background de toute le conteiner de la page 1:
      .fp-one{background-color:lightgrey;}

      ou bien:

      Background de l’extrait de la page 1:
      .fp-text-one{background-color: lightgrey;}

      Background du titre de la page 1:
      .fp-one h2{background-color:lightgrey;}

      Pour les autres pages ce sera, bien-sûr, fp-two, fp-three et ainsi de suite.

  3. Manu
    25 Août 2016 à 11:23 · Répondre

    Merci, très bien expliqué !

  4. manu
    12 Sep 2016 à 8:36 · Répondre

    Bonjour,

    Est t’il possible de changer le lien des pages « en avant » ? vers une URL externe ?

    • Manuela Kherouf
      12 Sep 2016 à 11:06 · Répondre

      Pourquoi souhaiterait-on mettre en avant des pages externes? Cette section de la page d’accueil est destinée justement à augmenter la visibilité des pages que le propriétaire du site juge les plus intéressantes ou les plus susceptible de lui générer des visiteurs/ revenus/ commentaires.

      La réponse est donc que, même si techniquement on pourrait modifier le code pour « mettre en avant » une page externe, cela n’est pas justifié et déconseillé.

  5. benejean
    03 Nov 2016 à 7:12 · Répondre

    Bonjour,

    J’ai suivi votre tutoriel, avec le thème enfant etc, j’ai pu mettre 6 pages mises en avant comme je le souhaitais et tout fonctionnait.
    Mais depuis la dernière mis à jour de Customizr, tout est revenu comme avant.
    J’ai essayer de voir ce que la mise à jour du thème apporté, mais je n’arrive toujours pas à remettre 6 pages mises en avant.

    Si vous pouvez m’éclairer 🙂

    • Manuela Kherouf
      04 Nov 2016 à 1:54 · Répondre

      Bonjour,

      Je reprendrai, pour votre question, — la réponse — que j’ai déjà donnée à un autre commentaire:

      Décidemment, les derniers changements du thème Customizr ont été bien profonds. A présent, appliquer les pas de ce tutoriel aux fichiers du thème enfant ne produit plus le résultat récherché, tandis que les appliquer au thème parent, si. Si on mettait le temps nécessaire (dont personnellement je ne dispose pas pour le moment) on pourrait localiser le changement et ajuster notre code – mais le problème n’est pas là! Le vrai problème est que, même si on trouvait une solution, on ne pourrait pas s’y fier! L’auteur de Customizr a lui-même admis que ceci est un thème atypique, non-standard – et son évolution a déjà montré l’imprévisibilité de ses changements. On ne peut pas anticiper qu’est-ce que la prochaine version nous amènera, ni si la personalisation d’un utilisateur, implementée à la version [n.1], fonctionnera toujours pour la version [n.2].

      Ceci dit, l’utilisateur dispose de 3 options: se servir de la vérsion gratuite de Customizr, telle qu’elle est offerte; acheter la version Pro, avec les plugins associés, qui permettent quelques options supplémentaires de personnalisation; ou bien, passer à un autre thème, mieux aligné aux standards de développement WordPress.

  6. Sofiene
    18 Nov 2016 à 12:30 · Répondre

    Bonjour,
    Merci pour votre tuto fort intéressant.
    Mon prblème est le suivant: j’ai ajouté une quatrième page mise en avant, et cela a foctionné a merveille. Cependant, après avoir mis à jour customizr vers la dernière version, la page a dispuru.
    Est-il possible de corriger ce problème?
    Merci

  7. Sofiene
    18 Nov 2016 à 7:19 · Répondre

    Merci Manuela pour votre réponse

  8. BOUTET
    03 Jan 2017 à 2:27 · Répondre

    Bonjour,

    Dans les pages mise en avant, je voudrais pouvoir faire un lien non pas sur les articles mais comme sur le menu par la categorie d’article.
    Je m’explique : dans mon menu j’ai créer des liens sur article/catégorie1 et article/catégorie2. Je voudrais avoir cette possibilité dans le choix des pages mise en avant. Est ce possible ?

    Bien cdlt

    • Manuela Kherouf
      07 Jan 2017 à 1:35 · Répondre

      Bonjour,

      Je ne pense pas que ce soit possible, d’ailleurs ça s’appelle PAGES mises en avant, et non pas posts ou catégories… Peut-être l’auteur du thème pourra vous suggérer une solution à votre problème, avez-vous essayé de poser la question sur son site?

  9. Loopkin
    11 Mai 2017 à 2:57 · Répondre

    Bonjour, pour tous ceux qui n’ont pas réussi à mettre autre chose qu’une page, utilisez le plugin « Page Links To », avec j’ai pu mettre un lien externe sur l’un des icônes, et des catégories sur les deux autres !

Laisser un Commentaire

Plan du site

ouvrir