web-dev-qa-db-fra.com

Comment styliser les aperçus/liens de post sans que cela affecte les posts 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, propre aux publications, qui s'affiche sous forme d'aperçus dans la page d'accueil d'un nouveau site WP que je crée. Mais tous s’appliquent également à la publication principale qui apparaît lorsque vous cliquez sur le lien correspondant.

Alors, quelle est la solution?

Je souhaite que les liens de la page d’accueil ressemblent le plus aux messages décrits que de nombreux sites ont une forme rectangulaire, l’image principale du message étant l’arrière-plan ou quelque chose du genre.

themescss
1
LWTBP

Tant que votre thème est configuré de manière "normale", c'est assez facile.

Prenons le balisage pour les vingt-quatorze à titre d'exemple. 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'élément <body> contient la classe "blog". Un seul article contient la classe "unique". (Il y a aussi des classes comme "archive" et "page" et ainsi de suite.)

Donc, pour formater un seul post, 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 publications 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 coup d'œil aux classes de l'élément <body>.

0
isNaN

Je suis d’accord avec isNaN, mais j’aimerais aussi ajouter 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. maison. Pour que vous puissiez styler les posts de la manière suivante:

.home .post {}

Mais le meilleur moyen d'aider les autres est de fournir un lien vers la page sur laquelle vous travaillez, nous pourrons alors être très spécifiques.

0
Matt Cromwell