Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch

Tutorial: Das erste Plugin installieren – Under Construction

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

support.dickopf-design.ch

2. Du gibst in die Suche ein: Underconstruction (zusammen geschrieben)

Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch

3. Du klickst auf „Installieren“

Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch

4. Du klickst auf „Aktiviere dieses Plugin“

support.dickopf-design.ch

5. Du gehst zu Einstellungen > Under Construction

Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch

6. … stellst die Auswahl auf „on“ …

Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch

7. … und speicherst die Einstellung (Button ganz unten)

Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch

Das Ergebnis sieht dann – nachdem Du Dich ausgeloggt hast und für alle, die Deine Seite aufrufen  – so aus:

Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch
Anzeige der Website für Besucher, wenn Einstellung auf „on“ (Plugin UnderConstruction)

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.

Tutorial: Das erste Plugin installieren – Under Construction // support.dickopf-design.ch

HTML-Text als Vorlage

Ein HTML-Modell kannst Du Dir hier kopieren.

HTML-Vorlage ansehen

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“.


Video


Plugin-Seite

wordpress.org/plugins/underconstruction

  • War dieser Beitrag hilfreich?
  • ja   nein

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>