Hur du visar rÄa koder i dina WordPress-blogginlÀgg

How to easily display code in WordPress posts

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 rengöringsfilter 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.

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Ä ofta.

Redigera bara blogginlÀgget eller sidan dÀr du vill visa koden. LÀgg till ett nytt kodblock i inlÀgget pÄ redigeringsskÀrmen för inlÀgg.

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

Du kan nu ange kodavsnittet i blockets textomrÄde.

LÀgg till kod i ditt blogginlÀgg

DÀrefter 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. Denna metod 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 lÄter dig enkelt visa vilken kod som helst pÄ 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 SyntaxHighlighter Evolved plugin. För mer information, se vÄr steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Efter aktivering kan du fortsĂ€tta och redigera blogginlĂ€gget dĂ€r du vill visa koden. PĂ„ postredigeringsskĂ€rmen, lĂ€gg till blocket ‘SyntaxHighlighter Code’ i ditt inlĂ€gg.

SyntaxHighlighter kodblock

Nu ser du 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.

SyntaxHighlighter-kodblockinstÀllningar

Först mÄste du vÀlja sprÄk för din kod. DÀrefter kan du stÀnga av radnummer, ange första radnummer, 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.

Kod 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.

Syntax Highlighter-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örhandsgranskning av kodblocket lÀngst ner pÄ sidan.

Förhandsgranskning 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.

Vik bara din kod runt hakparenteser med sprÄknamnet. Till exempel, om du ska lÀgga till PHP-kod, kommer du att lÀgga till den sÄ hÀr:

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

PÄ samma sÀtt, om du vill lÀgga till en HTML-kod, kommer du att lÀgga den runt HTML-kortkoden sÄ hÀr:

[html]
En exempellÀ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 À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 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-rengöringsfiltret.

Kopiera och klistra in din kod i textredigeraren och linda den runt taggarna

 och . 

LĂ€gga till kod manuellt i klassisk redigerare

Din kod skulle se ut sÄ hÀr:


& lt; p & gt; & lt; a href = & quot; /home.html" & gt; Detta Àr en exempellÀnk & lt; / a & gt; & lt; / p & gt;

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

Visar kod manuellt i WordPress

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 ultimata lista över de mest efterfrÄgade WordPress-tipsen, trick och hacka.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du hittar oss ocksÄ pÄ Twitter och Facebook.