WordPress : Comment styliser les aperçus/liens des articles sans que cela n’affecte les articles principaux ?
Je suis débutant mais j’ai passé beaucoup de temps à essayer de comprendre cela et en vain.
À l’aide de l’outil de développement de Chrome, j’ai essayé de trouver une classe particulière qui est unique pour les publications qui s’affichent sous forme d’aperçus sur la page d’accueil d’un nouveau site WP que je crée. Mais tous sont également appliqués au message principal qui arrive lorsque vous cliquez sur le lien vers le message.
Alors, quelle est la solution ?
Je veux que les liens de la page d’accueil ressemblent le plus aux articles en vedette que de nombreux sites ont avec une forme rectangulaire, avec l’image principale des articles en arrière-plan ou quelque chose du genre.
Solution n°1 trouvée
Je suis d’accord avec isNaN, mais j’ajouterais également que si dans vos paramètres « Paramètres> Lecture », vous définissez une page (comme « Accueil ») comme étant votre page d’accueil, et non vos derniers messages, la balise body aura une classe de . domicile. Vous pouvez donc styliser les messages comme suit :
.home .post {}
Mais la meilleure façon pour les autres d’aider est de fournir un lien vers la page sur laquelle vous travaillez, alors nous pouvons être très précis.
Solution n°2 trouvée
Tant que votre thème est configuré de manière « normale », c’est assez facile.
Prenons l’exemple du balisage du Twenty Fourteen. Le type de page que vous consultez actuellement crée une classe sur le <body>. Ainsi pour un blog de première page (plusieurs articles) l’ <body>élément contient la classe « blog », Un article unique contient la classe « single ». (Il existe également des classes telles que « archive » et « page », etc.)
Donc, pour formater un seul message, vous ajoutez « .single » à votre css.
/* css */
.single .post {
/* affects only single posts */
}
.single .post h1 {
/* affects only the <h1> of .single posts */
}
Pour formater la liste des articles sur une page de blog, vous ajoutez .blog.
/* css */
.blog .post {
/* this affects only posts on a .blog page */
}
.blog .post h1 {
/* this affects only the <h1> of posts on a .blog page */
}
Continuez donc à utiliser DevTools, mais jetez un il aux classes de l’ <body>élément.
0 commentaire