Style quelque chose uniquement sur la page d'accueil

Question

Style quelque chose uniquement sur la page d'accueil

- 7
- 44059 2013-12-04
Je suis relativementnouveau dans Wordpress,maisje suis sûr qu'il y a unmoyen defaire ce quej'aimeraisfaire.

J'ai un conteneur dansmonmodèle,et sur lapage d'accueil,j'aimerais spécifier un remplissage légèrement différent de cet élément.

Mon CSS actuelest le suivant:

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

J'aimerais ramener le remplissage à 80pixels sije suis sur lapage d'accueil,sinon,gardez-le ainsi.

Est-ce quelque chose queje devraisfaire dans lemodèle ou y a-t-il des astuces CSS sophistiquées "WordPress uniquement" queje ne connaispas actuellement?

Dansmonexpérience limitée,je pense queje devrais êtreen mesure de spécifier si lapage is_home ou similaire,et de sélectionner unefeuille de stylepersonnalisée dans lefichier header.phppour lapage d'accueil. Vraisemblablement,avec !important aprèsmon changement de remplissagepour le CSS.

Puis-je obtenir une direction? Les résultats queje trouvegrâce à la recherchene sontpasparticulièrement ce quej'essaie defaire.
I am relatively new to Wordpress, but I'm sure there's a way to do what I'd like to do.

I have a container in my template, and on the home page I'd like to specify slightly different padding to this element.

My current CSS is as follows:

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

I'd like to bring the padding down to 80px if I'm on the Home page, otherwise keep it that way.

Is this something I'd have to do within the template or are there fancy 'WordPress only' CSS tricks that I am currently unaware of?

In my limited experience, I think I should be able to specify whether or not the page is_home or similar, and select a custom stylesheet in the header.php file for the home page. Presumably, with !important after my padding change for the CSS.

Can I get some direction? The results I'm finding through searching aren't particularly what I'm trying to do.
css homepage

2 réponses

votes

- 1
- 2013-12-04
Vérifiez la classe debalisebody,ilexiste une classenommée homepour lapage d'accueil.J'espère que le CSS suivant vous aidera.

.home #main_content .container { position: relative; padding: 120px 0; }
Check the class of body tag, there is a class named home for home page. I hope the following css will help you.

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

Mayeenul Islam · Accepted Answer · 2013-12-04

13

2013-12-04

WordPress body_class ($ class) est unebellemanière dynamiquepour charger des styles,jspour des contenus de corps spécifiques. Si votrethèmene prendpasen charge les classes de corps,ajoutez-lestrès simplement:

Ouvrez le header.php (ou lemodèle qui contient labalise & lt;body > )
Modifiez labalise & lt;body > et transformez-laen & lt;body & lt;?phpbody_class ();? > > — vous avezterminé! :)

Maintenant,quand vous êtes:

Accueil ,votrebalisebody affichera & lt;body class="blog" >
Page d'accueil ,votrebalisebody affichera & lt;body class="home" >
Page de détail de l'article deblog ( single.php ),votrebalisebody affichera & lt;body class="single" >
Page de détail de lapage (page.php ),votrebalisebody affichera & lt;body class="page" >

Vous êtes donc libremaintenant. Style comme vous le souhaitez. Pour lafeuille de styleexterneet pour lapage d'accueil,votre style sera (@saifur déjàmentionné):

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

CSSinterne

Pour le CSSinterne,ilexiste un vérificateur conditionnel dans WordPress,appelé is_home () ,et un autreest is_front_page () . Avec ces deux,vouspouvez vérifier si "vous" êtes dans lapage d'accueil ouen premièrepage,puispouvez charger votre code CSSinterne:

  & lt;?phpif (is_home ()|| is_front_page ()):? >
& lt; styleid="mon-css-interne" >
    #main_content .container {
 position: relative;
       rembourrage: 120px 0;
    }
& lt;/style >
& lt;?phpendif;? >

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

WordPress body_class($class) is a nice dynamic way to load styles, js for specific body contents. If your theme doesn't support body class add them very simply:

Open the header.php (or the template that contains the <body> tag)
Edit the <body> tag and make it to <body <?php body_class(); ?>> — you are Done! :)

Now when you are in:

Home page, your body tag will render <body class="blog">
Front Page, your body tag will render <body class="home">
Blog post detail page (single.php), your body tag will render <body class="single">
Page detail page (page.php), your body tag will render <body class="page">

So, you are free now. Style however you want. For external stylesheet, and for home page your style will be (@saifur already mentioned):

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

Internal CSS

For internal CSS, there is a conditional checker in WordPress, called is_home(), and another is is_front_page(). With these two, you can check whether "you" are in home page or in front page, and then can load your internal CSS code:

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

Similarly is_single(), is_page(), is_category(), is_archive(), is_day(), ... so on...

Votre réponse a ététrès utileet approfondie,merci!

Your answer was very helpful and thorough, thank you!
- 0
- 2013-12-04
- MrS1ck
Si vous êtes sur lapage `Home`,votrebalisebody affichera au lieu de` home`et dans `Front Page` à laplace de`front-page`: https://core.trac.wordpress.org/browser/tags/4.9.2/src/wp-includes/post-template.php#L570

If you are in `Home` page, your body tag will render instead of `home` and in `Front Page` instead `front-page`: https://core.trac.wordpress.org/browser/tags/4.9.2/src/wp-includes/post-template.php#L570
- 1
- 2018-03-01
- rafawhs
@mayeenul Islam,j'ai appliqué du CSS sur la classe ".page"pourmespagesintérieures.Maismapage d'accueil a les deux classes ".home"et ".page".Comment dois-jegérer cela?

@mayeenul Islam, i have applied some css on ".page" class for my inner pages. But my home page is having both ".home" & ".page" classes. How should i handle this?
- 0
- 2018-05-08
- Sopo
ce quej'aitrouvéest la classe "page-template-default" disponible surtoutes lespagesintérieures sauf lapage d'accueil,donc utilisé cela.Merci quandmême ... c'était utile

what i have found is "page-template-default" class in available on all inner pages except home page, so used that. Thanks anyway.. it was helpful
- 0
- 2018-05-08
- Sopo