Si vous créez un site Web en utilisant le thème Genesis Sample, ou tout autre thème basé sur le framework Genesis, vous pouvez avoir besoin de créer une page qui n’aura pas de titre de page en haut de celle-ci. Surtout si la page commence par des images ou d’autres contenus visuels.
En théorie, vous pouvez supprimer le titre de la page dans le thème Genesis Sample de deux façons :
- La première consiste à trouver l’ID de la page dont vous avez besoin, puis à masquer le titre à l’aide d’une CSS. Cela ferait l’affaire, mais le titre serait toujours chargé en arrière-plan, et il faudrait alors charger des CSS supplémentaires. C’est faisable, mais pas génial.
- Meilleure solution : créer un modèle de page personnalisé qui n’aura pas du tout de titre de page. Il est beaucoup plus efficace d’éliminer un élément que de le cacher.
Cette fois, je vais vous montrer une solution simple pour créer un modèle de page personnalisé dans le thème Genesis Sample, et comment le définir pour les pages que vous voulez dans l’administration de WordPress. Voici notre plan :
- créer un modèle de page personnalisé dans le thème Genesis Sample
- supprimer le titre de la page dans ce modèle de page personnalisé
- ajouter du css pour supprimer l’espace blanc (padding) entre l’en-tête du site et le contenu après avoir supprimé le titre de la page (facultatif)
Comment créer un modèle de page personnalisé dans le thème Genesis Sample ?
Par défaut, le thème Genesis Sample dispose d’un modèle de page personnalisé. Il s’appelle Landing, et il est situé dans le dossier /page-templates.
Le modèle de page Landing se débarrasse de l’en-tête, du pied de page, du menu et des autres parties de la mise en page par défaut de Genesis, et ne laisse que le strict minimum – le contenu de la page. Voici à quoi ressemble le modèle :
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Landing
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_landing_body_class' );
/**
* Adds landing page body class.
*
* @since 1.0.0
*
* @param array $classes Original body classes.
* @return array Modified body classes.
*/
function genesis_sample_landing_body_class( $classes ) {
$classes[] = 'landing-page';
return $classes;
}
// Removes Skip Links.
remove_action( 'genesis_before_header', 'genesis_skip_links', 5 );
add_action( 'wp_enqueue_scripts', 'genesis_sample_dequeue_skip_links' );
/**
* Dequeues Skip Links Script.
*
* @since 1.0.0
*/
function genesis_sample_dequeue_skip_links() {
wp_dequeue_script( 'skip-links' );
}
// Removes site header elements.
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
// Removes navigation.
remove_theme_support( 'genesis-menus' );
// Removes site footer elements.
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
// Runs the Genesis loop.
genesis();Pour créer un nouveau modèle de page, nous allons dupliquer le fichier landing.php, et le placer dans le même répertoire, mais avec un nom différent. Par exemple – sans_titre.php.
Le modèle de page d’atterrissage supprime beaucoup de parties du modèle dont nous avons besoin. Nous allons enlever tout ce qui n’est pas nécessaire de sa copie, et ne laisser que la partie nécessaire. Voici ce qui va rester :
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
// Runs the Genesis loop.
genesis();C’est tout ce dont nous avons besoin :
- informations de base sur le modèle
- le nom du modèle. J’ai utilisé Autre, mais vous pourriez utiliser quelque chose de plus descriptif, comme Page sans titre.
- Appel de Genesis.
Maintenant nous avons le modèle de page le plus basique possible pour le thème Genesis Sample, ou tout autre thème basé sur Genesis.
Comment créer un modèle de page sans titre dans le thème Genesis Sample ?
Puisque nous avons déjà un modèle de page de base, la moitié du travail est déjà fait. Il nous faut maintenant faire deux choses.
Tout d’abord, nous devons supprimer toutes les balises d’en-tête de page et tous les autres éléments qui pourraient se trouver dans l’en-tête d’entrée. Pour être précis, nous devons ajouter ce code au modèle que nous avons construit précédemment :
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );Nous supprimons les balises html de l’en-tête d’entrée, le titre de l’article, les informations supplémentaires sur l’article (date, auteur, etc.), l’image vedette (s’il y en a une) et les fils d’Ariane (s’ils sont affichés dans l’en-tête d’entrée).
Deuxièmement, nous devons ajouter la classe body à notre nouveau modèle au cas où nous aurions besoin d’ajouter un style spécifique pour les pages utilisant ce modèle. Nous pouvons donc utiliser ce code :
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}Nous ajoutons une classe supplémentaire sans-titre-page. Nous en aurons besoin dans un instant, mais avant cela, regardez le modèle de page final sans titre de page :
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
genesis();En gros, le travail est terminé – si vous sauvegardez ce modèle dans le répertoire /page-templates du thème enfant Genesis, vous serez en mesure de sélectionner le modèle de page sans titre dans l’administration de WordPress. Comme cela :
Une fois que nous changeons le modèle de page et que nous enregistrons les changements, le titre de la page ne sera plus visible dans la page.
Comment supprimer les espaces blancs entre l’en-tête et le contenu de la page dans Genesis
Maintenant, après avoir supprimé le titre de la page dans le thème Genesis Sample, vous pouvez remarquer qu’il y a un écart assez important entre l’en-tête de la page et le contenu. Chaque article et page a cet espace par défaut, et il est nécessaire dans la plupart des cas. Mais si vous avez supprimé le titre de la page et que vous voulez maintenant commencer le contenu de la page avec des images, vous voulez probablement vous débarrasser de cet espace aussi.
Pour supprimer l’espace entre l’en-tête de la page et le contenu dans Genesis, ouvrez le Customizer dans le panneau d’administration de WordPress, cliquez sur l’onglet Additional CSS sur la gauche, et entrez ce code css :
.without-title-page .site-inner {
padding-top: 0px;
}Vous avez probablement remarqué que nous utilisons la classe supplémentaire .without-page-title que nous avons ajoutée dans le modèle de page auparavant. De cette façon, nous serons en mesure de définir le css à un modèle spécifique seulement.
A partir de maintenant, toutes les pages qui utilisent le modèle de page sans titre n’auront pas d’espace entre l’en-tête et le contenu de la page.
