- afsnit i en side

, design - afsnit i en side baseret på forskelligt,,,,, 35,,,,,,,,, 7,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i en tidligere tutorielle   jeg viste dig, hvordan at stil den kategorier i jeres sted på en anden måde, så hvis din lokalitet er et afsnit for hver enkelt kategori af post, kan du få dem til at se helt anderledes ud.,, men hvad hvis din hjemmeside er baseret på statiske sider?det er ikke usædvanligt at se store anlæg, som er baseret på et hierarkisk side struktur, så kan du bruge disse teknikker til et sted som dette?, er svaret ja.wordpress vil give dig nogle css klasser i forbindelse med side struktur for anlæg, som du kan bruge til at målrette design og skabe et afsnit for din side baseret på stedet, som ser helt anderledes ud.,, i denne forelæsning, vi skal arbejde med en lokalitet på hierarkiske sider og stil hvert afsnit i stedet ved hjælp af en anden farve for hver sektion.vi vil også se på en alternativ metode baseret på at tilføje kategorier til sider.,, hvad du skal bruge, til at følge denne forelæsning, du får brug for:,, en udvikling, installation af wordpress, en kode redaktør,, hvis du allerede har et tema, du ønsker at bruge denne teknik, arbejder du på temaet er stylesheet og funktioner fil.jeg vil skabe et barn tema i   20 15   tema og redigere stylesheet og funktioner fil   i mit barn tema.,, din hjemmeside, vil sandsynligvis være befolket af stillinger, så mit websted har nogle stillinger, jeg skal hente wordpress   tema test data.  , at tema, hvis du arbejder sammen med din egen tema, du kan springe over dette punkt, men hvor er det, du skal gøre for at skabe et barn tema af 20 15.,, i dit sted er  , wp indhold /emner,   mappe, skabe en ny mappe og give det et navn.jeg ringer til min  , tutsplus stil sider af afsnit,.,, i den mappe, skabe en tom css filen  , stil. css,   og føje følgende til det: /* tema navn: tuts + stil sider af afsnit tema uri: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 beskrivelse: tema for at støtte tuts + tutorielle den satte sider forskelligt i hver sektion af en lokalitet.barn tema for 20 15 tema.forfatter: rachel mccollin forfatter uri: http://rachelmccollin.co.uk/model: twentyfifteen version: 1, 0 * /@ import url (".. /twentyfifteen /stil. css"), det fortæller wordpress alt det, den har brug for at vide, at skabe et barn tema og import stylesheet fra 20 15.du vil sikkert have dit eget navn og oplysninger i stedet for min, men dette giver dem en idé.,, aktivere temaet.,, der importerer data, hvis deres anlæg har allerede sider, der er oprettet   kan du droppe dette afsnit, men her er hvordan til at importere temaet enhed test data i deres stedet.,, gå til temaet enhed test side i codex   og downloade  , xml,   fil, der er forbundet med. i dit sted, gå til  , værktøj > import.klik på  , wordpress,   link, klik på  , vælge fil,   knap og udvælge de papirer, du har downloadet.klik på den  , uploade filen og import,   knap. følger får og vente på wordpress til at indføre data., med automatisk wordpress udpeger en sejlads menu, der indeholder alle af blog kategorier til den primære menu, og det vil sætte en blog side som hjemmeside.vi arbejder med statiske sider, du er nødt til at ændre det i wordpress admin.,,, indstillinger > læsning, ændre forsiden til en statisk side og vælge den forside 'side.vælg "blog" side som stillinger side. i, udseende > menukort, udvælger alle sider "menu og kontrollere de primære menu" afkrydsningsfelt, så det er deployeret som den vigtigste menu i din hjemmeside.,, identificere stil mål, wordpress bruger  , body_class(), model tag til produktionen klasser i henhold til den type side frem.du tilføjer dette mærke,   til din   tema er  , header. folkesundhedsprogrammet,   fil: det   tilføjer klasse   til  , et organ,   element i henhold til den type side ses.,, hvis du arbejder sammen med din egen tema og har ikke tilføjet disse model, men du bliver nødt til at gør det.denne forelæsning om   arbejder med undervisning og id 'er, der genereres af wordpress   viser dig hvordan.,,, hvis du arbejder med et barn af 20 15 tema, disse mærkater allerede er blevet tilføjet til 20 15 tema, så du behøver ikke at gøre noget, hvis du åbner en af   din hjemmeside er sider i en browser og bruge udvikler værktøjer til at inspicere output: du vil se, at det  , body_class(),   skabelon, tag   har tilføjet nogle klasser til din side.her, jeg har et barn side åbent:,,,,, den, et organ, et element er produktionen med en række kategorier:,, < organ klasse = "s page-id-1133 side barn parent-pageid-5 side skabelon misligholdelse er logget på admin bar ikke vælge støtte" >,, de fortæller om, at vi er på en statisk side, id for side, den kendsgerning, at det er et barn, og det er et barn, og dets side skabelon, blandt andre ting, vi skal bruge to   af disse klasser til målet sider i forskellige dele af lokaliteten: de, der vedrører side id og   side forælder. - øverste sider, og deres børn, at målrette sider i et afsnit af en hierarkisk sted, vi bruger to klasser: side id for den øverste side og side forælder id for barnet sider.,, først skal du idhvis id på din øverste sider.gør det ved at åbne for hver af dem efter tur i den administration, skærme og kontrol af url til redigering af skærmen.adressen skal indeholde teksten "post - = x, hvor x er den unikke id på siden.se bort fra den kendsgerning, at der står "post", ikke "side" (side er faktisk en slags post), og at id for målretning af din stilfuldhed.,, på min hjemmeside id på øverste niveau sider med børn er 5 og   17 og sider uden børn har id, 146, 701,   703, 733 og 735.jeg skal bruge en farve for hver af de to dele, og en anden for hierarkisk sider uden børn.hvis dine sider er alle sektioner, du kunne bruge en anden farve for hver sektion.,, åben din tema er stylesheet og tilføje følgende css til det:,,. page-id-5 h1,. parent-pageid-5 h1 (farve:cd2c8.}. page-id-17 h1,. parent-pageid-17 h1 (farve:&#e5572f.}. page-id-146 1. page-id-701 h1,. page-id-703 h1,. page-id-733 h1,. page-id-735 h1 (farve:Υbbe;}, note: du bliver nødt til at ændre den post - og forældre - id 'er i overensstemmelse med deres egen hjemmeside, og du skal nok   ændre farverne passer til dit design.,,, red din stylesheet og tage et kig på din hjemmeside.mit sted er ved hjælp af farver i hver afdeling.her er en side uden et hierarki:,,,,, og et højt niveau,,,,, side: her er et barn af den øverste side:,,,,, der er dog et par problemer med denne tilgang.den første er, at jeg havde manuelt at tilføje klasser for hver af de øverste sider, hvilket betyder, at hvis nogen tilføjer flere sektioner eller øverste sider til min hjemmeside i fremtiden, eller flytter en af min øverste sider til et andet sted i hierarkiet, vil der ikke være nogen på vej til dem.den anden er, at det virker kun for direkte børn af min øverste sider.ikke min stil, anvendes til børnebørn af siderne.  , betyder det, at hvis din lokalitet er et multilevel hierarki, dette vil være meget vanskeligt at gennemføre, som du ville have til mål, børn af hver af de børn i din øverste sider.umuligt, hvis nye sider tilføjes der regelmæssigt.,,, så jeg får brug for en alternativ metode, nemlig at bruge kategorier.,, der kalder sider pr. kategori, som standard, wordpress ikke tildele kategorier til side, men du nemt kan tilføje kategorier til sider med en funktion.for at gøre det, du bruger den, register_taxonomy_for_object_type(), funktion, som er omhandlet i denne forelæsning om tildeling af kategorier, beslag, åbn dine tema er, functions.php, fil, eller, hvis det ikke allerede har en, skabe en.der tilføjes følgende til dem:,, funktion tutsplus_add_categories_to_pages() {register_taxonomy_for_object_type ("kategori", "s')} add_action (" lokalitet, tutsplus_add_categories_to_pages), vil dette tilføje,'category, taksonomi til,'page, objekttype, så du kan tildele kategorier til sider.,, men det betyder ikke, at de, body_class(), mærke, vil produktionen den kategori, som en af de klasser på en side med kategorier, fordi sider har ikke kategorier som standard, kan du ændre det ved at skrive en funktion og knytte den til, body_class, filter, hook.igen i deres funktioner fil, tilføje dette:,, funktion tutsplus_add_categories_to_body_class ($klasser (hvis (is_page()) ($kategorier = get_the_category ($post - > id) for hvert ($kategorier som $kategori) ($klasser [] = "kategori".$kategori - > kugle.}} tilbage $klasser;} add_filter ('body_class,'tutsplus_add_categories_to_body_class), skaber det en funktion til  , tutsplus_add_categories_to_body_class() med variabel, $klasser, som sin genstand.det   kontrol, hvis vi er på en side, og hvis det er tilfældet, skaber en variabel, $kategorier, som er i besiddelse af alle kategorier side.   derefter for hver enkelt kategori, tilføjer den kategori kugle (anføre,'category - for konsistens)   til $klasser, system og returnerer dem.   endelig, ved at den funktion, at de, body_class, filter, tilføjer det produktionen række kugler i klasser, produktion af, body_class(), model navneskilt.,, nu forsøge at tilføje nogle kategorier af sider i stedet for at give det afsnit.jeg tilføjer en del 1, afsnit 2 og afsnit 3. klasse.sikre, at hver enkelt side i et afsnit, her er, hvordan mine sider ser i administrationen af skærme med kategorier:,,,,, næste skridt er at tilføje nogle på vej til målet   sider i hver afdeling.jeg vil ikke ændre overskriften farve, som jeg allerede gjorde det ved hjælp af side hierarki.i stedet vil jeg tilføje en grænse, i din tema er stylesheet, tilføje følgende (eller noget lignende med kuglerne til kategorier og farver, du bruger):,,. page.category-section-1 h1 {grænse nederst: 2px fastΥbbe; polstring: 0.5em.}. page.category-section-2 h1 {grænse nederst: 2px fastcd2c8; polstring: 0.5em.}. page.category-section-3 h1 {grænse nederst: 2px fast&#e5572f; polstring: 0.5em;}, nu redde din stylesheet og tjekke dine sider. her er der en side i afsnit 1:,,,,, hvis du tjekke dit sted, du vil finde, at hver side du har angivet til en af de kategorier af målrettede - vil have de rigtige design, uanset om det er på side hierarki.det giver dig bedre kontrol med design og evnen til at stil dele af et område med en flerstrenget hierarki.,, den anden fordel af denne kategori baseret tilgang er, at du kan bruge den til side og stillinger i din hjemmeside: hvis du har allerede brugt kategori baseret på vej til din blog, du kan let anvendes det her til din statiske sider.,,,,, hvis din hjemmeside er baseret på en hierarkisk sider, så vil det sandsynligvis være dele, som jeg vil give en særlig identitet.  , i denne forelæsning, du har lært to måder at mål - på side i forskellige dele af deres område.  ,, du brugte side hierarki, som har den fordel, at arbejde med misligholdelse wordpress miljøer, men den ulempe,ikke med et hierarki af mere end to niveauer dybt.  , endelig, du lærte at anvende kategorier til sider, tilføje kategorier til, body_class(), tag til sider, og så skrive css rettet mod de klasser, som wordpress   output.

An example of a child page
A page without a hierarchy
A top-level page
A child of that top level page
Admin screens with categories added
A Page in Section 1



Previous:
Next Page: