Waarom zou je een onderhoudspagina instellen? Soms is het handig om een website tijdelijk af te schermen voor bezoekers. Bijvoorbeeld wanneer je achter de schermen bezig bent met het bijwerken van je site. In dit voorbeeld laten we zien hoe je dat kunt doen met twee bestanden: een .htaccess voor het omleiden en een onderhoud.php voor het weergeven van jouw bericht. Beide bestanden plaats je in de map /www van jouw site. Ondertussen kun jij wél alle pagina’s bekijken vanaf jouw eigen IP-adres.

Een eigen onderhoudspagina kun je instellen door de onderstaande code te plakken in een .htaccess-configuratiebestand:

RewriteEngine On
# Onderhoudspagina
RewriteCond %{REMOTE_ADDR} !^111\.222\.33\.44$
RewriteCond %{REQUEST_URI} !^/onderhoud\.php$
RewriteCond %{REQUEST_URI} !\.(css|gif|jpe?g|js|png)$
RewriteRule .? /onderhoud.php [L]

Bewaar ten slotte de onderstaande code als onderhoud.php en upload dat naar de map /www van jouw website. Bezoekers krijgen dan de inhoud van dit bestand te zien zolang jouw website in onderhoud is. Pas de tekst en vormgeving gerust naar jouw smaak aan.

<?php
header($_SERVER["SERVER_PROTOCOL"]." 503 Service Unavailable", true, 503);
exit;
?>
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="NOINDEX,NOFOLLOW">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website tijdelijk in onderhoud</title>
  <style>
    html { font-size: 100%; }
    .maintenance__body { margin: 0; font: 1em/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #f4f4f4; color: #555; }
    .maintenance__container { padding: 2.8em 1em; margin: auto; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; }
    .maintenance__header { margin: 0 0 .7em; font-size: 2em; font-weight: 400; line-height: 1.2; }
    .maintenance__paragraph { margin: 0 0 1.4em; }
    @media (min-width: 48em) { .maintenance__container { max-width: 28em; padding-left: 2em; padding-right: 2em; margin-top: 7em; } }
  </style>
</head>
<body class="maintenance__body">
  <div class="maintenance__container">
    <h1 class="maintenance__header">Website tijdelijk in onderhoud</h1>
    <p class="maintenance__paragraph">Sorry, we werken op dit moment hard aan de website. Binnenkort is die gewoon weer beschikbaar. We zien u graag snel weer terug!</p>
  </div>
</body>
</html>

Wat vond je van dit antwoord?

Bedankt voor je feedback!

Er is een fout opgetreden. Probeer het later opnieuw.