Block 7: Webentwicklung

Zusatzfunktionen

Finalisierung der Webseite

1. Caching

Geeignete Plugins für Caching

Suche nach „Cache“ bei den Plugins

Ausprobieren, welches Plugin kostenlos ist und den gewünschten Zweck erfüllt

WP Fastest Cache (von Emre Vona) funktioniert gut

Wozu braucht man ein Cache-Plugin?

Cache kann erwünscht sein, damit Frontend bei wiederkehrenden Besuchern schneller lädt – dann sollte Cache-Plugin installiert und aktiviert werden

Cache kann unerwünscht sein, z.B. in der Entwicklungsphase, wenn Anzeigefehler auftreten (z.B. CSS Code, der nicht ausgeführt wird) – dann sollte Cache-Plugin installiert werden, damit der Cache bei Bedarf manuell geleert werden kann.

2. Kontaktformulare

Geeignete Plugins für Kontaktformulare

Suche nach „Form“ bei den Plugins

Ausprobieren, welches Plugin kostenlos ist und den gewünschten Zweck erfüllt

Contact Form 7 ist sehr leichtgewichtig, einfach zu implementieren und kann gut individuell gestyled / eingestellt werden

WP Forms oder Fluent Forms sind sehr einfach zu bedienen, haben bereits grundlegendes eigenes Styling und einige Möglichkeiten für Integrationen

Einrichtung von Contact Form 7

Plugin installieren + aktivieren

Neues Kontaktformular erstellen (oder bestehendes bearbeiten)

Im Reiter „Formular“ wird innerhalb des Formular-Editors HTML mit speziellen Formular-Tags verwendet, diese Tags können (auch) oben durch Klicken auf das entsprechende Feld konfiguriert und eingefügt werden

Mit HTML- und CSS-Code kann das Formular strukturiert und gestyled werden

Im Reiter „E-Mail“ können bis zu zwei Mails konfiguriert werden, die beim Absenden des Formulars automatisiert verschickt werden – zur Verwendung der Formulareingaben werden Variablen verwendet (diese entsprechen den Namen der Formularfelder aus dem Formular-Editor)

Im Reiter „Meldungen“ können die im Frontend angezeigten Meldungen bearbeitet werden (rein textlich) – sollen die Meldungen im Frontend anders aussehen, müssten diese per CSS-Klassen angesprochen und gestyled werden.

Nach dem Speichern des Kontaktformulars wird ein sogenannter Shortcode erzeugt – dieser Shortcode kann z.B. mittels Page Builder an einer beliebigen Stelle im Frontend eingefügt werden und wird dort beim Übersetzen der Seite interpretiert.

3. Coming Soon-Page

Was macht eine Coming Soon-Page (technisch gesehen)

Automatische Weiterleitung jeder URL auf dieser Domain zu einer festgelegten Seite

Kann ganz manuell über den Server angelegt werden → beim Webhosting einloggen und eine serverseitige Weiterleitung für die Domain auf eine beliebige andere Domain einrichten

Kann über Weiterleitungs-Plugins eingerichtet werden → Unterseiten manuell über ein Plugin (z.B. „Redirection“) weiterleiten auf eine beliebige andere Unterseite

Kann über spezielle Plugins für den s.g. Wartungsmodus eingerichtet werden

Suche nach „Maintenance“ bei den Plugins

Einrichtung mit Plugin „LightStart – Maintenance Mode“

Plugin installieren + aktivieren

Plugin zum Einrichten „öffnen“ / anklicken

Template wählen oder „I don’t want to use a template“ wählen, wenn eine eigene Seite (die z.B. mit Elementor gestaltet werden kann) als Coming Soon-Page angezeigt werden soll

In den Plugin-Einstellungen den Status auf „Aktiviert“ stellen, dann ist das Plugin aktiv und leitet jede aufgerufene Seite auf die Coming Soon-Seite weiter

Die gewünschte Coming Soon-Seite (falls kein Template gewählt wurde), muss im Reiter „Design“ noch ausgewählt werden (sie muss vorher bei den Seiten angelegt worden sein, damit sie in dieser Liste existiert)

Wird die Coming Soon-Seite nun z.B. im Elementor bearbeitet und mit gewünschtem Content befüllt, ist dies später genau jener Content, der bei der Weiterleitung im Frontend angezeigt wird – Navigationsleiste und Footer werden dort durch das Plugin standardmäßig nicht angezeigt (da man sowieso nirgends hin-navigieren kann)

Aufgabe

bis zum nächsten Mal

Webseite laut Screendesign fertigstellen: Desktop- & Smartphone-Größe (je Startseite + Menü/Navigationsleiste)

Optimierungen laut Screendesign umsetzen: Hover-Effekte (Menü-Leiste, Links, Buttons, etc.)

Benötigte Zusatzfunktionen (z.B. Kontaktformular) umsetzen

Nächstes Mal:

Abgabe + Präsentationen

Jeder präsentiert max. 5 min:

Screendesign: Kurz zur Auffrischung das Screendesign zeigen (Startseite Desktop genügt)

Welches Theme wurde gewählt und warum?

Welche Plugins wurden verwendet und wofür? Gab es Probleme bei der Einrichtung?

Entwicklung: Frontend der WordPress-Seite herzeigen, Startseite Desktop + mobil zeigen, Hover-Effekte zeigen (z.B. von Menü oder Buttons)

Reflexion: Was war beim Nachbauen des Screendesign am schwierigsten? Hast du dir etwas anders oder einfacher vorgestellt? Wo sind Probleme aufgetaucht? Was wirst du beim nächsten Mal anders oder besser machen?

Bitte überzieht die Zeit von max. 5 min pro Person nicht, damit sich alle gut ausgehen.

Abgabe Webentwicklung: Anforderungen