Om forfatteren

Nick Schäferhoff er en gründer, online markedsfører og profesjonell blogger fra Tyskland. Når du ikke bygger nettsteder, lager innhold eller hjelper klientene hans … Mer om NickN

Jeg liker å tenke på WordPress som inngangsmedikamentet for webutvikling. Mange mennesker som kommer i gang med å bruke plattformen, leter først bare etter en komfortabel (og gratis) måte å lage et enkelt nettsted, ofte ved hjelp av en WordPress-side byggeplugin. Som om «Jeg skal bare prøve det en gang.»

Imidlertid stopper ikke en god del brukere der. I stedet blir de hekta. Kom med flere ideer. Eksperiment. Prøv nye plugins. Oppdag Firebug. Boom. Snart er det ingen vei tilbake. Høres det ut som historien din? Som WordPress-bruker er det bare naturlig å ønske mer og mer kontroll over nettstedet ditt. For å kreve tilpasset design, tilpasset funksjonalitet, tilpasset alt.

Videre lesing på SmashingMag:

• Hvordan lage og tilpasse et WordPress-barnetema
• Bygning En tilpasset arkivside for WordPress
• Tilpassing av WordPress-arkiver

Heldigvis er WordPress bygget for akkurat det. Den fleksible strukturen og den delte arkitekturen gjør at alle kan endre praktisk talt hva som helst på nettstedet.

Blant de viktigste verktøyene i søken etter fullstendig nettstedskontroll er sidemaler. De lar brukerne endre nettsteds design og funksjonalitet dramatisk. Vil du ha en tilpasset overskrift for forsiden din? Ferdig. Et ekstra sidefelt bare for bloggsiden din? Ikke noe problem. En unik 404-feilside? Være. Min. Gjest.

Hvis du vil vite hvordan WordPress-sidemaler kan hjelpe deg med å oppnå det, kan du lese videre. Men først litt bakgrunnsinformasjon.

Malfiler i WordPress

Hva snakker vi om når vi snakker om maler i sammenheng med WordPress? Kortversjonen er at maler er filer som forteller WordPress hvordan de skal vise forskjellige typer innhold.

Den litt lengre versjonen: Hver gang noen sender en forespørsel om å se en del av nettstedet ditt, vil WordPress-plattformen finne ut hvilket innhold de vil se og hvordan den spesifikke delen av nettstedet ditt skal gjengis.

For sistnevnte vil WordPress prøve å bruke den mest passende malfilen som finnes i temaet ditt. Hvilken avgjøres på grunnlag av en bestemt rekkefølge, WordPress malhierarkiet. Du kan se hvordan dette ser ut på skjermbildet nedenfor eller i denne interaktive versjonen.

Malhierarkiet er en liste over malfiler WordPress er kjent med som er rangert for å bestemme hvilken filen har forrang over en annen.

Du kan tenke på den som et beslutningstreet. Når WordPress prøver å bestemme hvordan en bestemt side skal vises, jobber den seg ned i malhierarkiet til den finner den første malfilen som passer til den forespurte siden. Hvis for eksempel noen prøvde å få tilgang til adressen http://yoursite.com/category/news, ville WordPress se etter riktig malfil i denne rekkefølgen:

Nederst i hierarkiet er indeks .php. Den vil bli brukt til å vise innhold som ikke har en mer spesifikk malfil knyttet til navnet. Hvis en malfil ligger høyere i hierarkiet, vil WordPress automatisk bruke den filen for å vise det aktuelle innholdet.

Sidemaler og deres bruk

For sider er standardmalen er vanligvis det passende navnet page.php. Med mindre det er en mer spesifikk malfil tilgjengelig (for eksempel archive.php for en arkivside), vil WordPress bruke page.php til å gjengi innholdet på alle sidene på nettstedet ditt.

Imidlertid, i mange tilfeller det kan være nødvendig å endre design, utseende, følelse eller funksjonalitet til individuelle deler av nettstedet ditt. Det er her sidemaler spiller inn.Tilpassede sidemaler lar deg individualisere hvilken som helst del av WordPress-nettstedet ditt uten å påvirke resten av det.

Du har kanskje allerede sett dette på jobben. For eksempel har mange WordPress-temaer i dag muligheten til å endre siden til full bredde, legge til et ekstra sidefelt eller bytte sidefeltets plassering. Hvis det er tilfelle for deg, ble det sannsynligvis gjort gjennom malfiler. Det er flere måter å oppnå dette på, og vi vil gå over dem senere.

Først et ord med forsiktighet: siden det å arbeide med maler innebærer redigering og endring av filer i det aktive temaet, er det alltid bra ideen om å gå med et barnetema når du lager slike tilpasninger. På den måten risikerer du ikke at endringene blir overskrevet når foreldretemaet ditt blir oppdatert.

Slik tilpasser du en side i WordPress

Det er tre grunnleggende måter å bruke tilpasset på sidemaler i WordPress: legge til betingede uttalelser til en eksisterende mal; lage spesifikke sidemaler som rangerer høyere i hierarkiet; og direkte tildele maler til bestemte sider. Vi tar en titt på hver av disse etter hverandre.

Bruk av betingede tagger i standardmaler

En enkel måte å gjøre sidespesifikke endringer på er å legge til WordPress’s mange betingede tagger til en malen som allerede er i bruk. Som navnet antyder, brukes disse kodene til å lage funksjoner som bare utføres hvis en bestemt betingelse er oppfylt. I sammenheng med sidemaler vil dette være noe i retning av «Bare utfør handling X på side Y.»

Vanligvis vil du legge til betingede koder i temaets page.php-fil (med mindre, av selvfølgelig vil du tilpasse en annen del av nettstedet ditt. De gjør det mulig å gjøre endringer begrenset til hjemmesiden, forsiden, bloggsiden eller andre sider på nettstedet.

Her er noen ofte brukte betingede koder:

For eksempel, når den legges til page.php i stedet for standard get_header(); -koden, vil følgende kode laste inn en egendefinert topptekstfil kalt header -shop.php når du viser siden http://yoursite.com/products.

Et godt brukstilfelle for dette vil være hvis du ha en butikk på nettstedet ditt, og du må vise et annet topptekstbilde eller en tilpasset meny på butikksiden. Du kan deretter legge til disse tilpasningene i header-shop.php, og den vil vises på riktig sted.

Imidlertid er betingede tagger ikke li parret til en side. Du kan komme med flere uttalelser på en slik måte:

I dette andre eksemplet vil to forhold endre oppførselen til forskjellige sider på nettstedet ditt. I tillegg til å laste inn den nevnte butikkspesifikke topptekstfilen, vil den nå også laste inn en header-about.php på en side med ID-en 42. For alle andre sider gjelder standard topptekstfil.

For å lære mer om bruk av betingede koder, anbefales følgende ressurser sterkt:

• WordPress Codex: Betingede koder
• ThemeLab: The Ultimate Guide to WordPress Conditional Tags

Opprette sidespesifikke filer i WordPress-hierarkiet

Betingede koder er en flott måte å introdusere mindre endringer i sidemalene dine. Selvfølgelig kan du også opprette større tilpasninger ved å bruke mange betingede uttalelser etter hverandre. Jeg synes dette er en veldig tungvint løsning, og vil i stedet velge bestemte malfiler.

En måte å gjøre dette på er å utnytte WordPress malhierarkiet. Som vi har sett, vil hierarkiet krysse en liste over mulige malfiler og velge den første den kan finne som passer. For sider ser hierarkiet slik ut:

• Tilpasset sidemal
• side- {slug} .php
• side- {id} .php
• page.php
• index.php

For det første er egendefinerte sidemaler som er tilordnet direkte til en bestemt side. Hvis en av disse eksisterer, vil WordPress bruke den uansett hvilke andre malfiler som er tilstede. Vi vil snakke litt mer om egendefinerte sidemaler.

Etter det vil WordPress se etter en sidemal som inkluderer sneglen til den aktuelle siden. Hvis du for eksempel inkluderer en fil med navnet page-about.php i temafilene dine, vil WordPress bruke denne filen til å vise siden Om eller hvilken side du finner under http://www.yoursite.com/about .

Alternativt kan du oppnå det samme ved å målrette sidens ID. Så hvis den samme siden har en ID på 5, vil WordPress bruke malfilen side-5.php før page.php hvis den eksisterer; det vil si bare hvis det ikke er en sidemal med høyere rangering tilgjengelig.

(BTW, du kan finne ut ID-en for hver side ved å sveve over tittelen under «Alle sider» i WordPress-ryggen din ID. vises i lenken som vises i nettleseren din.)

Tilordne egendefinerte sidemaler

I tillegg til å tilby maler i et skjema som WordPress vil bruke automatisk, er det også mulig å tilordne tilpassede maler manuelt til bestemte sider.Som du kan se fra malhierarkiet, vil disse trumfe alle andre malfiler som er tilstede i temamappen.

Akkurat som å lage sidespesifikke maler for WordPress-hierarkiet, krever dette at du oppgir en malfil og kobler den deretter til hvilken side du vil bruke den til. Sistnevnte kan gjøres på to forskjellige måter du kanskje allerede er kjent med. Bare hvis du ikke er det, kan du gjøre det her.

1. Tilordne egendefinerte sidemaler fra WordPress Editor

I WordPress-editoren finner du et alternativfelt kalt ‘Page Attributter’ med en rullegardinmeny under ‘Mal’.

Ved å klikke på den får du en liste over tilgjengelige sidemaler på WordPress-nettstedet ditt. Velg den du ønsker, lagre eller oppdater siden din, så er du ferdig.

2. Angi en egendefinert mal via hurtigredigering

Det samme kan også oppnås uten å gå inn i WordPress-redigereren. Gå til ‘Alle sider’ og hold markøren over et hvilket som helst element i listen der. En meny vil bli synlig som inkluderer ‘Hurtigredigering’ -elementet.

Klikk på den for å redigere sideinnstillingene direkte fra listen. Du vil se den samme rullegardinmenyen for å velge en annen sidemal. Velg en, oppdater siden og du er ferdig.

Ikke så vanskelig, ikke sant? Men hva om du ikke har en tilpasset sidemal ennå? Hvordan lager du det slik at nettstedet ditt ser ut akkurat slik du vil ha det? Ikke bekymre deg, det er det neste delen handler om.

En trinnvis guide for å lage egendefinerte sidemaler

Å sette sammen tilpassede malfiler for sidene dine er ikke så vanskelig, men her er noen detaljer du må ta hensyn til. La oss derfor gå gjennom prosessen bit for bit.

1. Finn standardmalen

En god måte er å starte med å kopiere malen som for øyeblikket brukes av siden du vil endre. Det er lettere å endre eksisterende kode enn å skrive en hel side fra bunnen av. I de fleste tilfeller vil dette være page.php-filen.

(Hvis du ikke vet hvordan du skal finne ut hvilken malfil som brukes på siden du vil redigere, vil pluginet Hva filen vil være nyttig.)

Jeg vil bruke Twenty Twelve-temaet for demonstrasjon. Slik ser standardmalen ut:

Som du kan se, er det ikke noe fancy her: de vanlige kallene på topptekst og bunntekst, og sløyfen i midten. Den aktuelle siden ser slik ut:

2. Kopier og gi nytt navn til malfilen

Etter å ha identifisert standardmalfilen, er det på tide å lage en kopi. Vi vil bruke den dupliserte filen for å gjøre de ønskede endringene på siden vår. For det må vi også gi den nytt navn. Kan ikke ha to filer med samme navn, det er bare forvirrende for alle.

Du kan gi filen et hvilket som helst navn du liker så lenge den ikke starter med noen av de reserverte temafilnavnene. . Så ikke navngi det page-something.php eller noe annet som kan få WordPress til å tro at det er en dedikert malfil.

Det er fornuftig å bruke et navn som enkelt identifiserer hva denne malfilen brukes. for, for eksempel my-custom-template.php. I mitt tilfelle vil jeg gå med tilpasset full bredde.php.

3. Tilpass malfilhodet

Deretter må vi fortelle WordPress at denne nye filen er en tilpasset sidemal. For det må vi justere filoverskriften på følgende måte:

Navnet under ‘Malnavn’ er det som vises under ‘Side Attributter ‘i WordPress-redigereren. Sørg for å justere det til malnavnet.

4. Tilpass koden

Nå er det på tide å komme til kjøttet og potetene på sidemalen: koden. I mitt eksempel vil jeg bare fjerne sidefeltet fra demosiden min.

Dette er relativt enkelt, ettersom alt jeg trenger å gjøre er å fjerne <?php get_sidebar(); ?> fra siden mal siden det er det som kaller sidefeltet. Som en konsekvens ender den tilpassede malen min slik ut:

5. Last opp sidemalen

Etter at jeg har lagret den tilpassede filen, er det nå på tide å laste den opp til nettstedet mitt. Egendefinerte sidemaler kan lagres flere steder for å bli gjenkjent av WordPress:

• Mappen for det aktive (underordnede) temaet ditt
• Mappen for ditt hovedoverordnede tema
• En undermappe i en av disse

Jeg liker personlig å lage en mappe med navnet page_templates i barnetemaet mitt og plassere eventuelle tilpassede maler der inne.Jeg synes dette er lettest å beholde oversikten over filene og tilpasningene mine.

6. Aktiver malen

Som et siste trinn må du aktivere sidemalen. Som nevnt tidligere gjøres dette under Sideattributter → Maler i WordPress-redigereren. Lagre, se siden og voilà! Her er min tilpassede side uten sidefelt:

Er det ikke så vanskelig? Ikke bekymre deg, du vil fort få taket på det. For å gi deg et bedre inntrykk av hva du skal bruke disse sidemalene til, vil jeg demonstrere flere brukstilfeller (inkludert koden) for resten av artikkelen.

Fem forskjellige måter å bruke sidemaler

Som allerede nevnt kan sidemaler brukes til mange forskjellige formål. Du kan tilpasse stort sett alt på hvilken som helst side med deres hjelp. Bare fantasien (og kodingsevnen din) står i veien for deg.

1. Sidemal med full bredde

Den første saken vi skal se på er en avansert versjon av demomalen vi opprettet ovenfor. Der oppe fjernet vi allerede sidefeltet ved å slette <?php get_sidebar(); ?> fra koden. Som du har sett fra skjermbildet, resulterer dette imidlertid ikke i en fullbreddsoppsett siden innholdsseksjonen forblir til venstre.

For å løse dette må vi håndtere CSS, spesielt denne delen:

width attributtet begrenser elementet som holder innholdet vårt til 65,1042% av tilgjengelig plass . Vi ønsker å øke dette.

Hvis vi bare endrer det til 100%, vil dette imidlertid påvirke alle andre sider på nettstedet vårt, som er langt fra det vi ønsker. Derfor er den første bestillingen her å endre den primære div s klasse i vår tilpassede mal til noe annet, som class="site-content-fullwidth”. Resultatet:

Nå kan vi justere CSS for vår nye tilpassede klasse:

Som et resultat strekker innholdet nå alt veien over skjermen.

2. Dynamisk 404-feilside med widgetområder

Feilsiden 404 er der hver person lander som prøver å få tilgang til en side på nettstedet ditt som ikke eksisterer, det være seg gjennom en skrivefeil, en feil lenke eller fordi sides permalink har endret seg.

Til tross for at det å miste en 404 ikke liker alle på Internett, er 404-feilsiden ikke så viktig hvis du driver et nettsted. Innholdet kan være den avgjørende faktoren for om noen umiddelbart forlater nettstedet ditt eller holder fast og sjekker ut det andre innholdet ditt.

Koding av en tilpasset feilside fra bunnen av er tungvint, spesielt hvis du ikke er trygg på dine evner. . En bedre måte er å bygge widgetområder i malen din, slik at du fleksibelt kan endre det som vises der ved å dra og slippe.

For dette vil vi hente og redigere 404.php-filen som leveres med Twenty Twelve ( malhierarki, husker du?). Før vi endrer noe der, oppretter vi imidlertid en ny widget ved å sette inn følgende kode i funksjonene våre. Php-fil:

Dette skal vise den nyopprettede widgeten i WordPress-back-enden din. For å sikre at det faktisk dukker opp på nettstedet, må du legge til følgende kodelinje på 404-siden din på riktig sted:

Etter når du laster opp malen til nettstedet mitt, er det på tide å fylle ut det nye widgetområdet mitt:

Hvis jeg nå tar en titt på 404-feilsiden, vises de nyopprettede widgetene mine der:

3. Sidemal for visning av egendefinerte innleggstyper

Egendefinerte innleggstyper er en fin måte å introdusere innhold som har sitt eget sett med datapunkter, design og andre tilpasninger. En favorittbrukssak for disse innleggstypene er anmeldelse som bøker og filmer. I vårt tilfelle ønsker vi å lage en sidemal som viser porteføljeartikler.

Vi må først lage vår tilpassede posttype (CPT). Dette kan gjøres manuelt eller via plugin. Ett plugin-alternativ jeg helhjertet kan anbefale er Typer. Det lar deg enkelt lage egendefinerte innleggstyper og egendefinerte felt.

Installer og aktiver typer, legg til et tilpasset innlegg, sørg for at sluggen er «portefølje», tilpasse alle felt du trenger (for eksempel å legge til et utvalgt bilde ), juster eventuelle andre alternativer og lagre.

Nå som vi har vår porteføljetype, vil vi at den skal vises på nettstedet vårt. Det første vi skal gjøre er å lage den aktuelle siden.Vær oppmerksom på at hvis du valgte ‘portefølje’ som sneglen til CPT-en din, kan siden ikke ha samme sluggen. Jeg gikk med clients-portfolio og la også til noen eksempler på tekst.

Etter å ha lagt til noen få artikler i delen «portefølje», vil vi at de skal vises på siden vår rett under sideinnhold.

For å oppnå dette vil vi igjen bruke et derivat av page.php-filen. Kopier det, kall det portfolio-template.php og endre overskriften til dette:

I dette tilfellet må vi imidlertid gjøre noen endringer i den opprinnelige malen. Når du tar en titt på koden til page.php, vil du se at den kaller en annen malfil i midten, kalt content-page.php (der det står <?php get_template_part( ‘content’, ‘page’ ); ?>). I den filen finner vi følgende kode:

Som du ser, er det her at sidetittel og innhold heter. Siden vi absolutt vil ha dem på porteføljesiden vår, må vi kopiere de nødvendige delene av denne malen til page.php-filen. Resultatet ser slik ut:

For å få porteføljeartiklene til siden vår, vil vi legge til følgende kode rett under the_content() samtalen.

Dette får CPT til å vises på siden:

Jeg er sikker på at vi alle er enige om at det ser mindre enn fantastisk ut, så noe styling er i orden.

Mye bedre, synes du ikke?

Og her er hele koden for porteføljesidemalen:

4. Bidragsytereside med avatarbilder

Neste side i vår bruk av sidemaler er en bidragsytereside. Vi ønsker å sette opp en liste over forfattere på nettstedet vårt, inkludert deres bilder og antall innlegg de har publisert under deres navn. Sluttresultatet vil se slik ut:

Vi starter igjen med hybridfilen vår fra før og legger til koden for listen over bidragsytere til den. Men hva om du ikke vet hvordan du skal lage noe slikt? Ingen bekymringer, du kan klare deg med intelligent stjeling.

Ser du, tjuefjorten standardtema leveres som standard med en bidragsyter. Du finner malen i sidemalermappen med navnet contributors.php.

Når du ser på filen, finner du imidlertid bare følgende samtale der inne: twentyfourteen_list_authors();. Heldigvis, som en ivrig WordPress-bruker, konkluderer du nå med at dette sannsynligvis refererer til en funksjon i Twenty Fourteen’s function.php-fil, og du ville ha rett.

Fra det vi finner der, er den delen som interesserer oss. dette:

Vi vil igjen legge det til under kallet for the_content() med følgende resultat:

Nå for en liten styling:

Og det skal være det. Takk tjue fjorten!

5. Tilpasset arkivside

Twenty Twelve kommer med sin egen mal for arkivsider. Det vil for eksempel hoppe til handling når du prøver å se alle tidligere innlegg fra en bestemt kategori.

Jeg vil imidlertid ha noe litt mer som det Problogger har gjort: en side som lar folk oppdage flere innholdet på nettstedet mitt på flere forskjellige måter. Dette er igjen gjort med en sidemal.

For å holde oss til den blandede malen vår fra før, vil vi legge til følgende under the_content() samtalen:

Pluss litt styling for søkefeltet:

Og resultatet skal se litt slik ut:

For fullførings skyld er her hele filen:

Ikke glem å tildele den til en side!

WordPress-sidemaler i et nøtteskall

På vei til å mestre WordPress, er det viktig å lære å bruke sidemaler. De kan gjøre tilpasningen av nettstedet ditt veldig, veldig enkelt, og lar deg tildele unik funksjonalitet og design til så mange eller få sider du vil. Fra å legge til widgetområder til å vise egendefinerte innleggstyper til å vise en liste over nettstedets bidragsytere – mulighetene er praktisk talt uendelige.

Enten du bruker betingede koder, utnytter WordPress malhierarkiet eller oppretter sidespesifikke malfiler, er helt opp til deg og hva du prøver å oppnå. Begynn smått og arbeid deg opp til mer kompliserte ting. Det vil ikke ta lang tid før alle deler av WordPress-nettstedet ditt vil svare på alle samtalene dine.