WordPress is een robuust Content Management Systeem dat meer dan de helft van alle websites op internet aanstuurt. De ingebouwde CRM maakt het gemakkelijk om een website te maken, zelfs als je nog nooit eerder een computerprogramma hebt geschreven. Hoewel het zo gemakkelijk is om een blok normale tekst weer te geven op een WordPress-website, kan hetzelfde niet gezegd worden voor computercode. Een stuk code moet adequaat worden weergegeven zodat kijkers het kunnen analyseren en begrijpen. En dat is waar WordPress-codeblokken om de hoek komen kijken.
Als u wilt weten hoe u codeblokken in WordPress gebruikt, bent u hier aan het juiste adres. In dit artikel zullen we u door het hele proces leiden, zodat u kunt beginnen met het delen van codefragmenten met uw lezers. Lees verder om meer te weten te komen.
hoe duetten op tik tok
Codeblokken gebruiken in WordPress
Het weergeven van een computerprogramma als normale webpaginatekst kan rampzalig zijn. Veel gebruikers zullen het moeilijk vinden om te visualiseren en te begrijpen. Gelukkig hebben veel WordPress-editors een functie voor codeblokken waarmee u een computerprogramma in een codeformaat kunt weergeven.
Gelukkig is het relatief eenvoudig om codeblokken te gebruiken om computercode weer te geven. Om aan de slag te gaan, moet u overschakelen naar de native WordPress-editor, aangezien sommige tekstplug-ins deze functie mogelijk niet hebben. Zodra je dat hebt gedaan, volg je deze stappen om een codeblok toe te voegen aan een webpagina:
- Open de webpagina waaraan u een codeblok wilt toevoegen door op de knop 'Nieuw' te klikken.
- Typ '/ code' en druk op 'Enter'.
- Typ of plak de code die u wilt weergeven en druk op de toets 'Enter'.
- U kunt verder de codeblokwerkbalk gebruiken om het uiterlijk van de code die u zojuist hebt geschreven aan te passen. U kunt bijvoorbeeld de knop 'B' gebruiken om een regel vet te maken of de knop 'i' om deze cursief te maken.
- Als u klaar bent met het ontwerpen van uw webpagina, klikt u op de knop 'Voorbeeld' om te zien hoe het codeblok eruit zal zien in een live versie.
- Als u tevreden bent met de uiteindelijke resultaten, drukt u op de knop 'Bijwerken', zodat anderen het codeblok ook kunnen zien.
Hoe u de typografie van uw codeblok kunt wijzigen
Typografie spreekt boekdelen en kan de esthetiek van niet alleen uw codeblok, maar ook van de hele webpagina maken of breken. Volg deze stappen om de typografie van uw codeblok te wijzigen:
- Markeer het codeblok waarvan u de typografie wilt wijzigen.
- Klik op het pictogram 'Instellingen' in de rechterbovenhoek van het scherm.
- Geef in het gedeelte 'Typografie' de gewenste typografie op.
- Klik op de knop 'Bijwerken' om de wijzigingen op te slaan.
U kunt de esthetiek van het blok verder aanpassen door de kleur, achtergrond, letterafstand en regelafstand te wijzigen.
Als u bijvoorbeeld een website met een donker thema heeft, wilt u misschien ook dat uw codeblok een andere achtergrond heeft.
Hoe een codeblok in WordPress te verwijderen
Codeblokken zijn niet permanent en net als alle andere elementen van een WordPress-webpagina kunt u ze verwijderen. Hier leest u hoe u het proces aanpakt:
- Open de webpagina of het bericht met het codeblok dat u wilt verwijderen.
- Klik op het codeblok dat u wilt verwijderen om het te markeren.
- Klik op de widget die bovenaan het codeblok verschijnt op de drie stippen.
- Selecteer 'Code verwijderen' uit de opties.
De bovenstaande actie zou het volledige codeblok van de webpagina moeten verwijderen. U kunt ook gewoon het blok selecteren en op de toets 'Verwijderen' drukken. U kunt ook tegelijkertijd op de toetsen 'Ctrl' + 'Shift' + 'Z' drukken en dat zou dezelfde resultaten moeten opleveren.
Hoe een reeds gepubliceerd codeblok te bewerken
Af en toe maak je zeker fouten. U kunt ook op een betere manier stuiten om het idee via code uit te voeren. Met WordPress kunt u reeds bestaande codeblokken bewerken door de onderstaande instructies te volgen:
- Open de pagina met het codeblok dat u wilt bewerken.
- Klik op 'Bewerken'.
- Klik op het codeblok om codebewerking in te schakelen.
- Als u klaar bent met het aanbrengen van de wijzigingen, klikt u op de knop 'Bijwerken'.
Een codeblok toevoegen aan uw WordPress-website met behulp van een plug-in
Als u vaak codefragmenten aan uw website toevoegt, is het misschien het beste om een robuustere plug-in te gebruiken om u te helpen. Een populair krachtig en uitstekend codeblok is de SyntaxHighlighter geëvolueerd inpluggen.
Deze plug-in heeft een voordeel ten opzichte van de native WordPress Editor omdat:
- Het markeert het aantal regels in een codefragment
- Het ondersteunt meerdere programmeertalen
- Hiermee kunnen uw kijkers de weergegeven code kopiëren en plakken
Hier leest u hoe u de plug-in kunt gebruiken om codefragmenten op uw website beter te beheren:
- Installeer en activeer de SyntaxHighlighter geëvolueerd inpluggen.
- Open de pagina of post als je een codeblok wilt toevoegen.
- Schakel bewerken in en klik op de plusknop.
- Zoek naar 'SyntaxHighLighter Evolved' en open het eerste resultaat dat verschijnt.
- Plak of schrijf de code in het beschikbare codeblok.
- Klik op het instellingenpictogram in de rechterbovenhoek van het scherm en navigeer naar het tabblad 'Blokkeren'.
- Geef op hoe u uw nummering wilt weergeven en welke regels code u wilt markeren.
- U kunt ook 'Maak URL's klikbaar' inschakelen als u uw code klikbaar wilt maken.
Volg deze stappen om de kleur en het opmaakschema van uw codeblok te wijzigen:
- Ga naar 'Instellingen' en navigeer naar het gedeelte 'SyntaxHighlighter'.
- Verander het thema van je blok.
- Druk op 'Opslaan' in het 'Voorbeeld' om een voorbeeld te zien van hoe de wijzigingen eruit zullen zien in de live-modus.
Aanvullende veelgestelde vragen
Hoe maak je van een code een klikbare link?
hoeveel het kost om een iphone te maken
Volg deze stappen om een code een link te laten blokkeren met behulp van de WordPress-editor:
1. Selecteer de coderegel die u als koppeling wilt gebruiken.
2. Selecteer in de pop-upwidget het koppelingspictogram. U kunt ook op de toetsen 'Ctrl' + 'K' op uw toetsenbord drukken.
3. Voer de URL in waarnaar u de code wilt linken en druk op de toets 'Enter'.
Kan ik code markeren met behulp van de codeblokeditor die de WordPress-editor biedt?
Nee, het codeblok van de native WordPress-editor staat gebruikers niet toe de code te kopiëren en te plakken. Om dit te doen, hebt u de hulp nodig van een geavanceerde plug-in voor het bewerken van codeblokken, zoals de plug-in 'SyntaxHighligher Evolved'.
Heeft Elementor een functie voor codeblokken?
Elementor is een populaire plug-in voor slepen en neerzetten die wordt gebruikt voor het bouwen van WordPress-websites. Als u de plug-in gebruikt om websites te maken, zult u helaas geen blok vinden waarmee u computerprogramma's op uw website kunt formatteren. Daarom moet u overschakelen naar de conventionele WordPress-editor om de taak te voltooien.
Breng uw website in de lucht
Of je nu een programmeerblog runt of gewoon codefragmenten op je website wilt delen, weten hoe je codeblokken in WordPress moet gebruiken, is super belangrijk. Codeblokken geven uw lezers een gemakkelijke tijd en verhogen over het algemeen de gebruikerservaring van uw website. En zoals je kunt zien, is het invoegen van codeblokken een relatief eenvoudig proces, vooral met de native WordPress-editor.
Heb je geprobeerd de codeblokken te gebruiken die WordPress biedt? Hoe zit het met de SyntaxHighlighter Evolved-plug-in? Deel alstublieft uw ervaring met ons in de opmerkingen hieronder.
