Slik tilpasser du WordPress-temaet ditt (5 trinn-for-trinn-måter)

Hvis du har installert et WordPress-tema, men det ikke er helt riktig for deg, kan du føle deg frustrert. Det er mange muligheter for å tilpasse WordPress-temaene dine.

Utfordringen er å finne den rette måten å gjøre det på.

I dette innlegget styrer jeg deg gjennom alternativer for å tilpasse WordPress-temaet ditt, hjelpe deg med å bestemme hvilken som passer best for deg og vise deg hvordan du gjør det trygt og effektivt.

Foretrekker du å se videoversjonen vår? Klikk på spill nedenfor:

Alternativer for å tilpasse et tema

Før vi dykker inn og begynner å gjøre endringer i temaet ditt, lønner det seg å forstå hva alternativene er, ettersom de passer til forskjellige situasjoner.

Her er en oversikt over alternativene som er tilgjengelige:

• Hvis du vil legge til funksjonalitet i temaet ditt, installerer du et plugin.
• Bruk Tilpass i WordPress-administrasjonsskjermene dine for å tilpasse skrifter, farger og kanskje layout også, avhengig av temaet ditt.
• Hvis du jobber med et sidebygger-tema, kan du bruke funksjonene til å tilpasse utformingen av nettstedet ditt.
• Hvis du har installert et rammetema, kan du bruke et av de tilgjengelige underordnede temaene til å tilpasse nettstedet ditt, sammen med eventuelle tilpasningsalternativer som er levedyktige, eier admin-skjermene. spesifikt for nettstedet ditt, og du er komfortabel med å gjøre det, kan du redigere temakoden direkte.
• Hvis du vil redigere koden til et tredjeparts tema, oppretter du et underordnet tema.

Hvis du vil redigere koden , har du en rekke alternativer tilgjengelig, fra bruk av blokkeredigereren til Tilpasning, til redigering av filene. Vi ser på dem alle i dette innlegget, men la oss starte med det enkleste alternativet: installere et plugin.

Trenger du virkelig å tilpasse temaet ditt?

Noen ganger trenger du ikke ‘ Du trenger ikke å tilpasse temaet ditt i det hele tatt: I stedet må du installere et plugin.

Temaer dikterer utformingen av nettstedet ditt: hvordan det ser ut og hvordan det viser innhold. Plugins legger til ekstra funksjonalitet.

Hvis endringene du vil gjøre er fokusert på funksjonalitet i stedet for design, bør du vurdere å installere et plugin selv. Dette kan være et plugin du trenger å skrive, en du laster ned fra plugin-katalogen, eller en du kjøper.

Hvis du finner ut at du vil redigere funksjons.php-filen i temaet, spør deg selv:

Vil jeg beholde denne funksjonaliteten hvis jeg bytter tema i fremtiden?

Hvis svaret er ja, bør koden gå i et plugin, ikke temaet ditt.

Gode eksempler på hva du vil bruke et plugin i stedet for et tema, inkludert å legge til widgets, registrere egendefinerte innleggstyper og taksonomier , lage egendefinerte felt og legge til ekstra funksjoner som en butikk eller SEO-forbedringer.

Tilpasse WordPress-temaet ditt via WordPress Admin-skjermene

Hvis endringene du vil gjøre er designfokuserte og relativt enkelt, kan du kanskje lage dem via admin-skjermene. Customizer gir deg en rekke alternativer for å tilpasse temaet ditt: hva som er tilgjengelig for deg, avhenger av temaet ditt. Og du ser kanskje noe som heter Editor i Utseendemenyen. Hold deg unna dette, av grunner som jeg snart vil beskrive.

Tilpasse temaet ditt via tilpasningen

Den enkleste måten å tilpasse WordPress-temaet ditt er å bruke WordPress Customizer.

Du får tilgang til dette på en av to måter:

• Når du ser på nettstedet ditt (når du er logget inn), klikker du på Tilpass-lenken i adminlinjen øverst på skjermen.
• I admin-skjermbildene klikker du på Utseende > Tilpass.

Dette tar deg til Customizer.

I skjermbildet ovenfor har jeg installerte et gratis tema kalt ColorMag som har mange tilpasningsalternativer. Det er lagt til seksjoner i Customizer for designfunksjoner, inkludert et toppbilde, sosiale medier, kategorifarger og en Designalternativ-fane som tar deg gjennom til enda flere faner der du kan gjøre endringer i utformingen og utformingen av nettstedet ditt.

Ulike temaer har forskjellige tilpasningsalternativer, men nyere temaer ser ut til å legge til flere og flere av dem hele tiden. Hvis du finner et tema du liker, men som ikke passer riktig for deg, kan det hende at tilpasning av det gir deg nøyaktig designet og utformingen du trenger.

Temaredigereren (og hvorfor ikke bruke it)

På admin-skjermene dine kan det hende du ser et alternativ som heter Theme Editor, som du får tilgang til via Utseende > Theme Editor.

Dette gir deg tilgang til filene i temaet ditt , noe som betyr at du kan redigere dem direkte.

Ikke gjør det.

Selv om du er komfortabel med å skrive CSS eller PHP, er det en veldig dårlig ide å redigere filene i temaet ditt av to grunner:

• Hvis du har kjøpt eller lastet ned et tredjeparts tema, vil eventuelle endringer du gjør gå tapt neste gang du oppdaterer temaet (og du bør holde temaet oppdatert av sikkerhetsgrunner).
• Enda viktigere, hvis du lager en endring som ødelegger nettstedet ditt, vil det ikke bli sporet og den forrige versjonen av filen vil ikke bli endret. Du kan ødelegge siden uigenkallelig.

Hvis du vil redigere koden i temaet ditt, bør du gjøre det ved hjelp av en kodeditor (sjekk ut de beste gratis HTML-redigererne), og du bør ikke Ikke rediger filene på live-siden din før du har testet den på et iscenesettingsside. Hvis du trenger å redigere et tredjeparts tema, bør du gjøre det via et barnetema. Mer om begge disse senere i dette innlegget.

WordPress vet hvor usikkert det er å bruke temaredigereren: det gir deg til og med en advarsel når du prøver å få tilgang til den.

Så ta WordPress råd: ikke bruk temaredigereren!

Bruk av sidebyggere og rammeverk til å tilpasse WordPress-temaet ditt

En stor andel av WordPress-temaene har tilpasningsalternativer, noe som betyr at du kan gjøre endringer i design og layout via Customizer.

Men noen temaer tar dette videre og er designet for å bli utvidet og betydelig tilpasset. Disse temaene kalles temarammer.

Et annet alternativ er å bruke et plugin som lar deg designe nettstedet ditt ved hjelp av et brukervennlig grensesnitt: de kalles sidebygger.

Bruke en side Builder for å tilpasse temaet ditt

Page Builder-plugins er designet for å gjøre det enkelt for deg å angi utformingen av nettstedet ditt, ved hjelp av et grensesnitt som lar deg se hva du får.

Du installerer et sidebygger-plugin med et kompatibelt tema, og bruker deretter alternativene det gir deg til å utforme nettstedet ditt akkurat slik du vil ha det.

En av de mest kjente sidebyggerne er Elementor, men du kan finne ut om noen alternativer i vår sammendrag av sidebyggere.

Sidebyggere lar deg redigere innlegg og sider med et dra-og-slipp-grensesnitt, noe som betyr at du kan se hvordan innholdet ditt vil se ut og kan gjøre hver side loo unik.

Under bruker jeg Elementor-sidebyggeren med Hello Elementor-temaet, som er kompatibelt med det.

Sidebygger gir deg mye fleksibilitet med utformingen og utformingen av sidene dine. Hvis du er vant til en nettsidebygger som Wix, kan de hjelpe overgangen til WordPress. Og hvis du foretrekker et WYSIWYG-grensesnitt for WordPress-innholdet ditt, kan de hjelpe deg med å designe sidene dine raskt.

Å bruke et temarammeverk til å tilpasse temaet ditt

Et alternativ til sidebyggere er tema. rammer. Dette er suiter med temaer designet for å samarbeide. Det er ett overordnet tema som er rammeverket, og et utvalg av barnetemaer som du kan bruke til å tilpasse hovedtemaet og få det til å se ut slik du vil.

Et eksempel på temarammer er Divi, som har tilpasningsalternativer som lar deg tilpasse utformingen av barnetemaet ditt ytterligere, inkludert et dra og slipp-grensesnitt som ligner på sidebyggere.

Redigere WordPress-temaets kode

Hvis du er komfortabel med å redigere CSS og / eller PHP, kan du rediger koden i temaet for å tilpasse temaet.

Dette gir deg størst grad av kontroll.

Hvis du redigerer ditt eget tema, som er spesifikt for nettstedet ditt og ble utviklet spesielt for det, så kan du redigere temaet direkte. Men hvis du jobber med et tredjeparts tema og vil redigere det, bør du opprette et barnetema for å unngå å miste endringene neste gang du oppdaterer temaet.

Redigere temafiler

Det første trinnet for å redigere WordPress-temaet ditt er å forstå hvilke temafiler som styrer hva, og hvilke du må redigere.

Stilarket

Hvert WordPress-tema har en stilark, kalt style.css. Den inneholder all koden for styling av nettstedet ditt: layout, fonter, farger og mer.

Hvis du for eksempel vil endre fargene i temaet ditt, vil du gjøre endringer i stilarket. Hvis du vil legge til en ny skrift, vil du bruke stilarket til å bruke den på forskjellige elementer, for eksempel brødteksten og overskriftene.

Vær oppmerksom når du redigerer stilarket: spesifisitet betyr at koden for et element ikke alltid kommer fra der du tror det er.Elementer arver styling fra andre elementer som er over dem i hierarkiet på siden, med mindre du legger til styling som er spesifikk for det nedre elementet.

For å oppdage hva CSS påvirker hvilke elementer på siden, kan du bruk inspektøren i nettleseren din for å se CSS (Chrome DevTools i dette eksemplet):

Du kan deretter bruke dette til å skrive ny CSS som er målrettet mot enkeltelementer eller en rekke elementer eller klasser på siden.

Hvis alt dette snakk om elementer, klasser og spesifisitet er nytt for deg, vil du kanskje unngå direkte redigering av temaets CSS. I det minste til du har lært mer om CSS og hvordan det fungerer.

Funksjonsfilen

En annen fil som stort sett alle temaer vil ha er funksjonsfilen (functions.php) . Dette er filen som gjør at en rekke ting fungerer i temaet ditt. Inne i den kan du finne kode for å registrere temafunksjoner som bilder, widgets og mer.

Hvis du er fristet til å legge til funksjonell kode til temaet ditt, er det her du vil legge den til. Men pass på: i de fleste tilfeller bør du virkelig skrive et plugin. Spør deg selv:

Vil jeg beholde denne funksjonaliteten hvis jeg bytter tema i fremtiden?

Hvis svaret er ja, skriv et plugin i stedet for å legge til kode i funksjonsfilen. Plugins trenger ikke å være store: det er ingenting som hindrer deg i å lage en for et par kodelinjer.

Funksjonsfilen er alt skrevet i PHP, så du må være kjent med at. Ikke kopier koden du finner via et Google-søk blindt: ta deg tid til å finne ut hva den koden gjør, og forstå den. På den måten er det mindre sannsynlig at du legger til kode som ikke er så god som den burde være.

Temamalfiler

De fleste filene i et tema er temamalfiler . Dette er filer som bestemmer hvilket innhold WordPress sender ut på en gitt side, og velges i henhold til malhierarkiet.

Hvis du vil endre måten innholdet sendes ut på en gitt innleggstype, side eller arkiv , må du enten redigere en av disse filene eller opprette en ny.

Si for eksempel at temaet ditt har en archive.php-fil som brukes til å sende arkivsider for kategorier og koder. Du vil gjøre endringer i måten koder sendes ut. Så du oppretter en fil kalt «tag.php», som vil være basert på archive.php med tweaks.

Igjen, vær forsiktig med å redigere filene: de kan ødelegge nettstedet ditt. Test alltid på en lokal installasjon ved hjelp av et verktøy som DevKinsta og / eller iscenesettingssted først.

Uansett hvilken av disse filtypene du trenger å redigere, bør du gjøre det riktig. Les avsnittet nedenfor om gode fremgangsmåter for å finne ut hvordan du redigerer kode på en måte som ikke vil ødelegge nettstedet ditt og ikke vil forårsake sikkerhetshodepine.

Tilpasse et tredjeparts tema med et barnetema

Hvis temaet du er kjører på nettstedet ditt er fra en tredjepart, og du vil redigere koden, må du opprette et underordnet tema.

Dette er fordi hvis du redigerer temaet direkte og deretter oppdaterer det ( som du burde), mister du alle endringene du har gjort.

Å lage et barnetema består av fire trinn:

1. Opprett en ny mappe i wp-content / temaer.
2. Opprett et stilark i den mappen. I det stilarket, tlf l WordPress at dette er et barnetema for ditt eksisterende tema.
3. Legg til kopier av filene du vil redigere til barnetemaet og rediger dem der.
4. Aktiver barnetemaet i nettstedet ditt.

WordPress bruker alltid en fil fra underordnet tema for å sende inn innhold med mindre det er en fil høyere i hierarkiet i overordnet tema. Hvis det er to versjoner av den samme filen, bruker den den fra underordnet tema. Dette betyr at den nye filen din i barnetemaet vil overstyre den fra overordnet temaet.

Beste fremgangsmåter for å tilpasse WordPress-temaer

Så du planlegger å tilpasse temaet ditt. Før du går i gang med å gjøre endringene, følg disse tipsene for å sikre at du gjør det trygt og at du ikke vil ødelegge nettstedet ditt, gjøre det sårbart for angrep eller miste koden.

Hvis mulig , Tilpass uten å redigere kode

Hvis du kan foreta tilpasningene dine via Customizer eller andre steder i admin-skjermene, er dette tryggere enn å redigere koden.

Bare rediger koden hvis du har kjent med CSS (for stilarket) og PHP (for andre temafiler) og du vet hvordan du gjør det trygt.

Bruk et lokalt utviklingssted for å gjøre endringene

Hvis du redigerer koden i temaet ditt eller oppretter et barnetema for å gjøre endringer, bør du gjøre utviklingsarbeidet på en lokal installasjon av WordPress med temaet ditt installert og innholdet ditt kopiert fra ditt live nettsted.

På denne måten har du et speil av ditt live nettsted for å teste endringene dine. Arbeid på et lokalt nettsted vil ikke ha noen innvirkning på live nettstedet ditt og kan gå raskere.

Selv om du bruker Customizer, kan det være nyttig å bruke en lokal versjon av nettstedet ditt for å teste som du kan publisere endringene og teste dem uten å påvirke live-nettstedet.

Når du har testet endringene i temaet ditt, kan du laste det opp til live-nettstedet ditt, eller enda bedre, du kan teste det på en iscenesettingsside og trykk den deretter til live.

Bruk versjonskontroll

Når du gjør endringer i temaet ditt, bør du bruke versjonskontroll for å spore endringene.

På det enkleste betyr dette å endre versjonsnummeret til temaet og beholde kopier av begge versjonene. Men hvis din gong skal gjøre versjonskontroll riktig, må du bruke en tjeneste som GitHub for å spore endringene dine.

På denne måten, hvis en endring gir problemer, kan du enkelt rulle den tilbake uten å måtte lage manuell redigeringer.

Versjonskontroll er enda mer nyttig hvis du jobber som en del av et team, da du vil kunne se hva andre medlemmer gjør. Sørg for å lese vår git vs Github-guide.

Bruk et staging-nettsted for å teste endringene dine

Hvis du har tilgang til et staging-nettsted (for eksempel Kinstas gratis staging som følger med alle planer), å teste på dette før du aktiverer den nye versjonen av temaet ditt (eller det nye barnetemaet) på live-siden din er den sikreste måten å gå videre.

Dette er fordi ethvert lokalt nettsted vil ha noen forskjeller fra ditt live nettsted: det er på en annen server (en opprettet på din lokale maskin), kan det være at den kjører en annen versjon av PHP eller et hvilket som helst av de andre verktøyene som kjører nettstedet ditt.

Lag en kopi av ditt levende nettsted på iscenesettingsserveren din, og last opp og aktiver den nye tema. Test nettstedet ditt grundig for å være sikker på at alt fungerer, og deretter kan du presse endringene til live-siden din.

Gjør temaet ditt responsivt

Eventuelle endringer du trenger å gjøre i temaet ditt, bør fungerer på både mobil og stasjonær PC.

Med stadig flere som får tilgang til internett via mobiltelefon, og Mobile-first-indeksen fra Google, er det sannsynligvis viktigere nå for temaet ditt å jobbe på mobil enn det gjør på skrivebordet. Så eventuelle endringer du gjør i temaet ditt, må være mobilvennlige eller helst mobile først der det er relevant.

Dette gjelder hovedsakelig alle endringer du gjør i styling eller layout: sjekk at den nye layouten fungerer på mobil og at du har lagt til mediespørsmål slik at oppsettet tilpasser seg forskjellige skjermstørrelser.

Hvis temaet ditt ikke er responsivt, vil det påvirke rangeringer og konverteringsfrekvenser for søkemotoren.

Hvis du ikke har tilgang til mange forskjellige mobile enheter å teste på, kan du bruke et verktøy som BrowserStack for å se hvordan nettstedet ditt ser ut på forskjellige enheter. Du kan også bruke utviklerverktøyene i nettleseren din og de responsive visningene i Customizer.

Forsikre deg om at tilpasningene dine ikke påvirker tilgjengeligheten

Eventuelle endringer i temaet ditt må også være tilgjengelige for brukere med funksjonshemninger eller sensoriske funksjonsnedsettelser .

Dette handler ikke bare om å sikre at nettstedet fungerer på skjermlesere: andre hensyn som fargevalg og skriftstørrelser er viktig for et stort antall mennesker.

Hvis endringene du gjør til temaet ditt er å gjøre fargene lysere eller teksten mindre, tenk igjen: dette kan gjøre det vanskelig for folk å lese eller samhandle med nettstedet ditt.

Før du gjør noen endringer live, bruk en tilgjengelighetskontroll for å teste nettstedet ditt og vær sikker på at det ikke ekskluderer folk.

Hold deg til WordPress-kodingsstandardene

Hvis du redigerer koden i temaet ditt eller oppretter en chi Som tema, må du sørge for at koden din er i tråd med WordPress-kodingsstandardene.

Disse standardene eksisterer for å sikre konsistent og kvalitet på koden og for å unngå at det er et rot. Det er standarder for PHP, CSS og JavaScript, så ta litt tid å sjekke de som er relevante for deg, og sørg for at du følger dem.

Hvis det eksisterende WordPress-temaet ditt er godt kodet og du skriver noe nytt kode på en måte som er i samsvar med det, er du på vei til å sikre at koden din er kompatibel. Sørg for at du legger til kommentarer til endringene du gjør i temaet, slik at du eller andre vet hva du gjorde når du kommer tilbake til å jobbe med koden i fremtiden.Du tror kanskje du ikke vil glemme, men etter noen måneder har det gått overraskende enkelt å glemme hvorfor du redigerte en kodelinje.

Trenger du å tilpasse #WordPress-temaet ditt for å gjøre det unikt? Det er mange alternativer! Velg den rette for deg i vår grundige guide! 👚👔Klikk for å Tweet

Sammendrag

Det er ikke så vanskelig å tilpasse WordPress-temaet ditt. Noen ganger er det et enkelt tilfelle å bruke Customizer til å gjøre endringer i skriftene eller fargene (sørg for å lese vår grundige guide om WordPress-skrifter). Andre ganger må du opprette et nytt underordnet tema for å legge til en ny malfil til et tema.

Alternativene du har for å tilpasse temaet ditt, inkluderer å bruke et plugin eller Customizer, redigere WordPress-temakoden direkte eller lage et underordnet tema.

Identifiser det riktige alternativet for deg og foreta tilpasningene dine trygt, alt uten å ødelegge nettstedet ditt.