WordPress er et robust innholdsstyringssystem som driver over halvparten av alle nettsteder på internett. Den innebygde CRM gjør det enkelt for en å lage et nettsted selv om du aldri har skrevet et dataprogram før. Selv om det er så enkelt å vise en blokk med normal tekst på et WordPress-nettsted, kan ikke det samme sies om datakode. Et stykke kode må vises tilstrekkelig for at seerne kan analysere og forstå det. Og det er her WordPress-kodeblokker kommer inn.
Hvis du vil vite hvordan du bruker kodeblokker i WordPress, har du kommet til rett sted. I denne artikkelen vil vi lede deg gjennom hele prosessen slik at du kan begynne å dele kodebiter med leserne dine. Fortsett å lese for å finne ut mer.
Slik bruker du kodeblokker i WordPress
Å vise et dataprogram som en vanlig nettsidetekst kan være katastrofalt. Mange brukere vil finne det vanskelig å visualisere og forstå. Heldigvis har mange WordPress-redaktører en kodeblokkfunksjon som lar deg vise et dataprogram i et kodeformat.
Heldigvis er det relativt enkelt å bruke kodeblokker for å vise datakode. For å komme i gang må du bytte til den opprinnelige WordPress-editoren siden noen tekstplugins kanskje ikke har funksjonen. Når du har gjort det, følg disse trinnene for å legge til en kodeblokk på en nettside:
- Åpne nettsiden du vil legge til en kodeblokk på ved å klikke på 'Ny'-knappen.
- Skriv inn '/code' og trykk 'Enter'.
- Skriv inn eller lim inn koden du ønsker skal vises og trykk 'Enter'-tasten.
- Du kan videre bruke kodeblokkverktøylinjen for å tilpasse utseendet til koden du nettopp har skrevet. Du kan for eksempel bruke 'B'-knappen for å gjøre en linje fet eller 'i'-knappen for å kursivere den.
- Når du er ferdig med å skrive nettsiden din, klikker du på 'Forhåndsvisning'-knappen for å se hvordan kodeblokken vil se ut på en liveversjon.
- Hvis du er fornøyd med de endelige resultatene, trykker du på 'Oppdater'-knappen for at andre også skal se kodeblokken.
Slik endrer du typografien til kodeblokken din
Typografi sier mye og kan gjøre eller ødelegge estetikken til ikke bare kodeblokken din, men også hele nettsiden. Følg disse trinnene for å endre typografien til kodeblokken din:
- Marker kodeblokken hvis typografi du vil endre.
- Klikk på 'Innstillinger'-ikonet øverst til høyre på skjermen.
- Under 'Typografi'-delen, spesifiser din foretrukne typografi.
- Klikk på 'Oppdater'-knappen for å lagre endringene.
Du kan tilpasse blokkens estetikk ytterligere ved å endre farge, bakgrunn, bokstavavstand og linjeavstand.
Hvis du for eksempel har et nettsted med mørkt tema, vil du kanskje også at kodeblokken din skal ha en annen bakgrunn.
Slik sletter du en kodeblokk i WordPress
Kodeblokker er ikke permanente, og akkurat som alle andre elementer på en WordPress-nettside, kan du slette dem. Slik går du frem for prosessen:
- Åpne nettsiden eller innlegget som har kodeblokken du vil slette.
- Klikk på kodeblokken du vil slette for å markere den.
- På widgeten som dukker opp rett øverst i kodeblokken, klikk på de tre prikkene.
- Fra alternativene velger du 'Fjern kode.'
Handlingen ovenfor bør slette hele kodeblokken fra nettsiden. Alternativt kan du ganske enkelt velge blokken og trykke på 'Slett'-tasten. Du kan også trykke på 'Ctrl' + 'Shift' + 'Z'-tastene samtidig, og det bør oppnå samme resultat.
Hvordan redigere en allerede publisert kodeblokk
En gang i blant er du nødt til å gjøre feil. Du kan også snuble over en bedre måte å utføre ideen på gjennom kode. WordPress lar deg redigere allerede eksisterende kodeblokker ved å følge instruksjonene nedenfor:
- Åpne siden som har kodeblokken du vil redigere.
- Klikk på 'Rediger'.
- Klikk på kodeblokken for å aktivere koderedigering.
- Når du er ferdig med å gjøre endringene, klikker du på 'Oppdater'-knappen.
Slik legger du til en kodeblokk på WordPress-nettstedet ditt ved hjelp av en plugin
Hvis du ofte legger til kodebiter på nettstedet ditt, kan det være best å få en mer robust plugin for å hjelpe deg. En populær kraftig og utmerket kodeblokk er SyntaxHighlighter Evolved plugg inn.
Denne plugin-en har en fordel i forhold til den opprinnelige WordPress Editor fordi:
- Den fremhever antall linjer i en kodebit
- Den støtter flere programmeringsspråk
- Den lar seerne kopiere og lime inn den viste koden
Slik bruker du programtillegget for å administrere kodebiter på nettstedet ditt bedre:
- Installer og aktiver SyntaxHighlighter Evolved plugg inn.
- Åpne siden eller innlegget hvis du vil legge til en kodeblokk.
- Aktiver redigering og klikk på plussknappen.
- Søk etter 'SyntaxHighLighter Evolved' og åpne det første resultatet som kommer opp.
- Lim inn eller skriv koden i den tilgjengelige kodeblokken.
- Klikk på innstillingsikonet øverst til høyre på skjermen og naviger til 'Blokker'-fanen.
- Spesifiser hvordan du vil at nummereringen skal vises og hvilke linjer med kode du ønsker skal fremheves.
- Du kan også slå på «Gjør URL-er klikkbare» hvis du vil gjøre koden klikkbar.
Følg disse trinnene for å endre farge- og formateringsskjemaet til kodeblokken din:
- Gå til 'Innstillinger' og naviger til delen 'SyntaxHighlighter'.
- Endre temaet for blokken din.
- Trykk 'Lagre' 'Forhåndsvisning' for å forhåndsvise hvordan endringene vil se ut i live-modus.
Ytterligere vanlige spørsmål
Hvordan gjør du en kodeblokk til en klikkbar lenke?
Følg disse trinnene for å få en kode til å blokkere en lenke ved å bruke WordPress-editoren:
hvordan man kan temme en hest i minecraft
1. Velg kodelinjen du vil fungere som en lenke.
2. Velg koblingsikonet fra popup-widgeten. Alternativt kan du trykke på 'Ctrl' + 'K'-tastene på tastaturet.
3. Skriv inn URL-en du vil at koden skal kobles til, og trykk på 'Enter'-tasten.
Kan jeg fremheve kode ved å bruke kodeblokkredigeringsprogrammet som WordPress-redigeringsprogrammet gir?
Nei, kodeblokken levert av den opprinnelige WordPress-editoren tillater ikke brukere å kopiere og lime inn koden. For å gjøre det, trenger du hjelp av en avansert kodeblokkredigeringsplugin som 'SyntaxHighligher Evolved'-plugin.
Har Elementor en kodeblokkfunksjon?
Elementor er en populær dra-og-slipp-plugin som brukes til å bygge WordPress-nettsteder. Dessverre, hvis du bruker plugin til å lage nettsteder, vil du ikke finne en blokk som lar deg formatere dataprogrammer på nettstedet ditt. Derfor må du bytte til den konvensjonelle WordPress-editoren for å fullføre oppgaven.
Få nettstedet ditt i gang
Enten du driver en programmeringsblogg eller bare liker å dele kodebiter på nettstedet ditt, er det superviktig å vite hvordan du bruker kodeblokker i WordPress. Kodeblokker vil gi leserne dine en enkel tid og totalt sett øke nettstedets brukeropplevelse. Og som du kan se, er å sette inn kodeblokker en relativt enkel prosess, spesielt med den opprinnelige WordPress-editoren.
Har du prøvd å bruke kodeblokkene som WordPress tilbyr? Hva med SyntaxHighlighter Evolved-plugin? Del gjerne opplevelsen din med oss i kommentarfeltet nedenfor.
