web-dev-qa-db-fra.com

Style d'en-tête différent sur les pages d'accueil et de restauration

Serait-il assez simple d'ajouter différents styles d'en-tête de site et de menu et de les affecter à des pages spécifiques? J'ai une compréhension très basique du fonctionnement de CSS et de PHP et j'ai réussi à personnaliser le thème, mais cela dépasse largement mes capacités. Quelqu'un pourrait-il dire quel code ajouter où je reçois l'en-tête et le menu principal:

  1. on HOME - titre du site blanc, description et menu sur fond noir,
  2. sur d'autres pages - titre du site noir, description et menu sur fond blanc?
menustitleheadersdescription
1
el Huzar

Il y a plusieurs façons d'accomplir cela. Vous pouvez créer un modèle de page unique , mettre en file d'attente une feuille de style uniquement pour le page d'accueil, ou utilisez une classe unique sur la page d'accueil.

C'est probablement le plus simple.

Si vous inspectez votre page d'accueil à l'aide du navigateur (appuyez sur la touche f12) et regardez la balise body, vous remarquerez que WordPress ajoute une classe .home. Vous pouvez l'utiliser pour appliquer différents styles qui n'auront d'effet que sur la page d'accueil.

Voici quelques exemples basés sur ce que vous demandiez.

.home .site-branding {
    background-color: #000;
}

.home .site-title a, 
.home .site-description {
    color: #fff;
}

Je recommanderais de styler toutes les autres pages comme vous le souhaitez, puis d'utiliser la classe .home pour modifier les éléments de la page d'accueil, comme dans l'exemple ci-dessus. Mais vous pouvez faire les pages opposées et ciblées qui n’ont pas la classe .home sur le corps.

Par exemple...

body:not(.home) .site-branding {
    background-color: #fff;
}

Note : jetez un oeil à la classe de corps sur différentes pages, WP ajoute une classe unique pour les pages, les publications, les modèles, etc. facile.

1
RiddleMeThis