Ajouter un modèle de page sans sidebar à Twenty Sixteen

Ajouter un modèle de page sans sidebar à Twenty Sixteen

Mais si, Twenty Sixteen, le nouveau thème par défaut de WordPress.

Nous allons voir comment profiter de la totalité de la largeur de l’écran sur certaines pages.

Créer un nouveau modèle de page

Pour cela, il est (extrêmement) préférable de travailler sur un thème enfant. Et je ne rappelle pas qu’il doit hériter du thème Twenty Sixteen. Sinon cet article n’aurait aucun sens.

Copiez le fichier page.php qui se trouve dans le dossier du thème Twenty Sixteen dans le dossier du thème enfant, pour l’appeler, par exemple : template-no-sidebars.php.

Editez ce fichier. Pour retirer la barre latérale, supprimez la ligne contenant :

<?php get_sidebar(); ?>

Ajoutez aussi ce commentaire au début du fichier pour indiquer qu’il s’agit d’un template :

<?php
/*
 * This template is the same as default one, but without sidebar.
 *
 * Template name: No sidebars
*/

Un peu de décoration

Même si la sidebar a disparu, la colonne de contenu ne prend toujours pas toute la place.

Pour réparer ce point, dans le fichier style.css, ajoutez cette règle CSS :

.page-template-template-no-sidebars .content-area {
	width: 100%;
	margin-right: 0;
}

Le nom de la classe page-template-template-no-sidebars correspond au nom du fichier PHP. Si vous choisissez de donner un autre nom au fichier PHP, n’oubliez pas de renommer la classe CSS.

Utilisation du modèle

Une fois le modèle créé, pour l’utiliser, tout se passe dans l’éditeur de pages de l’interface d’administration de WordPress : il apparaît dans la liste des modèles des attributs de la page, dans la colonne à droite du contenu.

Le mot de la fin

Twenty Sixteen c’est bien.

L'illustration de cet article est une image sous licence CC BY-SA 4.0 par Tiia Monto

Cet article vous a été utile ? Partage it !

Laisser un commentaire

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

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.