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 :

add_filter( 'twentyseventeen_custom_header_args', 'al17_custom_header_args' );

function al17_custom_header_args( $args ) {
   // source https://kinsta.com/blog/twenty-seventeen-theme/
   $args['default-image'] = get_theme_file_uri( '/images/al_domotic-2000x350.png' );
   $args['height'] = 350 ;
   return $args;
}

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

.has-header-image .custom-header-media img {
   height: 350px ;
   object-fit: none;
   min-height: 0;
}

@media screen and (min-width: 48em) {

   .twentyseventeen-front-page.has-header-image .custom-header-media {
           max-height: 550px;
   }
}

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 :

add_filter( 'twentyseventeen_front_page_sections', function(){ return 6; } );

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 ).

0 0 vote
Article Rating
22
0
Would love your thoughts, please comment.x
()
x