Adapter le thème Twenty Seventeen

Dans l’article précédent de cette série , nous avons vu comment créer un thème enfant pour le thème Twenty Seventeen de WordPress et créer des modèles de page. Aujourd’hui, nous allons voir comment modifier les caractéristiques de l’image d’en-tête du thème et ajouter des sections à la page d’accueil.
Pour réaliser ces modifications, je me suis beaucoup inspirée de cet excellent article, sur Kinsta.com : A Developer’s Introduction to the Twenty Seventeen Theme.

Modifier les caractéristiques de l’image d’en-tête

Le thème Twenty Seventeen utilise une image de 2000 px de large, 1200 de haut. Je préfère une image moins haute, pour voir le contenu de la page sans avoir à utiliser la barre de défilement dès le début.

Je veux régler la hauteur de l’image à 350 px et utiliser par défaut une autre image. Et il faudra modifier la feuille de style pour supprimer le réglage qui met l’image à 100% de la hauteur d’écran.

Dans functions.php du thème enfant, ajouter :

J’ai ainsi défini une nouvelle image par défaut et réglé la hauteur des images à 350 px.

Dans le répertoire /images/ du thème enfant, ajouter l’image (qui doit faire 2000 x 350 px au lieu de ce qui est défini par le thème twentyseventeen (2000 x 1200 px)

 

Ensuite, on va dans « personnaliser » le thème et on sélectionne la nouvelle image suggérée. Cependant, elle ne s’affiche pas correctement à ce stade, puisque des règles de style l’interdisent.

Je modifie donc style.css du thème enfant

On notera que je n’ai pas modifié le style pour les petits écrans. Je verrai ça plus tard.

Maintenant, l’image d’en-tête s’affiche comme je le voulais :

Changer la taille d'image d'en-tête du thème Twenty Seventeen

 

Modifier le nombre de sections de la page d’accueil

C’est très simple à réaliser, il suffit d’ajouter cette ligne dans functions.php du thème enfant :

Et maintenant, au lieu de 4 sections paramétrables dans le menu « personnaliser », on en a 6 :

Ajouter des sections à la page d'accueil (thème Twenty Seventeen)

Autres modifications

Si je veux avoir une page d’accueil défilante, je m’inspirerai de l’article cité en introduction et de ces deux articles de wpmudev.com :

Et maintenant ?

Je vais utiliser ce thème enfant pour construire un tableau de bord domotique pour ma maison (voir la série d’article ).

20 commentaires


  1. Bonjour j’ai essayé votre méthode a réduire la taille de l’image de l’entête elle marche tres bien, le probablement c’est que j’arrive plus a revenir en arrière même si je supprime les lignes ajoutées et réinstalle le thème twentyseventeen l’image d’en tète reste de taille réduite. Svp aidez moi.

    Répondre

    1. Bonjour Zaheg
      La seule explication est que le navigateur n’a pas rafraichi la représentation du site.
      Il faut appuyer sur SHIFT et refraichir. Sur Chrome c’est fréquent qu’il n’y ait rien à faire qu’à attendre. Mais en réalité le changement a bien eu lieu. Il n’y a donc pas de raison de s’inquiéter.
      Anne-Laure

      Répondre

  2. Bonjour,

    Merci beaucoup pour cet article. J’ai pu modifier la taille de mon image d’entête de l’accueil qui était GEANTE!!
    Par contre je souhaiterai également diminuer celle des images du dessous qui défilent entre mes textes.
    Est ce la même manip?

    J’imagine qu’il faut « appeler » la bonne image dans le code…

    Merci

    Répondre

    1. Bonjour Océane,

      Merci pour ce commentaire.
      Pour les autres images, il faudra probablement « appeler » les bonnes. Désolée de ne pas pouvoir faire du SAV plus précis ici.
      Bons ajustements !
      Anne-Laure

      Répondre

  3. Bonjour,

    J’ai utilisé votre code, qui est parfait pour un affichage sur PC, mais qu’en est-il pour un affiche sur smartphone? Vous indiquez que vous verrez cela plus tard. Est-ce que c’est mentionné dans un article à part?
    Merci d’avance pour votre réponse !

    Répondre

    1. Bonjour Milène,
      Merci pour votre commentaire.
      Non je n’ai pas fait les modifications pour un petit écran. Si vous connaissez un peu le css, vous savez qu’il faut ajouter des instructions dans style.css.
      Comme finalement je n’ai jamais véritablement utilisé le thème twenty seven, je ne souhaite pas prendre le temps de voir que faire pour les petits écrans.
      Bonnes améliorations !
      Anne-Laure

      Répondre

  4. Bonjour, je souhaite modifier les caractéristiques de l’image d’en-tête, qui est beaucoup trop haute mon gout, mais je débute sur PHP 🙂

    J’ai essayer d’utiliser votre code pour ce faire, hors lorsque je copie votre code sur function.php j’ai une erreur (PHP – Parse error, unexpected T_STRING, expecting ‘,’ or ‘;’), j’ai essayé de rajouter ; à la fin mais rien n’y fait ?
    Je lance donc ma bouteille à la mer …

    Répondre

    1. Lorsqu’on débute les erreurs de syntaxe sont très mystérieuses ! Il faut continuer et progressivement ça devient plus lumineux.
      Bien souvent le ; ou parfois la virgule manquent non pas à la fin de la ligne indiquée mais dans celle qui précède ! L’erreur est signalée là où l’ordi s’en rend compte, et c’est souvent à la ligne suivante.
      Bon courage
      Anne-Laure

      Répondre

  5. Bonjour

    Merci pour votre article très éclairant.
    J’ai une question
    Je me retrouve soudainement avec un fil d’Ariane non voulu
    Comment l’enlevé ?

    Merci
    Bien à vous

    Répondre

    1. Bonjour Olivier,

      Merci pour votre commentaire.
      A priori, le fil d’Ariane est généré dans le fichier qui génère le header (header.php). Il faut donc copier le header.php du thème dans le répertoire du thème enfant puis supprimer la partie correspondant au fil d’Ariane.
      Dites- nous si c’est bien ça ou comment vous avez fait.
      Cordialement,
      Anne-Laure

      Répondre

  6. Bonjour,
    j’ai un petit souci avec ce thème ou plutôt le thème enfant de ce thème que j’utilise: ma page d’accueil présente un défaut d’affichage. En effet j’ai un petit « bout » d’image qui s’affiche tout en bas de l’écran. C’est à dire que c’est le bas de l’image d’accueil initial. J’ai également d’autres sections qui s »affichent (3). Ce « bout » d »image ne s’affiche pas par contre sur les autres pages (contact, infos,…).
    Auriez-vous une idée? Merci.

    Répondre

    1. Bonjour,

      Désolée, pas d’idée ! A priori il y a un problème de taille d’image définie dans la section, mais je ne peux pas en être certaine.
      Bonne résolution !

      Répondre

  7. Bonjour
    J’utilise la version 1.4 du thème avec WP 4.9
    Ou faut-il ajouter la ligne que vous indiquer dans functions.php?
    Si je l’ajoute je n’est plus acces au panneau d’aministration de mon si, page blanche dans firefox.

    Répondre

    1. Bonjour,

      J’imagine que vous parlez de la ligne pour modifier le nombre de sections de la page d’accueil.
      Il faut la mettre, comme indiqué dans functions.php du thème enfant, n’importe où, par exemple à la fin.
      Mais attention, il ne faut pas modifier le thème mais bien le thème enfant que vous aurez créé au préalable (cf l’article précédent, « Un thème enfant pour Twenty Seventeen (WordPress)« ).
      Cordialement,
      Anne-Laure

      Répondre

      1. Merci de votre réponse
        Oui c’est bien cela que je veux modifier, j’ai essayer de la mettre à divers endroits du fichier function du thème enfant est toujours le même résultat
        Une page blanche dans firefoxe et si j’examine la page avec les outils firefox j’ai un head vide et un body vide

        Répondre

        1. mon functions du thème enfant
          <?php
          // Exit if accessed directly
          if ( !defined( 'ABSPATH' ) ) exit;

          // BEGIN ENQUEUE PARENT ACTION
          // AUTO GENERATED – Do not modify or remove comment markers above or below:

          if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
          function chld_thm_cfg_parent_css() {
          wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) );
          }
          endif;

          // END ENQUEUE PARENT ACTION

          Tout fonctionne normalement

          et si j'ajoute
          function tsct_front_page_sections() {
          return 5; // la valeur souhaitée
          }
          add_filter( 'twentyseventeen_front_page_sections', 'tsct_front_page_sections' );

          Page blanche pour l'administration du site

          Répondre

      2. Problème résolu!!!
        J’utileais un générateur de thème enfant t j’avais tort… j’aurais du mieux vous lire!!!!
        En reprenant votre post sur la création de thème enfant ça marche parfaitement.
        Merci beaucoup

        Répondre

  8. Bonjour,

    Merci pour vos conseils sur l’ajout des sections, génial.

    Je cherche à mettre le slogan du thème sur deux lignes.
    Auriez vous la solution ?

    Répondre

Laisser un commentaire

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