Maak je eigen onderhoudspagina in WordPress

Under Construction

Wanneer plugins en of WordPress zelf bijgewerkt worden, zet WordPress gedurende het bijwerk-proces de site in “maintenance-mode”, oftewel in standje onderhoud. Bezoekers die op dat moment op je site komen zullen een zeer karige en saaie melding krijgen: “Tijdelijk niet beschikbaar vanwege gepland onderhoud. Probeer het over enkele minuten nog een keer.”

Zelf een onderhoudspagina maken

Om deze melding iets meer te personaliseren en om bijvoorbeeld ook contact mogelijkheden via social media aan te bieden, kan je zelf een onderhoudspagina aanmaken in de /wp-content/ map door in die map een maintenance.php bestand aan te maken.

Voorbeeld van een onderhoudspagina


<?php

/* Vertel zoekmachines dat de site even uit de lucht is */
$protocol = $_SERVER["SERVER_PROTOCOL"];
if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol ) $protocol = 'HTTP/1.0';
header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );
header( 'Retry-After: 600' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sorry, we zijn even aan de site aan het sleutelen.</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">

        @import url(http://fonts.googleapis.com/css?family=Ropa+Sans:400,700);

	html body,
	html {
		background:#fff;
	}
	#content-wrapper {
            background-image:url( 'themes/nostromo-v4/images/logo-header.png' );
            background-repeat:no-repeat;
            background-position: 45px 15px;
            width: 800px;
            height: 320px;
            overflow: visible;
            position: relative;
            border: 2px solid #662d91;
            border-radius: 3px;
            margin: 15% auto;
	}
	#content {
		color:#333;
		font:14px sans-serif;
		width: 75%;
		height: auto;
		margin: 100px 0 0 20px;
		padding:25px;
	}

	#content p {
		margin:0 0 20px;
	}
	h1 {
		font-family: "Ropa Sans";
                font-weight: normal;
		color:#623716;
                margin: 0 0 10px;
	}
	strong {
		color:#623716;
	}
        .socialmedia-buttons img.fade:hover {
                opacity: 1 !important;
                -moz-opacity: 1 !important;
                -webkit-transition: all 0.2s ease-in;
                -moz-transition: all 0.2s ease-in;
                transition: all 0.2s ease;
        }
        .socialmedia-buttons img {
            margin: 0 4px 0 0;
        }
        </style>
</head>
<body>
     <div id="content-wrapper">
            <div id="content">
                    <h1>Sorry, we zijn even aan de site aan het sleutelen.</h1>
                    <p>We zijn even kort uit lucht in verband met wat geplande onderhoudswerkzaamheden die maximaal <strong>5 minuten</strong> duren.</p>
                    <p>Onze excuses hiervoor, we zijn zo weer bij je terug.</p>
                    
            </div>
    </div>
 <?php
/* Dit geeft de controle terug aan WordPress upgrade routine, niet verwijderen dus. */
die();
?>

Het resultaat

nostromo.nl - onderhoudspagina Een live preview van de onderhoudspagina op nostromo.nl zie je hier.


, ,