Advertisements

Avoir un site internet c’est génial. Cela nous permet de partager nos passions, nos coups de coeur et plus encore. Et l’idéal est de pouvoir personnaliser le design de son site à volonté. WordPress est un outil merveilleux à ce sujet, la pléthore de thèmes disponibles est tout simplement impressionnante. Mais le nec plus ultra est d’apposer une bannière qui sera le reflet de votre personnalité.

WordPress ne gère pas nativement les headers en HD

Après avoir choisi le thème idoine, vous avez la possibilité d’y intégrer une image d’en-tête, qu’on appelle plus communément « header » dans le domaine du web.

A ce moment là, c’est à votre créativité de parler. Trouver des idées pour réaliser le header qui vous parle. Je vous conseille cependant de le réaliser sur un logiciel de design pour notre objectif. Si vous n’êtes pas très doués dans ce domaine, demandez simplement à quelqu’un de le réaliser pour vous. Je connais par exemple une petite agence web qui serait ravie de vous aider 😉

Allez dans la rubrique Apparence de votre dashboard WordPress et sélectionnez Personnaliser. Trouvez dans votre thème l’endroit où vous pouvez intégrer votre header, à cet endroit vous sera fourni les dimensions requises pour l’image. Prenez les bien en compte pour votre futur design.

Votre header terminé, il vous faut maintenant l’intégrer dans votre site. Cependant vous avez de fortes chances à ce que l’image propose un rendu très peu flatteur comme l’exemple ci-dessous.

Optez pour un header en SVG

La solution est assez aisée, il vous faut passer par une image en SVG. Pour cela rien de bien compliqué, vous devez simplement exporter votre travail sous ce format au préalable.

Par la suite, il sera nécessaire d’intégrer dans votre WordPress le plugin SVG Support pour que votre site considère les SVG comme des images.

Le plugin installé, si vous essayez de remplacer votre header actuel par un SVG, vous allez vous retrouver bloqué au moment du recadrage de l’image.

C’est normal et il y a une solution pour contourner le problème. Cependant vous allez devoir mettre un peu les mains dans le cambouis !

Un peu de code et c’est réglé !

Pour solutionner ce problème, il va falloir forcer WordPress à contourner l’étape de recadrage.

Après une bonne recherche sur internet, j’ai trouvé la solution en anglais pour résoudre ce blocage. Rassurez-vous cela est très simple à réaliser. Je vais vous expliquer en détails la démarche à suivre.

Tout d’abord vous allez copier le code ci-dessous :

//* Add support for custom flexible header
add_theme_support( 'custom-header', array(
  'flex-width'    => true,
  'width'           => 1600,
  'flex-height'    => true,
  'height'          => 960,
  'header-selector' => '.site-title a',
  'header-text'     => false
 
) );

Ensuite, vous allez vous rendre dans le back-office de votre site, plus précisément dans l’éditeur de WordPress. Il est dans la rubrique Apparence>Éditeur.

Lorsque vous êtes dans l’espace Éditeur, rendez-vous sur « functions.php ». Il s’agit du deuxième fichier en partant du haut normalement.

Et là attention, le mouvement le plus compliqué arrive ! Vous allez descendre tout en bas de l’éditeur de texte et coller le code que vous aviez copié avant. Et puis c’est tout ! Il ne reste plus qu’à sauvegarder et voilà !!

Normalement lorsque vous allez charger votre toute nouvelle bannière, vous aurez la possibilité de ne pas recadrer l’image. Il ne vous restera plus qu’à contempler votre belle bannière en HD et la montrer à tous vos visiteurs !

J’espère que ce petit tutoriel vous aura aidé, pour ma part, je vais essayer de développer mes compétences en code et pourquoi pas vous transmettre d’autres petits tutos si besoin ! N’hésitez pas à partager cet article pour aider des blogueurs qui pourraient rencontrer cette difficulté et aussi laisser un petit commentaire s’il vous a aidé !

Si vous avez aimé cet article, n'hésitez pas à le partager ! Merci 🙂