Ajouter un champ logo dans l’outil de personnalisation (Customizer) de WordPress

L’outil de personnalisation ou customizer de WordPress met à disposition des hooks afin de le personnaliser. Un cas classique consiste à ajouter un panneau supplémentaire avec des champs comme l’ajout d’un logo.

De nombreux thèmes WordPress profitent de ces possibilités pour étendre leurs options de personnalisation et ainsi offrir une meilleure expérience utilisateur.

Dans ce tutoriel, nous allons ajouter un panneau de gestion pour un logo dont voici un aperçu du résultat sous Apparence puis Personnaliser :

Vous pourriez également choisir d’insérer ce champ d’envoi de logo directement dans le panneau Identité du site.

Dans ce cas précis, il existe un moyen plus rapide en déclarant le support d’un logo personnalisé comme ceci :

function wpc_theme_support() {
	add_theme_support('custom-logo', array(
		'flex-height' => true,
		'flex-width'  => true,
	));
}
add_action('after_setup_theme','wpc_theme_support');

Le code présenté ci-dessus utilise le hook after_setup_theme qui est probablement déjà utilisé dans votre thème pour indiquer le support d’autres éléments. Il pourra donc être recommandé d’insérer directement les lignes 2 à 5 à l’intérieur de la fonction déjà déclarée.

Toutefois, l’objectif ici est de vous montrer la facilité avec laquelle nous pouvons étendre les possibilités de l’outil de personnalisation.

L’opération va s’opérer en deux temps :

1. Déclarer notre fonction PHP avec le nouveau panneau et le champ d’envoi de fichier qui s’y rattache ;
2. Récupérer les informations pour afficher le logo dans l’en-tête du site ;

Création du contrôleur image

Pour la première étape, ouvrez donc le fichier functions.php de votre thème – ou celui de votre thème enfant, puis collez les lignes de code suivante :

function wpc_customize_register($wp_customize) {
	$wp_customize->add_section('wpc_logo_section', array(
			'title'          => __('Logo', 'textdomain'),
			'priority'       => 30,
			'description'    => __('Upload a logo to replace the default site name and description in the header', 'textdomain')
		)
	);
	$wp_customize->add_setting('wpc_logo');
	$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'wpc_logo', array(
			'label'      => __('Logo', 'textdomain'),
			'section'    => 'wpc_logo_section',
			'settings'   => 'wpc_logo')
		)
	);
}
add_action('customize_register', 'wpc_customize_register');

Détaillons pas à pas le code ci-dessous qu’il va nous falloir modifier selon vos besoins :

• Le textdomain doit correspondre à celui de votre thème, il est utile pour traduire les chaines de l’anglais au français via le logiciel Poedit ou l’extension Loco Translate ;
• Les champs title et description permettent d’expliquer le rôle du panneau à vos utilisateurs ;

La magie s’opère à l’aide du hook customize_register à partir duquel nous injectons notre fonction PHP.

Récupérons à présent notre logo pour l’afficher dans l’en-tête du site. Pour ce faire, nous allons éditer le fichier header.php du thème, ce dernier étant responsable de l’affichage de l’en-tête sur toutes vos pages.

Ensuite, nous allons insérer le code suivant à l’endroit où vous souhaitez que le logo apparaisse :

<a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
	<?php
		$custom_logo_id = get_theme_mod('custom_logo');
		$image = wp_get_attachment_image_src($custom_logo_id , 'full');
	?>
	<img src="<?php echo $image[0]; ?>" alt="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>">
</a>

Les lignes 1 et 7 ne sont ni plus ni moins qu’une balise lien entourant l’image retournée, l’URL pointant vers l’accueil.

La variable $custom_logo_id récupère mon logo envoyé dans l’outil de personnalisation à l’aide de la fonction get_theme_mod().

À partir de l’identifiant, on récupère l’information souhaitée comme par exemple l’URL de l’image avec wp_get_attachment_image_src(). D’autres fonctions du même genre pourraient être utilisées ici, reportez-vous sur le Codex pour satisfaire votre curiosité.

Notez que je récupère la taille source avec le paramètre full afin d’éviter d’éviter tout rognage… toujours mieux sur un logo !

Enregistrez le fichier puis retournez sur votre site : le nouveau logo est en place. Il est maintenant aisée de le changer à votre guise via le Customizer de WordPress.

Vous pouvez construire de nombreux contrôles à partir de cet exemple pour maximiser l’expérience utilisateur sur les éléments à modifier dans votre site. Je vous recommande la lecture du manuel Theme Options – The Customize API réservé aux développeurs.