15

Tuto : Modifier son header sous WordPress en 30mn

Modifier le header d'un thème wordpress
ThemeForestElegantThemes

Il existe des milliers de thèmes pour wordpress mais aucun d’entre eux ne vous correspond vraiment. Rendez-le unique en changeant l’image du header.

Vous passez sûrement des heures à choisir le bon thème. Mais une fois le fameux thème trouvé, vous vous retrouvez restreint à utiliser le design fourni par défaut. Alors que vous pouvez le personnaliser en 30mn pour qu’il corresponde au sujet traité. Et dans la foulée rendre votre thème WordPress unique.

La façon la plus efficace pour avoir un meilleur impact aux yeux de vos visiteurs, c’est de créer votre propre en-tête. L’en tête correspond au logo, parfois accompagné d’un menu, qui trône sur chaque page de votre site.
Pour remédier à cette fréquente banalité, vous devez fournir :

  1. Une demi-heure de votre précieux temps
  2. Une idée du design

Si vous possédez l’intégralité des 2 éléments cités ci-dessus, vous êtes apte. Alors, commençons!

Installer un thème WordPress

La première chose et la plus importante est de choisir un thème WordPress qui vous convienne. Nous allons ensuite modifier légèrement le code CSS de ce dernier. Installez le vôtre si ce n’est pas déjà fait.

Activer le thème

Nous partons du principe que pour vouloir modifier son thème WordPress, il faudrait savoir l’installer et l’activer. Nous passons donc sur ces deux étapes cruciales. Si ce n’est pas le cas, trouvez un tutoriel vous expliquant la marche à suivre. Revenez ensuite.

Localiser le fichier CSS

Tous les fichiers de votre thème WordPress se trouvent dans le répertoire suivant : wp-content / themes / [nom du thème]. Nous devons localiser le fichier nommé style.css du thème préalablement installé et activé que vous souhaitez modifier.

Pour ce faire, 2 méthodes :

La facile : Dans le panneau d’administration de votre site, ouvrez l’éditeur dans l’onglet thème. Sélectionnez style.css, généralement le dernier de la liste à droite. Localisez la partie correspondant au header. Entre les balises. Et cherchez le chemin parcouru pour accéder à l’image du header. En face de background url : Pour nous ce sera : background url : image/logo.png no repeat.

L’autre : Accédez via votre logiciel ftp au répertoire : wp-content / themes / [nom du thème] Localisez et ouvrez le fichier style.css dans un éditeur de texte quelconque. Puis localisez le chemin parcouru pour accéder à l’image du header comme expliqué ci-dessus.

Modifier le header de votre Thème WordPress

À partir du code css, nous avons découvert où se trouve l’image à modifier et qu’elle se nomme Logo.png. Via votre logiciel ftp, ouvrez cette image avec votre éditeur d’image préféré. Paint fera l’affaire, Photoshop étant un must. Utilisez cette image comme base pour créer votre nouveau header. Laissez allez votre imagination en conservant les dimensions du cadre extérieur.

Sauvegarder le nouveau header

La façon simple : le plus simple est d’écraser votre ancien header en sauvegardant la nouvelle image sous le même nom. Soit Logo.png. Je vous conseille néanmoins de renommer l’ancienne image : ancien logo.png puis de sauvegarder le nouveau en le nommant : logo.png. Cette solution est facile et rapide, car vous n’avez pas besoin de modifier le code css. Lancez maintenant site dans votre navigateur et appréciez le résultat.

L’autre façon : Si vous êtes de nature aventureuse, vous pourriez avoir envie de vous salir les mains dans les codes css. Et changer l’image de cette façon. Modifiez simplement la ligne de code qui nous a permis de localiser l’image au point no 4 et changer le nom de l’image logo.png avec le nom de votre nouveau header. Sans oublier le .png. Ainsi vous demandez via le code css d’aller chercher l’image du header ailleurs qu’à l’emplacement d’origine.

Modifier la taille du header

Et si on décidait de modifier la taille de ce header? Et bien c’est très simple, il suffit de changer les valeurs en face de HEIGHT et WIDHT sous le chemin de localisation de l’image du header trouvé au point no 4.

Attention quand même

Quand vous modifiez la hauteur ou la largeur du header, vous devez être attentif à la position d’autres éléments dans la page qui peuvent dépendre de la taille et de la position du header. Vous pourriez avoir besoin de regarder le reste de votre fichier css et de modifier d’autres valeurs height et widht qui auraient bougé en ouvrant votre navigateur. Donnez-leur dans ce cas les mêmes valeurs height et widht que le header pour compenser.

Besoin d'aide ?

Si vous avez besoin d'aide merci d'utiliser le forum WordPress, pas les commentaires. Vous y recevrez de l'aide rapidement.

Commentaires 15

  1. Bonjour ,
    je souhaite désespérément conserver l’entête en slider UNIQUEMENT pour ma page d’accueille.
    Je suis débutante mais j’apprend vite espère avoir une réponse de votre part.

    1. Auteur

      Bonjour, désolé pour cette réponse tardive. Cela peut dépendre du plugin que vous utilisez pour gérer les sliders ou de votre thème. Je pense que ce réglage est disponible en éditant la page d’accueil directement.

  2. bonsoir a tous.
    moi je ne m’en sort pas car le code de mon thème est un peu différent enfin je pense! comme je ne m’y connais pas trop bien.
    pour être un peu plus claire et que vous m’aidiez voici mon code header.php.

    <html >


    <meta charset=" » />

    <link rel="shortcut icon" href=" » />
    <link rel="pingback" href=" » />


    <link rel='stylesheet' href='/css/ie8.css’ type=’text/css’ media=’all’ />
    <script src="/js/html5.js »>
    <script type="text/javascript" src="/js/css3-mediaqueries.js »>


    <link rel='stylesheet' href='/css/ie9.css’ type=’text/css’ media=’all’ />

    <body >

    ‘topNav’,’container’=>  »,’menu_id’=> ‘catmenu’,’menu_class’=> ‘ container clearfix’,’fallback_cb’ => ‘false’,’depth’ => 3)); ?>

    <a href=" » title= » » rel= »home »><img src=" » alt= » » />

    <a href=" » title= » » rel= »home »>

    <a href=" » title= » » rel= »home »>

    ‘mainNav’,’container’=>  »,’menu_id’=> ‘catmenu’,’menu_class’=> ‘catnav container clearfix’,’fallback_cb’ => ‘false’,’depth’ => 3)); ?>

    Merci beaucoup.

    1. Auteur
      1. merci pour votre réponse voila le problème je veut viré le logo et mettre une image qui prenne le header entier, donc vraiment je ne sais pas comment le faire.^pourtant je trouve votre explication très claire. si vous avez besoin d’exemple de ce que je souhaite n’hésitez pas.
        merci

        1. Auteur

          Je viens d’aller faire un tour sur votre site et dans votre cas, il me semble que remplacer le logo par une image de 1024px de large fera l’affaire. L’image du header est prévu dans votre thème pour occuper 100% de la largeur. Vous êtes libre concernant la hauteur de cette image.

  3. Ok merci je vais faire une image et le placer je vous tiendrais au courant merci pour votre délicatesse. a bientôt.

  4. Bonjour Litz
    J’ai suivi ton conseil est c’est juste ce que je voulais merci pour ton aide aussi précieux.
    je voulais aussi demandé
    1-Comment diminué l’espace entre mon header et la barre de menu?
    merci d’avance.
    2- connaissez vous un plugin qui puisse permettre de faire par exemple un top 10 des artistes?
    Cordialement

    1. Auteur

      Salut,

      Ajoute ceci :

      #head-content {
      padding: 0px 0;
      }

      Soit dans le panneau d’administration du thème s’il y a un emplacement genre : Custom CSS ou CSS personnalisé.

      Sinon ouvre le fichier style.css probablement situé à la racine de ton thème ou dans un dossier nommé CSS et ajoute ces 3 lignes à la fin.

      Pour ta deuxième questionn il y a mille façons de faire un top10. Cherche « featured post wordpress plugin » essaie aussi de remplacer post par author et tu vas en trouver plein.

    1. Auteur

      Ouvre ce fichier en passant par FTP

      /wp-content/themes/bresponzive/style.css

      Localise (CTRL F pour faire une recherche de « #head-content ») :

      #head-content {
      margin: 0 auto;
      padding: 20px 0;
      position: relative;
      position: relative;
      min-height: 90px;
      z-index: 98;
      }

      Modifie la ligne :

      padding: 20px 0;

      soit : padding: 0px 0;

      Agrandi ton image à 1120px pour qu’elle soit de la même largeur que ton menu, excuse je t’avais dis 1024px.

      Bon courage pour la suite.

  5. Bonjour,
    J’essaie désespérément de mettre un header qui occupe toute la largeur. je ne trouve pas dans le CSS ce qui concerne la largeur de l’image. Quelle que soit la taille du header que je mets en ligne, ce dernier est systématiquement redimensionné. Que puis-je faire ? merci !

  6. Bonjour,

    Merci pour votre tuto, moi j’aimerai modifier la taille de la barre de mon menu, sans modifier la taille des boutons/onglets. J’aimerai pouvoir la rétrécir, la rendre plus fine en enlevant un peu d’espace blanc situe au dessus et en dessous des menus. Bonne journee.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Besoin d'aide ?

Si vous avez besoin d'aide merci d'utiliser le forum WordPress, pas les commentaires. Vous y recevrez de l'aide rapidement.