Nachdem Du WordPress installiert hast, solltest Du Deine Seite vorerst „verbergen“, damit Du in Ruhe an ihr arbeiten kannst und die „Baustelle“ nicht öffentlich sichtbar ist. Wie das ganz einfach geht, erfährst Du in diesem Beitrag.
Die hier beschriebene Möglichkeit ist bei weitem nicht die einzige, aber in jedem Fall eine sehr einfache. Kurz: Installieren – Aktivieren – Auf „on“ klicken – fertig.
Im Folgenden findest Du die Beschreibung der Installation mit Screenshots und weiter unten auch ein Video.
Installation & Aktivierung
1. Du gehst in WordPress zu Plugins > Installieren
2. Du gibst in die Suche ein: Underconstruction (zusammen geschrieben)
3. Du klickst auf „Installieren“
4. Du klickst auf „Aktiviere dieses Plugin“
5. Du gehst zu Einstellungen > Under Construction …
6. … stellst die Auswahl auf „on“ …
7. … und speicherst die Einstellung (Button ganz unten)
Das Ergebnis sieht dann – nachdem Du Dich ausgeloggt hast und für alle, die Deine Seite aufrufen – so aus:
Mehr Design – für Fortgeschrittene
Es ist auch möglich, einen HTML-Code einzusetzen, in dem man Farben, Schriften, Text, etc. definieren kann. Dafür wählst Du unter Einstellungen > Under Construction „Display a custom page using your own HTML“, setzt Deinen Code in das Feld darunter und speicherst die Seite über den Button „Save Changes“ ab.
HTML-Text als Vorlage
Ein HTML-Modell kannst Du Dir hier kopieren.
Hinweis: Vergiss nicht, die einzelnen Schnipsel mit Deinen Daten auszufüllen und Dein Logo einzusetzen. Dazu lädst Du Deine Logo-Datei auf Deinen Server (z.B. via FTP) und gibst im HTML-Text den Pfad ein, der angibt, an welcher Stelle Dein Logo-Bild auf dem Server liegt.
Die Stellen, die Du selber noch ändern musst, sind im Code blau markiert.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700' rel='stylesheet' type='text/css'> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Gebe hier den Titel/Namen Deiner Website ein</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <style type="text/css"> html { height: 100%; overflow: scroll; } body { height: 100%; margin: 0; padding: 0; background-color: #fff; font-family: Open sans; color: #000; } #img { margin-left: 3px; } a, a:visited, a:link { color: #333; font-family: open sans; font-size: 18px; text-decoration: underline; letter-spacing: normal; } a:active { text-decoration: none; } a:hover { text-decoration: none; color: #303030; } #flashcontent { background-color: #fff; background-image: none background-position: left 32px top; background-repeat: no-repeat; height: 100%; width: 100%; } #noflash { margin: 0 0 0 0; padding: 0; text-align: center; width: 100%; } h1 { font-family: open sans; font-size: 22px; font-weight: 200; letter-spacing: 2px; margin-bottom: -13px; margin-top: 18px; text-transform: uppercase; } h2 { font-family: open sans; font-size: 18px; font-weight: 200; letter-spacing: 0.02em; line-height: 1.5em; margin-bottom: 25px; margin-top: 20px; } h3 { color: #303030; font-family: open sans; font-size: 17px; font-weight: 200; letter-spacing: 2px; text-transform: uppercase; } h4 { color: #999; font-family: open sans; font-size: 18px; font-weight: 200; letter-spacing: 2px; margin-bottom: 22px; text-transform: uppercase; } p { font-family: open sans; font-size: 15px; font-weight: normal; text-decoration: none; } #footer p { font-size: 11px; } #content, #footer { padding: 20px; } #upgrade { background-color: #f3efe9; padding: 20px; margin-top: 20px; margin-bottom: 20px; border: 1px dotted #cccccc; } </style> </head> <body> <div id="flashcontent"> <div id="noflash"> <div id="content"> <table align="center" > <tr> <td height="10px"></td> </tr> </table> <table align="center" > <tr> <td> <h4>Seite im Aufbau</h4> </td> </tr> <tr> <td height="80px"> </td> </tr> <tr> <td> <p><img src="http://webcamp.dickopf-design.ch/webcamp-logo.png"><img /></p> </td> </tr> <tr> <td height="50px"> </td> </tr> <tr> <td> <h3>Kontakt</h3> <h2>Dein Name</br> Strasse</br> Ort, Telefon, etc.</br></br> <a href="mailto:name@domain.de">E-Mail schreiben</a> </h2> </p> </td> </tr> </table> </div><!-- / #content --> <div id="footer"> </div><!-- / #footer --> </div><!-- / #noflash --> </div><!-- / #flashcontent --> </body> </html>
Seite online schalten
Wenn Du an dem Punkt angelangt bist, dass Du Deine Seite online schalten möchtest, setzt Du in Einstellungen > Under Construction die Auswahl wieder auf „off“ und speicherst die Einstellung über den Button „Save Changes“.