Eenvoudig code weergeven op uw WordPress-site

Wilt u code weergeven in uw WordPress-blogposts? Als je code zoals gewone tekst hebt geprobeerd toe te voegen, zal WordPress deze niet correct weergeven.


WordPress voert uw inhoud elke keer dat u een bericht opslaat door verschillende opschoonfilters. Deze filters zijn er om ervoor te zorgen dat iemand geen code injecteert via de posteditor om uw website te hacken.

In dit artikel laten we u de juiste manieren zien om eenvoudig code op uw WordPress-site weer te geven. We laten u verschillende methoden zien en u kunt de methode kiezen die het beste bij u past.

Eenvoudig code weergeven in WordPress-berichten

Methode 1. Code weergeven met behulp van de standaardeditor in WordPress

Deze methode wordt aanbevolen voor beginners en gebruikers die niet vaak code hoeven weer te geven.

Bewerk eenvoudig het blogbericht of de pagina waar u de code wilt weergeven. Voeg op het berichtbewerkingsscherm een ​​nieuw codeblok toe aan je bericht.

Voeg codeblok toe aan uw WordPress-berichten

U kunt nu het codefragment invoeren in het tekstgebied van het blok.

Voeg code toe aan je blogpost

Daarna kunt u uw blogbericht opslaan en een voorbeeld bekijken om het codeblok in actie te zien.

PHP-code weergegeven in WordPress

Afhankelijk van uw WordPress-thema kan het codeblok er op uw website anders uitzien.

Methode 2. Toon code in WordPress met behulp van een plug-in

Voor deze methode gebruiken we een WordPress-plug-in om code in uw blogberichten weer te geven. Deze methode wordt aanbevolen voor gebruikers die vaak code in hun artikelen weergeven.

Het biedt u de volgende voordelen ten opzichte van het standaard codeblok:

  • Hiermee kunt u eenvoudig elke code in elke programmeertaal weergeven
  • Het toont de code met syntaxisaccentuering en regelnummers
  • Uw gebruikers kunnen de code gemakkelijk bestuderen en kopiëren

Eerst moet u de plug-in SyntaxHighlighter Evolved installeren en activeren. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie.

Na activering kunt u doorgaan en het blogbericht bewerken waar u de code wilt weergeven. Voeg op het berichtbewerkingsscherm het blok ‘SyntaxHighlighter Code’ toe aan je bericht.

SyntaxHighlighter codeblok

U ziet nu een nieuw codeblok in de berichteditor waar u uw code kunt invoeren. Nadat je de code hebt toegevoegd, moet je de blokinstellingen in de rechterkolom selecteren.

Syntax Highlighter codeblokinstellingen

Eerst moet u de taal voor uw code selecteren. Daarna kunt u regelnummers uitschakelen, het eerste regelnummer opgeven, elke gewenste regel markeren en de functie uitschakelen om links klikbaar te maken.

Als je klaar bent, sla je bericht op en klik je op de voorbeeldknop om het in actie te zien.

Code weergegeven met syntaxisaccentuering

De plug-in wordt geleverd met een aantal kleurenschema’s en thema’s. Om het kleurenthema te veranderen, moet je bezoeken Instellingen »SyntaxHighlighter bladzijde.

SyntaxHighlighter instellingen

Op de instellingenpagina kunt u een kleurthema selecteren en de instellingen voor SyntaxHighlighter wijzigen. U kunt uw instellingen opslaan om een ​​voorbeeld van het codeblok onderaan de pagina te zien.

Codeblokvoorbeeld

SyntaxHighlighter gebruiken met Classic Editor

Als u nog steeds de oude klassieke WordPress-editor gebruikt, kunt u hier de SyntaxHighlighter-plug-in gebruiken om code toe te voegen aan uw WordPress-blogposts.

Wikkel uw code eenvoudigweg tussen vierkante haken met de taalnaam. Als u bijvoorbeeld PHP-code gaat toevoegen, voegt u deze als volgt toe:

[php]
<?php
privéfunctie get_time_tags () {
$ time = get_the_time (‘d M, Y’);
$ tijd teruggeven;
}
?>
[/ php]

Evenzo, als u een HTML-code wilt toevoegen, dan wikkelt u deze als volgt rond de HTML-shortcode:

[html]
Een voorbeeldlink
[/ html]

Methode 3. Code handmatig weergeven in WordPress (geen plug-in of blok)

Deze methode is voor gevorderde gebruikers omdat deze meer werk vereist en niet altijd werkt zoals bedoeld.

Het is geschikt voor gebruikers die nog steeds de oude klassieke editor gebruiken en code willen weergeven zonder een plug-in te gebruiken.

Eerst moet u uw code doorgeven via een online coderingsprogramma voor HTML-entiteiten. Het verandert uw codemarkering in HTML-entiteiten, waarmee u de code kunt toevoegen en de WordPress-opschoonfilters kunt omzeilen.

Kopieer en plak nu uw code in de teksteditor en wikkel deze om en tags.

Code handmatig toevoegen in klassieke editor

Uw code ziet er als volgt uit:

Dit is een voorbeeldlink

Je kunt nu je bericht opslaan en de code in actie bekijken. Uw browser converteert de HTML-entiteiten en gebruikers kunnen de juiste code zien en kopiëren.

Code handmatig weergeven in WordPress

We hopen dat dit artikel u heeft geholpen om te leren hoe u eenvoudig code op uw WordPress-site kunt weergeven. Misschien wil je ook onze ultieme lijst met de meest gewilde WordPress-tips, -trucs en -hacks zien.

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