Comment ajouter un logo personnalisé dans WordPress?

08/01/2023

Lors de la création d’un nouveau thème dans WordPress, une configuration de logo WordPress personnalisée via functions.php est requise pour que le logo soit ajouté à la page.

Télécharger le logo dans WordPress

There is an area where you can add a logo in the Appearance > Customize > Site Identity tab on the panel. If you do not activate this field via functions.php in a newly created WordPress theme, the logo adding area will not appear in the “Site Identity” tab.

Il y a une zone où vous pouvez ajouter un logo dans l’onglet Apparence > Personnalisation > Identité du site sur le panneau. Si vous n’activez pas ce champ via functions.php dans un thème WordPress nouvellement créé, la zone d’ajout du logo n’apparaîtra pas dans l’onglet “Identité du site”.

Wordpress Appearance Themes

Wordpress Personnalisation

Écran de personnalisation WordPress non configuré via functions.php

Ajouter un logo personnalisé WordPress

Lorsque vous copiez et collez le code ci-dessous dans le fichier functions.php, la zone d’insertion du logo dans l’onglet “Identité du site” devient active.

add_theme_support( 'custom-logo' );

Le code ci-dessus déclenche le logo personnalisé, mais avec la structure de code ci-dessous, vous pouvez modifier certains paramètres de la fonction add_theme_support('custom-logo') tout en ajoutant le logo personnalisé. Le code doit être inclus dans le fichier functions.php.

function themename_custom_logo_setup() { 
   $defaults = array( 
     'height' => 100, 
     'width' => 400, 
     'flex-height' => true, 
     'flex-width' => true, 
     'header-text' => array( 'site-title', 'site-description' ), 
     'unlink-homepage-logo' => false, 
   ); 

   add_theme_support( 'custom-logo', $defaults ); 
} 
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

Les valeurs height et width déterminent les dimensions du logo.
flex-height et flex-weight spécifient si les valeurs width et height spécifiées peuvent changer. Les valeurs sont “true” et “false”. Par exemple, si les valeurs flex-height et flex-width sont fausses dans le tableau avec les valeurs 1oopx height, 400px width, le WordPress panneau recadrera le logo que l’utilisateur ajoutera à 100px height et 400px width.
unlink-homepage-logo empêche le lien vers la page d’accueil via le logo. Si vrai, le logo n’aura pas de lien. Si faux, un lien sera ajouté au logo.

Afficher le logo sur la page

Utilisez le code ci-dessous pour afficher le logo. Le code est généralement utilisé dans le fichier header.php, mais cela dépend des préférences du développeur.

the_custom_logo();

Seul le code the_custom_logo() peut afficher le logo sur la page, mais WordPress recommande d’utiliser le code function_exists() comme dans le format ci-dessous pour maintenir la compatibilité avec les versions précédentes de WordPress. Parce que dans les anciennes versions de WordPress, la fonction peut être utilisée différemment comme nom.

if ( function_exists( 'the_custom_logo' ) ) {
  the_custom_logo();
}

Si vous souhaitez utiliser une URL de logo différente ou si vous devez modifier vous-même la balise <img>, vous pouvez utiliser une structure comme dans l’exemple ci-dessous.

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
if ( has_custom_logo() ) {
    echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else { 
    echo '<h1>' . get_bloginfo('name') . '</h1>'; 
}

Source:

https://developer.wordpress.org/themes/functionality/custom-logo/