web-dev-qa-db-fra.com

Style quelque chose que sur la page d'accueil

Je suis relativement nouveau sur Wordpress, mais je suis sûr qu'il y a un moyen de faire ce que j'aimerais faire.

J'ai un conteneur dans mon modèle, et sur la page d'accueil, j'aimerais spécifier un remplissage légèrement différent de cet élément.

Mon CSS actuel est le suivant:

#main_content .container {
position: relative;
padding: 120px 0;
}

Si je suis sur la page d'accueil, j'aimerais ramener le padding à 80 px. Sinon, continuez comme ça.

Est-ce quelque chose que je devrais faire dans le modèle ou existe-t-il des astuces CSS "WordPress uniquement" fantaisistes que je ne connais pas actuellement?

Dans mon expérience limitée, je pense que je devrais être capable de spécifier si la page is_home ou une page similaire ou non, et de sélectionner une feuille de style personnalisée dans le fichier header.php pour la page d'accueil. Vraisemblablement, avec !important après mon changement de remplissage pour le CSS.

Puis-je obtenir des instructions? Les résultats que je trouve en effectuant des recherches ne sont pas particulièrement ce que j'essaie de faire.

csshomepage
6
MrS1ck

WordPress body_class($class) est un moyen agréable et dynamique de charger des styles, js pour des contenus corporels spécifiques. Si votre thème ne supporte pas la classe de corps, ajoutez-les très simplement:

  • Ouvrez le header.php (ou le modèle contenant la balise <body>)
  • Modifiez la balise <body> et définissez-la sur <body <?php body_class(); ?>> - vous avez terminé! :)

Maintenant, quand vous êtes dans:

  • Home page, votre balise body rendra <body class="blog">
  • Front Page, votre balise body rendra <body class="home">
  • Page de détail d'un article de blog (single.php), votre balise body générera le rendu <body class="single">
  • Page de détail de la page (page.php), votre balise body affichera le code <body class="page">

Donc, vous êtes libre maintenant. Style comme tu veux. Pour la feuille de style externe et pour la page d'accueil, votre style sera (@saifur déjà mentionné):

body.home #main_content .container {
   position: relative;
   padding: 120px 0;
}

CSS interne

Pour CSS interne, il existe un vérificateur conditionnel dans WordPress, appelé is_home() , et un autre est is_front_page() . Avec ces deux, vous pouvez vérifier si "vous" êtes dans la page d'accueil ou dans la page d'accueil, puis pouvez charger votre code CSS interne:

<?php if( is_home() || is_front_page() ) : ?>
<style id="my-internal-css">
    #main_content .container {
       position: relative;
       padding: 120px 0;
    }
</style>
<?php endif; ?>

De même, is_single(), is_page(), is_category(), is_archive(), is_day(), ... ainsi de suite ...

7
Mayeenul Islam

Vérifiez la classe de balise body, il existe une classe nommée home pour la page d'accueil. J'espère que les css suivants vont vous aider.

.home #main_content .container {
position: relative;
padding: 120px 0;
}
1
saifur