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.
-
display:none;
-
}
-
-
#header p {
-
display:none;
-
}
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 :
-
height: 150px;
-
width: 900px;
-
}
Ajoutez alors une image de taille 900*150 dans votre feuille de style :
-
height: 150px;
-
width: 900px;
-
background : url(img/titre.jpg) no-repeat;
-
}
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 :
-
height: 150px;
-
width: 900px;
-
background : url(img/titre.jpg) no-repeat;
-
cursor: pointer;
-
height: 150px;
-
}
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 :
-
<div id="header" onclick="location.href='<?php echo get_settings('home'); ?>';">
-
<h1><a href="<?php bloginfo('url'); ?>"></a></h1>
-
</div>
Et voilà, le tour est joué
26 comments
Dan [Blog referencement] says:
jan 17, 2009
En terme de référencement, je vous conseille de ne pas masquer de données si vous ne voulez pas avoir de problèmes avec les moteurs de recherche. Après, c’est vous qui voyait
David says:
jan 17, 2009
Salut Dan,
je ne comprend pas ta remarque. Car même si je masque les données visuellement sur le blog, dans le code html, les données sont bien présentes. La preuve :
Mais ce n’est toujours pas bon ?
Dan [Blog referencement] says:
jan 17, 2009
Non car le display:none marque une volonté de masquer quelque chose aux internautes. Google et les autres moteurs de recherche font la chasse aux textes cachés.
David says:
jan 17, 2009
Ok Merci du renseignement, je vais alors choisir la méthode du livre WordPress récemment sorti
David says:
jan 27, 2009
Au fait merci Dan du commentaire, j’ai fais les recherches et ça confirme bien ce que tu dis ^^c’est comparé à de la tricherie pour Google. Je modifie l’article dès que possible
camikat says:
mar 23, 2009
Bonjour
avez vous modifier cet article et surtout le code, il me semble que non, je ne sais plus quoi faire et insérer à la lecture de ces commentaires !! je n’ai pas le live de wordpress, d’avance merci..
Excellent blog
David says:
mar 23, 2009
Bonjour Camikat,
Oui tu as raison et heureusement que tu es là pour le rappeler ^^ Donc je termine cet article par ce commentaire :
En fait, pour ne pas rendre visible les informations du titre et de la présentation du blog, il faut les déplacer très loin. On ne les supprime donc pas, car ils sont toujours présents dans le contenu, mais la feuille de style va les positionner hors de l’écran.
On va donc aller dans notre feuille de style et on va modifier le H1 (titre) et p (la présentation) du header.
Voici le code à insérer :
« #header h1 a {
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;}
#header p {
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;}
et voilà ^^
camikat says:
mar 23, 2009
Bonjour David grand Merci pour ta réponse express
Mais il doit manquer quelque chose dans mon propre code
voici le site en question :
http://www.pokinthebox.com/
cela ne fonctionne pas et je commence vraiment à me prendre la tete avec cette histoire de logo qui doit etre cliqable et renvoyé à la page accueil..
voici mon css relatif à mon theme :
/* The Top */
#top {
height:300px;
margin:auto;
background:url(images/head2.jpg) ;
width:1000px;
}
.blogname {
width:600px;
font-family:georgia,Century gothic,Verdana,Tahoma,sans-serif;
margin:20px 0 0 25px;
float:left;
background:transparent url(images/logo.jpg) no-repeat scroll 0%;
margin:20px 0 0 0px;
height:91px;
}
.blogname h1 {
font-size:1px;
font-weight:normal;
color:#990000;
text-align:left;
margin:30px 0 0 40px
display:none;
}
.blogname a:link, a:visited{
}
.blogname h1 a:hover {
color: #826e52;
}
.blogname h2 {
margin:0px 20px 0px 105px;
font-size:1px;
font-weight:normal;
color:#B71C1A;
text-align:left;
display:none;
}
Et voici le code de mon header à l’emplacement indiqué dans ton post
<a href= »/ » title= »">
D’avance merci
camikat says:
mar 23, 2009
Bon j’ajoute la suite ici pour le header..
<a href= »/ » title= »">
David says:
mar 23, 2009
Salut Camikat :
Dans ton header.php
Dans ton fichier style.css :
David says:
mar 23, 2009
tiens moi au jus
camikat says:
mar 23, 2009
Ok David l’union fait la force, qu’elle soit surtout avec toi par ce que le php et moi ça fait deux
donc pour résumer le header : tu avais fais une erreur de [>] que j’ai corrigé !
<div class= »blogname » onclick= »location.href= »; »>
<a href= » rel= »nofollow »>
En ce qui concerne le CSS (dans la suite ci après)
camikat says:
mar 23, 2009
le header :
<div class= »blogname » onclick= »location.href= »; »>
<a href= » rel= »nofollow »>
camikat says:
mar 23, 2009
Le CSS :
/* The Top */
#top {
height:300px;
margin:auto;
background:url(images/head2.jpg) ;
width:1000px;
}
.blogname {
width:600px;
float:left;
background:transparent url(images/logo.jpg) no-repeat;
cursor: pointer;
margin:20px 0 0 0px;
height:91px;
}
.blogname h1 a {
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;}
.blogname a:link, a:visited{
}
.blogname h1 a:hover {
color: #826e52;
}
.blogname p {
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;
}
camikat says:
mar 23, 2009
Je n’arrive pas à mettre le header.. de toute façon il était OK à part une erreur de >
Le résultat est visible sur ce site pour ceux que cela interresse !
http://www.pokinthebox.com/
qui prouve bien que ça marche !
Merci David
Depuis ce matin je cherche sur Internet le moyen de parvenir à ce résultat..
je vais relèguer l’info sur mon blog
http://www.adeodesign.net/
dés que j’ai une minute avec un lien vers ton blog que je mets dans mon agrégateur de RSS…
@++
jennifer says:
août 13, 2009
Bonjour !
Tout d’abord merci de cet article !
Mais je n’arrive pas à faire marcher cet astuce… Pourriez-vous m’aider s’il vous plaît ?
Voici ce que contient ma feuille de style :
/* blog title */
#title {
position:absolute;
top:-5000px;
left:-5000px;
text-indent:-5000px;
color:#fff;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size:10px;
width:370px;
background:transparent url(images/banniere.gif) no-repeat scroll 0%;
cursor:pointer;
height:40px;
overflow:hidden;
}
#title h2 {
color:#fff;
font-size:20px;
margin:0 0 2px;
}
#title a:link, a:visited{
}
#title a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px solid #e7d8cf;
}
Et voici mon header.php (que j’ai placé dans index.php mais je pense que ça ne change pas grand chose, non ?)
<div id= »title » onclick= »location.href= »; »>
<a href= »; rel= »nofollow »>
jennifer says:
août 13, 2009
Je n’arrive pas, comme camikat à afficher le code du header.php
.
Merci d’avance, si vous pourriez m’aider ce serait très gentil de votre part !
Bonne journée,
Jennifer
David says:
août 13, 2009
Salut Jennifer,
don’t worry. Peux tu me donner l’url de ton blog pour que je regarde ça ?
jennifer says:
août 13, 2009
Oh je ne m’attendais pas à une réponse si rapide, d’autant plus que vous êtes en vacances ^^.
Pour le moment je ne travaille qu’en local, donc je ne peux pas vous le montrer =/.
Mais je travaille à partir de ce thème : http://themeswp.aurelienpaulus.net/traduction-francaise-du-theme-notepad-chaos/ (peut-être que ça vous aide ? je ne sais pas (au moins vous pouvez voir directement la feuille de style et l’index.php ^^).
Alors il fait chaud en Espagne ? =D
David says:
août 13, 2009
Je suis en ce moment sur une terrasse, histoire d’avoir un peu le wifi de temps en temps, d’ailleurs je m’en vais
Je regarderai ton soucis demain ou après demain, s’il fait pas trop chaud (car oui, il fait très chaud) ^^ Et puis ma batterie est morte
David says:
août 13, 2009
De toute façon, je vais republier un billet à la rentrée à ce sujet parceque la méthode que je donne n’est pas très bonne pour le référencement comme le disait Dan [Blog referencement]. Un peu de patience et ça va rouler ^^
jennifer says:
août 13, 2009
Oki
. Merci beaucoup et prenez votre temps, je vais m’occuper d’autres modifications à effectuer pendant ce temps ^^.
Bonnes vacances
Kuripa says:
août 18, 2009
Hello, j’attends impatiemment ce nouveau billet ! (histoire de dire que sa intéresse des personnes.
David says:
oct 31, 2009
Je m’en occupe ce matin en vidéo ^^
Laurent says:
fév 4, 2010
Merci pour la technique du:
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;
Je vais pouvoir faire un jolie titre sur photoshop !
Blog dans mes favoris !
Samuel F. says:
juin 14, 2010
BONJOUR !
Merci pour ce petit tuto bien sympa mais j’ai un souci.
( je débute, je cherche à personnaliser mon thème au max, je suis graphiste )
Impossible d’appliquer une image a la place du header depuis le code.
Je pense que ça vent du fait que j’utilise le thème K2. Qui à ses propres propriétés d’importations de header perso. mais la taille maxi est de 780 pixels alors que j’ai configuré la largeur de mon blog à 1080.
donc ma question est la suivante :
quel thème me conseillez vous ?
Merciiiiii !