Subscribe
De broncode van een website kan voor WordPress-beginners mysterieus en intimiderend aanvoelen, vooral wanneer ze nog nooit met websitebestanden of backendinstellingen hebben gewerkt. Voor veel gebruikers is broncode iets waarvan ze weten dat het bestaat, maar dat ze zelden zien of begrijpen.
Als je geen sterke technische vaardigheden hebt, is het heel normaal om te denken dat toegang tot de broncode je website kan beschadigen of ernstige problemen kan veroorzaken. Sommige gebruikers zijn bang dat het openen van het verkeerde bestand of het aanklikken van de verkeerde optie hun site kan breken, fouten kan veroorzaken of zelfs kan leiden tot het beruchte witte scherm des doods.
Tegelijkertijd is het belangrijk om onderscheid te maken tussen het bewerken van broncode en het simpelweg vinden en bekijken ervan. Hoewel het aanpassen van code bepaalde risico’s met zich meebrengt, verandert het lokaliseren en openen van bronbestanden niets aan je website. Zolang er geen wijzigingen worden opgeslagen, blijft je site volledig intact en werkt alles precies zoals voorheen.
Wat Is Broncode?
De broncode van een website kan voor WordPress-beginners mysterieus en intimiderend aanvoelen, vooral als ze nog nooit met bestanden of code hebben gewerkt. Voor veel gebruikers lijkt broncode iets dat verborgen zit achter de interface en alleen toegankelijk is voor ontwikkelaars.
Als je geen sterke technische vaardigheden hebt, is het makkelijk om te denken dat toegang tot de broncode je website kan beschadigen of ernstige problemen kan veroorzaken. Sommige gebruikers zijn bang dat het openen van het verkeerde bestand of het kiezen van de verkeerde optie hun site kan breken of zelfs kan resulteren in het gevreesde witte scherm des doods.
Het is belangrijk om het verschil te begrijpen tussen het bewerken van broncode en het simpelweg vinden en bekijken ervan. Hoewel het aanbrengen van wijzigingen in code bepaalde risico’s met zich meebrengt, heeft het openen van bronbestanden zonder ze te wijzigen geen enkele invloed op je website. Zolang er geen wijzigingen worden opgeslagen, blijft je site precies hetzelfde.
Achter elke zichtbare webpagina bevindt zich een gestructureerde laag code die verantwoordelijk is voor de lay-out, vormgeving en functionaliteit. Deze onderliggende laag staat bekend als de broncode en wordt in WordPress voornamelijk opgebouwd met drie kernprogrammeertalen.
HTML
HTML, een afkorting van Hyper Text Markup Language, werd oorspronkelijk ontwikkeld door Tim Berners-Lee en zijn team bij de Europese Organisatie voor Kernonderzoek, beter bekend als CERN. Het vormt de structurele basis van elke webpagina.
HTML bepaalt welke elementen op een pagina aanwezig zijn, zoals koppen, alinea’s, links, afbeeldingen en knoppen. Deze elementen worden omgeven door tags die de browser vertellen hoe de inhoud moet worden gestructureerd en weergegeven.
Voorbeeld:
<p>This is a paragraph of text.</p>
<h1>Main Page Title</h1>
<a href="#">Read more</a>
HTML is te vergelijken met het skelet van een gebouw. Het legt de structuur vast voordat er styling of interactiviteit wordt toegepast.
CSS
CSS staat voor Cascading Style Sheets en bepaalt hoe een webpagina eruitziet. Waar HTML de structuur vastlegt, regelt CSS kleuren, lettertypen, witruimte, randen en de algemene lay-out.
CSS stelt ontwikkelaars in staat om pagina’s consistent te stylen en het visuele ontwerp los te koppelen van de inhoudsstructuur.
Voorbeeld:
.howto {
display: block;
}
.kbd {
font-family: arial, helvetica, sans-serif;
padding: 5px 3px;
white-space: nowrap;
color: #000;
background: #eee;
border-width: 2px 4px 5px 3px;
border-style: solid;
border-color: #ccc #aaa #888 #bbb;
}
Deze regels bepalen hoe specifieke elementen op de pagina worden weergegeven, waaronder afstand, typografie, achtergrondkleur en randen.
JavaScript
JavaScript is een dynamische programmeertaal die logica en interactiviteit aan een website toevoegt. Het stelt pagina’s in staat om in realtime te reageren op gebruikersacties en veranderende omstandigheden.
Veel interactieve functies in WordPress, zoals uitklapmenu’s, pop-ups, formuliervalidatie en het dynamisch laden van content, zijn afhankelijk van JavaScript.
Voorbeeld:
function enEdition() {
/* Ne rien faire mode edit + preload */
if (encodeURIComponent(document.location).search(/%26preload%3D/) != -1)
return; // &preload=/
if (!wpPageName.match(/Discussion.*\/Traduction/)) return;
var diff = new Array();
var status;
var pecTraduction;
var pecRelecture;
var avancementTraduction;
var avancementRelecture;
/* ************ Parser ************ */
var params = document.location.search.substr(1, document.location.search.length).split('&');
var i = 0;
var tmp;
var name;
while (i < params.length) {
tmp = params[i].split('=');
name = tmp[0];
switch (name) {
case 'status':
status = tmp[1];
break;
case 'pecTraduction':
pecTraduction = tmp[1];
break;
}
i++;
}
}
JavaScript verwerkt logica zoals het uitlezen van parameters uit een URL, het controleren van voorwaarden en het bepalen welke acties op een pagina moeten worden uitgevoerd.
Lees ook: Een eenvoudige en duidelijke gids voor het bewerken van het functions.php-bestand in WordPress
Waarom Zou Je Toegang Willen Tot De Broncode?
Er zijn verschillende praktische redenen waarom het bekijken van de broncode van je website nuttig kan zijn, zelfs als je geen ontwikkelaar bent.
- Problemen op je website oplossen
Als iets niet werkt zoals verwacht, kun je via de broncode bekijken wat er achter de schermen gebeurt. Je kunt ontbrekende elementen, foutieve scripts of conflicten identificeren die fouten veroorzaken. Het controleren van de broncode geeft vaak beter inzicht in de oorzaak van het probleem en helpt je te begrijpen waar het misgaat. - Plugins en trackingtools controleren
Soms wil je bevestigen dat een specifieke plugin actief is of dat externe diensten correct zijn gekoppeld. Een veelvoorkomend voorbeeld is het controleren of de Google Analytics-trackingcode correct is toegevoegd. Door de broncode te bekijken, kun je nagaan of het trackingscript aanwezig is en correct wordt geladen.
Voorbeeld:
<script type="text/javascript">
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
a=s.createElement(o), m=s.getElementsByTagName(o)[0];
a.async=1; a.src=g; m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','_gaTracker');
_gaTracker('create', 'UA-XXXXX-Y', 'auto');
_gaTracker('set', 'forceSSL', true);
_gaTracker('require', 'displayfeatures');
_gaTracker('send', 'pageview');
</script>
- Begrijpen hoe andere websites werken
Door toegang te krijgen tot de broncode kun je ook zien hoe een website achter de schermen is opgebouwd. Je kunt bijvoorbeeld de broncode van een website van een concurrent of een site die je bewondert bekijken om beter inzicht te krijgen in de structuur, lay-outkeuzes of gebruikte scripts. Dit kan een waardevol leermiddel zijn en een bron van inspiratie wanneer je aan je eigen website werkt.
Hoe Je De Broncode Vindt
Het bekijken van de broncode van een website of webpagina is eigenlijk heel eenvoudig en vereist geen geavanceerde technische kennis. De meeste moderne browsers beschikken over ingebouwde tools waarmee je de broncode van een pagina met slechts een paar klikken kunt bekijken.
Om te beginnen klik je eenvoudig met de rechtermuisknop ergens op een webpagina en selecteer je Paginabron bekijken, Paginabron weergeven of een andere optie waarin het woord bron voorkomt. De exacte benaming kan verschillen afhankelijk van de browser die je gebruikt, zoals Google Chrome, Firefox, Safari, Opera of Internet Explorer.
Zodra je deze optie selecteert, wordt de broncode van die specifieke webpagina geopend in een nieuw tabblad. Vanaf daar kun je door de code scrollen, erin zoeken en verschillende onderdelen bekijken zonder je zorgen te maken dat je de website beschadigt. Het bekijken van broncode is alleen-lezen en brengt geen wijzigingen aan, tenzij je de bestanden elders actief bewerkt en opslaat.
Voorbeeld:
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- This site is optimized with the Yoast SEO plugin v3.7.1 -->
<title>Professional WordPress Website Maintenance | 7-Day Free Trial</title>
<meta name="description" content="Unlimited edits, 24/7/365 support, an unbeatable suite of security and daily maintenance for your WordPress website." />
<link rel="canonical" href="http://www.example.com/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Professional WordPress Website Maintenance | 7-Day Free Trial" />
<meta property="og:description" content="Unlimited edits, 24/7/365 support, an unbeatable suite of security and daily maintenance for your WordPress website." />
<meta property="og:url" content="http://www.example.com/" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Website",
"url": "http://www.example.com/",
"name": "Example Website"
}
</script>
</head>Lees ook: Hoe je een 404-pagina aanpast in WordPress
Zo Gebruik Je Zoeken Om Door De Broncode Te Navigeren
Nu je de broncode van een webpagina hebt gevonden, is de volgende stap leren hoe je er efficiënt doorheen navigeert. Dit is het moment waarop broncode bijzonder handig wordt, vooral wanneer je specifieke informatie probeert te vinden.
In de meeste gevallen is broncode lang en lastig handmatig te doorzoeken, zelfs op kleinere websites. In plaats van door honderden regels te scrollen, is de meest effectieve aanpak om rechtstreeks binnen de broncode te zoeken met behulp van trefwoorden of zinnen.
- Druk op je toetsenbord op CTRL + F als je een pc gebruikt, of op CMD + F op een Mac.
Dit opent de ingebouwde zoekfunctie in je browser of in de weergave van de broncode. - Typ het trefwoord, de zin of de specifieke tekst waarnaar je op zoek bent.
Dit kan een volledige zin zijn, een classnaam, een tracking-ID of een andere herkenbare tekenreeks. - Als het trefwoord in de broncode voorkomt, wordt het automatisch gemarkeerd.
Je kunt vervolgens door elke voorkomens navigeren om alle instanties van die tekst snel te vinden.
Wil je bijvoorbeeld een specifieke zin vinden, dan kun je zoeken naar find this sentence en direct zien waar deze in de broncode voorkomt.
Voorbeeld:
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
if (document.location.search) {
if (query_string['prevent']) {
window.addEventListener('DOMContentLoaded', function () {
window.name = '';
}, false);
}
}
</script>
<title>How to Find Source Code in WordPress</title>
<meta name="description" content="The source code of a website can be a mysterious and intimidating concept for a WordPress beginner." />
<meta property="og:title" content="How to Find Source Code in WordPress" />
<meta property="og:description" content="The source code of a website can be a mysterious and intimidating concept for a WordPress beginner." />
<meta property="og:type" content="article" />
</head>
Broncode Bewerken
Als je een stap verder wilt gaan en daadwerkelijk wijzigingen wilt aanbrengen in de broncode, biedt WordPress een aantal praktische opties. Je kunt rechtstreeks werken via de ingebouwde editor in het WordPress-beheerpaneel of toegang krijgen tot je bestanden via File Transfer Protocol (FTP).
Beide methoden geven toegang tot de kernonderdelen van je website, waaronder themabestanden en plugincode. Met dit toegangsniveau kun je functionaliteit aanpassen, lay-outs wijzigen of integraties verfijnen zodat ze beter aansluiten op je wensen. Het is echter belangrijk om voorzichtig te werk te gaan. Voordat je ingrijpende wijzigingen doorvoert, wordt sterk aangeraden om een volledige back-up van je website te maken, zodat je alles snel kunt herstellen als iets niet werkt zoals verwacht.
Wil je je gedachten delen, vragen stellen of deelnemen aan de discussie, neem dan gerust contact op en zet het gesprek voort via social media.
Vond je deze gids nuttig, dan ben je mogelijk ook geïnteresseerd in Codico’s doorlopende WordPress-beheer- en ondersteuningsdiensten. Ons team biedt gestructureerde supportplannen die alles omvatten, van prestatie-optimalisatie en beveiliging tot doorlopend onderhoud en technische ondersteuning.
Of je nu regelmatige updates nodig hebt, hulp bij maatwerkaanpassingen, proactieve monitoring of een volledig beheerde oplossing voor bureaus en groeiende bedrijven, de engineers van Codico staan voor je klaar. Bekijk onze serviceplannen om de optie te vinden die het beste past bij jouw workflow en technische vereisten.
