Om forfatteren

Nick Schäferhoff er en iværksætter, online marketingmedarbejder og professionel blogger fra Tyskland. Når man ikke bygger hjemmesider, opretter indhold eller hjælper sine kunder … Mere om Nick↬

Jeg kan godt lide at tænke på WordPress som gateway-medikamentet til webudvikling. Mange mennesker, der kommer i gang med at bruge platformen, leder oprindeligt kun efter en behagelig (og gratis) måde at oprette en simpel webside på, ofte ved hjælp af en WordPress-side bygherre-plugin. Som om “Jeg skal bare prøve det en gang.”

Imidlertid stopper en god del af brugerne ikke der. I stedet bliver de hooked. Kom med flere ideer. Eksperiment. Prøv nye plugins. Oplev Firebug. Boom. Snart er der ingen vej tilbage. Lyder det som din historie? Som WordPress-bruger er det kun naturligt at ønske mere og mere kontrol over dit websted. For at kræve brugerdefineret design, brugerdefineret funktionalitet, tilpasset alt.

Yderligere læsning om SmashingMag:

• Sådan oprettes og tilpasses et WordPress-barnemne
• Bygning En brugerdefineret arkivside til WordPress
• Tilpasning af WordPress-arkiver

Heldigvis er WordPress bygget til netop det. Dens fleksible struktur og opdelte arkitektur gør det muligt for enhver at ændre stort set alt på deres websted.

Blandt de vigtigste værktøjer i søgen efter komplet webstedskontrol er sideskabeloner. De giver brugerne mulighed for dramatisk at ændre deres websides design og funktionalitet. Vil du have et tilpasset overskrift til din forside? Færdig. Et ekstra sidebjælke kun til din blogside? Intet problem. En unik 404-fejlside? Være. Min. Gæst.

Hvis du vil vide, hvordan WordPress-sideskabeloner kan hjælpe dig med at nå det, skal du læse videre. Men først lidt baggrundsinformation.

Skabelonfiler i WordPress

Hvad taler vi om, når vi taler om skabeloner i forbindelse med WordPress? Den korte version er, at skabeloner er filer, der fortæller WordPress, hvordan de skal vise forskellige typer indhold.

Den lidt længere version: hver gang nogen sender en anmodning om at få vist en del af dit websted, finder WordPress-platformen ud hvilket indhold de vil se, og hvordan den specifikke del af dit websted skal gengives.

For sidstnævnte forsøger WordPress at bruge den mest passende skabelonfil, der findes inden for dit tema. Hvilken afgøres på baggrund af en bestemt rækkefølge, WordPress-skabelonhierarkiet. Du kan se, hvordan dette ser ud i skærmbilledet nedenfor eller i denne interaktive version.

Skabelonhierarkiet er en liste over skabelonfiler, som WordPress er fortrolig med, der er rangeret for at bestemme, hvilken filen har forrang for en anden.

Du kan tænke på den som et beslutningstræ. Når WordPress forsøger at beslutte, hvordan en given side skal vises, arbejder den sig ned i skabelonhierarkiet, indtil den finder den første skabelonfil, der passer til den ønskede side. For eksempel, hvis nogen forsøgte at få adgang til adressen http://yoursite.com/category/news, ville WordPress søge efter den rigtige skabelonfil i denne rækkefølge:

Nederst i hierarkiet er der indeks .php. Det bruges til at vise alt indhold, der ikke har en mere specifik skabelonfil knyttet til sit navn. Hvis en skabelonfil rangerer højere i hierarkiet, bruger WordPress automatisk filen for at vise det pågældende indhold.

Sideskabeloner og deres anvendelse

For sider er standardskabelonen. er normalt det passende navn page.php. Medmindre der er en mere specifik skabelonfil tilgængelig (såsom archive.php til en arkivside), bruger WordPress page.php til at gengive indholdet på alle sider på dit websted.

I mange tilfælde det kan være nødvendigt at ændre design, udseende, fornemmelse eller funktionalitet på de enkelte dele af dit websted. Det er her sideskabeloner spiller ind.Tilpassede sideskabeloner giver dig mulighed for at individualisere enhver del af dit WordPress-websted uden at påvirke resten af det.

Du har muligvis allerede set dette på arbejde. For eksempel har mange WordPress-temaer i dag en mulighed for at ændre din side til fuld bredde, tilføje et andet sidebjælke eller skifte sidebjælkens placering. Hvis det er tilfældet for din, blev det sandsynligvis gjort gennem skabelonfiler. Der er flere måder at opnå dette på, og vi går over dem senere.

Først dog et forsigtighedsord: da arbejde med skabeloner indebærer redigering og ændring af filer i dit aktive tema, er det altid et godt idé om at gå med et børnetema, når man foretager denne type tilpasninger. På den måde løber du ikke risikoen for, at dine ændringer overskrives, når dit overordnede tema opdateres.

Sådan tilpasses enhver side i WordPress

Der er tre grundlæggende måder at bruge brugerdefineret på sideskabeloner i WordPress: tilføjelse af betingede udsagn til en eksisterende skabelon; oprettelse af specifikke sideskabeloner, der rangerer højere i hierarkiet; og direkte tildeling af skabeloner til bestemte sider. Vi vil se på hver af disse igen.

Brug af betingede tags i standardskabeloner

En nem måde at foretage sidespecifikke ændringer på er at tilføje WordPress’s mange betingede tags til en skabelon, der allerede er i brug. Som navnet antyder, bruges disse tags til at oprette funktioner, der kun udføres, hvis en bestemt betingelse er opfyldt. I sammenhæng med sideskabeloner vil dette være noget i retning af “Udfør kun handling X på side Y.”

Du vil typisk tilføje betingede tags til dit temas page.php-fil (medmindre, af selvfølgelig vil du tilpasse en anden del af dit websted). De giver dig mulighed for at foretage ændringer begrænset til startsiden, forsiden, blogsiden eller enhver anden side på dit websted.

Her er nogle ofte anvendte betingede tags:

For eksempel når den føjes til din page.php i stedet for standard get_header(); -tag, indlæses følgende kode en brugerdefineret headerfil med navnet header -shop.php når siden vises http://yoursite.com/products.

En god brugssag til dette ville være, hvis du have en butik på dit websted, og du skal vise et andet headerbillede eller en tilpasset menu på butiksiden. Du kan derefter tilføje disse tilpasninger i header-shop.php, og det vises på det rette sted.

Betingede tags er dog ikke li mited til en side. Du kan afgive flere udsagn i træk som sådan:

I dette andet eksempel ændrer to betingelser adfærd for forskellige sider på dit websted. Udover at indlæse den førnævnte butiksspecifikke headerfil, vil den nu også indlæse en header-about.php på en side med ID på 42. For alle andre sider gælder standard headerfilen.

For at lære mere om brugen af betingede tags anbefales følgende ressourcer stærkt:

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

Oprettelse af sidespecifikke filer i WordPress-hierarkiet

Betingede tags er en fantastisk måde at introducere mindre ændringer i dine sideskabeloner på. Selvfølgelig kan du også oprette større tilpasninger ved at bruge mange betingede udsagn den ene efter den anden. Jeg finder dette dog en meget besværlig løsning og vil i stedet vælge udpegede skabelonfiler.

En måde at gøre dette på er at udnytte WordPress-skabelonhierarkiet. Som vi har set, vil hierarkiet krydse en liste over mulige skabelonfiler og vælge den første, den kan finde, der passer. For sider ser hierarkiet sådan ud:

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

For det første er der brugerdefinerede sideskabeloner, som er direkte tildelt en bestemt side. Hvis en af disse findes, bruger WordPress det, uanset hvilke andre skabelonfiler der er til stede. Vi vil snakke lidt mere om brugerdefinerede sideskabeloner.

Herefter vil WordPress søge efter en sideskabelon, der inkluderer slug på den pågældende side. Hvis du f.eks. Inkluderer en fil med navnet page-about.php i dine temafiler, bruger WordPress denne fil til at vise din ‘Om’ -side, eller hvilken side der kan findes under http://www.yoursite.com/about .

Alternativt kan du opnå det samme ved at målrette din sides ID. Så hvis den samme side har et ID på 5, bruger WordPress skabelonfilen side-5.php før page.php, hvis den findes; det vil sige kun hvis der ikke er en højere sideskabelon tilgængelig.

(BTW, du kan finde ud af ID’et for hver side ved at svæve over titlen under ‘Alle sider’ i din WordPress-ryg -end. ID’et vises i det link, der vises i din browser.)

Tildeling af brugerdefinerede sideskabeloner

Udover at levere skabeloner i en form, som WordPress automatisk bruger, er det også muligt at manuelt tildele tilpassede skabeloner til bestemte sider.Som du kan se fra skabelonhierarkiet, vil disse trumfe enhver anden skabelonfil, der er til stede i temamappen.

Ligesom at oprette sidespecifikke skabeloner til WordPress-hierarkiet kræver dette, at du angiver en skabelonfil og link det derefter til hvilken side du vil bruge det til. Sidstnævnte kan gøres på to forskellige måder, som du måske allerede er bekendt med. Bare hvis du ikke er det, skal du gøre det her.

1. Tildeling af brugerdefinerede sideskabeloner fra WordPress Editor

I WordPress-editoren finder du et valgfelt kaldet ‘Page Attributter’ med en rullemenu under ‘Skabelon’.

Ved at klikke på den får du en liste over tilgængelige sideskabeloner på dit WordPress-websted. Vælg den, du ønsker, gem eller opdater din side, så er du færdig.

2. Indstilling af en brugerdefineret skabelon via hurtig redigering

Det samme kan også opnås uden at gå ind i WordPress-editoren. Gå til ‘Alle sider’ og hold markøren over ethvert element på listen der. En menu bliver synlig, der inkluderer elementet ‘Hurtig redigering’.

Klik på det for at redigere sideindstillingerne direkte fra listen. Du vil se den samme rullemenu til valg af en anden sideskabelon. Vælg en, opdater siden, og du er færdig.

Ikke så hårdt, ikke? Men hvad nu hvis du endnu ikke har en tilpasset sideskabelon? Hvordan opretter du det, så dit websted ser nøjagtigt ud, som du vil have det? Bare rolig, det er det, den næste del handler om.

En trinvis vejledning til oprettelse af brugerdefinerede sideskabeloner

At sammensætte tilpassede skabelonfiler til dine sider er ikke så hårdt, men her er et par detaljer, du skal være opmærksom på. Lad os derfor gå igennem processen bit-for-bit.

1. Find standardskabelonen

En god måde er at starte med at kopiere den skabelon, der i øjeblikket bruges af den side, du vil ændre. Det er lettere at ændre eksisterende kode end at skrive en hel side fra bunden. I de fleste tilfælde vil dette være filen page.php.

(Hvis du ikke ved, hvordan du finder ud af, hvilken skabelonfil der bruges på den side, du vil redigere, er pluginet Hvad filen vil vise sig nyttigt.)

Jeg vil bruge Twenty Twelve-temaet til demonstration. Her er, hvordan dens standard sideskabelon ser ud:

Som du kan se, er der ikke noget for fancy her: de sædvanlige opfordrer til sidehoved og sidefod og sløjfen i midten. Den pågældende side ser sådan ud:

2. Kopier og omdøb skabelonfilen

Efter identifikation af standardskabelonfilen er det tid til at lave en kopi. Vi bruger den duplikerede fil for at foretage de ønskede ændringer på vores side. Til det bliver vi også nødt til at omdøbe det. Kan ikke have to filer med samme navn, det er bare forvirrende for alle.

Du er fri til at give filen ethvert navn, du kan lide, så længe den ikke starter med nogen af de reserverede temafilnavne . Så navngiv det ikke page-something.php eller noget andet, der får WordPress til at tro, at det er en dedikeret skabelonfil.

Det giver mening at bruge et navn, der let identificerer, hvad denne skabelonfil bruges. for, såsom my-custom-template.php. I mit tilfælde vil jeg gå med custom-full-width.php.

3. Tilpas skabelonfilhovedet

Derefter skal vi fortælle WordPress, at denne nye fil er en brugerdefineret sideskabelon. Til det bliver vi nødt til at justere filoverskriften på følgende måde:

Navnet under ‘Skabelonnavn’ er det, der vises under ‘Side Attributter ‘i WordPress-editoren. Sørg for at justere det til dit skabelonnavn.

4. Tilpas koden

Nu er det tid til at komme til kød og kartofler på sideskabelonen: koden. I mit eksempel vil jeg bare fjerne sidebjælken fra min demoside.

Dette er relativt let, da alt hvad jeg skal gøre er at fjerne <?php get_sidebar(); ?> fra min sideskabelon, da det er det, der kalder sidebjælken. Som en konsekvens ender min tilpassede skabelon med at se sådan ud:

5. Upload sideskabelonen

Efter at have gemt min tilpassede fil, er det nu tid til at uploade den til min hjemmeside. Tilpassede sideskabeloner kan gemmes flere steder for at blive genkendt af WordPress:

• Dit aktive (underordnede) temas mappe
• Mappen til dit hovedforældretema
• En undermappe inden for en af disse

Jeg vil personligt gerne oprette en mappe med navnet page_templates i mit underordnede tema og placere eventuelle tilpassede skabeloner derinde.Jeg finder det nemmest at bevare en oversigt over mine filer og tilpasninger.

6. Aktivér skabelonen

Som et sidste trin skal du aktivere sideskabelonen. Som tidligere nævnt gøres dette under Sideattributter → Skabeloner i WordPress-editoren. Gem, se siden og voilà! Her er min tilpassede side uden sidebjælke:

Ikke så hårdt, er det? Bare rolig, du får hurtigt fat på det. For at give dig et bedre indtryk af, hvad du skal bruge disse sideskabeloner til, vil jeg demonstrere yderligere brugssager (inklusive koden) for den resterende del af artiklen.

Fem forskellige måder at bruge sideskabeloner på

Som allerede nævnt kan sideskabeloner bruges til mange forskellige formål. Du kan tilpasse stort set alt på enhver side med deres hjælp. Kun din fantasi (og kodningsevne) står i vejen for dig.

1. Sideskabelon med fuld bredde

Den første sag, vi vil se på, er en avanceret version af den demo-skabelon, vi oprettede ovenfor. Deroppe fjernede vi allerede sidebjælken ved at slette <?php get_sidebar(); ?> fra koden. Som du har set fra skærmbilledet, resulterer dette dog ikke i et layout i fuld bredde, da indholdssektionen forbliver til venstre.

For at løse dette er vi nødt til at håndtere CSS, især denne del:

width -attributten begrænser det element, der holder vores indhold til 65,1042% af den tilgængelige plads . Vi ønsker at øge dette.

Hvis vi bare ændrer det til 100%, vil dette dog påvirke alle andre sider på vores side, hvilket er langt fra det, vi ønsker. Derfor er den første ordre her at ændre den primære div s klasse i vores brugerdefinerede skabelon til noget andet, som class="site-content-fullwidth”. Resultatet:

Nu kan vi justere CSS til vores nye brugerdefinerede klasse:

Som et resultat strækker indholdet nu alt hele vejen over skærmen.

2. Dynamisk 404-fejlside med widgetområder

404-fejlsiden er, hvor enhver person lander, der forsøger at få adgang til en side på dit websted, der ikke findes, det være sig ved en tastefejl, et defekt link eller fordi sides permalink er ændret.

På trods af at det ikke kan lide at få en 404 på internettet, er 404-fejlsiden ikke meget vigtig, hvis du kører et websted. Dets indhold kan være den afgørende faktor for, om nogen straks forlader dit websted eller holder fast og tjekker dit andet indhold.

Kodning af en tilpasset fejlside fra bunden er besværlig, især hvis du ikke er sikker på dine evner . En bedre måde er at opbygge widgetområder i din skabelon, så du fleksibelt kan ændre det, der vises der, ved at trække og slippe.

Til dette vil vi hente og redigere 404.php-filen, der leveres med Twenty Twelve ( skabelonhierarki, husk?). Men inden vi ændrer noget der, opretter vi først en ny widget ved at indsætte følgende kode i vores funktioner. Php-fil:

Dette skal vise den nyoprettede widget i din WordPress-back-end. For at sikre, at det rent faktisk dukker op på webstedet, skal du tilføje følgende linje kode til din 404-side på det rette sted:

Efter uploade skabelonen til mit websted, er det tid til at udfylde mit nye widgetområde:

Hvis jeg nu ser på 404-fejlsiden, vises mine nyoprettede widgets der:

3. Sideskabelon til visning af brugerdefinerede indlægstyper

Tilpassede indlægstyper er en fantastisk måde at introducere indhold, der har sit eget sæt datapunkter, design og andre tilpasninger. Et foretrukket brugstilfælde for disse indlægstyper er anmeldelser, såsom bøger og film. I vores tilfælde ønsker vi at oprette en sideskabelon, der viser porteføljeposter.

Vi skal først oprette vores tilpassede posttype (CPT). Dette kan gøres manuelt eller via plugin. En plugin-indstilling, jeg helhjertet kan anbefale, er Typer. Det giver dig mulighed for nemt at oprette brugerdefinerede posttyper og brugerdefinerede felter.

Installer og aktiver typer, tilføj et brugerdefineret indlæg, sørg for, at dets slug er ‘portefølje’, tilpasse alle felter, du har brug for (såsom at tilføje et fremhævet billede ), juster eventuelle andre indstillinger og gem.

Nu, når vi har vores porteføljetype, ønsker vi, at den vises på vores side. Den første ting, vi gør, er at oprette den pågældende side.Vær opmærksom på, at hvis du vælger ‘portefølje’ som slug af din CPT, kan siden ikke have den samme slug. Jeg gik med min clients-portfolio og tilføjede også nogle eksempler på tekst.

Efter at have tilføjet et par emner i afsnittet ‘portefølje’ efter indlæg, vil vi have dem til at dukke op på vores side lige under sideindhold.

For at opnå dette bruger vi igen et derivat af page.php-filen. Kopier det, kald det portfolio-template.php og skift overskriften til dette:

I dette tilfælde bliver vi dog nødt til at foretage et par ændringer i den oprindelige skabelon. Når du ser på koden til page.php, vil du se, at den kalder en anden skabelonfil i midten, der hedder content-page.php (hvor det står <?php get_template_part( ‘content’, ‘page’ ); ?>). I den fil finder vi følgende kode:

Som du kan se, er det her, som sidetitel og indhold kaldes. Da vi bestemt vil have dem på vores porteføljeside, bliver vi nødt til at kopiere de nødvendige dele af denne skabelon til vores page.php-fil. Resultatet ser sådan ud:

For at få porteføljeposterne på vores side vil vi tilføje følgende kode lige under the_content() opkaldet.

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

Jeg er sikker på, at vi alle er enige om, at det ser mindre end stjernernes ud, så noget styling er i orden.

Meget bedre, synes du ikke?

Og her er hele koden til porteføljesideskabelonen:

4. Side med bidragyder med avatarbilleder

Næste side i vores sideskabelon er en side med bidragydere. Vi ønsker at oprette en liste over forfattere på vores websted, herunder deres billeder og antallet af indlæg, de har offentliggjort under deres navn. Slutresultatet ser sådan ud:

Vi starter igen med vores hybridfil fra før og tilføjer koden til listen over bidragydere til den. Men hvad hvis du ikke ved, hvordan du opretter en sådan ting? Ingen bekymringer, du kan komme af med intelligent stjæling.

Ser du, standardtemaet for tyvefjorten leveres som standard med en side med bidragydere. Du kan finde dens skabelon i sideskabelonmappen med navnet contributors.php.

Når du ser på filen, finder du dog kun følgende opkald derinde: twentyfourteen_list_authors();. Heldigvis, som en ivrig WordPress-bruger, konkluderer du nu, at dette sandsynligvis henviser til en funktion i Twenty Fourteen’s function.php-fil, og du ville have ret.

Fra det vi finder derinde, er den del, der interesserer os, dette:

Vi tilføjer det igen under opkaldet til the_content() med følgende resultat:

Nu til en lille smule styling:

Og det skulle være det. Tak Twenty Fourteen!

5. Tilpasset arkivside

Twenty Twelve leveres med sin egen skabelon til arkivsider. Det springer f.eks. Til handling, når du forsøger at se alle tidligere indlæg fra en bestemt kategori.

Jeg vil dog have noget lidt mere som Problogger har gjort: en side, der lader folk opdage yderligere indhold på mit websted på flere forskellige måder. Dette gøres igen med en sideskabelon.

Hvis vi holder os til vores blandede skabelon fra før, vil vi tilføje følgende under the_content() -opkaldet:

Plus, en lille smule styling til søgefeltet:

Og resultatet skal se lidt sådan ud:

For afslutnings skyld er her hele filen:

Glem ikke at tildele den til en side!

WordPress-sideskabeloner i en nøddeskal

På din vej til at mestre WordPress er det vigtigt at lære at bruge sideskabeloner. De kan gøre tilpasning af dit websted meget, meget let og giver dig mulighed for at tildele unik funktionalitet og design til så mange eller få sider, som du ønsker. Fra tilføjelse af widgetområder til visning af brugerdefinerede posttyper til visning af en liste over dit websteds bidragydere – mulighederne er praktisk talt uendelige.

Uanset om du bruger betingede tags, udnytter WordPress-skabelonhierarkiet eller opretter sidespecifikke skabelonfiler, er det helt op til dig, og hvad du prøver at opnå. Start i det små og arbejd dig op til mere komplicerede ting. Det vil ikke vare længe, før alle dele af dit WordPress-websted besvarer alle dine opkald.