Vous aimeriez avoir un logo custom pour site WordPress? Avoir son propre logo à son image vous aide à établir votre marque et rend du même coup votre site unique. Dans cet article, je vous montre comment obtenir un logo custom à prix très intéressant et comment installer celui-ci dans votre thème WordPress.

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

Le logo représente l’image de votre entreprise, de votre blog ou de votre organisation. Un logo réussi véhiculera de façon claire et précise vos valeurs et votre mission. De plus, il permettra de personnaliser la relation que vos clients ou visiteurs de votre site auront avec votre site.

La plupart des thèmes WordPress viennent avec l’option de pouvoir ajouter votre logo. Celui-ci pourrait également être utilisé comme icon et favicon de votre site.

Créer une image de marque est un métier en soi. Bon, on peut toujours s’improviser designer graphique, mais comme n’importe quoi, reproduire le professionnalisme d’un spécialiste est totalement idéaliste.

Cela dit, voici quelques options pour vous si vous souhaitez obtenir un logo personnalisé pour votre site WordPress (et possiblement, votre entreprise) à prix abordable.

Où aller pour créer un logo personnalisé?

1. 99designs

99Designs est un site Internet hyper intéressant pour toute personne désirant obtenir son propre logo. Le principe est simple. Vous allez sur le site, via un formulaire très intuitif et plaisant à remplir, vous mentionnez vos préférences au niveau des couleurs, des formes, vous décrivez le sujet de votre entreprise, pourquoi vous avez choisi ce nom, etc.

Ensuite, ça ne prendra que 2 à 5 jours avant de recevoir des dizaines (dans mon cas, j’en avais reçu environ 60) de logos correspondants à vos préférences d’une multitude de designers différents. Vous sélectionnez ensuite ceux que vous préférez et vous refaites faire des passes de correction jusqu’à temps d’avoir LE logo qui correspondait exactement à VOS attentes.

2. GraphicRiver (Envato)

Nous connaissons très bien la compagnie Envato qui gère le site de thèmes ThemeForest. Ceux-ci ont également un site dédié aux créations graphiques telles que : logos, brochures, flyers, illustrations, arrières-plan, patterns, menus de restaurant, tatouages, personnages, etc.

3. Shutterstock

Une 3e alternative serait d’utiliser Shutterstock, ce géant de la fourniture d’imagerie et de photos professionnelles en ligne. En effectuant des recherches telles que : logo restaurant, logo entreprise, logo blog, logo coiffure, logo agence, etc. vous tomberez sur des joyaux de création!

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 custom à votre site. Ceci est un ajout aux fonctionnalités « Custom Header » et « Custom Background » disponible 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 paramètres du nouveau logo autant sur la version live de votre site que dans le mode aperçu. Vous voudrez aussi vous assurer que le thème à des styes CSS en place pour accommoder les logos qui n’utilisent pas un format d’image custom, comme les images ayant été téléchargées avant que votre thème ait été mise à jour 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!