tutorial

Comment masquer le titre et la présentation de votre blog wordpress?

by David LOUIS on jan 16, 2009 • 10 h 08 min • 20 484 views26 commentaires

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 {

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 :

#header {

height: 150px;
width: 900px;
}

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

#header {

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 :

#header {

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é

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

26 comments

Dan [Blog referencement] says:

jan 17, 2009

Répondre

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

Répondre

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 :






Blog it yourself ! but with WordPress…


Actu du web 2.0, référencement Google, utilisation des plugins et thèmes sous WordPress

Mais ce n’est toujours pas bon ?

Dan [Blog referencement] says:

jan 17, 2009

Répondre

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

Répondre

Ok Merci du renseignement, je vais alors choisir la méthode du livre WordPress récemment sorti

David says:

jan 27, 2009

Répondre

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

Répondre

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

Répondre

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

Répondre

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

D’avance merci

camikat says:

mar 23, 2009

Répondre

Bon j’ajoute la suite ici pour le header..

David says:

mar 23, 2009

Répondre

Salut Camikat :

Dans ton header.php


">< ?php bloginfo('name'); ?>
< ?php bloginfo('description'); ?>

Dans ton fichier style.css :

.blogname {
cursor: pointer;
height: 300px;
}


.blogname  h1 a {
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;}

.blogname p {
position: absolute;
left: -5000px;
top: -5000px;
text-indent: -5000px;}

David says:

mar 23, 2009

Répondre

tiens moi au jus

camikat says:

mar 23, 2009

Répondre

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é !

En ce qui concerne le CSS (dans la suite ci après)

camikat says:

mar 23, 2009

Répondre

le header :

camikat says:

mar 23, 2009

Répondre

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

Répondre

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

Répondre

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 ?)

jennifer says:

août 13, 2009

Répondre

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

Répondre

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

Répondre

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

Répondre

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

Répondre

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

Répondre

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

Répondre

Hello, j’attends impatiemment ce nouveau billet ! (histoire de dire que sa intéresse des personnes.

David says:

oct 31, 2009

Répondre

Je m’en occupe ce matin en vidéo ^^

Laurent says:

fév 4, 2010

Répondre

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

Répondre

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 !

What do you think?


Name required	Email required	Website

Cliquez ici pour annuler la réponse.

Comment masquer le titre et la présentation de votre blog wordpress?

David LOUIS

Articles similaires

26 comments

Blog it yourself ! but with WordPress…

">< ?php bloginfo('name'); ?>

What do you think?

Billets récents

Catégories

Billets populaires

Derniers commentaires

Liens