WordPress : Changer le logo d’en-tête pour différentes pages
Je cherche comment changer un logo basé sur l’une ou l’autre des classes dans le modèle de <body>publication ou . type/pageJe ne connais pas trop PHP si les déclarations dont je suppose que j’aurai besoin pour que cela fonctionne.
Je pense que ce qui fonctionnerait bien, c’est si j’avais tous les logos dans un graphique de sprite et que j’utilisais une classe CSS pour changer les différents logos pour chaque page afin que le php change simplement la classe.
Quelque chose comme ça?
if(body class="home") {
<div class="logo1"><img src="images/logo.png" /></div>
} elseif(body class="page1") {
<div class="logo2"><img src="images/logo.png" /></div>
} else {
<div class="logo"><img src="images/logo.png" /></div>
}
Je n’ai pas encore essayé ce code, je veux juste savoir si c’est la bonne manière.
Solution n°1 trouvée
iambriansreed a répondu bien avant moi, et a fourni une bonne réponse, mais je veux développer ce qu’il a dit, et j’ai plus à dire que ce qui peut tenir dans un commentaire, donc je poste ma propre réponse.
Dans votre code HTML, vous auriez un seul élément de logo, par exemple un div ou une balise h1 :
<h1 class="logo">My Company</h1>
Ensuite, en utilisant CSS, vous masquez le texte et le remplacez par une image :
.logo {
background: url(mylogo.png) 0 0 no-repeat;
width: 200px; /* match logo width */
height: 80px; /* match logo height */
text-indent: -9999px; /* hides text */
}
J’ai montré une technique pour cacher le texte. Il existe d’autres moyens. La raison de laisser le texte dans le balisage est pour le référencement et l’accessibilité.
Sur les sous-pages, vous utiliserez un sélecteur plus spécifique, basé sur la classe attachée à votre balise body, pour modifier l’arrière-plan du logo :
.section2 .logo {
background: url(mylogo.png) 0 -80px no-repeat;
}
PHP n’entre pas dans l’équation sauf pour attacher la classe unique à la balise body en fonction de la section/page qui est rendue.
Solution n°2 trouvée
La plupart des thèmes ajoutent quelques classes dans la balise body, soit le slug ou le numéro d’identification de page.
Vérifiez l’apparence de la source de votre page dans la balise body et oui, utilisez un sprite.
PHP est exagéré. Utilisez le CSS.
Solution n°3 trouvée
iambriansreed a répondu bien avant moi, et a fourni une bonne réponse, mais je veux développer ce qu’il a dit, et j’ai plus à dire que ce qui peut tenir dans un commentaire, donc je poste ma propre réponse.
Dans votre code HTML, vous auriez un seul élément de logo, par exemple un div ou une balise h1 :
<h1 class="logo">My Company</h1>
Ensuite, en utilisant CSS, vous masquez le texte et le remplacez par une image :
.logo {
background: url(mylogo.png) 0 0 no-repeat;
width: 200px; /* match logo width */
height: 80px; /* match logo height */
text-indent: -9999px; /* hides text */
}
J’ai montré une technique pour cacher le texte. Il existe d’autres moyens. La raison de laisser le texte dans le balisage est pour le référencement et l’accessibilité.
Sur les sous-pages, vous utiliserez un sélecteur plus spécifique, basé sur la classe attachée à votre balise body, pour modifier l’arrière-plan du logo :
.section2 .logo {
background: url(mylogo.png) 0 -80px no-repeat;
}
PHP n’entre pas dans l’équation sauf pour attacher la classe unique à la balise body en fonction de la section/page qui est rendue.
Solution n°4 trouvée
La plupart des thèmes ajoutent quelques classes dans la balise body, soit le slug ou le numéro d’identification de page.
Vérifiez l’apparence de la source de votre page dans la balise body et oui, utilisez un sprite.
PHP est exagéré. Utilisez le CSS.
0 commentaire