Maak een eigen WordPress Maintenance pagina

Om ervoor te kunnen zorgen dat je WordPress website veilig blijft zul je regelmatig moeten blijven updaten. Zowel je plugins als WordPress zelf. Maar wat gebeurd er tijdens het updateproces?

Wat er gebeurd tijdens het updaten

Wanneer je begint met updaten zet WordPress automatisch de ‘maintenance mode’ aan. De website is op dit moment tijdelijk niet bereikbaar voor bezoekers. Achter de schermen creëert WordPress een .maintenance bestand die je kunt zien op de FTP. Als de updates zijn afgerond wordt dit bestand ook weer automatisch verwijdert.

Op het moment dat je de website bekijkt en deze in maintenance mode staat zie je een standaard bericht op een wit scherm. Normaal gesproken duren updates maar enkele seconden tot een minuut, maar als je website veel bezoekers trekt zullen ook veel mensen deze pagina te zien krijgen. Het is daarom slim om zelf een onderhoudspagina te maken die aansluit bij je thema (en die mensen niet afschrikt).

Hoe maak een een eigen WordPress Maintenance pagina?

Dit is eigenlijk heel simpel. WordPress zoekt naar een bestand genaamd maintenance.php in de map wp-content. Let op: dus niet in je thema map! Standaard is dit bestand niet aanwezig in een WordPress installatie dus valt WordPress terug op de default afhandeling. Deze afhandeling is dus de korte melding op een lege en witte pagina.

Stap 1: Maak het maintenance bestand aan

Maak een leeg bestand genaamd maintenance.php aan rechtstreeks in de map wp-content.

Stap 2: Begin met een 503 Status

Het is belangrijk om aan zoekmachines aan te geven dat zij zich niets hoeven aan te trekken van de content op de onderhoudspagina. Je wilt niet hebben dat Google je site checkt op wijzigingen net op het moment dat je aan het updaten bent. Je laat dit aan zoekmachines weten door middel van een 503 Status. Zet onderstaande code helemaal bovenaan het nieuwe maintenance.php bestand.

<?php
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Status: 503 Service Temporarily Unavailable');
header('Retry-After: 600');
?>

Stap 3: Maak de lay-out van de pagina

Nu kun je de lay-out van de pagina gaan maken. Onder het stukje PHP kun je direct beginnen met je html lay-out. Bijvoorbeeld:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Even aan het updaten...</title>

		<link href="https://webdesignert.nl/wp-content/themes/themanaam/styles/maintenance.css" rel="stylesheet">
	</head>

	<body>

		<div class="container">

			<img src="https://webdesignert.nl/wp-content/themes/themanaam/img/logo.png" alt="Mijn logo" />

			<h1>Ik ben even aan het updaten...</h1>
			<p>Mijn eigen persoonlijke onderhoudsmelding.</p>

		</div>

	</body>
</html>

Stap 4: Denk ook aan de styling

Je kan ervoor kiezen om op de maintenance pagina alle styling inline te doen. Waarschijnlijk is en blijft dit een simpele pagina. Maar je kan natuurlijk ook een nieuw CSS bestand aanmaken en deze gebruiken. Zoals je wellicht in de bovenstaande lay-out hebt gezien heb ik een nieuw CSS bestand aangemaakt met de naam maintenance.css. Hier staat de styling in die ik gebruik op mijn eigen maintenance pagina.

Handmatig de Maintenance mode activeren

Om te kunnen zien waar je mee bezig bent bij het maken van een eigen maintenance pagina dien je eerst zelf deze modus aan te zetten. Dit doe je door in de root van de website een bestand genaamd .maintenance aan te maken. Hierin zet je onderstaande code. Klaar met het bewerken van de onderhoudspagina? Verwijder dan het bestand.

<?php
    $upgrading = time();
?>