Sådan tilpasses dit WordPress-tema (5 trin for trin)

Hvis du har installeret et WordPress-tema, men det ikke er helt rigtigt for dig, kan du føle dig frustreret. Der er masser af muligheder til rådighed for dig at tilpasse dine WordPress-temaer.

Udfordringen er at finde den rigtige måde at gøre det på.

I dette indlæg styrer jeg dig gennem muligheder for at tilpasse dit WordPress-tema, hjælpe med at beslutte, hvilken der passer dig og vise dig, hvordan du gør det sikkert og effektivt.

Foretrækker du at se vores videoversion? Klik på play nedenfor:

Valg til at tilpasse et tema

Før vi dykker ind og begynder at foretage ændringer i dit tema, lønner det sig at forstå, hvad mulighederne er, da de passer til forskellige situationer.

Her er en oversigt over de tilgængelige muligheder:

• Hvis du vil tilføje funktionalitet til dit tema, skal du installere et plugin.
• Brug Tilpasning i dine WordPress-administrationsskærme til at tilpasse skrifttyper, farver og måske også layout afhængigt af dit tema.
• Hvis du arbejder med et sidebygningstema, skal du bruge dets funktioner til at tilpasse designet på dit websted.
• Hvis du har installeret et rammetema, skal du bruge et af de tilgængelige underordnede temaer til at tilpasse dit websted sammen med alle mulige tilpasningsmuligheder, der er levedygtige, ejere administrationsskærmene.
• Hvis dit tema er specifikt for dit websted, og du har det godt med at redigere det, skal du redigere temaets kode direkte.
• Hvis du vil redigere koden for et tredjeparts tema, skal du oprette et underordnet tema.

Hvis du vil redigere koden , har du en række valgmuligheder til rådighed for dig, fra at bruge blokeditoren til Customizer, lige til redigering af filerne. Vi ser på dem alle i dette indlæg, men lad os starte med den enkleste mulighed: installation af et plugin.

Har du virkelig brug for at tilpasse dit tema?

Nogle gange behøver du ikke ‘ Du behøver overhovedet ikke at tilpasse dit tema: I stedet skal du installere et plugin.

Temaer dikterer designet af dit websted: hvordan det ser ud og hvordan det viser indhold. Plugins tilføjer ekstra funktionalitet.

Hvis de ændringer, du vil foretage, er fokuseret på funktionalitet snarere end design, kan du overveje at installere et plugin selv. Dette kan være et plugin, du skal skrive, et, du downloader fra plugin-biblioteket, eller et, du køber.

Hvis du finder ud af, at du vil redigere functions.php-filen i dit tema, så spørg dig selv:

Vil jeg beholde denne funktionalitet, hvis jeg skifter tema i fremtiden?

Hvis svaret er ja, skal koden findes i et plugin, ikke dit tema.

Gode eksempler på, hvad du vil bruge et plugin i stedet for et tema, herunder tilføjelse af widgets, registrering af tilpassede posttyper og taksonomier , at oprette brugerdefinerede felter og tilføje ekstra funktioner som en butik eller SEO-forbedringer.

Tilpasning af dit WordPress-tema via WordPress-administratorskærme

Hvis de ændringer, du vil foretage, er designfokuserede og relativt simpelt, kan du muligvis gøre dem via admin-skærmbillederne. Customizer giver dig en række muligheder for at tilpasse dit tema: hvad der er tilgængeligt for dig, afhænger af dit tema. Og du kan muligvis se noget, der hedder Editoren i menuen Udseende. Undgå dette af grunde, som jeg snart vil beskrive.

Tilpasning af dit tema via tilpasningen

Den nemmeste måde at tilpasse dit WordPress-tema på er at bruge WordPress Customizer.

Du får adgang til dette på en af to måder:

• Når du ser dit websted (når du er logget ind), skal du klikke på Tilpas-linket i adminlinjen øverst på skærmen.
• På admin-skærmbillederne skal du klikke på Udseende > Tilpas.

Dette fører dig til Customizer.

I skærmbilledet ovenfor har jeg installeret et gratis tema kaldet ColorMag, som har mange muligheder for tilpasning. Det er tilføjet sektioner til Customizer for designfunktioner, herunder et headerbillede, sociale medier, kategorifarver og en fane Designmuligheder, der fører dig til endnu flere faner, hvor du kan foretage ændringer i layoutet og designet på dit websted.

Forskellige temaer har forskellige muligheder for tilpasning, men nyere temaer ser ud til at tilføje flere og flere af dem hele tiden. Hvis du finder et tema, som du kan lide, men som ikke er helt rigtigt for dig, kan du måske finde ud af, at tilpasning af det giver dig nøjagtigt det design og layout, du har brug for.

Temaditoren (og hvorfor ikke bruges det)

På dine administrationsskærme bemærker du muligvis en indstilling kaldet Theme Editor, som du får adgang til via Udseende > Theme Editor.

Dette giver dig adgang til filerne i dit tema , hvilket betyder at du kan redigere dem direkte.

Gør det ikke.

Selvom du er fortrolig med at skrive CSS eller PHP, er det en meget dårlig idé at redigere filerne i dit tema af denne grund af to grunde:

• Hvis du har købte eller downloadede et tredjeparts tema, vil eventuelle ændringer, du foretager, gå tabt næste gang du opdaterer temaet (og du bør holde dit tema opdateret af sikkerhedsmæssige årsager).
• Mere vigtigt, hvis du laver en ændring, der bryder dit websted, spores det ikke, og den tidligere version af filen ændres ikke. Du kan uigenkaldeligt bryde siden.

Hvis du vil redigere koden i dit tema, skal du gøre det ved hjælp af en kodeditor (se de bedste gratis HTML-redaktører), og du bør ikke Du kan ikke redigere filerne på dit live-site, før du har testet det på et iscenesat websted. Hvis du har brug for at redigere et tredjeparts tema, skal du gøre det via et underordnet tema. Mere om begge disse senere i dette indlæg.

WordPress ved, hvor usikkert det er at bruge temaeditoren: det giver dig endda en advarsel, når du prøver at få adgang til det.

Så tag WordPress’s råd: ikke Brug temareditoren!

Brug af sidebygere og rammer til at tilpasse dit WordPress-tema

En stor del af WordPress-temaer har tilpasningsmuligheder, hvilket betyder at du kan foretage ændringer i design og layout via Customizer.

Men nogle temaer tager dette videre og er designet til at blive udvidet og markant tilpasset. Disse temaer kaldes temarammer.

En anden mulighed er at bruge et plugin, der lader dig designe dit websted ved hjælp af en brugervenlig grænseflade: disse kaldes sidebygere.

Brug af en side Builder til at tilpasse dit tema

Page Builder-plugins er designet til at gøre det nemt for dig at indstille designet på dit websted ved hjælp af en grænseflade, der giver dig mulighed for at se, hvad du får.

Du installerer et sidebygger-plugin med et kompatibelt tema og bruger derefter de muligheder, det giver dig til at designe dit websted nøjagtigt, som du vil have det.

En af de mest kendte sidebygere er Elementor, men du kan finde ud af om nogle alternativer i vores samling af sidebygere.

Sidebygere giver dig mulighed for at redigere dine indlæg og sider med en træk-og-slip-grænseflade, hvilket betyder at du kan se, hvordan dit indhold ser ud og kan gøre hver side loo unik.

Nedenfor bruger jeg Elementor-sidebyggeren med Hello Elementor-temaet, som er kompatibelt med det.

Sideudviklere giver dig masser af fleksibilitet med layoutet og designet på dine sider. Hvis du er vant til en webstedsbygger som Wix, kan de hjælpe med at lette overgangen til WordPress. Og hvis du foretrækker en WYSIWYG-grænseflade til dit WordPress-indhold, kan de hjælpe dig med at designe dine sider hurtigt.

Brug af en temaramme til at tilpasse dit tema

Et alternativ til sideudviklere er tema rammer. Disse er suiter med temaer designet til at arbejde sammen. Der er et overordnet tema, som er rammen, og et valg af børnetemaer, som du kan bruge til at tilpasse hovedtemaet og få det til at se ud, som du vil.

Et eksempel på temarammer er Divi, som har tilpasningsmuligheder, der giver dig mulighed for at tilpasse designet af dit barns tema yderligere, inklusive en træk og slip-grænseflade svarende til sidebyggernes.

Redigering af dit WordPress-temas kode

Hvis du er fortrolig med at redigere CSS og / eller PHP, kan du rediger koden i dit tema for at tilpasse dit tema.

Dette giver dig den største grad af kontrol.

Hvis du redigerer dit eget tema, der er specifikt for dit websted og blev udviklet specielt til det, så kan du redigere temaet direkte. Men hvis du arbejder med et tredjeparts tema og ønsker at redigere det, skal du oprette et børnetema for at undgå at miste dine ændringer næste gang du opdaterer temaet.

Redigering af temafiler

Det første trin til redigering af dit WordPress-tema er at forstå, hvilke temafiler der styrer hvad, og hvilke du skal redigere.

Stilarket

Hvert WordPress-tema har en stilark, kaldet style.css. Den indeholder al koden til styling af dit websted: layout, skrifttyper, farver og mere.

Hvis du f.eks. Vil ændre farverne i dit tema, foretager du redigeringer af stilarket. Hvis du vil tilføje en ny skrifttype, skal du bruge stilarket til at anvende den på forskellige elementer såsom brødteksten og overskrifterne.

Vær opmærksom, når du redigerer stilarket: specificitet betyder, at koden til et element ikke altid kommer fra det sted, hvor du tror det er.Elementer arver styling fra andre elementer, der er over dem i sidens hierarki, medmindre du tilføjer styling, der er specifik for det nederste element.

For at finde ud af, hvad CSS påvirker hvilke elementer på siden, kan du Brug inspektøren i din browser til at se CSS (Chrome DevTools i dette eksempel):

Du kan derefter bruge dette til at skrive ny CSS, der er målrettet mod individuelle elementer eller en række elementer eller klasser på siden.

Hvis al denne snak om elementer, klasser og specificitet er ny for dig, kan du undgå direkte redigering af dit temas CSS. I det mindste indtil du har lært mere om CSS, og hvordan det fungerer.

Funktionsfilen

En anden fil, som stort set ethvert tema vil have, er funktionsfilen (functions.php) . Dette er den fil, der får en masse ting til at fungere i dit tema. Inde i den kan du finde kode til at registrere temafunktioner som fremhævede billeder, widgets og mere.

Hvis du er fristet til at tilføje funktionel kode til dit tema, er det her, du vil tilføje den. Men pas på: i de fleste tilfælde skal du virkelig skrive et plugin. Spørg dig selv:

Vil jeg beholde denne funktionalitet, hvis jeg skifter tema i fremtiden?

Hvis svaret er ja, skal du skrive et plugin i stedet for at tilføje kode til funktionsfilen. Plugins behøver ikke at være store: der er intet, der forhindrer dig i at oprette en til et par kodelinjer.

Funktionsfilen er alle skrevet i PHP, så du bliver nødt til at være fortrolig med at. Kopier ikke blindt den kode, du finder via en Google-søgning: tag dig tid til at finde ud af, hvad den kode gør, og forstå den. På den måde er det mindre sandsynligt, at du tilføjer kode, der ikke er så god som den burde være.

Temaskabelonfilerne

De fleste af filerne i et tema er temaskabelonfiler . Dette er filer, der bestemmer, hvilket indhold WordPress udsender på en given side og vælges i henhold til skabelonhierarkiet.

Hvis du vil ændre den måde, hvorpå indhold udføres på en given posttype, side eller arkiv , skal du enten redigere en af disse filer eller oprette en ny.

Sig f.eks., at dit tema har en archive.php-fil, der bruges til at udgive arkivsider til kategorier og tags. Du vil foretage ændringer i den måde, tags udføres på. Så du opretter en fil kaldet “tag.php”, som ville være baseret på archive.php med dine tweaks.

Igen skal du omhyggelig redigere filerne: de kan bryde dit websted. Test altid på en lokal installation ved hjælp af et værktøj som DevKinsta og / eller iscenesætningssted først.

Uanset hvilken af disse filtyper du har brug for at redigere, skal du gøre det korrekt. Læs afsnittet nedenfor om bedste praksis for at finde ud af, hvordan du redigerer din kode på en måde, der ikke bryder dit websted og ikke medfører sikkerhedshovedpine.

Tilpasning af et tema fra tredjepart med et børnetema

Hvis det tema, du er kører på dit websted er fra en tredjepart, og du vil redigere koden, skal du oprette et underordnet tema.

Dette skyldes, at hvis du redigerer temaet direkte og derefter opdaterer det ( som du skal), mister du alle de ændringer, du har foretaget.

Oprettelse af et underordnet tema består af fire trin:

1. Opret en ny mappe i wp-content / temaer.
2. I den mappe skal du oprette et typografiark. I det typografiark, tlf l WordPress, at dette er et underordnet tema for dit eksisterende tema.
3. Tilføj kopier af de filer, du vil redigere, til underordnet tema, og rediger dem der.
4. Aktiver barnets tema i dit websted.

WordPress bruger altid en fil fra underordnet tema til at output indhold, medmindre der er en fil højere i hierarkiet i overordnet tema. Hvis der er to versioner af den samme fil, bruger den den fra underordnet tema. Dette betyder, at din nye fil i barnetemaet vil tilsidesætte den fra det overordnede tema.

Bedste fremgangsmåder til tilpasning af WordPress-temaer

Så du planlægger at tilpasse dit tema. Inden du går videre og foretager ændringerne, skal du følge disse tip for at sikre, at du gør det sikkert, og at du ikke bryder dit websted, gør det sårbart over for angreb eller mister din kode.

Hvis det er muligt , Tilpas uden at redigere kode

Hvis du kan foretage dine tilpasninger via Customizer eller andre steder i admin-skærmbillederne, er dette sikrere end at redigere koden.

Rediger kun koden, hvis du har fortrolig med CSS (for stilarket) og PHP (for andre temafiler), og du ved, hvordan du gør det sikkert.

Brug et lokalt udviklingswebsted til at foretage dine ændringer

Hvis du redigerer koden i dit tema eller opretter et underordnet tema for at foretage ændringer, skal du udføre udviklingsarbejdet på en lokal installation af WordPress med dit tema installeret og dit indhold kopieret fra dit live site.

På denne måde har du et spejl på dit live site for at teste dine ændringer. Arbejde på et lokalt sted vil ikke have nogen indvirkning på dit live-websted og kan være hurtigere.

Selvom du bruger Customizer, kan det være nyttigt at bruge en lokal version af dit websted til test som du kan offentliggøre dine ændringer og teste dem uden at påvirke livewebstedet.

Når du har testet ændringerne til dit tema, kan du uploade det til dit livewebsted, eller endnu bedre, du kan teste det på en mellemstationer og derefter skubbe det til live.

Brug versionskontrol

Når du foretager ændringer i dit tema, skal du bruge versionskontrol til at spore dine ændringer.

Når det er enklest, betyder det at ændre versionsnummeret på temaet og opbevare kopier af begge versioner. Men hvis din gong skal udføre versionskontrol korrekt, skal du bruge en tjeneste som GitHub til at spore dine ændringer.

På denne måde, hvis en ændring forårsager problemer, kan du nemt rulle den tilbage uden at skulle lave manuel redigeringer.

Versionskontrol er endnu mere nyttigt, hvis du arbejder som en del af et team, da du kan se, hvad andre medlemmer laver. Sørg for at læse vores git vs Github-vejledning.

Brug et iscenesætningssted til at teste dine ændringer

Hvis du har adgang til et iscenesættelsessted (såsom Kinstas gratis iscenesættelse, der følger med alle planer), det er den sikreste måde at gå videre på, før du aktiverer den nye version af dit tema (eller det nye underordnede tema) på dit live-websted.

Dette skyldes, at ethvert lokalt websted vil have nogle forskelle fra dit live-websted: det er på en anden server (en oprettet på din lokale maskine), kører den muligvis en anden version af PHP eller et hvilket som helst af de andre værktøjer, der kører dit websted.

Lav en kopi af dit live-site på din iscenesættelsesserver, og upload og aktiver derefter din nye side tema. Test dit websted grundigt for at være sikker på, at alt fungerer, og så kan du skubbe dine ændringer til dit live-site.

Gør dit tema lydhør

Eventuelle ændringer, du skal foretage i dit tema, skal være arbejde på både mobil og desktop.

Med flere og flere mennesker, der får adgang til internettet via mobiltelefonen og Mobile-first-indekset fra Google, er det sandsynligvis vigtigere nu for dit tema at arbejde på mobil end det gør på skrivebordet. Så alle ændringer, du foretager i dit tema, skal være mobilvenlige eller helst først mobile, hvor det er relevant.

Dette gælder hovedsageligt for ændringer, du foretager i din styling eller layout: Kontroller, at det nye layout fungerer på mobil, og at du har tilføjet medieforespørgsler, så layoutet tilpasser sig forskellige skærmstørrelser.

Hvis dit tema ikke reagerer, påvirker det din søgemaskineplacering og konverteringsfrekvens negativt.

Hvis du ikke har adgang til mange forskellige mobile enheder at teste på, kan du bruge et værktøj som BrowserStack til at se, hvordan dit websted ser ud på forskellige enheder. Du kan også bruge udviklerværktøjerne i din browser og de responsive visninger i Customizer.

Sørg for, at dine tilpasninger ikke påvirker tilgængelighed

Enhver ændring af dit tema skal også være tilgængelig for brugere med handicap eller sensoriske handicap .

Dette handler ikke kun om at sikre, at dit websted fungerer på skærmlæsere: andre overvejelser såsom farveskemaer og skriftstørrelser er vigtige for et stort antal mennesker.

Hvis ændringerne du laver til dit tema er at gøre farverne lysere eller teksten mindre, tænk igen: Dette kan gøre det vanskeligt for folk at læse eller interagere med dit websted.

Før du foretager ændringer live, Brug en tilgængelighedskontrol til at teste dit websted og sørg for, at det ikke ekskluderer folk.

Hold dig til WordPress-kodningsstandarder

Hvis du redigerer koden i dit tema eller opretter en chi ld tema, skal du sørge for, at din kode er i overensstemmelse med WordPress-kodningsstandarderne.

Disse standarder findes for at sikre ensartet og kvalitet af koden og for at undgå kode, der er et rod. Der er standarder for PHP, CSS og JavaScript, så tag dig tid til at kontrollere dem, der er relevante for dig, og sørg for at følge dem.

Hvis dit eksisterende WordPress-tema er godt kodet, og du skriver nye kode på en måde, der er i overensstemmelse med det, er du på vej til at sikre, at din kode er kompatibel. Sørg for at tilføje kommentarer til de ændringer, du foretager i temaet, så du eller andre ved, hvad du gjorde, når du kommer tilbage til at arbejde på koden i fremtiden.Du tror måske, du ikke vil glemme det, men efter et par måneder er gået, er det overraskende nemt at glemme, hvorfor du redigerede en kodelinje.

Har du brug for at tilpasse dit #WordPress-tema for at gøre det unikt? Der er masser af muligheder! Vælg den rigtige til dig i vores dybdegående guide! 👚👔Klik for at tweet

Oversigt

Tilpasning af dit WordPress-tema er ikke så svært. Nogle gange er det et simpelt tilfælde at bruge Customizer til at foretage ændringer i skrifttyper eller farver (sørg for at læse vores dybdegående guide om WordPress-skrifttyper). Andre gange skal du oprette et nyt underordnet tema for at tilføje en ny skabelonfil til et tema.

De muligheder, du har til at tilpasse dit tema, inkluderer brug af et plugin eller Customizer, redigering af WordPress-temaets kode direkte eller oprette et underordnet tema.

Identificer den rigtige mulighed for dig, og foretag dine tilpasninger sikkert, alt sammen uden at bryde dit websted.