Genesis : Comment ajouter un logo et un en-tête personnalisé

Cela fait quelques semaines que je me suis attaqué au Framework Genesis pour WordPress. Ce Framework, bien que n’étant pas des plus faciles à aborder, est extrêmement puissant pour créer tous types de thèmes en utilisant des hooks, et je dois avouer que j’en suis très vite devenu accro.

Il inclut par défaut la possibilité de remplacer le titre et la description de votre site par un logo, que vous devez placer dans le répertoire images de votre thème enfant et que vous activez dans la sous-rubrique Réglages du thème de la rubrique Genesis.

Le problème avec cette fonction, c’est que vous êtes obligés de placer votre logo dans le répertoire de votre thème enfant, ce qui n’est pas pratique pour vos éventuels clients ou si vous hébergez des sites sur un WordPress multisites. De plus, lorsque nous activons la fonction d’en-tête personnalisé, la possibilité de remplacer le titre et la description du site par un logo disparaît, ce qui n’est évidemment pas pratique.

Dans la suite de cet article, je vais vous montrer comment activer l’en-tête personnalisé et comment permettre de charger un logo depuis l’interface d’administration du site.

Activer l’en-tête personnalisé

Pour activer l’en-tête personnalisé, il nous faut tout d’abord ajouter la ligne suivante dans le fichier functions.php de notre thème enfant :

/* Add custom header support */
add_theme_support( 'genesis-custom-header', array( 'width' => 1600, 'height' => 200 ) );

Puis ajouter les lignes suivantes dans le fichier style.css :

.site-header {
	min-height: 100px;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

Une fois ces codes ajoutés, vous pouvez aller dans le menu Apparence > En-tête ou depuis Apparence > Personnaliser > Image d’en-tête et charger l’image que vous souhaitez. WordPress vous proposera de rogner l’image aux dimensions indiquées dans notre fichier functions.php. Vous pourrez aussi charger plusieurs images et choisir de les afficher de manière aléatoire.

Il reste néanmoins un petit problème. L’image que nous utilisons pour notre en-tête n’est pas centrée, ce qui fait que sur un grand écran elle apparaîtra alignée à gauche et laissera un grand vide à droite. Pour modifier ce fonctionnement, nous allons désactiver le hook qui se charge des en-têtes personnalisés et le remplacer par le notre en copiant et modifiant la fonction que nous venons de désactiver. Dans votre fichier functions.php, insérez le code suivant :

/* Modify the genesis_custom_header_style to center the custom header */
remove_action( 'wp_head', 'genesis_custom_header_style' );
add_action( 'wp_head', 'cyb_custom_header_style' );
/**
 * Custom header callback.
 *
 * It outputs special CSS to the document head, modifying the
 * look of the header based on user input.
 *
 * @since 1.6.0
 *
 * @uses genesis_html() Check for HTML5 support.
 *
 * @return null Return null on if custom header not supported, user
 * specified own callback, or no options set.
 */
function cyb_custom_header_style() {

	//* Do nothing if custom header not supported
	if ( ! current_theme_supports( 'custom-header' ) )
		return;

	//* Do nothing if user specifies their own callback
	if ( get_theme_support( 'custom-header', 'wp-head-callback' ) )
		return;

	$output = '';

	$header_image = get_header_image();
	$text_color   = get_header_textcolor();

	//* If no options set, don't waste the output. Do nothing.
	if ( empty( $header_image ) && ! display_header_text() && $text_color === get_theme_support( 'custom-header',
            'default-text-color' ) )
		return;

	$header_selector = get_theme_support( 'custom-header', 'header-selector' );
	$title_selector  = genesis_html5() ? '.custom-header .site-title'       : '.custom-header #title';
	$desc_selector   = genesis_html5() ? '.custom-header .site-description' : '.custom-header #description';

	//* Header selector fallback
	if ( ! $header_selector )
		$header_selector = genesis_html5() ? '.custom-header .site-header' : '.custom-header #header';

	//* Header image CSS, if exists
	if ( $header_image )
		$output .= sprintf( '%s { background: url(%s) repeat-x center !important; }', $header_selector,
                    esc_url( $header_image ) );

	//* Header text color CSS, if showing text
	if ( display_header_text() && $text_color !== get_theme_support( 'custom-header', 'default-text-color' ) )
		$output .= sprintf( '%2$s a, %2$s a:hover, %3$s { color: #%1$s !important; }',
                    esc_html( $text_color ), esc_html( $title_selector ), esc_html( $desc_selector ) );

	if ( $output )
		printf( '<br />
<style type="text/css">%s</style>
<p>' . "\n", $output );

}

Si vous testez chez vous, et que vous réduisez la taille d’affichage du site (CTRL + roulette de la souris vers le bas sur Firefox), vous verrez que notre image d’en-tête est centrée et qu’elle se répète pour éviter de laisser des espaces vides.

Activer le logo personnalisé

Maintenant que nous avons notre en-tête personnalisé, nous remarquons que Genesis ne nous donne plus la possibilité de remplacer le titre et la description de notre site par un logo. Pour y remédier, nous allons ajouter une rubrique dans l’outil de personnalisation de WordPress en insérant les lignes suivantes dans le fichier functions.php de notre thème enfant :

/* Let admin upload a logo */
add_action( 'customize_register', 'cyb_logo_customize_register' );
function cyb_logo_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'eg_logo' ); // Add setting for logo uploader
         
    // Add control for logo uploader (actual uploader)
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'eg_logo', array(
        'label'    => __( 'Télécharger un logo (remplace le titre)', 'eg' ),
        'section'  => 'title_tagline',
        'settings' => 'eg_logo',
    ) ) );
}

Une fois ces lignes ajoutées, si vous allez dans le menu Apparence > Personnaliser > Identité du site, vous remarquez que vous pouvez charger un logo, mais celui-ci ne s’affiche pas sur votre site.

Afficher le logo personnalisé

Pour afficher le logo sur notre site, nous devons remplacer les fonctions de Genesis qui affichent le titre et la description du site par nos propres fonctions. Commençons par le titre en insérant le code suivant dans le fichier functions.php de notre thème enfant :

remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
add_action( 'genesis_site_title', 'cyb_seo_site_title' );
/**
 * Echo the site title into the header.
 *
 * Depending on the SEO option set by the user, this will either
 * be wrapped in an `h1` or `p` element.
 *
 * Applies the `genesis_seo_title` filter before echoing.
 *
 * @since 1.1.0
 *
 * @uses genesis_get_seo_option() Get SEO setting value.
 * @uses genesis_html5()          Check or HTML5 support.
 */
function cyb_seo_site_title() {

	//* Set what goes inside the wrapping tags
	$inside = sprintf( '<a href="%s">%s</a>', trailingslashit( home_url() ), get_bloginfo( 'name' ) );

	//* Determine which wrapping tags to use
	$wrap = genesis_is_root_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';

	//* A little fallback, in case an SEO plugin is active
	$wrap = genesis_is_root_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;

	//* Wrap homepage site title in p tags if static front page
	$wrap = is_front_page() && ! is_home() ? 'p' : $wrap;

	//* And finally, $wrap in h1 if HTML5 & semantic headings enabled
	$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;

	/**
	 * Site title wrapping element
	 *
	 * The wrapping element for the site title.
	 *
	 * @since 2.2.3
	 *
	 * @param string $wrap The wrapping element (h1, h2, p, etc.).
	 */
	$wrap = apply_filters( 'genesis_site_title_wrap', $wrap );

	//* Build the title
	$title  = genesis_html5() ? sprintf( "<{$wrap} %s>",
            genesis_attr( 'site-title' ) ) : sprintf( '<%s id="title">%s</%s>',
            $wrap, $inside, $wrap );
	$title .= genesis_html5() ? "{$inside}</{$wrap}>" : '';

	//* Echo (filtered)
	$filtered_title = apply_filters( 'genesis_seo_title', $title, $inside, $wrap );

  if ( get_theme_mod( 'eg_logo' ) ) {
    $output = sprintf( '<a href="%s" id="site-logo" title="%s" rel="home">', get_home_url(),
        esc_attr( get_bloginfo( 'name', 'display' ) ) );
    $output .= sprintf( '<img src="%s" alt="%s"></a>', get_theme_mod( 'eg_logo' ),
        esc_attr( get_bloginfo( 'name', 'display' ) ) );
    echo $output;
    echo sprintf( '<span class="hidden">%s</span>', $filtered_title );
  } else {
    echo $filtered_title;
  }

}

Puis faisons de même pour la description du site, toujours dans le fichier functions.php de notre thème :

remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
add_action( 'genesis_site_description', 'cyb_seo_site_description' );
/**
 * Echo the site description into the header.
 *
 * Depending on the SEO option set by the user, this will either be wrapped
 * in an `h1` or `p` element.
 *
 * Applies the `genesis_seo_description` filter before echoing.
 *
 * @since 1.1.0
 *
 * @uses genesis_get_seo_option() Get SEO setting value.
 * uses genesis_html5()           Check for HTML5 support.
 */
function cyb_seo_site_description() {

	//* Set what goes inside the wrapping tags
	$inside = esc_html( get_bloginfo( 'description' ) );

	//* Determine which wrapping tags to use
	$wrap = genesis_is_root_page() && 'description' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';

	//* Wrap homepage site description in p tags if static front page
	$wrap = is_front_page() && ! is_home() ? 'p' : $wrap;

	//* And finally, $wrap in h2 if HTML5 & semantic headings enabled
	$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h2' : $wrap;

	/**
	 * Site description wrapping element
	 *
	 * The wrapping element for the site description.
	 *
	 * @since 2.2.3
	 *
	 * @param string $wrap The wrapping element (h1, h2, p, etc.).
	 */
	$wrap = apply_filters( 'genesis_site_description_wrap', $wrap );

	//* Build the description
	$description  = genesis_html5() ? sprintf( "<{$wrap} %s>",
            genesis_attr( 'site-description' ) ) : sprintf( '<%s id="description">%s</%s>', $wrap, $inside, $wrap );
	$description .= genesis_html5() ? "{$inside}</{$wrap}>" : '';

	//* Output (filtered)
	$output = $inside ? apply_filters( 'genesis_seo_description', $description, $inside, $wrap ) : '';

  if ( get_theme_mod( 'eg_logo' ) ) {
    printf( '<span class="hidden">%s</span>', $output );
  } else {
  	echo $output;
  }

}

Finalement nous ajoutons une dernière ligne dans le fichier style.css de notre thème pour masquer le titre et la description du site :

.hidden { display: none; }

Nous gardons ainsi les informations pour les moteurs de recherche et nous le masquons à nos visiteurs.

Et voilà, le tour est joué ! Vous pouvez dorénavant modifier à volonté l’en-tête et le logo de votre site à partir de l’outil de personnalisation de WordPress.

Cet article vous a-t-il été utile ? Avez-vous des questions à son propos ? Et vous, quelle solution utilisez-vous pour personnaliser votre site ? J’attends avec impatience vos questions et remarques dans les commentaires ci-dessous.