Dynamiske sidemaler i WordPress, del 1

WordPress-side maler er en fin måte å fullstendig endre på hvordan bestemte nettsider vises. Du kan bruke dem til å legge til et stort utvalg av funksjonalitet til nettstedet ditt.

De har imidlertid en begrensning ved at de er 'statiske' maler. Du kan ikke tilpasse dem eller påvirke deres oppførsel på noen måte. Du kan bare velge om du vil aktivere en sidemal eller ikke. Som standard vil en sidemal bare utføre en fast funksjon, f.eks. vis et sitemap, eller fjern sidebjelken for å vise en full bredde-side.

I denne opplæringsserien ser jeg på hvordan du kan utvide sideskjemaene for å være mer fleksible, og forbedre deres funksjonalitet sterkt. Jeg begynner med å introdusere hvordan du lager en standard sidemaler via et barnemne, før du går videre til en mer fleksibel tilnærming hvor jeg lager en generell dynamisk sidemal.

Til slutt vil jeg vise deg tre virkelige eksempler på fullt fungerende dynamiske sidemaler. Jeg vil også dekke avanserte emner som hvordan du tilordner sidemaler til egendefinerte innleggstyper.

Ønsker å følge med?

For å følge med denne opplæringsserien trenger du et WordPress-nettsted med admin-tilgang. Langt den enkleste måten å gjøre dette på er å bruke et lokalt utviklingsmiljø. En dedikert tekstredigerer er også nyttig, men ikke viktig.

Hvis du tilfeldigvis utvikler med WordPress via en ekstern server, må du kunne redigere temafiler via WordPress admin, eller redigere filer lokalt og bruke FTP-programvare for å overføre dem tilbake til serveren. For enkelhets skyld skal jeg anta at du jobber med WordPress lokalt gjennom resten av denne opplæringen.

For å implementere sideskjemaene, bruker jeg et barnemne basert på det tjue sytten foreldre temaet, som (på skrivende stund) er det siste standard WordPress-temaet. Så hvis du følger med så er det en god ide å ha dette installert før du fortsetter.

Du kan bruke et barn tema basert på et annet foreldre tema hvis du foretrekker det, men du må endre noe av koden for å få det til å fungere sømløst med ditt spesielle tema. Den grunnleggende metoden, skjønt, er stort sett den samme for ethvert barn tema.

WordPress Page Templates

Før du lærer å gjøre sideskjemaene mer fleksible, la oss gå over noen grunnleggende detaljer.

WordPress bruker et malhierarki for å bestemme hvilken mal som gjør gjeldende side. Malen som brukes i de fleste scenarier for sider er page.php men kan være annerledes hvis du ser på en side med en bestemt ID eller slug. Men hvis du velger en sidemal for en bestemt side, vil dette alltid bli brukt i preferanse, noe som gjør det veldig enkelt å tilpasse hvilken som helst side ved hjelp av en sidemal.

Her er noen typiske eksempler på vanlige WordPress-sidemaler:

• Kontakt skjema
• porteføljer
• ofte stilte spørsmål
• Tilpasset 404-side
• Tilpasset påloggingsside
• Sitemap
• Full bredde side
• Blogginnlegg Side
• Widgetized Page
• Og mange flere…

Jeg kunne fortsette, men du får ideen. Sidemaler er kule! Du kan bruke dem til nesten alt.

Hvis du har brukt WordPress for en lengre tid, så er det høyst sannsynlig at du allerede har kommet over ett eller flere av eksemplene ovenfor. De fleste temaer inkluderer sidemaler som utfyller temafunksjonalitet, og du kan enkelt legge til ditt eget via et barnemne. Jeg skal dekke hvordan du gjør dette snart.

Sidemaler er så nyttige fordi de gir deg full kontroll over hele siden. Du kan legge ut overskrift, bunntekst og / eller sidebjelker hvis du ønsker det. Dette er en av grunnene til at sideskjermene i full bredde er så vanlige fordi det er veldig enkelt å manipulere sidebjørene via en sidemal.

Hvis du vil se alle tilgjengelige sidemaler, kan du gå til WordPress-sideditoren og få tilgang til Mal drop down via Sidemaler meta boks. Bare velg sidemalen du vil ha, og når siden er oppdatert, vil den bli synlig neste gang siden vises.

Legge til sidemaler via et tema for barn

Som nevnt ovenfor bruker vi et tilpasset WordPress barnemne for å implementere alle sidemaler i hele denne opplæringen. Jeg skal begynne med et grunnleggende barnemne og en sidemaler, og legg deretter til mer kompleksitet når vi går.

Hele prosessen vil bli dekket trinnvis, så vær ikke bekymret hvis du ikke er kjent med barntemaer og / eller sidemaler. Du vil være ved slutten av opplæringen!

Den grunnleggende ideen bak barnas temaer er at de tillater deg å tilpasse utseendet på ditt nåværende tema (kalt et foreldetema) på en måte som ikke vil bli påvirket når foreldetemaet er oppdatert.

Hvis koden legges direkte til overordnet, blir alle tilpassinger overskrevet og tapt under en planlagt temaoppdatering. Dette er et viktig punkt som et godt vedlikeholdt tema vil bli jevnlig oppdatert. For å finne ut mer om barnemner, vil jeg anbefale å se på den offisielle dokumentasjonen. 

Det er interessant å merke seg at det er teknisk mulig å bruke et WordPress-plugin for å legge til sideskjerm, men det er mye enklere å bruke et barnemne. Jeg ønsker ikke å komplisere ting unødvendig med ekstern kode, så jeg holder fast med barnemner for implementering av sidemal.

La oss komme i gang!

Ok, så nok teori - la oss lage vår første side mal! Den vil bli plassert i et egendefinert tjue-sytten barn tema som vil fungere som vår side mal container, så vi må opprette barnet tema først.

Åpne temamappen din og opprett en ny mappe for barnet ditt. I henhold til WordPresss beste praksis anbefales det at du navngir barnetema-mappen det samme som det overordnede temaet som er basert på, endret med '-child'. Som vår overordnede temamappe er oppkalt twentyseventeen, navnet ditt barn tema mappe twentyseventeen-barn. Inne i denne nye mappen, opprett en enkelt fil med navnet style.css og legg til følgende kommentarblokk øverst.

/ * Tema navn: Twenty Seventeen Child Beskrivelse: Twenty Seventeen Child Theme Forfatter: David Gwyer Mal: ​​Twentyseventeen Versjon: 0.1 Lisens: GNU General Public License v2 eller nyere Lisens URI: http://www.gnu.org/licenses/gpl- 2.0.html Tekstdomen: tjue-sytten-barn * /

Vi må nå referere til alle stilene fra det tjue sytten foreldre temaet. Hvis du noen gang har jobbet med barnemner før, kan du være vant til å legge til et CSS @importere uttalelse rett under kommentaren blokk. Dette er ikke lenger vurdert som en WordPress beste praksis på grunn av hastighetsproblemer. I stedet vil vi enqueue de overordnede tema stilene, som vil bli mer effektive.

Inne i barnets tema rotmappe, opprett en functions.php fil og legg til følgende kode for å sette opp en tom klassebeholder. Vi bruker denne klassen til all vår oppsettkode.

i det();

Merk: Den avsluttende PHP-setningen er ikke nødvendig, men du kan legge til den hvis du foretrekker det.

Legg nå en krok og tilbakekalling for å kalkulere de tyve sytten overordnede tema stiler, i stedet for å importere dem direkte inne i style.css-filen. Gjør dette ved å legge til to nye klassemetoder.

Lagre endringene dine og aktiver barnetemaet. Du har nå et fullt fungerende, om enn enkelt, tjue-sytten barn tema. For å teste om det fungerer som det skal, legg til en linje med tilpasset CSS til style.css.
* farge: rød! viktig; 
Hvis alt er bra så bør du se hele nettstedet ditt nå farget en fin garish rød!
Ikke glem å slette test CSS før du går videre. Nå som barnetemaet er aktivt, kan vi begynne å implementere vår første side mal.
Legge til vår første side mal
En ting er verdt å nevne om du lagrer sidemaler i barnet ditt. Du kan lagre sidemalerne enten direkte i rotmagasinetmappen eller i en toppmap-mappe. Det spiller ingen rolle hvilken du velger; enten stedet er bra.
Men hvis du har flere sidemaler, kan du bestemme deg for å lagre dem i en mappe for organisatoriske formål. Mappenavnet er ubetydelig, men det må være plassert direkte inne i rotbarnets temamappe, ellers vil WordPress ikke gjenkjenne sidemaler. For denne opplæringen bruker jeg en mappe som heter page-maler.
La oss nå legge til en ny sidemal for barnetemaet. Standard måten å gjøre dette på er å lage en kopi av overordnet temaet page.php tema mal fil og legg den til barnet ditt temaet. Du kan navngi filen alt du vil, men jeg vil anbefale å inkludere noe som gjør det gjenkjennelig som en sidemal. Jeg skal med test-side-template.php.
Når du har kopiert page.php fil (og omdøpt den) til page-maler mappe, bør temaet ditt barn nå se slik ut:
Åpne opp test-side-template.php og erstatt kommentarblokken øverst i filen med følgende.
Dette trinnet er svært viktig da kommentarblokken forteller WordPress å gjenkjenne filen som en sidemal og legger den til i listen over tilgjengelige sidemaler på sideditorens skjerm.
Månedskoden for hele siden skal nå se slik ut.
 
 
 
  
 
 
 
La oss teste vår sidemal. Gå til WordPress admin og rediger en eksisterende side, eller opprett en ny. På siden redigeringsskjerm velger du Mal drop-down fra Sideattributter meta-boks for å tilordne vår sidemal til den aktuelle siden.
Fordi vi bare kopierte overordnet temaet page.php mal-filen, gjør vår tilpassede sidemal ikke noe mer enn å skrive ut den nåværende siden, noe som ikke er veldig nyttig. Også, vi trenger ikke å sende ut editorens innhold eller kommentarer, så fjern disse fra sidemalen samtidig som loop, og legg til en egendefinert melding. Endre innholdet i samtidig som loop til følgende.
Dette er vår egendefinerte sidemal!
"; Endelig; // Sluttens slutt.
Lagre dette og se siden på forsiden.
Merk: Hvis du ikke ser den egendefinerte meldingen, må du sørge for at du har valgt den egendefinerte sidemalen på sideditoren og lagret den for å oppdatere innstillinger.
La oss nå gjøre vår tilpassede sidemal litt mer nyttig. Erstatt meldingen vi la til ovenfor med følgende kode for å sende ut et nettstedkart over alle publiserte sider.
Sitemap"; ekko "
".wp_list_pages (array ('title_li' =>")). "
"; Endelig; // Sluttens slutt.
Dette vil resultere i følgende utgang.
Det er lett å se hvor nyttige sidemaler kan være. Men vi kan gjøre enda bedre!
Konklusjon
Så langt har vi opprettet et barnemne og brukt det til å implementere vår standard side mal. I neste veiledning vil jeg vise deg trinn for trinn hvordan du utvider dette, og viser hvordan sideskjermene kan gjøres mer fleksible.
Spesielt lager vi en generell dynamisk sidemaler ved å legge til egendefinerte kontroller på sideditoredisplayet. Kontrolllogikk vil da bli lagt til sidemalen slik at vi kan tilpasse hvordan sidemalen blir gjengitt.
WordPress har en utrolig aktiv økonomi. Det er temaer, plugins, biblioteker og mange andre produkter som hjelper deg med å bygge opp ditt nettsted og prosjekt. Platformen med åpen kildekode gjør det også et godt alternativ som du kan forbedre programmeringsevnen din. Uansett, kan du se hva vi har tilgjengelig på Envato Marketplace.
Dette er min første opplæring (vær forsiktig!), Så vær så snill å legge igjen tilbakemelding du måtte ha i kommentarene feed nedenfor. Jeg vil gjøre mitt beste for å svare på hvert spørsmål.



		
			
	   
	




Kode