Créer et installer un logo personnalisé sur votre thème WordPress

Pourquoi devriez-vous avoir un logo personnalisé sur votre site WordPress?

Le logo représente l’image de votre entreprise, blog ou organisation. Un logo réussi transmettra clairement et précisément vos valeurs et votre mission. De plus, il personnalisera la relation que vos clients ou visiteurs de votre site entretiendront avec votre site. La plupart des thèmes WordPress sont livrés avec la possibilité d’ajouter votre logo. Cela pourrait également être utilisé comme icône et favicon pour votre site. Créer une image de marque est un métier en soi. Eh bien, vous pouvez toujours improviser en tant que graphiste, mais comme tout, reproduire le professionnalisme d’un spécialiste est complètement idéaliste. Cela dit, voici quelques options pour vous si vous souhaitez obtenir un logo personnalisé pour votre site WordPress (et éventuellement votre entreprise) à un prix abordable.

Où aller pour concevoir un logo personnalisé?

1. 99designs

99Designs est un site très intéressant pour quiconque souhaite obtenir son propre logo. Le principe est simple. Vous allez sur le site, via un formulaire très intuitif et agréable à remplir, vous mentionnez vos préférences en termes de couleurs, de formes, vous décrivez le sujet de votre entreprise, pourquoi vous avez choisi ce nom, etc. Ensuite, il ne faudra que 2 à 5 jours pour recevoir des dizaines (dans mon cas, j’en avais reçu une soixantaine) de logos correspondant à vos préférences d’une multitude de designers différents. Vous sélectionnez ensuite celles que vous préférez et vous répétez les passes de correction jusqu’à ce que vous ayez LE logo qui correspond exactement à vos attentes.

2. GraphicRiver (Envato)

Nous connaissons très bien la compagnie Envato qui gère le site de thèmes ThemeForest. Ils ont également un site dédié aux créations graphiques telles que: logos, brochures, flyers, illustrations, fond, patrons, menus de restaurants, tatouages, personnages, etc.

3. Shutterstock

Une troisième alternative serait d’utiliser Shutterstock, le géant pour fournir des images et des photos professionnelles en ligne. En effectuant des recherches telles que: logo de restaurant, logo d’entreprise, logo de blog, logo de coiffure, logo d’agence, etc., vous tomberez sur des bijoux créatifs!

Comment installer un logo personnalisé sur votre thème WordPress

Depuis la version 4.5 de WordPress, vous avez désormais la possibilité (si la fonction est déclarée dans le thème) d’ajouter un logo personnalisé à votre site. Ceci est un ajout aux fonctionnalités « En-tête personnalisé » et « Arrière-plan personnalisé » disponibles dans votre CMS sous « Apparence -> Personnaliser -> Identité du site ».

Si vous n’avez pas cette fonctionnalité parce que le développeur a oublié de l’ajouter ou parce que votre thème est âgé, vous devez ajouter la fonction suivante dans le fichier « functions.php » de votre template :

function theme_prefix_setup() {
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'theme_prefix_setup' );

Cette fonction accepte 5 paramètres que l’on peut ajouter dans un tableau (array) :

height : (il s’agit d’un chiffre) La grandeur du logo en pixels.
Les thèmes peuvent utiliser un format d’image déjà présent au thème tel que :  « small, medium, large, thumbnail » ou enregistrer un nouveau format custom.

width : (il s’agit d’un chiffre) La largeur du logo en pixels.

flex-height : (il s’agit de mettre true ou false) Pour permettre une hauteur flexible. Montrer un logo dans une sidebar verticale (comme dans le thème Twenty Fifteen) est un bon exemple où le flexible height peut être appliqué.

flex-width : (il s’agit de mettre true ou false) Pour permettre une largeur flexible. Si un thème à de l’espace à l’horizontal, flex-width donne plus de flexibilité sur la façon qu’il peut être affiché. Exemple de code :

add_theme_support( 'custom-logo', array(
   'height'      => 175,
   'width'       => 400,
   'flex-width' => true,
) );

header-text : (un tableau / array) Noms des classes (css class) des éléments à cacher. Ce paramètre est seulement important pour (très rarement!) les thèmes ne sont pas compatibles avec le fait de cacher le header text (texte d’en-tête) dans les custom headers (en-têtes personnalisés). Un thème pourrait ainsi passer un tableau contenant des noms de classes  à tous les éléments du header text pouvant être remplacés par votre logo.

add_theme_support( 'custom-logo', array(
   'header-text' => array( 'site-title', 'site-description' ),
) );

En plus d’ajouter le module pour pouvoir ajouter un logo custom, « add_theme_support( ‘custom-logo’ ) » ajoutera aussi une classe « wp-custom-logo » au body qui pourra être utilisée pour styliser le logo si présent.

Important: lorsque vous ajoutez cette fonctionnalité à votre thème, assurez-vous de tester les nouveaux paramètres du logo à la fois sur la version en direct de votre site et en mode aperçu. Vous voudrez également vous assurer que le thème a des styles CSS en place pour accueillir les logos qui n’utilisent pas un format d’image personnalisé, tels que les images qui ont été téléchargées avant la mise à jour de votre thème avec cette nouvelle fonctionnalité.

Pour afficher votre logo sur le visuel de votre site (front-end), ces 3 tags peuvent être utilisés :

get_custom_logo( $blog_id = 0 )

Retourne les propriétés du logo custom.

the_custom_logo( $blog_id = 0 )

Affiche le logo personnalisé.

has_custom_logo( $blog_id = 0 )

Retourne une valeur true/false, si vous avez ajouté un logo personnalisé à l’aide de l’outil disponible sous « Apparence -> Personnaliser ».

Pour utiliser le nouveau tag de logo custom et conserver la compatibilité avec les plus vieilles versions de WordPress, il est recommandé d’inclure la fonction dans la fonction « function_exists() » similaire à comment le thème Twenty Sixteen l’inclue :

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

Il ne me reste plus qu’à vous souhaiter de l’inspiration pour créer votre propre logo

Besoin d’un site internet ? Contactez nos experts !