Slik viser du enkelt kode på ditt WordPress-nettsted

Vil du vise kode i WordPress-blogginnleggene dine? Hvis du prøvde å legge til kode som vanlig tekst, vil WordPress ikke vise den riktig.

WordPress kjører innholdet ditt gjennom flere opprydningsfilter hver gang du lagrer et innlegg. Disse filtrene er der for å sikre at noen ikke sprøyter inn kode via postredigeringsprogram for å hacke nettstedet ditt.

I denne artikkelen vil vi vise deg de riktige måtene å enkelt vise kode på ditt WordPress-nettsted. Vi vil vise deg forskjellige metoder, og du kan velge den som best passer dine behov.

Slik viser du enkelt kode i WordPress-innlegg

Metode 1. Vis kode ved å bruke standardredigereren i WordPress

Denne metoden anbefales for nybegynnere og brukere som ikke trenger å vise kode veldig ofte.

Bare rediger blogginnlegget eller siden der du vil vise koden. Legg til en ny kodeblokk på innlegget på redigeringsskjermen.

Legg til kodeblokk i WordPress-innleggene dine

Du kan nå legge inn kodebiten i tekstområdet i blokken.

Legg til kode i blogginnlegget ditt

Etter det kan du lagre blogginnlegget ditt og forhåndsvise det for å se kodeblokken i aksjon.

PHP-kode vist i WordPress

Avhengig av WordPress-temaet ditt, kan kodeblokken se annerledes ut på nettstedet ditt.

Metode 2. Vis kode i WordPress ved hjelp av en plugin

For denne metoden bruker vi en WordPress-plugin for å vise kode i blogginnleggene dine. Denne metoden anbefales for brukere som ofte viser kode i artiklene sine.

Det gir deg følgende fordeler fremfor standard kodeblokk:

  • Den lar deg enkelt vise hvilken som helst kode på ethvert programmeringsspråk
  • Den viser koden med syntaks utheving og linjenumre
  • Brukerne dine kan enkelt studere koden og kopiere den

Først må du installere og aktivere SyntaxHighlighter Evolution-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

Ved aktivering kan du gå videre og redigere blogginnlegget der du vil vise koden. Legg til blokken ‘SyntaxHighlighter Code’ i innlegget på redigeringsskjermen.

SyntaxHighlighter-kodeblokk

Du vil nå se en ny kodeblokk i postredigeringsprogrammet der du kan oppgi koden. Etter å ha lagt til koden, må du velge blokkeringsinnstillinger fra høyre kolonne.

Innstillinger for SyntaxHighlighter-kode

Først må du velge språk for koden. Etter det kan du slå av linjenumre, oppgi første linjenummer, utheve hvilken som helst linje du ønsker og slå av funksjonen for å gjøre lenker klikkbare.

Når du er ferdig, lagrer du innlegget og klikker på forhåndsvisningsknappen for å se det i aksjon.

Koden vises med syntaks utheving

Plugin leveres med en rekke fargeskjemaer og temaer. Hvis du vil endre fargetemaet, må du besøke Innstillinger »SyntaxHighlighter side.

SyntaxHighlighter-innstillinger

Fra innstillingssiden kan du velge et fargetema og endre SyntaxHighlighter-innstillinger. Du kan lagre innstillingene dine for å se en forhåndsvisning av kodeblokken nederst på siden.

Forhåndsvisning av kodeblokk

Bruker SyntaxHighlighter med Classic Editor

Hvis du fremdeles bruker den gamle klassiske WordPress-redigereren, er det slik du vil bruke SyntaxHighlighter-plugin for å legge til kode i WordPress-blogginnleggene dine.

Bare pakk koden din rundt firkantede parenteser med språket navn. Hvis du for eksempel vil legge til PHP-kode, vil du legge den slik:

[Php]
<?php
privat funksjon get_time_tags () {
$ time = get_the_time (‘d M, Y’);
returner $ tid;
}
?>
[/ Php]

På samme måte, hvis du ønsket å legge til en HTML-kode, vil du pakke den rundt HTML-koden slik:

[Html]
En prøvekobling
[/ Html]

Metode 3. Vis kode i WordPress manuelt (Ingen plugin eller blokkering)

Denne metoden er for avanserte brukere fordi den krever mer arbeid og ikke alltid fungerer som det er ment.

Den passer for brukere som fremdeles bruker den gamle klassiske editoren og vil vise kode uten å bruke en plugin.

Først må du sende koden gjennom et online HTML-enhetskoderverktøy. Det vil endre kodemarkeringen din til HTML-enheter, som lar deg legge til koden og omgå WordPress-opprydningsfiltrene.

Nå kan du kopiere og lime inn koden din i tekstredigeringsprogrammet og pakke den rundt og merke.

Legge til kode manuelt i klassisk editor

Koden din ser slik ut:

Dette er en eksempelkobling

Du kan nå lagre innlegget ditt og forhåndsvise koden i handling. Nettleseren din vil konvertere HTML-enhetene, og brukerne vil kunne se og kopiere riktig kode.

Manuell visning av kode i WordPress

Vi håper denne artikkelen hjalp deg med å lære hvordan du enkelt kan vise kode på ditt WordPress-nettsted. Det kan også være lurt å se den ultimate listen over de mest ønskede WordPress-tipsene, triksene og hakkene.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me