En guide til mulighederne for udvikling af WordPress-temaer

admin 0 Comments Articles

En guide til mulighederne for udvikling af WordPress-temaer

  • 14 min læsning
  • WordPress, teknikker (WP)
  • Sparet til offline læsning
  • Del på Twitter, LinkedIn
På den nylige WordCamp Edinburgh deltog jeg i en paneldiskussion om WordPress-temaudvikling og de muligheder, der er tilgængelige for udviklere, når de bygger temaer. Den overordnede konklusion fra sessionen var, at der ikke findes et svar, der passer til alle, og at den bedste metode afhænger af webstedets behov og udviklerens evner.

På den nylige WordCamp Edinburgh deltog jeg i en paneldiskussion om WordPress-temaudvikling og de muligheder, der er tilgængelige for udviklere, når de bygger temaer. Den overordnede konklusion fra sessionen var, at der ikke findes et svar, der passer til alle, og at den bedste metode afhænger af webstedets behov og udviklerens evner.

Men hvis du starter med at bygge WordPress-temaer eller ønsker at udvikle et system til at bygge dem mere effektivt eller robust, hvordan beslutter du så, hvilken tilgang du skal vælge? I denne artikel vil vi kort beskrive, hvordan WordPress-temaer fungerer, og derefter se på nogle af de forskellige tilgange til udvikling af dem med tips om, hvilken tilgang der måske passer bedst til dit websted og dine omstændigheder.

Yderligere læsning på SmashingMag:

  • Migreringen af et websted til WordPress er nemmere end du tror
  • Using WP_Query In WordPress
  • Schedule Events Using WordPress Cron
  • Hvordan forbedrer man implementeringen af WordPress-websteder

Hvordan fungerer et WordPress-tema?

I WordPress styrer temaer et websted og bestemmer, hvad det indeholder, hvordan det opfører sig, og hvordan det ser ud. Temaet er adskilt fra indholdet, som opbevares i databasen. Det betyder, at du kan bruge det samme tema på mere end ét websted, uanset indholdet på webstederne – hvilket du måske allerede gør, hvis du har downloadet temaer fra WordPress’ temarepositorium.

Et tema består af en række skabelonfiler, der alle er gemt i mappen theme, som du finder i wp-content/themes i din WordPress-installation. Hvert WordPress-tema skal indeholde mindst to filer: index.php og style.css. Indeksfilen definerer, hvilket indhold der vises af temaet, og stilarket (du gættede det) stilarter det, samt indeholder metainformationer om temaet, som WordPress bruger til at få temaet til at fungere korrekt.

Egentlig har de fleste temaer et par ekstra filer:

  • header.php Indeholder <head>-afsnittet for hver side samt overskriften for hjemmesidens design.
  • sidebar.php Indeholder sidebaren, herunder eventuelle widget-områder.
  • footer.php Indeholder sidefoden, som måske eller måske ikke har widget-områder.
  • functions.php Indeholder eventuelle funktioner, der er specifikke for dit tema. Du kan finde oplysninger om funktionsfilen i WordPress Codex.
  • Filer, der indeholder løkken, som kalder indholdet fra databasen. Afhængigt af hvilken del af webstedet du arbejder i, kan det være en af flere filer:
    • page.php Til statiske sider
    • single.php Til individuelle indlæg (blogindlæg, f.eks.)
    • index.php, archive.php, category.php osv. For sider, der viser et antal indlæg

Yoast har skrevet en god visuel fremstilling af, hvordan temafiler fungerer, og WordPress Codex indeholder en detaljeret beskrivelse af temaer, herunder detaljer om de forskellige filer, og hvornår de kaldes.

Jeg vil dog hævde, at stilarket er den vigtigste fil, og den, du sandsynligvis vil begynde med, fordi et “undertema” (mere om det om lidt) har brug for et stilark, selv om det ikke indeholder andet. Stilarket indeholder vigtige metainformationer om selve temaet, som kommenteres ud før alle stilarter. Nedenfor er de indledende kommentarer for WordPress’ nuværende standardtema, Twenty Eleven:

Disse oplysninger er kommenteret ud, så de ikke læses af browsere, men de læses af WordPress, og de giver oplysninger til alle, der bruger dit tema. Vi vender tilbage til dette om kort tid, når vi ser på, hvordan du opretter et undertema.

Nu da du ved, hvordan temaer fungerer, er det næste skridt at finde ud af, hvordan du skal gå til at oprette dit eget. Før du går i gang, vil det være værd at overveje nogle punkter, der vil hjælpe dig med at træffe denne beslutning.

Hvad skal du overveje, når du udvikler et WordPress-tema?

Hvor du beslutter dig for, hvilken tilgang du skal tage til at udvikle dit tema, skal du identificere dine begrænsninger. Disse omfatter sandsynligvis følgende:

  • Tid. Hvor meget tid har du til at udvikle dit tema, eller til at lære at gøre det?
  • Budget. Dette hænger sammen med tid, men har også at gøre med, om du har råd til at betale for et premium-tema eller et tema framework.
  • Kapacitet. Hvor fortrolig er du med temaudvikling, med CSS og PHP, og med hvordan temaer fungerer? Hvis du ikke er bekendt, hvor meget ønsker du så at lære?
  • Fremtidssikring. Skal dit tema opdateres i fremtiden? Vil andre udviklere arbejde på det ud over dig? Hvis ja, så skal din tilgang være så robust som muligt.
  • Gentagelse. Kan du forestille dig, at du vil udvikle en række lignende temaer i fremtiden? Hvis ja, skal din tilgang gøre det muligt at genbruge kode.

Vi vil tage disse overvejelser op igen i slutningen af artiklen og identificere, hvilke udviklingsmuligheder der er mest velegnede til forskellige situationer.

Temaudvikling: Dine muligheder

Der findes nogle få muligheder for at udvikle dit tema eller dine temaer, og det vil være værd at undersøge dem, før du smøger ærmerne op og begynder at kode. Hvis du vælger den rigtige fremgangsmåde, vil det resultere i et bedre tema med mere robust kode, og det vil minimere mængden af revisioner, som du skal foretage senere. Det vil også hjælpe dig til at bygge temaet mere effektivt.

De muligheder, vi vil se på her, er:

  • Byg et tema op fra bunden,
  • Rediger (eller “hacker”, vil nogle måske sige) et eksisterende tema,
  • Brug tematilpasningsværktøjet til at justere et eksisterende tema,
  • Opret et undertema for at foretage ændringer i et eksisterende tema,
  • Opret dit eget overordnede tema (ved hjælp af en af ovenstående fremgangsmåder) og undertemaer,
  • Brug en temaramme.

1. Byg et tema fra bunden

Denne fremgangsmåde er den vanskeligste, hvis du er uerfaren. Men hvis du er en erfaren WordPress-udvikler, vil den give dig den største kontrol. Det kan være den mest hensigtsmæssige metode, hvis du importerer HTML fra et eksisterende statisk websted, der opgraderes til WordPress uden andre ændringer.

Det er dog en god idé, når du overfører et websted til WordPress, at foretage en gennemgang af det som en del af processen, i stedet for blot at kopiere koden over, når du overfører det. Hvis du kopierer et statisk websted, skal du holde nøje øje med din kode for at sikre, at den er ren, effektiv og gyldig.

2. Rediger (eller hacke) et eksisterende tema

Det er sådan, de fleste mennesker starter med udvikling af WordPress-temaer: Når de arbejder på et tema, som de har downloadet, ser de, at noget styling ikke er helt rigtigt, så de dykker ned i stilarket og foretager nogle redigeringer. Det er fristende at starte på denne måde, fordi det føles som en hurtig og nem måde at opnå den ønskede effekt på. Men der er nogle farer:

  • Hvis du nogensinde skifter tema, vil den opdatering tilsidesætte alle de ændringer, du har foretaget.
  • Det er nemt at tilføje gentagende kode ved at tilføje nye stilarter længere nede i stilarket, som tilsidesætter stilarter højere oppe, i stedet for at fjerne det, du ikke har brug for.
  • Hjemmesiden kan ende med at have meget mere kode, end den har brug for.
  • Hvis temaet ikke er godt kodet eller kommenteret til at begynde med, kan du rode dig ud i et større rod og finde ud af, at du skal lave en masse rettelser.

Det kan dog godt fungere at hacke et tema, hvis du går ind i det med åbne øjne. Det kan være en mulighed, hvis følgende er sandt:

  • Det tema, du bruger, er velskrevet, gyldigt og kommenteret (f.eks, standard WP-temaet, Twenty Eleven);
  • De ændringer, du foretager, er så drastiske, at du ikke ville have behov for at opdatere det oprindelige tema;
  • Du forstår PHP og CSS, der er indeholdt i temaet, og er komfortabel med at redigere, tilføje og fjerne det uden at ødelægge temaet.

Hvis du beslutter dig for at gå denne vej, er det vigtigt at gemme en sikkerhedskopi af det oprindelige tema og kommentere din kode grundigt. Jeg vil også råde dig til at kommentere enhver kode, som du ikke vil have, og derefter teste for at se, hvad der sker, før du sletter noget.

3. Brug tematilpasseren til at justere et eksisterende tema

Tematilpasseren blev frigivet med WordPress 3.4. Den giver dig mulighed for at tilpasse et tema uden at skrive nogen kode, blot ved hjælp af en WYSIWYG-grænseflade. Afhængigt af hvor godt tilpasningsværktøjet er skrevet ind i selve temaet, kan du bruge det til at ændre billeder, titler, farver og endda layoutet. Forvent at se flere temaer med tilpasningsværktøjet integreret i dem.

Brug af WordPress-tematilpasningsværktøjet med Twenty Ten-temaet.

Tematilpasningsværktøjet gemmer dine ændringer i en separat fil, ikke i temaets stilark, så der vil være gentagende kode.

For flere oplysninger kan du se Otto on WordPress’ videotutorial eller guide til integration af tematilpasseren i dine egne temaer.

4. Opret et undertema for at foretage ændringer i et eksisterende tema

Denne fremgangsmåde svarer til at redigere et eksisterende tema, men er mere sikker. Den består i at oprette et helt nyt tema, der er defineret som et undertema til det eksisterende tema. Hvis dit undertema ikke har en bestemt fil, men det overordnede tema har det, vil det bruge den. Hvis undertemaet har en fil, vil denne fil tilsidesætte den tilsvarende fil i det overordnede tema. Lad os se på et eksempel:

Filer til modertemaet Filer til børnetemaet
  • style.css
  • page.php
  • single.php
  • archive.php
  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php
  • header.php

I ovenstående eksempel, WordPress ville bruge følgende filer til at levere indhold:

  • style.css fra undertemaet,
  • page.php fra undertemaet,
  • single.php fra det overordnede tema,
  • archive.php fra det overordnede tema,
  • header.php fra undertemaet,
  • sidebar.php fra det overordnede tema,
  • footer.php fra det overordnede tema.

Du kan se, hvordan dette kan være nyttigt, hvis du vil bruge det meste af det overordnede temas markup, men ændre indholdet af overskriften (f.eks. tilføje dit logo og adresseoplysninger) og eventuelle statiske sider (måske ændre den måde, metadata vises på).

Den ene fil, som alle undertemaer skal have for at fungere, er stilarket, fordi det indeholder de oplysninger, som WordPress skal bruge for at få undertemaet til at fungere korrekt. For at gøre dette skal du tilføje noget ekstra kode til stilarkets kommentarer:

Kan du få øje på de ekstra linjer? Den første er:

Template: twentyeleven

Denne linje fortæller WordPress, at temaet er et undertema, og at Twenty Eleven er dets overordnede tema. Du skal tilføje navnet på det overordnede temas mappe, ikke det fulde navn.

Og den anden:

@import url("../twentyeleven/style.css");

Denne linje fortæller browseren, at den skal indlæse det overordnede temas stilark, før den gengiver stilarter i det aktuelle stilark. På den måde slipper du for at duplikere de stilarter i det overordnede tema, som du vil bruge.

Så, sådan fungerer underordnede temaer. Men hvornår er dette den bedste fremgangsmåde? Jeg vil foreslå at bruge den i følgende tilfælde:

  • Du har allerede et tema (der skal bruges som forældetema), der indeholder det meste af det, du har brug for til dit tema;
  • Du vil gerne kunne opdatere dit forældretema (f.eks. når der udgives temaopdateringer efter en WordPress-opdatering);
  • Du ønsker ikke at blive bundet i knuder af at hacke et eksisterende tema;
  • Du ønsker mulighed for at vende tilbage til det overordnede tema eller for at udvikle et andet lignende tema i fremtiden (hvilket ville være et nyt undertema);
  • Du udvikler en række lignende websteder med nogle mindre stilistiske eller indholdsmæssige forskelle (jeg gjorde dette, da jeg byggede lignende websteder for en kunde, der ejede flere virksomheder);
  • Forskellen mellem dit under- og overordnet tema er ikke så stor, at du skal starte forfra, eller ikke så stor, at dit underordnede temas kode vil tilsidesætte alt, der påvirkes af opdateringer til det overordnede tema.

5. Opret dit eget overordnede tema (ved hjælp af en af ovenstående fremgangsmåder) og underordnede temaer

Den situation, jeg lige hentydede til, hvor du bygger et sæt websteder for en kunde med flere virksomheder, er en lejlighed, hvor du måske opretter et overordnet tema og derefter opretter underordnede temaer til de enkelte websteder. Du vil måske også gøre dette i følgende tilfælde:

  • Du planlægger at udvikle mange websteder med lignende indhold og markup i fremtiden (ikke kun for én kunde);
  • Du administrerer mange websteder og skal dykke ned i hvert af dem regelmæssigt, og du ønsker, at koden skal være meget ens;
  • Du har det godt med at oprette dit eget overordnede tema og redigere koden for at skabe et robust overordnede tema, der fungerer godt med underordnede temaer.

Hvis du beslutter dig for denne fremgangsmåde, kan du enten bygge dit overordnede tema fra bunden eller hacke et eksisterende tema. På de fleste af de websteder, jeg bygger, bruger jeg et overordnet tema, som jeg udviklede ved at hacke Twenty Ten-temaet, det tidligere standardtema for WordPress. Jeg lavede så mange ændringer, at jeg ikke længere havde brug for at aktivere opdateringer til det oprindelige tema. Jeg var også fortrolig med koden i temaet og ønskede at foretage betydelige ændringer i det, idet jeg reducerede koden, omstrukturerede den, så den passede til den måde, jeg arbejder på, og fjernede kode, som jeg vidste, at jeg ikke ville få brug for.

Du kan også oprette et undertema baseret på et eksisterende tema og derefter oprette undertemaer til det – i praksis børnebørn af det oprindelige tema. Fordelen ved dette er, at du ikke overskriver koden i det oprindelige tema, samtidig med at du har fleksibilitet til at foretage ændringer i undertemaet, som vil blive videregivet til barnebarnstemaerne. Der er dog en advarsel her: med tre temaer i brug, er det nemt at blive forvirret over, hvad der sker, og du kan ende med en masse unødvendig kode.

6. Brug en tema-ramme

Den sidste mulighed er en mulighed, der bruges af tusindvis af WordPress-brugere og -udviklere. Der findes en række temaframeworks, som du kan bruge som en slags overordnet tema, men med meget mere funktionalitet og i nogle tilfælde med mulighed for at foretage ret fancy layout- og stilændringer uden at skrive en linje kode. Nogle frameworks er gratis, mens andre er premiumframeworks. De er allerede blevet gennemgået i detaljer på Smashing Magazine, men de vigtigste er anført nedenfor.

Gratis WordPress frameworks:

  • Theme Hybrid indeholder et utal af kroge og widget-områder, der hjælper dig med at tilpasse dine temaer. Det har også nogle børnetemaer til rådighed. Rammerne og børnetemaerne er alle gratis, men hvis du vil have support, skal du betale for det ved at registrere dig på Theme Hybrid’s hjemmeside. Det kan være ret kompliceret at arbejde med det, medmindre du forstår PHP eller bruger et af undertemaerne.
  • Wonderflux er baseret på et fleksibelt gitter-system. Det har muligheder for at justere layout og stilarter uden at skulle skrive kode, og det indeholder en masse kroge og widgetområder. Det er gratis at bruge og understøttes via WordPress-forummet.
  • Carrington er det mest etablerede af de gratis frameworks, og det har en række børnetemaer.
  • Thematic er udviklet af Automattic, som selv udvikler WordPress. Det indeholder en række hooks, filtre og widget-områder.
Premium WordPress frameworks:
  • Dets udviklere beskriver Genesis som “branchens standard”. Det leveres med et stort udvalg af underordnede temaer, muligheder for at tilpasse uden at skrive kode og SEO-funktioner.
  • Thesis er det andet store premium-rammeværk, og det giver dig også mulighed for at tilpasse underordnede temaer uden at skrive kode.

Summarum: Valg af tilgang

Sandsynligvis har du efter at have læst dette fået en idé om, hvilken tilgang du skal gå efter. Men hvis du stadig klør dig i hovedet, får du her en oversigt over, hvornår hver metode er hensigtsmæssig:

Angangsvinkel Tid Kost Kapacitet Fremtid Fremtid-proofing Repetition
Bygger fra bunden Høj Lav Lav High Low Low
Hack eksisterende tema Low Low Low Medium Low Low
Brug tema-tilpasseren Low Low Low Low Low Low
Opret undertema baseret på eksisterende overordnet tema Medium Low Medium High High
Opret overordnet tema High Low High High High
Theme framework (gratis) Medium Low Medium High High
Theme framework (premium) Medium Høj Lav til medium Høj Høj Høj

Alt i alt, hver tilgang har sin plads; det afhænger bare af hjemmesiden og af dig. Det vigtige er at vælge en tilgang efter at have afvejet fordele og ulemper – ikke bare at kaste sig ud i det og prøve sig frem, blot for at opdage, at du har ødelagt et tema, eller at du har skabt en masse omarbejde for dig selv.

Og som altid, uanset hvad du beslutter dig for, skal du ikke glemme at gemme sikkerhedskopier!

(al)

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.