Advertisement
  1. Code
  2. WordPress

Under Construction - WordPress Webseite in den Wartungsmodus versetzen

Scroll to top
Read Time: 8 min

German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)

Im vorherigen Tutorial habe ich Ihnen gezeigt, wie Sie eine Coming Soon-Seite in WordPress erstellen können. Der Hauptzweck einer Coming Soon-Seite ist es, die Besucher zu informieren, dass Sie planen, ein Produkt oder eine Dienstleistung bald auf den Markt zu bringen, bis Sie die tatsächliche WordPress Webseite erstellen. In diesem Tutorial lernen Sie, wie Sie eine Wartungsseite in WordPress erstellen.

    Sie denken vielleicht, dass eine Coming Soon-Seite und eine Wartungs-Seite nicht sehr unterschiedlich sind. Nun, da haben Sie recht. Beide weisen darauf hin, dass etwas bald zur Verfügung stehen wird. Es gibt jedoch einen feinen Unterschied, und zwar im Coming Soon-Modus wird die Seite von Suchmaschinen indexiert, während im Wartungsmodus nicht. Deshalb werden wir dieses Problem hier etwas anders angehen.

    Eine Coming Soon-Seite kann sich auf ein Produkt, eine Veranstaltung, ein Unternehmen oder eine ganze Website beziehen. Es macht jedoch keinen Sinn, eine Wartungsseite für eine Veranstaltung oder ein Unternehmen zu erstellen. Eine Seite, die sich in Wartungsaufgaben befindet, bezieht sich entweder auf die gesamte Website, oder auf einen Bereich der Website, an dem Sie intensiv bearbeiten oder den Sie gerade pflegen... wie zum Beispiel, wenn Sie gerade einen eigenen Online Shop erstellen.

    In diesem Tutorial zeige ich Ihnen, wie Sie eine WordPress-Seite erstellen, die sich im Aufbau oder Wartungsmodus befindet und bestimmte Seite sperren. Die Besucher können während des Wartungszeitraums auf andere Teile der Website zugreifen. Natürlich können Sie auch für die gesamte Website eine Wartungsmeldung anzeigen.

    Hier sehen Sie eine Vorschau auf das Endergebnis unserer Under Construction-Seite, die die Benutzer darüber informiert, dass wir derzeit einen Menü-Generator für sie erstellen, so dass die betroffenen Seite der Website für einige Zeit nicht zugänglich sein werden.

    Under Construction Final PreviewUnder Construction Final PreviewUnder Construction Final Preview

    Suche nach dem richtigen Plugin und erste Planung

    Der erste Schritt wäre, das richtige Plugin zu finden. Wir suchen nach einem Plugin, mit dem wir die vollständige Steuerung über den Text auf der Seite haben. Es sollte uns auch eine angemessene Flexibilität in Bezug auf das visuelle Erscheinungsbild bieten, wie die Einstellung einer Hintergrundfarbe, Schriftart oder eines Logos. Zwei weitere Funktionen, die ich mir für das Plugin wünsche, sind die Möglichkeit, den Zugang zu einer bestimmten Bereichen von Seiten zu beschränken oder zu erlauben, und die Möglichkeit, CSS zu verwenden, um die Seite auf leistungsfähigere und einzigartige Weise zu verändern. Das Plugin, das all diese Anforderungen für mich erfüllte, war das Maintenance plugin.

    Ich würde Ihnen dringend empfehlen, bei der Suche nach Plugins ähnlich vorzugehen. Erstellen Sie eine Liste der Funktionen, die Sie benötigen, und sortieren Sie dann Plugins aus, die Ihre Kriterien nicht erfüllen. So sparen Sie viel Zeit, anstatt das erste Plugin zu verwenden, das Sie finden, um festzustellen, dass es die benötigte Funktionen nicht haben.

    Die Besucher auf dem Laufenden halten

    Wir werden auf unserer Wartungsseite einen Bereich einrichten, in dem wir die Besucher über unsere Pläne informieren. Dies könnte Information wie zukünftige Leistungen oder das geplante Eröffnungsdatum beinhalten. Sie können die Besucher auch Links zu anderen Beiträgen auf der Website anbieten, in denen sie mehr darüber lesen können.

    Einfache Möglichkeit zur Kontaktaufnahme anbieten

    Jetzt, wo die Besucher sehen, dass Ihre Seite noch nicht fertig ist, macht es Sinn sie wissen zu lassen, dass sie Teil des Prozesses sein können. Mit den Fähigkeiten, die Sie in diesem Tutorial lernen, können Sie während dieses Wartungszeitraums einen Link zur "Kontakt"-Seite hinzufügen.

    Erstellen einer WordPress-Wartungs-Seite (Under Construction Page)

    Wir beginnen mit der Erstellung unserer Wartungsseite, indem wir das kostenlose Wartungs-Plugin installieren. Sobald Sie das Plugin installiert und aktiviert haben, wird es im Navigationspunkt auf dem Admin-Dashboard angezeigt. Sie können den aktuellen Status des Plugins im Admin-Menü sehen.

    Maintenance Mode StatusMaintenance Mode StatusMaintenance Mode Status

    Sobald der Wartungsmodus mit diesem Plugin aktiviert ist, versuchen Sie, eine beliebige Seite Ihrer Website entweder in einem privaten Fenster oder nach dem Ausloggen aus der aktuellen Sitzung zu besuchen. Es sollte Ihnen eine allgemeine Wartungsmeldung angezeigt werden, die dem Bild unten ähnelt.

    Under Construction Initial VersionUnder Construction Initial VersionUnder Construction Initial Version

    Wir werden nun damit beginnen, diese Seite so zu ändern, dass der Text so etwas wie "eine Baustelle" aussieht.

    Den Text bearbeiten

    Beginnen wir damit, den Text zu ändern, den wir den Benutzern anzeigen. Klicken Sie auf den Link Maintenance is On (Wartungsmodus ist eingeschaltet) im Admin-Menü, um direkt die Seite mit den Plugin-Einstellungen zu öffnen. Sie können auch Maintenance aus dem Navigationsmenü im Admin-Dashboard auswählen, um die Einstellungsseite aufzurufen.

    Ändern Sie den Seitentitel in "Menu Generator" is Under Construction und die Überschrift in Creating the Best "Menu Generator" Tool for You. Geben Sie nun den folgenden HTML-Code ins Textfeld ein.

    1
    <section class="main-content">
    
    2
      <p>We know that creating navigation menus for your website can be tricky. So, we are creating an awesome menu generator for you.</p>
    
    3
      <p>Here are some articles for you to read while we are building the Menu Generator.</p>
    
    4
      <ul>
    
    5
        <li><a href="/navigation-menu-types/">Different types of navigation menus.</a></li>
    
    6
        <li><a href="/navigation-and-accessibility/">Navigation menus and accessibility.</a></li>
    
    7
        <li><a href="/mega-menu-tips/">Tips for building a mega menu.</a></li>
    
    8
      </ul>
    
    9
    </section>
    

    Ihre Plugin-Einstellungsseite sollte nun wie das folgende Bild aussehen. Bitte beachten Sie, dass der HTML-Code für das Feld Description (Beschreibung) im Textfeld steht. Dies ermöglicht es uns, den Inhalt der Seite in HTML zu schreiben, so dass wir später einige Elemente mit eigenen CSS-Code bestimmen können.

    Maintenance Page Text ValuesMaintenance Page Text ValuesMaintenance Page Text Values

    Klicken Sie auf die Schaltfläche Save Changes (Änderungen speichern) und dann auf Preview (Vorschau), um die aktualisierte Version unserer Wartungsseite zu sehen. Sie sollte in etwa so aussehen wie in der Abbildung unten.

    Construction Page Text PreviewConstruction Page Text PreviewConstruction Page Text Preview

    Die Bilder und UI-Farben aktualisieren

    Nun werden wir einige Änderungen am Erscheinungsbild der Seite vornehmen. Wir werden mit den Bildern beginnen. Wenn Sie auf der Seite mit den Plugin-Einstellungen ein wenig nach unten scrollen, finden Sie eine Option, um Logo und Hintergrundbild hochzuladen.

    Klicken Sie zunächst auf die Schaltfläche Upload Logo (Logo hochladen) und wählen Sie Ihr Website-Logo aus der Mediathek aus. Danach klicken Sie auf die Schaltfläche Upload Background (Hintergrund hochladen) und wählen ein Bild aus, das Ihnen am besten gefällt. Ich habe die User Experience illustration von Reshot verwendet.

    Ist Ihnen in den vorherigen Vorschaubildern unserer Konstruktionsseite ein Schloss-Symbol aufgefallen? Wenn Sie auf das Schlosssymbol klicken, öffnet sich ein Anmeldeformular, mit dem Sie sich bei der Website anmelden und alle durch das Plugin verborgenen Seiten sehen können.

    Sie können eine neue Hintergrundfarbe für das Anmeldeformular in den Plugin-Einstellungen festlegen. Es gibt auch eine Option, um die Farbe der Schrift zu ändern. Wir belassen alle Einstellungen auf ihren Standardwerten, ändern aber die Schriftfamilie von Open Sans in Yanone Kaffeesatz.

    Maintenance Plugin Color and Font SettingsMaintenance Plugin Color and Font SettingsMaintenance Plugin Color and Font Settings

    Klicken Sie auf Änderungen speichern, und die Wartungsseite sollte nun ähnlich wie das folgende Bild aussehen.

    Construction Page Color, Font and Background PreviewConstruction Page Color, Font and Background PreviewConstruction Page Color, Font and Background Preview

    Benutzerdefinierte CSS hinzufügen

    Unsere temporäre Seite nimmt jetzt langsam Gestalt an, aber es gibt noch ein paar Dinge, die ich gerne ändern würde. Der Kontrast zwischen dem Logo und dem Hintergrund ist nicht ausreichend, daher werden wir mittels CSS einen weißen Hintergrund und einige Ränder hinzufügen.

    Auch die Schriftgröße scheint für den Hauptinhalt zu klein zu sein. Daher werden wir die Schriftgröße erhöhen und einige andere Änderungen vornehmen, wie das Hinzufügen eines halbtransparenten schwarzen Hintergrunds. Wir werden auch die Ausrichtung des Textes nach links ändern. All dies kann mit eigenen CSS-Code individualisiert werden.

    1
    div.logo-box img {
    
    2
        background: white;
    
    3
    	border-bottom: 10px solid black;
    
    4
    	border-top: 10px solid red;
    
    5
    	padding: 10px 0;
    
    6
    	border-radius: 30% 70% 70% 30% / 30% 70% 40% 70%;
    
    7
    }
    
    8
    9
    section.main-content {
    
    10
        font-size: 1.8rem;
    
    11
        width: 800px;
    
    12
        margin: 0 auto;
    
    13
        background: #00000024;
    
    14
        padding: 50px;
    
    15
        text-align: left;
    
    16
        box-shadow: 0 0 4px #000000a6;
    
    17
    }
    
    18
    19
    section.main-content ul {
    
    20
        list-style: none;
    
    21
        line-height: 1.5;
    
    22
    }
    
    23
    24
    body.maintenance section.main-content p {
    
    25
        font-size: 1.8rem;
    
    26
    	margin-bottom: 2rem;
    
    27
    }
    
    28
    29
    .site-content h2.heading {
    
    30
        font-size: 3.8rem;
    
    31
        margin-bottom: 3rem;
    
    32
    }
    
    33
    34
    footer {
    
    35
        font-size: 1.8rem;
    
    36
    }
    

    Sie müssen diesen ganzen CSS-Code in den Abschnitt Custom CSS auf der Plugin-Einstellungsseite einfügen. Klicken Sie nun auf die Schaltfläche Änderungen speichern, und die Wartungs-Seite sollte nun so aussehen wie auf dem Bild unten.

    Construction Page Final VersionConstruction Page Final VersionConstruction Page Final Version

    Zugriff auf bestimmte Seiten zulassen

    Die Wartungsseite unseres Menü-Generators verlinkt zu drei verschiedenen Beiträgen auf unserer Website. Es wäre wenig sinnvoll, wenn ein Klick auf diese Links die Benutzer wieder auf die Wartungsseite zurückleiten würde.

    Wir können dieses Problem lösen, indem wir in den Plugin-Einstellungen einige Seiten vom Wartungsmodus ausschließen. Dadurch werden diese Seiten für alle unsere Besucher zugänglich gemacht. Scrollen Sie zum Ende der Einstellungsseite und geben Sie unter Beiträge die Namen der veröffentlichten Beiträge ein, die für die Öffentlichkeit zugänglich sein sollen.

    Maintenance Mode Exluded PostsMaintenance Mode Exluded PostsMaintenance Mode Exluded Posts

    Fazit

    In diesem Tutorial haben Sie gelernt, wie man mit einem kostenlosen Plugin eine Wartungsseite für eine WordPress-Website erstellt. Zunächst haben wir den Text aktualisiert, um den Nutzern alle notwendigen Informationen über unsere Baustellen-Seite zu geben. Dann fügten wir ein entsprechendes Hintergrundbild sowie Logo der Website hinzu, damit nichts fehl am Platz wirkt. Schließlich haben wir mit Hilfe von CSS-Code das Erscheinungsbild des Logos und anderer Texte auf der Seite verändert.

    Sie haben vielleicht bemerkt, dass die Seite derzeit keine Kontaktinformationen für Besucher enthält. Dies wurde als Übung für Sie weggelassen. Versuchen Sie, die im Tutorial aufgeführten Schritte zu befolgen und einen Link zur Kontaktseite innerhalb der Wartungsmeldung hinzuzufügen

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.