Maj du 20 mars 2010 : une différente façon est présentée ici en vidéo

Beaucoup de personnes désirent un thème avec une bannière cliquable pointant vers l’index dans l’entête de votre blog à la place du traditionnel titre et de la petite présentation. Pour cela, on peut être tenté de supprimer le contenu, plus précisément  les balises H1 et p qui décrivent le titre et la présentation de votre blog WordPress, situé dans votre header.php entre <div id= »header » et </div>.

Mais l’insertion de H1 et p est important pour les moteurs de recherches dans le SEO (référencement naturel à l’opposé des Digg-likes).  En même temps, il est vrai que si vous utilisez par exemple le plugin All in pack SEO, vous avez la possibilité de renseigner les meta-description et les keywords de votre index. Mais il est quand même préférable de garder les balises. Dans un premier temps, nous allons masquer les balises H1 et p qui décrivent le titre et la présentation de votre blog. Pour cela, aller dans votre feuille de style située dans votre tableau de bord->Apparence->Editeur de thème ->feuille de style (style.css). Pour masquer, il suffit d’insérer, dans vos ID « Header », « display:none ». Comme vous pouvez le voir ci-dessous, j’indique que je veux masquer les balises h1 et p situées dans mon header. Et sauvegarder.

#header h1 {
  1. display:none;
  2. }
  3.  
  4. #header p {
  5. display:none;
  6. }

Maintenant, le titre et la présentation de votre blog sont masqués « visuellement » mais figurent toujours dans le code de votre header. Nous allons maintenant insérer une image de fond dans votre header qui représentera la bannière. Pour faire simple, repérez la largeur et la hauteur de votre header. Imaginons que l’entête fait 900px de largeur et 150px de hauteur, ces mesures seront représentées comme ci dessous dans notre feuille de style :

#header {
  1. height: 150px;
  2. width: 900px;
  3. }

Ajoutez alors une image de taille 900*150 dans votre feuille de style :

#header {
  1. height: 150px;
  2. width: 900px;
  3. background : url(img/titre.jpg) no-repeat;
  4. }

Sauvegarder votre feuille de style, et allez voir le résultat sur votre blog. Vous avez la bannière qui a remplacé le titre et la présentation du blog. Mais pour l’instant, on ne peut pas cliquer sur l’image pointant sur l’index de votre blog. On va définir une « zone cliquable sur votre bannière. On va ajouter « cursor: pointer et la hauteur de la zone qui correspond à la hauteur de mon header. Au final, vous aurez :

#header {
  1. height: 150px;
  2. width: 900px;
  3. background : url(img/titre.jpg) no-repeat;
  4. cursor: pointer;
  5. height: 150px;
  6. }

Enfin, allez sur votre fichier header.php, toujours à l’aide de votre éditeur de thème. Entre <div id= »header » et </div>, vous allez faire apparaître le code suivant :

  1. &lt;div id="header" onclick="location.href='&lt;?php echo get_settings('home'); ?&gt;';"&gt;
  2. &lt;h1&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;"&gt;&lt;/a&gt;&lt;/h1&gt;
  3. &lt;/div&gt;

Et voilà, le tour est joué ;)

David LOUIS

Directeur chez Webset, Organisme de formation professionnelle pour les métiers de la culture, du spectacle vivant, Consultant web 2.0, adepte du DIY et du Coworking

More Posts - Website - Twitter - Facebook

Articles similaires

  • 3 livres pour améliorer son blog12 janvier 2009 -- 3 livres pour améliorer son blog (0)
    Je ne suis pas du genre à acheter beaucoup d'ouvrages mais j'ai décidé d'investir un peu dans des livres qui en valent, je pense, vraiment la peine. En effet, même s'il existe une multitude de ressour...
  • Vidéo : installer un thème wordpress20 novembre 2008 -- Vidéo : installer un thème wordpress (22)
    [dailymotion x7gp8e] Vous allez voir, installer un nouveau thème WordPress c'est très facile. Quand on désire changer de thème, c'est que l'on veut un blog visuellement différent (couleur, largeur de...
  • CSS WordPress : modifier les couleurs de son blog #114 novembre 2008 -- CSS WordPress : modifier les couleurs de son blog #1 (30)
    Dans l'article précédent, nous avons vu comment redimmensionner les différents blocs de notre blog WordPress.Aujourd'hui, nous allons voir comment modifier la couleur de nos blocs (fond, titre du bl...