Du måste ha sett kodavsnitt i olika WPBeginner-blogginlägg som vi skapar för att hjälpa våra läsare att lösa problem. Att visa den koden är dock inte enkelt.
Det beror på att om du försöker lägga till kod som vanlig text, kommer WordPress inte att visa den korrekt. WordPress kör ditt innehåll genom flera rensningsfilter varje gång du sparar ett inlägg. Dessa filter finns där för att säkerställa att någon inte kan injicera kod via en inläggsredigerare för att hacka din webbplats.
I den här artikeln visar vi dig de korrekta sätten 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.
Varför visa kod på en WordPress-webbplats?
Om du skriver blogginlägg om tekniska ämnen eller skapar dokumentation för dina produkter, är det mycket användbart att visa kodavsnitt. Dina användare kan helt enkelt kopiera kodstycket och lägga till det på sin webbplats.
Att visa kod på en WordPress-webbplats är dock inte så enkelt.
WordPress kommer att tolka kodavsnitten som funktionell kod och försöka implementera den på din webbplats istället för att visa den som text. Det skulle inte heller visa koden korrekt, vilket skulle leda till fel när användare anger dem på sin webbplats.
Dessutom använder WordPress flera filter som säkerhetsåtgärder. Det filtrerar innehållet för att förhindra hackare från att injicera skadlig kod i innehållseditorer och hacka din webbplats.
Med det sagt finns det olika sätt att visa kod i WordPress. Du kan klicka på länkarna nedan för att hoppa till din föredragna sektion:
Metod 1. Visa kod med standardredigeraren i WordPress
Denna metod rekommenderas för nybörjare och användare som inte behöver visa kod särskilt ofta.
Redigera helt enkelt blogginlägget eller sidan där du vill visa koden. På skärmen för WordPress innehållsredigerare, lägg till en ny kodblock till ditt inlägg.
Du kan nu ange kodavsnittet i textområdet för blocket.
Kodblocket visar en förhandsgranskning av din kod.
Därefter kan du spara ditt blogginlägg och förhandsgranska det för att se kodblocket i aktion.
När du är nöjd med utseendet på din kod, publicera ditt blogginlägg.
Beroende på ditt WordPress-tema kan kodblocket se annorlunda ut på din webbplats.
Metod 2. Visa kod i WordPress med 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 kod i vilket programmeringsspråk som helst.
- 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 pluginet SyntaxHighlighter Evolved. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering kan du gå vidare och redigera blogginlägget där du vill visa koden. På redigeringsskärmen för inlägget, lägg till blocket 'SyntaxHighlighter Code' i ditt inlägg.
Du kommer nu att se ett nytt kodblock i inläggsredigeraren där du kan ange din kod.
Efter att ha lagt till koden måste du välja blockinställningarna från kolumnen till höger.
Först måste du välja språket för din kod, som PHP, CSS, Java, etc. Därefter kan du stänga av radnummer, ange det första radnumret, markera valfri rad du vill, och stänga av funktionen för att göra länkar klickbara.
När du är klar, spara ditt inlägg och klicka på förhandsgranskningsknappen för att se det i aktion.
Pluginet levereras med ett antal färgscheman och teman.
För att ändra färgtemat måste du besöka sidan Inställningar » SyntaxHighlighter.
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örhandsgranskning av kodblocket längst ner på sidan.
Använda SyntaxHighlighter med Classic Editor
Om du fortfarande använder den gamla klassiska WordPress-redigeraren, så här använder du SyntaxHighlighter-pluginet för att lägga till kod i dina WordPress-blogginlägg.
Slå helt enkelt in din kod med fyrkantiga parenteser med språknamnet. Om du till exempel ska lägga till PHP-kod, lägger du till den så här:
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
På samma sätt, om du vill lägga till HTML-kod, kommer du att omsluta den runt HTML-kortkoden så här:
<a href="example.com">A sample link</a>
Metod 3. Visa kod i WordPress manuellt (ingen 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 är lämplig 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 onlineverktyg för kodning av HTML-entiteter. Det kommer att ändra din kodmarkering till HTML-entiteter, vilket gör att du kan lägga till koden och kringgå WordPress rensningsfilter.
Kopiera och klistra nu in din kod i textredigeraren och omslut den med <pre> och <code>-taggar.
Din kod skulle se ut så här:
<pre><code>
<p><a href="/home.html">Det här är en exempel-länk</a></p>
</pre></code>
Du kan nu spara ditt inlägg och förhandsgranska koden i praktiken.
Din webbläsare kommer att konvertera HTML-entiteterna, och användarna kommer att kunna se och kopiera den korrekta koden.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt visar kod på din WordPress-webbplats. Du kanske också vill se vår guide om hur man tillåter PHP i WordPress-inlägg och sidor och vårt expertval av bästa WordPress-utvecklingsverktyg.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Olaf
Som PHP-utvecklare har jag en liten blogg där jag ibland publicerar olika tekniker och arbetsflöden för programmering i PHP, samt delar mina egna kodavsnitt. Det är bra att WordPress tillåter kodvisning inbyggt. Personligen använder jag dock ett plugin, eftersom jag ibland behöver att koden visar att den är i CSS, andra gånger i PHP, och mycket sällan i JavaScript. Det är fördelaktigt när koden är välformaterad, och helst färganpassad efter funktion, etc. Det är också bra att överväga en kopieringsfunktion så att användare enkelt kan kopiera hela kodavsnittet till sitt urklipp. Det är därför jag föredrar ett plugin framför blockredigeraren.
Dennis Muthomi
Jag tycker att pluginet är bra för sitt jobb, men...
en funktion jag skulle älska att se tillagd är en kopieringsknapp.
För närvarande måste användare manuellt markera och kopiera hela kodblocket, vilket kan vara omständligt, särskilt för längre kodavsnitt.
Ett kopieringsalternativ med en enda klickning skulle avsevärt förbättra användarupplevelsen.
På så sätt skulle läsare enkelt kunna hämta koden utan att av misstag missa någon del av den när de markerar koden.
WPBeginner Support
Thank you for sharing that recommendation
Admin
Jiří Vaněk
Finns det en möjlighet att ha en kopieringsknapp i pluginet så att användaren inte behöver kopiera koden till urklippet manuellt?
WPBeginner Support
Not at the moment but we will keep an eye out for a method we would recommend
Admin
Jiří Vaněk
Tack för svaret. Det är en stor skam, eftersom det gör mycket arbete enklare. Ibland händer det att även radnummer kopieras in i koden med den manuella metoden. Elementor har en widget för koden som har en kopieringsknapp och den är utmärkt. Jag kommer att följa uppdateringen av artikeln vid behov.
Ms Gray
Hej,
Kan kod läggas till på sidor som skapats av tredjepartsplugins som Woocommerce?
WPBeginner Support
Ja, du skulle kunna placera kod på dessa sidor.
Admin
Ravish
Hej, först och främst, tack för den här bloggen.
Jag vill lägga till kod för problem i olika språk (t.ex. Python och C++). Hur kan vi göra det?
WPBeginner Support
Detta plugin bör fortfarande fungera för dessa språk också
Admin
Nimesh
Det här är jättebra.
Om det inte vore för detta, skulle jag ha använt ett separat plugin för kodsnuttar.
Jag använder fortfarande WordPress klassiska redigerare och kommer att lägga till kodsnuttar i mina inlägg som nämnts här.
Tack för denna fantastiska delning!
WPBeginner Support
Glad our guide was able to help
Admin
Induwara
Tack,
Den här artikeln är mycket användbar. Jag installerade pluginet och det fungerar bra. Det är ett problem med mitt tema som när jag lägger in kod från blockredigeraren så visar temat den med bakgrundsfärg så det är omöjligt att se koden. Jag är ett stort fan av WpBegginer!
WPBeginner Support
Kul att vår guide var till hjälp, du bör kunna kontakta ditt tema för hjälp med det problemet.
Admin
Manju
Kan du föreslå ett sätt att visa kod från ett Github-repo i Wordpress-inlägg?
WPBeginner Support
Du kan placera koden som vi har i den här artikeln och notera var den kom ifrån Github under den. Det kan finnas plugin-alternativ för att bädda in koden direkt
Admin
Kunal Mandalia
Tack för tipset om "code"-taggar – det fungerade som en charm.
WPBeginner Support
You’re welcome
Admin
Mahesh
Bra tips.. Tack för tipset.
WPBeginner Support
Thank you and you’re welcome
Admin
perveen
vi behöver kodning i wordpress jag trodde vi inte behövde någon kodning i wordpress.
WPBeginner Support
Det är inte nödvändigt, men för webbplatser som vill visa kod för sina användare finns det några metoder de kan använda.
Admin
Adamu Malte
Tack @Syed för din utmärkta handledning.
manasa
Fin blogg med utmärkt information. Tack, fortsätt dela med dig.
Anh
Bra, undrar bara hur man kan lägga in koden
1-click Use in WordPress
och ändå få koden att se ut som text.
Gillar hur du kan posta den här koden
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
till ditt inlägg utan att ändra hur det visas i inlägget.
Rushikesh Thawale
Thank You for this post.
Christian
There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on Wordpress plugin search!
Synatx Highlighter Evolved plugin
Ahmed
Tack Syed....Bra handledning. Jag vill fråga dig hur vi kan ändra teckenstorleken på koden?
Dave Mackey
Jag tror att det är ett problem med Syntax Highlighter Evolved i de senaste versionerna av WordPress. Jag, och andra, har problem med att den felaktigt visar HTML-entiteter. Se supportforum för mer information.
Md Abul Bashar
Hur visar man kod utan plugin, bara kodning?
John D
Personligen använder jag WP-GeSHi-Highlight, som använder standard GeSHi-koder. Jag tror jag använde en föregångare till pluginet som visas här, men jag hade svårt att hitta språkkoderna.
Ajay
På senare tid har jag funnit det lättare att använda GISTs för att visa kod och sedan bara bädda in Gisten i inlägget
Mikhail S.
@AJAY, berätta mer om att använda GIST för att visa kodexempel.
Tack!
Thomas A. Reinert
Jag håller absolut med. De är snyggt formaterade och syntaxmarkerade, de är forkbara och de är versionshanterade också. Så WP GIST är vägen att gå för mig åtminstone..