Mens WordPress gør det let for ikke-kodere at administrere et websted, vil der sandsynligvis komme et tidspunkt, hvor du vil redigere kode i WordPress for at få lidt mere kontrol over, hvordan dit websted ser ud eller fungerer.
For at hjælpe dig med det, vil dette indlæg vise dig, hvordan du sikkert redigerer kode i WordPress på et par forskellige måder:
- Redigering af WordPress HTML til individuelle indlæg eller sider
- Redigering af dit temas HTML / PHP-kode
- Tilføjelse af tilpasset CSS til dit websted
Hvis du allerede ved, hvad du vil gøre, kan du klikke på et af linkene ovenfor for at hoppe direkte til det specifikke afsnit. Ellers, så lad os få gang i regeringen!
Sådan redigerer du WordPress-kode:
For at få mere kontrol over, hvordan dit WordPress-sted ser ud og fungerer, kan du redigere din WordPress-kode for at tilpasse forskellige områder:
- Den nye blokeditor og den klassiske editor gør det muligt for dig at redigere HTML-kode til individuelle indlæg eller sider.
- Hvis du vil redigere dit WordPress-temas kildekode, skal du bruge et child theme.
- Overvej at bruge et plugin til at administrere kodestykker, som du tilføjer til filen <head> eller features.php i dit tema.
- Hvis du bare vil tilføje brugerdefineret CSS, kan du bruge området Yderligere CSS i WordPress Customizer eller et plugin som “Simple CSS”.
Sådan redigeres WordPress HTML for individuelle indlæg / sider
Lad os starte med den enkleste måde at redigere WordPress HTML – adgang til kildekoden for individuelle WordPress-indlæg, sider eller andre indlægstyper.
Du kan gøre dette i både den nye WordPress-blokeditor (Gutenberg) såvel som i den ældre klassiske TinyMCE-editor.
Sådan redigeres WordPress HTML i Block Editor (Gutenberg)
Der er nogle få måder, du kan arbejde med HTML i Gutenberg.
For det første, hvis du bare vil tilføje din egen HTML-kode til et stykke indhold, vil jeg anbefale ikke at prøve at redigere hele kildekoden for dit indlæg, da det gør ting unødvendigt kompliceret.
I stedet kan du bare bruge den dedikerede custom HTML-blok og indsætte den HTML, du vil bruge der:
Der kan dog også komme et tidspunkt, hvor du har brug for direkte at redigere HTML’en i en anden blok. Hvis du f.eks. vil tilføje et nofollow-tag til et link i blok-editoren, skal du redigere HTML koden til denne blok.
Der er to måder, du kan gøre dette på …
Først kan du klikke på indstillingerne for en individuel blok og vælge muligheden Rediger som HTML:
Dette giver dig mulighed for at redigere HTML for netop den individuelle blok:
Eller, hvis du vil redigere HTML-koden for hele dit indlæg, kan du få adgang til Code Editor fra rullemenuen Værktøjer og indstillinger. Eller du kan også bare bruge denne tastaturgenvej til at skifte mellem kode og visuel redigering – Ctrl + Shift + Alt + M:
Husk, at i den fulde kodeditor skal du arbejde omkring al den markering for blokke – f.eks. <!-- wp:paragraph -->.
Sådan redigeres WordPress HTML i Classic Editor (TinyMCE)
Hvis du stadig bruger den klassiske WordPress-editor (TinyMCE), kan du redigere HTML for hele dit indlæg ved at gå til fanen Tekst:
Sådan redigeres kildekoden i dit WordPress-tema
Lad os nu komme ind på det større emne, som er, hvordan du redigerer kode i dit WordPress-tema. Indsatserne er lidt højere, så vi er nødt til at dække et par foreløbige spørgsmål, inden vi kommer ind i vejledningen.
Hvorfor er indsatsen højere? Nå, ganske enkelt, skyldes det, at du kan ødelægge dit websted, hvis du ødelægger noget her!
I de nylige udgivelser har WordPress gjort det meget sværere for dig, at du ved et uheld skulle komme til at gøre dette, men redigering af kildekoden på dit websted vil altid åbne døren til problemer, så du vil sikre dig, at du gør det sikkert.
Brug et child theme til enhver direkte kodedigering
Hvis du planlægger at redigere en hvilken som helst af koden i dit temas filer, skal du bruge et child theme i stedet for at redigere “overordnede” tema.
Uden et child theme overskrives alle kodeændringer, du foretager, næste gang du opdaterer dit tema. Når du bruger et child theme, kan du dog hurtigt opdatere overordnede tema uden at miste de ændringer, du har foretaget i dit child theme.
Hvis du gerne vil lære mere om fordelene ved child themes, samt hvordan du opretter et, kan du se vores fulde guide til WordPress-child theme.
Overvej at bruge et plugin i stedet for at redigere kode i child theme
Hvis du planlægger at ændre, hvordan dit tema fungerer, er du sandsynligvis nødt til at arbejde ved at redigere dit child themes kildekode direkte.
Hvis du imidlertid vil redigere kode i WordPress af en anden grund – som at tilføje et sporingsscript til afsnittet <head> på dit websted eller tilføje et uddrag til dit temas functions.php-fil – er du måske bedre med at bruge et plugin i stedet .
F.eks. gør injektioner med Head, Footer og Post det let at injicere kodestykker, hvor det er nødvendigt. Og fordi disse kodestykker alle er adskilt i plugins interface, er det også lettere at administrere dem i fremtiden.
På samme måde, hvis du tilføjer et kodestykker, der kan gå i dit child themes features.php-fil, er det gratis kodestykker-plugin en fantastisk mulighed. I sammendrag, hvis du vil redigere kode i WordPress for at tilføje uddrag til dit temas…
<head>sektion- Functions.php fil
… så skal du overveje at bruge et plugin i stedet for at dirigere redigering af dit temas filer, da det vil gøre det enklere at administrere disse uddrag og sikre, at de ikke bliver overskrevet, når du opdaterer dit tema.
Hvis du har brug for at foretage andre redigeringer, lad os grave i, hvordan du redigerer kildekoden til dit tema.
Brug In-Dashboard WordPress Code Editor
Hvis du planlægger at redigere dit temas kode direkte, anbefaler vi stærkt, at du opretter en backup af dit websted, før du gør det (enten hele dit websted eller den fil, du redigerer).
Når du har gjort det, kan du få adgang til tema kode-editoren i dashboardet ved at gå til Appearance → Theme Editor. Her vil WordPress først give dig en advarsel svarende til det, du lærte ovenfor:
Derefter vil du være i stand til at bruge sidebar til højre til at navigere mellem forskellige temafiler og selve kode-editoren til at udføre dine faktiske redigeringer:
Brug SFTP til at redigere kode i WordPress
Som et alternativ til in-dashboard-kodeditoren kan du også redigere temafiler via SFTP. Der er to fordele ved denne tilgang:
- Du kan bruge din foretrukne kodeditor.
- Hvis du ved et uheld bryder noget, kan du løse problemet med det samme. I modsætning hertil, hvis du redigerer kode via dit WordPress-dashboard, er der altid en chance for, at du kan ødelægge noget, der låser dig ud af dit WordPress-dashboard, hvilket betyder, at du bliver nødt til at oprette forbindelse via SFTP for at løse problemet (dog igen – dette er mindre sandsynligt takket være de nylige ændringer).
Sådan opretter du forbindelse til dit websted via FTP. Når du har gjort det, skal du navigere til dit temas mappe – …/wp-content/themes/child-theme-name. Find den fil, du vil redigere, og højreklik på den. De fleste FTP-programmer giver dig en mulighed for at redigere filen og vil automatisk uploade filen, når du har foretaget dine ændringer.
Vi vil dog varmt anbefale, at du downloader en original version af filen til dit skrivebord, inden du foretager ændringer. På den måde kan du bare uploade den originale version, hvis du ved et uheld bryder noget:
Sådan føjes tilpasset CSS til WordPress
Hvis du kun vil tilføje brugerdefineret CSS til WordPress i stedet for at redigere WordPress ‘HTML- eller PHP-kode, behøver du ikke bruge in-dashboard kode-editoren eller SFTP-metoderne.
I stedet kan du bruge WordPress Customizer. Ud over at være en enklere mulighed, er en anden fordel ved at følge denne fremgangsmåde, at du kan se en forhåndsvisning af dine ændringer i realtid.
Gå til Udseende → Tilpas i dit WordPress-dashboard for at komme i gang:
Kig derefter efter indstillingen Yderligere CSS i WordPress Customizer:
Det åbner en kodeditor, hvor du kan tilføje din ønskede CSS. Når du tilføjer CSS, opdateres live preview af dit websted automatisk i henhold til disse ændringer:
En anden god mulighed for at tilføje CSS er Simple CSS-plugin fra Tom Usborne. Det giver dig en lignende mulighed i WordPress Customizer, og det giver dig også mulighed for at tilføje tilpasset CSS til individuelle indlæg eller sider via en meta box.
Endelig, hvis du vil tilføje et ton tilpasset CSS – som hundreder eller tusinder af linjer – en anden mulighed er at oprette dit eget tilpassede CSS-stilark og bruge wp_enqueue_scripts til at føje det til dit tema.
Resumé
Hvis du vil redigere kode i et individuelt WordPress-indlæg eller -side, giver både den nye blokeditor og den klassiske editor dig muligheder for direkte redigering af HTML. På den anden side, hvis du vil redigere dit WordPress-temas kildekode, er der et par ting, du skal overveje:
- Brug altid et child theme i stedet for at foretage kodeændringer direkte til overordnet tema.
- Overvej at bruge et plugin til at administrere kodestykker, som du tilføjer til filen <head> eller php, da disse plugins kan tilbyde en enklere, mere håndterbar tilgang.
Hvis du stadig er nødt til at foretage direkte kodeændringer efter disse overvejelser, kan du redigere dit child themes kildekode fra dit WordPress-dashboard ved at gå til Appearance → Theme Editor.
Eller du kan oprette forbindelse til dit websted via SFTP og redigere kode på den måde. Endelig, hvis du bare vil tilføje noget tilpasset CSS, behøver du ikke at redigere dit temas kode direkte. I stedet kan du bare bruge området Additional CSS i WordPress Customizer eller et plugin som Simple CSS.
Har du spørgsmål til, hvordan du redigerer kode i WordPress? Spørg løs i kommentarfeltet!
