How To Edit WordPress Code-HTML, CSS, PHP (Easy Guide)

Mens WordPress gjør Det enkelt for ikke-kodere å administrere et nettsted, vil det sannsynligvis komme en tid når du vil redigere kode I WordPress for å få litt mer kontroll over hvordan nettstedet ditt ser ut eller fungerer.

for å hjelpe deg med å gjøre det, vil dette innlegget vise deg hvordan du trygt kan redigere kode I WordPress på noen forskjellige måter:

  • Redigere WordPress HTML For Individuelle Innlegg eller Sider
  • Redigere Temaets HTML / PHP-Kode
  • Legge Til Tilpasset CSS På Nettstedet ditt

Hvis du allerede vet hva du vil gjøre, kan du klikke på en av linkene ovenfor for å hoppe rett til den spesifikke delen. Ellers, la oss få redigering!

Hvordan Du Kan Redigere WordPress-Kode:

for å få mer kontroll over Hvordan WordPress-nettstedet ditt ser ut og fungerer, kan Du redigere WordPress-koden din for å tilpasse forskjellige områder:

  • den nye blokkredigereren og den klassiske editoren lar DEG redigere HTML-koden for individuelle innlegg eller sider.
  • hvis Du vil redigere din WordPress tema kildekode, bruke et barn tema.
  • Vurder å bruke en plugin for å administrere kodebiter som du legger til i<head> eller funksjoner.php-fil av temaet ditt.
  • hvis du bare vil legge til tilpasset CSS, kan du bruke DET Ekstra CSS-området I WordPress Customizer eller et plugin som «Simple CSS».

h2> slik redigerer du wordpress html for individuelle innlegg / sider

la oss starte med den enkleste måten å redigere wordpress html – få tilgang til kildekoden for individuelle wordpress-innlegg, sider eller andre innleggstyper.

Du kan gjøre dette i både Den nye WordPress block editor (Gutenberg), samt den eldre klassiske TinyMCE editor.

Hvordan Redigere WordPress HTML I Block Editor (Gutenberg)

DET er noen måter du kan jobbe MED HTML i Gutenberg.Først, Hvis du bare vil legge TIL DIN EGEN HTML-kode i et innhold, vil jeg anbefale å ikke prøve å redigere hele kildekoden til innlegget ditt, da det gjør ting unødvendig komplisert.I Stedet kan du bare bruke den dedikerte Egendefinerte HTML-blokken og lime INN HTML-KODEN du vil bruke der:

Gutenberg Custom HTML block

Gutenberg Custom HTML block

men Det kan også komme en tid hvor du må redigere HTML direkte i EN annen blokk. Hvis du for eksempel vil legge til en nofollow-kode i en kobling i blokkredigereren, må du redigere HTML-KODEN for den blokken.

Det er to måter du kan gjøre dette på…

Først kan du klikke på alternativene for en enkelt blokk og velge Rediger SOM HTML-alternativet:

hvordan redigere HTML i WordPress blokk

hvordan redigere en enkelt blokk SOM HTML

dette vil la deg redigere HTML for bare den enkelte blokk:

eksempel på redigering av en blokks html's HTML

eksempel på redigering av en blokks html

eller, hvis du vil redigere html for hele innlegget Ditt, kan du få tilgang til kodeditoren FRA hovedverktøyene & valg dropdown. Eller Du kan også bare bruke denne tastatursnarveien til å bytte mellom kode Og visuell redigering – Ctrl + Shift + Alt + M:

hvordan få tilgang til full kodeditor I Gutenberg

Husk at i full kodeditoren må du jobbe rundt alt som markeres for blokker – f.eks. <!-- wp:paragraph -->.

Redigering av kode I WordPress trenger ikke å være vanskelig! Sjekk ut denne enkle guiden om hvordan du tweak HTML, CSS og PHP.

slik Redigerer Du WordPress HTML i Classic Editor (TinyMCE)

hvis du fortsatt bruker Den Klassiske WordPress-editoren (TinyMCE), kan du redigere HTML for hele innlegget ditt ved å gå til Tekstfanen:

slik redigerer DU HTML i Classic WordPress editor

slik redigerer DU HTML I Classic WordPress editor

wordpress editor

Slik Redigerer Du Kildekoden i wordpress-temaet

nå, La oss komme inn I Det Større Emnet, som ER HVORDAN DU REDIGERER koden i wordpress-temaet ditt. Innsatsen er litt høyere, så vi må dekke noen foreløpige spørsmål før vi kommer inn i how-to.

Hvorfor er innsatsen høyere? Vel, ganske enkelt, det er fordi du kan bryte nettstedet ditt hvis du rotet noe opp her!I de siste utgivelsene Har WordPress gjort Det mye vanskeligere for deg å gjøre dette ved et uhell, men redigering av kildekoden til nettstedet ditt vil alltid åpne døren for problemer, så Du vil sørge for at du gjør det trygt.

Bruk Et Barntema for Direkte Koderedigeringer

hvis du planlegger å redigere noen av koden direkte i temaets filer, må du bruke et barntema i stedet for å redigere «foreldre» – temaet.

uten et barnetema, vil alle kodeendringer du gjør bli overskrevet neste gang du oppdaterer temaet. Når du bruker et barntema, kan du imidlertid raskt oppdatere det overordnede temaet uten å miste endringene du har gjort i barntemaet.

hvis du vil lære mer om fordelene med barnetemaer, samt hvordan du lager en, sjekk ut vår fulle guide til WordPress barnetemaer.

Vurder Å Bruke En Plugin I Stedet For Å Redigere Koden i Child Theme

Hvis du planlegger å endre hvordan temaet fungerer, vil du sannsynligvis trenger å jobbe ved å redigere kildekoden til ditt barn tema direkte.

Men hvis Du vil redigere kode I WordPress av en annen grunn-som å legge til et sporingsskript til<head> – delen av nettstedet ditt eller legge til et utdrag til temaets funksjoner.php-fil-du kan være bedre å bruke et plugin i stedet.

Registrer Deg For Nyhetsbrevet

vi vokste vår trafikk 1,187% Med WordPress. Vi viser deg hvordan.

Bli med 20,000 + andre som får vårt ukentlige nyhetsbrev med insider WordPress tips!

Abonner nå

For Eksempel Gjør Hode -, Bunntekst-og Postinjeksjonene det enkelt å injisere kodesnutter der det trengs. Og fordi disse kodesnutter er alle segregert i plugin grensesnitt, er det også enklere å administrere dem i fremtiden.

På Samme måte, hvis du legger til en kodebit som kan gå i barnetemaets funksjoner.php-fil, gratis Kodesnutter plugin gjør et flott alternativ.

i sammendraget, hvis du vil redigere kode I WordPress for å legge til utdrag til temaets…

  • <head> seksjon
  • Funksjoner.php-fil

…da bør du vurdere å bruke et plugin i stedet for å rette redigering av temaets filer, da det vil gjøre det enklere å administrere disse utdrag og sikre at de ikke blir overskrevet når du oppdaterer temaet ditt.

hvis du trenger å gjøre andre endringer, la oss grave i hvordan du redigerer kildekoden for temaet ditt.

Bruk WordPress – Kodeditoren i Dashbordet

hvis du planlegger å redigere temaets kode direkte, anbefaler vi at du tar en sikkerhetskopi av nettstedet ditt før du gjør det (enten hele nettstedet ditt eller filen du redigerer).

når du har gjort det, kan du få tilgang til temakodeditoren i dashbordet ved Å gå Til Appearance → Temaredigerer. Her Vil WordPress først gi deg en advarsel som ligner på det du lærte ovenfor:

advarselen før du åpner kodeditoren i dashbordet

deretter kan du bruke sidepanelet til høyre for å navigere mellom forskjellige temafiler og kodeditoren selv for å gjøre dine faktiske endringer:

WordPress-kodeditoren i dashbordet

Kodeditoren I dashbordet

BRUK SFTP Til Å Redigere Kode I WordPress

som et alternativ til kodeditoren i dashbordet kan du også redigere temafiler via SFTP. Det er to fordeler med denne tilnærmingen:

Sliter med nedetid og WordPress problemer? På Kinsta sjekker vi statusen til nettstedet ditt hvert 2. minutt og Våre WordPress-eksperter er tilgjengelige 24/7. Sjekk ut våre planer

  • Du kan bruke din foretrukne kodeditor.
  • hvis du ved et uhell bryter noe, kan du fikse problemet med en gang. Derimot, hvis du redigerer kode via WordPress-dashbordet ditt, er det alltid en sjanse for at du kan bryte noe som låser deg ut Av WordPress-dashbordet ditt ,noe som betyr at du må koble til VIA SFTP for å fikse problemet (men igjen – dette er mindre sannsynlig takket være de siste endringene).

slik kobler du til nettstedet ditt VIA FTP.

når du har gjort det, naviger til temaets mappe – … / wp-content / themes/child-theme-name. Finn filen du vil redigere og høyreklikk på den. DE FLESTE FTP-programmer vil gi deg en mulighet til å redigere filen, og vil automatisk re-laste opp filen når du gjør endringene.

vi anbefaler imidlertid at du laster ned en originalversjon av filen til skrivebordet før du gjør endringer. På den måten kan du bare laste opp den opprinnelige versjonen hvis du ved et uhell bryter noe:

hvordan redigere WordPress HTML via SFTP

hvordan redigere WordPress HTML via SFTP

Hvordan Legge Til Tilpasset CSS Til WordPress

Hvis du bare vil legge til tilpasset CSS Til WordPress, i stedet for å redigere WordPress’ HTML-eller PHP-kode, trenger du ikke å bruke in-dashboard kode editor eller sftp metoder.

I Stedet kan Du bruke WordPress Customizer. Utover å være et enklere alternativ, er en annen fordel med å gå med denne tilnærmingen at du kan forhåndsvise endringene dine i sanntid.

for å komme I gang, gå Til Utseende → Tilpasse I WordPress dashbordet:

slik får Du Tilgang Til WordPress Customizer

Slik får Du Tilgang Til WordPress Customizer

deretter ser Du Etter DET Ekstra CSS-alternativet i WordPress Customizer:

hvor finner du det ekstra css-alternativet i wordpress customizer

hvor finner du det ekstra css-alternativet i wordpress customizer

som åpner en kodeditor Der du kan legge til ønsket css. Når DU legger TIL CSS, vil live forhåndsvisning av nettstedet ditt automatisk oppdatere i henhold til disse endringene:

hvordan redigere CSS I WordPress Customizer

hvordan redigere CSS I WordPress Customizer

Et annet godt alternativ for å legge TIL CSS er Det Enkle CSS-pluginet Fra Tom Usborne. Det gir deg et lignende alternativ I WordPress Customizer, og det lar deg også legge til tilpasset CSS til individuelle innlegg eller sider via en meta-boks.Til Slutt, Hvis du vil legge til massevis av tilpasset CSS – som hundrevis eller tusenvis av linjer-er et annet alternativ å lage ditt eget TILPASSEDE CSS stilark og bruke wp_enqueue_scripts for å legge det til temaet ditt.

Sammendrag

hvis du vil redigere kode i et Enkelt WordPress-innlegg eller-side, gir både den nye blokkredigereren og den klassiske editoren deg muligheter for direkte redigering AV HTML.På den annen side, Hvis Du vil redigere WordPress-temaets kildekode, er det noen ting du bør vurdere:

  • bruk Alltid et barnemne i stedet for å gjøre koderedigeringer direkte til det overordnede temaet.
  • Vurder å bruke en plugin for å administrere utdrag som du legger til i<head> eller funksjoner.php-fil, da disse pluginene kan tilby en enklere, mer håndterlig tilnærming.

hvis du fortsatt trenger å gjøre direkte kodeendringer etter disse hensynene, kan du redigere barnetemaets kildekode fra WordPress-dashbordet ditt ved Å gå Til Appearance → Theme Editor. Eller du kan koble til nettstedet ditt via SFTP og redigere kode på den måten.

Til Slutt, Hvis du bare vil legge til noen tilpassede CSS, trenger du ikke å redigere temaets kode direkte. I stedet kan du bare bruke Det Ekstra CSS-området I WordPress Customizer eller et plugin som Simple CSS.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *