Het verwerven van de vaardigheid om code effectief onder de aandacht te brengen in WordPress is van het grootste belang voor bloggers en makers van inhoud die consequent code online publiceren zodat hun publiek deze kan gebruiken. Computercode, zoals bedoeld, genereert een nieuwe visuele output aan de voorkant van een website, die verschilt van de tags, schuine strepen en haakjes die aanwezig zijn in de eigenlijke codefragmenten.
Dit leidt echter tot een hachelijke situatie voor personen die over ontwikkeling en ontwerp schrijven, omdat ze een middel nodig hebben om de code op de juiste manier te presenteren zonder dat deze de beoogde functionaliteit uitvoert, zoals het genereren van een knop of het toepassen van stijlen op een alineablok.
Simpel gezegd, bij het maken van een blogbericht met een codefragment als voorbeeld, is het absoluut noodzakelijk om te voorkomen dat de code wordt uitgevoerd. Deze aanpak stelt lezers in staat om de code in zijn oorspronkelijke vorm waar te nemen, deze binnen een goed opgemaakt blok te bekijken en zelfs de inhoud ervan te kopiëren voor hun eigen ontwikkelingsinspanningen.
Deze gids is bedoeld om verschillende methoden te demonstreren voor het weergeven van code in WordPress, ongeacht het gekozen WordPress-thema. Bovendien helpt het u bij het bepalen van de meest geschikte methode voor uw specifieke workflow.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuWat gebeurt er als je reguliere code toevoegt in WordPress?
Wanneer je reguliere code rechtstreeks aan een WordPress-bericht of -pagina toevoegt, zonder specifieke maatregelen te nemen, kan de code onbedoelde gevolgen hebben. WordPress heeft ingebouwde mechanismen die inhoud automatisch verwerken en opschonen om veiligheid en juiste functionaliteit te garanderen. Als gevolg hiervan kan, wanneer reguliere code wordt toegevoegd, deze door WordPress worden gewijzigd of volledig worden verwijderd.
Hier zijn een paar dingen die kunnen gebeuren wanneer u reguliere code toevoegt in WordPress:
- Codewijziging: WordPress kan de code wijzigen door bepaalde elementen te verwijderen of aan te passen om potentiële veiligheidsrisico's of conflicten met de functionaliteit van het platform te voorkomen. Dit kan ertoe leiden dat de code niet wordt uitgevoerd zoals bedoeld of dat er fouten optreden.
- Codestrippen: WordPress heeft filters en beveiligingsmaatregelen die bepaalde soorten code kunnen verwijderen die als onveilig of onnodig worden beschouwd. Dit kan leiden tot het verwijderen van belangrijke codefragmenten of het volledige codeblok zelf.
- Visuele vervorming: code bevat doorgaans speciale tekens, symbolen en opmaak die de visuele presentatie van uw WordPress-inhoud kunnen verstoren. Dit kan opmaakproblemen, verkeerde uitlijning of de code die als platte tekst wordt weergegeven in plaats van als code worden weergegeven, veroorzaken.
- Uitvoering van code: in sommige gevallen, als de code niet correct wordt opgeschoond of behandeld, kan deze worden uitgevoerd en de beoogde functionaliteit uitvoeren. Dit kan onbedoelde gevolgen hebben, zoals het maken van knoppen, het wijzigen van het uiterlijk van de inhoud of zelfs het algehele functioneren van uw website.
Om deze problemen op te lossen en code veilig weer te geven in WordPress, wordt het aanbevolen om geschikte methoden of plug-ins te gebruiken die speciaal zijn ontworpen voor het presenteren van codefragmenten. Deze methoden zorgen ervoor dat de code correct wordt opgemaakt, bewaard en weergegeven zonder ongewenste wijzigingen of uitvoering.
Hier gaan we de volgende HTML-code toevoegen aan het fragment:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Dit specifieke codefragment maakt gebruik van HTML-stijlelementen om drie inhoudsblokken te genereren die in groen zijn versierd, compleet met kopteksten en alinea's.
Desalniettemin is het onze bedoeling om de onverwerkte code in een blogpost te presenteren, in plaats van deze in de gegeven blokken weer te geven.
De volgende resultaten kunnen worden waargenomen wanneer de code rechtstreeks in de WordPress Gutenberg Block Editor wordt geplakt:
Gezien het bovenstaande is het duidelijk dat WordPress ernaar streeft de code te gebruiken voor zijn primaire functie, namelijk het genereren van inhoud. Het verwijdert echter de stijl van de code, waardoor het gewenste resultaat niet aan de lezers wordt gepresenteerd.
Om dergelijke omstandigheden te voorkomen, pleiten we sterk voor het gebruik van een van de onderstaande methoden om code weer te geven.
4 manieren om code weer te geven in WordPress
De volgende technieken zijn gerangschikt in oplopende moeilijkheidsgraad en we bieden specifieke benaderingen die zijn toegesneden op personen die voldoening halen uit het samenstellen van code en inhoud binnen markdown-editors, in tegenstelling tot het gebruik van WordPress.
Methode 1: de Gutenberg Block Editor gebruiken
De Gutenberg-editor bevat een reeds bestaand codeblok dat de presentatie van codefragmenten vergemakkelijkt met behoud van hun opmaak en zonder de code uit te voeren.
Ga om te beginnen naar een bericht of pagina in WordPress en selecteer een van de knoppen Blok toevoegen.
Selecteer een van de knoppen "Blok toevoegen" om verder te gaan.
Door dit te doen, wordt het assortiment beschikbare blokken onthuld. Je hebt de mogelijkheid om te zoeken naar het blok "Code" of een trefwoord zoals "code" in de zoekbalk in te voeren.
Nadat u het codeblok hebt gevonden, herkenbaar aan de haakjespictogrammen, klikt u erop om een codegedeelte in het bericht in te voegen.
Momenteel zou een gebied met de keu "Compose code…" voor u zichtbaar moeten zijn.
De WordPress Gutenberg-editor biedt markdown-ondersteuning, waardoor codeblokken kunnen worden ontdekt en ingevoegd door het gebruik van een schuine streep (/) gevolgd door de invoer van "C" of "Code" in de editor. WordPress zal vervolgens alle relevante blokken weergeven, wat een handiger invoegproces mogelijk maakt.
Het is belangrijk om op het onderscheid te letten tussen het codeblok en het aangepaste HTML-blok. Hoewel het aangepaste HTML-blok bedoeld is voor het opnemen van aangepaste HTML-code die op de frontend moet worden weergegeven, is het codeblok specifiek ontworpen voor het toevoegen van onbewerkte code voor weergavedoeleinden.
Momenteel is het het juiste moment om de gewenste code te repliceren en in te voeren in het daarvoor bestemde gebied met het label "Write Code..."
De code die u hebt opgegeven, is nu ingesloten in het daarvoor bestemde codeblok.
Een voordelig aspect van het codeblok is dat het vasthoudt aan de opmaak van spaties en tabs binnen het originele codefragment. Bijgevolg moet de weergegeven code zijn visuele consistentie behouden met de bron waaruit deze is gekopieerd.
Om uw code in uw WordPress-bericht of -pagina weer te geven, voltooit u de procedure door op de knop "Publiceren" te klikken. Bovendien heeft u de mogelijkheid om vóór publicatie een visuele weergave van het uiterlijk te verkrijgen door "Preview" te selecteren.
Nadat je op de knop "Publiceren" hebt geklikt, ga je verder met toegang tot de live versie van het bericht om te controleren of het codefragment wordt weergegeven als onbewerkte code.
Zoals opgemerkt, wordt het Code-blok gekenmerkt door zijn eenvoud, maar het dient het essentiële doel van het behouden van de opmaak bij het presenteren van code in blogposts.
Raadpleeg de meegeleverde schermafbeelding hieronder. In dit specifieke voorbeeld blijft het oorspronkelijke codefragment ongewijzigd; het wordt alleen aan de voorkant gepresenteerd in een grijze doos.
Om de prominentie van het codeblok te vergroten, is het raadzaam om te overwegen het standaard uiterlijk te wijzigen.
Om toegang te krijgen tot de beschikbare stijlkeuzes voor het blok, selecteert u alstublieft het codeblok en klikt u vervolgens op de knop Instellingen (tandwielpictogram). Met deze actie wordt het tabblad Blok geopend, waarin uitsluitend de blokinstellingen worden weergegeven die van toepassing zijn op het geselecteerde blok, namelijk het codeblok in dit geval.
Men heeft de mogelijkheid om het Code-blok aan te passen aan persoonlijke voorkeuren, inclusief de mogelijkheid om aspecten zoals tekst- en achtergrondkleuren te wijzigen.
Methode 2: een plug-in gebruiken
Gebruik de installatiemethode van je voorkeur om de Enlighter – Customizable Syntax Highlighter- plug-in op te nemen in je WordPress-site.
Eenmaal geactiveerd, zal de plug-in volledig functioneel zijn en kunt u code invoegen in elk bericht/pagina via het Gutenberg-blok of de Classic Editor Insert-knop.
Als u de WordPress Gutenberg Block Editor gebruikt, opent u een bericht waarin u code wilt weergeven. Selecteer een van de Add Block-knoppen (herkenbaar aan het "+"-symbool) om het assortiment beschikbare blokken te onthullen.
Lees of voer een trefwoord in dat betrekking heeft op het Enlighten Sourcecode-blok. Ga door met klikken op het betreffende blok om het op te nemen in de post.
Het Enlighter Highlighter-blok verschijnt vervolgens in de Block Editor-interface, met een aangewezen kop met de titel "Generic Highlighting" en een tekstinvoerveld met de naam "Insert Sourcecode..."
Voer of kopieer en plak de gewenste code bedoeld voor weergave op WordPress in het daarvoor bestemde tekstveld "Broncode invoegen...".
In zijn hoedanigheid van syntax-highlighter behoudt de plug-in alle opmaakvoorkeuren en tabellen. Als u tevreden bent met het resultaat, gaat u verder met het selecteren van de knop "Publiceren".
Door deze functionaliteit te gebruiken, hebt u toegang tot de gebruikersinterface van uw bericht om dezelfde inhoud te bekijken als bezoekers van de site.
De Enlighter-plug-in biedt een simplistisch standaardthema voor het weergeven van code, vergezeld van regelnummers die helpen bij het structureren en verwijzen.
Zoals eerder vermeld, biedt het gebruik van een plug-in om code weer te geven op het WordPress-platform duidelijke voordelen in vergelijking met alternatieve methoden. Een illustratief voorbeeld van een dergelijk voordeel is de frontend-functionaliteit die wordt geboden door de Enlighter-syntax-plug-in, waarbij coderegels dynamisch worden gemarkeerd terwijl de gebruiker door de inhoud scrolt.
Bovendien zijn er binnen het codevak in de rechterbovenhoek verschillende knoppen die de gebruikerservaring verbeteren. Een van deze knoppen maakt het met name mogelijk om de code in platte tekst weer te geven, zonder regelnummers.
De tweede knop, aangeduid als "Kopiëren naar klembord", vergemakkelijkt de onmiddellijke duplicatie van alle inhoud in het codevak, waardoor gebruikers de code gemakkelijk kunnen overbrengen en plakken in elk gewenst programma.
Ten slotte opent de derde knop de code in een nieuw venster, waardoor deze wordt gepresenteerd in een browservenster dat is opgemaakt als platte tekst.
De Enlighter-plug-in biedt een reeks thema's en robuuste aanpassingstools om het uiterlijk van het codevak aan te passen aan uw voorkeuren. Als u liever niet het standaardthema gebruikt, kunt u binnen WordPress teruggaan naar uw bericht en het momenteel actieve Enlighter-broncodeblok selecteren.
Deze actie onthult de Block-zijbalk in WordPress. Als het niet meteen verschijnt, zorg er dan voor dat u op de knop Instellingen (tandwielpictogram) in de rechterbovenhoek van het WordPress-venster klikt.
De eerste aanpassingsoptie die u moet overwegen, is het veld Taal, omdat het de plug-in instrueert in welke codetaal moet worden weergegeven, waardoor de juiste opmaak- en markeringsfuncties mogelijk zijn.
Er bestaat een aanzienlijke selectie van codeertalen om te overwegen, bekijk daarom de lijst en selecteer degene die het meest geschikt is.
De Speciallines-functie benadrukt aangewezen regels door gebruikers toe te staan regelnummers in te voeren, gescheiden door komma's.
Bijgevolg worden de aangewezen lijnen die u hebt opgegeven visueel benadrukt voor alle personen die de site bezoeken.
De Lineoffset-parameter biedt een manier om uw coderingsfragment op een bepaald regelnummer te laten beginnen, wat voordelig blijkt te zijn bij het presenteren van een subset code uit een grotere set regels.
Het is duidelijk dat door het invoeren van de waarde "10" in het veld Lineoffset, het hele codevak begint vanaf regelnummer 10.
Methode 3: een encodertool gebruiken
Bezoek de W3Docs HTML Encoder-website. Op de pagina vindt u twee aangrenzende vakvelden. De linker is bedoeld om uw code te plakken, terwijl de rechter de gecodeerde versie weergeeft die u kunt kopiëren en in WordPress kunt plakken.
Alvorens verder te gaan, is het nodig om het gewenste type codebehoud te specificeren:
- Selecteer JavaScript Unicode als u van plan bent code met JavaScript-elementen te plakken.
- Kies voor HTML-symbolen als u met HTML werkt.
Voer de gewenste code in die in WordPress moet worden weergegeven in het daarvoor bestemde veld aan de linkerkant. Zoek en selecteer vervolgens de knop Coderen die zich rechtsboven bevindt.
Het uiteindelijke resultaat lijkt misschien verwarrend; het is echter in wezen een samensmelting van HTML-elementen die gericht zijn op het behoud van de volledige ingevoegde code, terwijl elke onbedoelde activering of weergave van alternatieve inhoud op de frontend wordt vermeden.
Klik op de knop "Kopiëren".
Keer terug naar WordPress en ga naar de bedoelde post of pagina. Ga verder met het selecteren van het menu Opties (weergegeven door drie verticale stippen) in de rechterbovenhoek. Kies vervolgens voor de functie Code Editor.
De huidige interface zal de Code Editor presenteren in plaats van de visuele Block Editor. Zoek de gewenste sectie voor codeweergave en ga verder met het invoegen van uw gecodeerde HTML in de editor.
Als u de klassieke WordPress-editor gebruikt, moet u naar het tabblad Tekst gaan, dat overeenkomt met de code-editor in de Gutenberg-blokeditor.
Selecteer de optie "Bijwerken" of "Publiceren" om het bericht af te ronden en ga naar de voorkant van het bericht om de visuele presentatie ervan te bekijken.
U kunt de ongewijzigde code zien die aanvankelijk in de encoder was ingevoegd, voordat HTML-coderingselementen werden opgenomen. Het is belangrijk op te merken dat de encoders geen stylingmogelijkheden bieden, waardoor deze benadering ideaal is voor het bereiken van een nette en minimalistische esthetiek.
Methode 4: een aangepaste shortcode gebruiken
Het maken van een aangepaste shortcode vervult de taak van het invoegen van herbruikbare codeblokken zonder handmatig kopiëren en plakken. Dit is precies waarom aangepaste shortcodes een robuuste mogelijkheid bieden voor codeweergave op het WordPress-platform.
De voordelen van het gebruik van aangepaste shortcodes voor codepresentatie zijn als volgt:
- Met aangepaste shortcodes kunnen ingewikkelde codesecties worden opgeslagen voor toekomstig hergebruik, waardoor het niet meer nodig is om herhaaldelijk lange codefragmenten te typen.
- Het is mogelijk om gepersonaliseerde CSS-stijlen te definiëren voor codemarkeerders en containers.
- Shortcodes kunnen door elke gebruiker worden gebruikt, waardoor andere bijdragers moeiteloos uw codemarkeringen en -blokken kunnen gebruiken met een simpele klik.
Het maken van een aangepaste shortcode vereist vaardigheid in het aanpassen van WordPress-themabestanden, het werken met PHP-code en mogelijk het ontwikkelen van WordPress-plug-ins. Als gevolg hiervan kan het maken van een aangepaste shortcode voor WordPress problemen opleveren voor personen die nieuw zijn met PHP.
Desalniettemin biedt het eindresultaat een aanzienlijk eenvoudigere benadering voor het weergeven van code op het WordPress-platform.
Men heeft de vrijheid om elke gewenste naam voor de aangepaste shortcode te kiezen en verschillende alternatieven vast te stellen, zoals [html] [/html] en [css] [/css], om tegemoet te komen aan verschillende programmeertalen.
Houd er rekening mee dat het voor optimale syntaxisaccentuering raadzaam is om aangepaste shortcodes te gebruiken in combinatie met de teksteditor (in WordPress Classic) of het aangepaste HTML-vak wanneer u met de WordPress Gutenberg Block Editor werkt.
Het doel is om een op maat gemaakte shortcode te maken waarmee gebruikers code kunnen invoeren of invoegen binnen de afgebakende grenzen van de openings- en sluitingstags van de shortcode.
Het doel is om een op maat gemaakte shortcode te ontwikkelen waarmee gebruikers code kunnen invoeren of invoegen binnen de aangewezen openings- en sluittags van de shortcode.
Afsluiten
Het weergeven van code in WordPress is cruciaal voor het delen van programmeerconcepten, het waarborgen van nauwkeurigheid, het verbeteren van de esthetiek en het bevorderen van samenwerking. Het stelt ontwikkelaars in staat hun publiek voor te lichten, concreet bewijs te leveren, de gebruikerservaring te verbeteren en de betrokkenheid van de gemeenschap aan te moedigen. Het presenteren van codefragmenten bevordert transparantie, vertrouwen en betrouwbare informatie. Aangepaste shortcodes of plug-ins kunnen zorgen voor een visueel aantrekkelijke en goed gestructureerde codeweergave. Het delen van code vergemakkelijkt discussies, feedback en innovatie. Over het algemeen is effectieve codeweergave in WordPress essentieel voor kennisverspreiding, kwaliteitsborging en de groei van de WordPress-ontwikkelingsgemeenschap.
