Stilizare doar pentru pagina principală

Question

Stilizare doar pentru pagina principală

4 dec. 2013, 07:46:35

Vizualizări: 59.4K

Voturi: 10

Sunt relativ nou în WordPress, dar sunt sigur că există o modalitate de a face ceea ce doresc.

Am un container în șablonul meu și pe pagina principală aș dori să specific un padding ușor diferit pentru acest element.

CSS-ul meu actual este următorul:

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

Aș dori să reduc padding-ul la 80px dacă sunt pe pagina principală, altfel să-l păstrez așa cum este.

Este ceva ce ar trebui să fac în șablon sau există trucuri CSS 'specifice WordPress' de care nu sunt conștient momentan?

Din experiența mea limitată, cred că ar trebui să pot specifica dacă pagina este is_home sau similar, și să selectez o foaie de stil personalizată în fișierul header.php pentru pagina principală. Probabil, cu !important după modificarea padding-ului pentru CSS.

Poate cineva să mă îndrume? Rezultatele pe care le găsesc prin căutare nu sunt exact ceea ce încerc să fac.

MrS1ck

103

css pagina principala

Toate răspunsurile la întrebare

Comentarii

Răspunsul tău a fost foarte util și detaliat, mulțumesc!

MrS1ck

4 dec. 2013 18:57:52

Dacă te afli pe pagina Home, tag-ul body va fi randat ca <body class="blog"> în loc de home, iar pe Front Page va fi <body class="home"> în loc de front-page: https://core.trac.wordpress.org/browser/tags/4.9.2/src/wp-includes/post-template.php#L570

rafawhs

1 mar. 2018 15:37:48

@mayeenul Islam, am aplicat niște CSS pe clasa ".page" pentru paginile mele interioare. Dar pagina mea principală are atât clasa ".home" cât și ".page". Cum ar trebui să procedez în acest caz?

Sopo

8 mai 2018 22:29:23

ceea ce am descoperit este că clasa "page-template-default" este prezentă pe toate paginile interne, cu excepția paginii de start, așa că am folosit-o. Oricum, mulțumesc... a fost de ajutor.

Sopo

8 mai 2018 22:50:20

Verifică clasa tag-ului body, există o clasă numită home pentru pagina principală. Sper că următorul cod CSS te va ajuta.

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

saifur

166

4 dec. 2013 08:01:11

Mayeenul Islam 12.9K · Accepted Answer · 2013-12-04T08:32:15Z

Funcția WordPress body_class($class) este o modalitate dinamică și utilă de a încărca stiluri și js pentru anumite conținuturi ale paginii. Dacă tema ta nu suportă clasele pentru body, poți să le adaugi foarte simplu:

Deschide fișierul header.php (sau template-ul care conține tag-ul <body>)
Editează tag-ul <body> și transformă-l în <body <?php body_class(); ?>> — și ai terminat! :)

Acum, când te afli pe:

Pagina Home, tag-ul body va fi randat ca <body class="blog">
Pagina Front Page, tag-ul body va fi randat ca <body class="home">
Pagina de detaliu a unui articol (single.php), tag-ul body va fi randat ca <body class="single">
Pagina de detaliu a unei pagini (page.php), tag-ul body va fi randat ca <body class="page">

Acum ești liber să stilizezi cum dorești. Pentru un fișier extern de stiluri, iar pentru pagina de start, stilul tău poate fi (după cum a menționat deja @saifur):

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

CSS Intern

Pentru CSS intern, WordPress are un verificator condițional numit is_home() și un altul numit is_front_page(). Cu aceste două funcții, poți verifica dacă te afli pe pagina de start sau pe pagina principală și poți încărca codul CSS intern:

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

În mod similar, există și alte funcții precum is_single(), is_page(), is_category(), is_archive(), is_day(), ș.a.m.d.