Hur du enkelt kan visa kod på din WordPress-webbplats

Vill du visa kod i dina WordPress-blogginlägg? Om du försökte lägga till kod som vanlig text kommer WordPress inte att visa den korrekt.


WordPress kör ditt innehåll genom flera saneringsfilter varje gång du sparar ett inlägg. Dessa filter finns för att se till att någon inte injicerar kod via postredigeraren för att hacka din webbplats.

I den här artikeln visar vi dig rätt sätt att enkelt visa kod på din WordPress-webbplats. Vi visar dig olika metoder och du kan välja den som bäst passar dina behov.

Hur du enkelt visar kod i WordPress-inlägg

Metod 1. Visa kod med hjälp av standardredigeraren i WordPress

Den här metoden rekommenderas för nybörjare och användare som inte behöver visa kod ofta.

Redigera helt enkelt blogginlägget eller sidan där du vill visa koden. Lägg till ett nytt kodblock i inlägget på redigeringsskärmen.

Lägg till kodblock i dina WordPress-inlägg

Du kan nu ange kodavsnittet i textområdet i blocket.

Lägg till kod i ditt blogginlägg

Efter det kan du spara ditt blogginlägg och förhandsgranska det för att se kodblocket i aktion.

PHP-kod visas i WordPress

Beroende på ditt WordPress-tema kan kodblocket se annorlunda ut på din webbplats.

Metod 2. Visa kod i WordPress med hjälp av ett plugin

För den här metoden kommer vi att använda ett WordPress-plugin för att visa kod i dina blogginlägg. Den här metoden rekommenderas för användare som ofta visar kod i sina artiklar.

Det ger dig följande fördelar jämfört med standardkodblocket:

  • Det gör att du enkelt kan visa valfri kod på alla programmeringsspråk
  • Den visar koden med syntaxmarkering och radnummer
  • Dina användare kan enkelt studera koden och kopiera den

Först måste du installera och aktivera SyntaxHighlighter Evolution-plugin. Mer information finns i vår steg för steg-guide för hur du installerar ett WordPress-plugin.

Efter aktivering kan du gå vidare och redigera blogginlägget där du vill visa koden. Lägg till blocket ‘SyntaxHighlighter Code’ på inlägget i redigeringsskärmen.

SyntaxHighlighter-kodblock

Du kommer nu att se ett nytt kodblock i postredigeraren där du kan ange din kod. När du har lagt till koden måste du välja blockinställningar från höger kolumn.

Inställningar för SyntaxHighlighter-kodblock

Först måste du välja språk för din kod. Efter det kan du stänga av radnumren, ange första radnumret, markera vilken rad du vill och stänga av funktionen för att göra länkar klickbara.

När du är klar sparar du ditt inlägg och klickar på förhandsgranskningsknappen för att se det i aktion.

Koden visas med syntaxmarkering

Plugin kommer med ett antal färgscheman och teman. För att ändra färgtema måste du besöka Inställningar »SyntaxHighlighter sida.

SyntaxHighlighter-inställningar

Från inställningssidan kan du välja ett färgtema och ändra SyntaxHighlighter-inställningar. Du kan spara dina inställningar för att se en förhandsvisning av kodblocket längst ner på sidan.

Förhandsvisning av kodblock

Använda SyntaxHighlighter med Classic Editor

Om du fortfarande använder den gamla klassiska WordPress-redigeraren, så här är hur du skulle använda SyntaxHighlighter-plugin för att lägga till kod i dina WordPress-blogginlägg..

Slå helt enkelt in din kod runt fyrkantiga parenteser med språknamnet. Om du till exempel lägger till PHP-kod lägger du till den så här:

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

På samma sätt, om du ville lägga till en HTML-kod, kommer du att linda den runt HTML-kortkoden så här:

[html]
En provlänk
[/html]

Metod 3. Visa kod i WordPress manuellt (inget plugin eller block)

Den här metoden är för avancerade användare eftersom den kräver mer arbete och inte alltid fungerar som avsett.

Den passar för användare som fortfarande använder den gamla klassiska redigeraren och vill visa kod utan att använda ett plugin.

Först måste du skicka din kod genom ett online-kodningsverktyg för HTML-enheter. Det kommer att ändra din kodmarkering till HTML-enheter, vilket gör att du kan lägga till koden och kringgå WordPress-rensningsfiltren.

Kopiera och klistra sedan in din kod i textredigeraren och linda den runt och tagga.

Lägga till kod manuellt i klassisk redigerare

Din kod ser så här ut:

Detta är en exempellänk

Du kan nu spara ditt inlägg och förhandsgranska koden i aktion. Din webbläsare konverterar HTML-enheterna och användare kommer att kunna se och kopiera rätt kod.

Manuell visning av kod i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan visa kod på din WordPress-webbplats. Du kanske också vill se vår ultimata lista över de mest eftertraktade WordPress-tips, tricks och hacks.

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