Web-Content-Management mit WordPress

WordPress Kurs
00. 00 - 00. 00 2020 | 00.00 - 00:00 Uhr |

1
2
3
4
5

Widgets und Plugins

  • Lernziele
  • Ich kann Widgets in die Widgetsbereiche einfügen und verwalten.
  • Ich kenne die wichtigsten Widgets und weiss sie einzusetzen.
  • Ich kenne den Unterschied zwischen einem Widget und einem Plugin.
  • Ich kenne das Widget "Kategorien" und weiss dies geschickt einzusetzen.
  • Ich kann Plugins suchen, bewerten und hinzufügen.
  • Ich kenne das Plugin "Contact Form 7" und kann dieses für verschiedene Formulartypen benutzen.

Repetition
Fragen zu Tag 2 - Hausaufgaben

Widgets und Widgetsbereiche (Sidebars)

Widgets sind fixfertige Inhaltsblöcke, welche bequem den Sidebars (Widgetsbereiche) hinzugefügt oder entfernt werden können. Im Gegensatz zu Plugins sind Widgets keine Zusatzprogramme und können nur betitelt und leicht konfiguriert werden. Typische Widgets sind:

  • Kalender
  • Suche
  • Kategorien
  • zusätzliches Menu
  • Text

step by step - Widgets verwalten

Anleitung

  1. Öffne das Dashboard.
  2. Wähle darin Design > Widgets.
  3. Suche das Widget "Kalender" und klicke dort auf hinzufügen.
  4. Gib dem Kalender einen Titel.
  5. Wähle in Sidebar: Zweiter Widgetbereich!
  6. Klicke auf: Widget speichern.
  7. Überprüfe deine WordPress-Seite.

Das Aussehen von der Sidebar (Zweiter Widgetbereich) lernst du am vierten Kurstag durch Eingriff in die CSS-Datei anzupassen oder zu verändern.

step by step - Kategorien ins Menu einfügen

Anleitung

  1. Erstelle eine neue Seite (siehe Tag 2) und gib ihr den Titel "Kategorien". Schreib zB. dazu: "Hier findest du die kategorisierten Beiträge meines Bloges".
  2. Öffne das Dashboard.
  3. Wähle darin Design > Menu.
  4. Füge nun die neue Seite Kategorien hinzu.
  5. Öffne auf der linken Seite der Ansicht: Kategorien.
  6. Füge nun die Kategorien als Subnavigation (Unterpunkt) zur erstellten Seite "Kategorien" hinzu.
  7. Speichere das Menu.

Zusatz Gruppenarbeit: Wie kannst du das Menu in der Sidebar anzeigen?

PAUSE

Plugins allgemein

Plugins sind Funktionserweiterungen oder Zusatzprogramme. Sie können direkt über die Benutzeroberflache (Dashboard) installiert und manuell hinzugefügt werden. Plugins für Formulare und Galerien, welche wir im Kurs auch installieren und lernen sie zu nutzen, sind:

step by step - Plugins installieren

Anleitung

  1. Öffne das Dashboard.
  2. Wähle Plugins > Installieren.
  3. Hier findest du ein Fenster um Plugins zu suchen.
  4. Gib bei Suchen "Contact Form 7" ein. Um verschiedene Formulare zu erstellen ist dies ein empfohlenes und bewährtes Plugin.
  5. Wenn du das richtige Plugin von Takayuki Miyoshi gefunden hast, klicke auf "Jetzt installieren" und bestätige die Rückfrage: bist du sicher!
  6. Trage hier die Daten der FTP-Verbindung ein (siehe Datenblatt).
  7. Aktivierst du nun das Plugin, erscheint im Dashboard der neuer Menupunkt "Formular".

Ein Formular erstellen:

step by step - Ein Formular erstellen

Anleitung

  1. Öffne das Dashboard.
  2. Wähle Formular.
  3. Klicke hier auf "Neues Formular".
  4. Bestätige dir Sprache und klick nocheinmal auf "Neues Formular".
  5. Gib dem Formular einen Titel und speichere das Formular.
  6. Kopiere den "braun markierten" Code.
  7. Erstelle eine neue Seite, gib ihr einen Titel zB. "Kontakt" und füge beim Textteil, die kopierte Code-Zeile vom Formular ein.
  8. Veröffentliche die Seite, und füg sie allenfalls deinem Menu bei.
  9. Teste die Seite.

Das erstellte Formular bearbeiten:

step by step - Formular bearbeieten

Anleitung

  1. Öffne das Dashboard.
  2. Wähle Formular.
  3. Klicke auf "Bearbeiten" bei deinem erstellten Formular.
  4. Jetzt blickst du auf die gesamten Bearbeitungsmöglichkeiten eines Formulars: siehe Anleitung
  5. Beim Tag generieren wirst du genau angewiesen, welche ebenfalls "braun markierten" Codes du wohin kopieren musst, um erfolgreich zu sein.
  6. Möchtest du ein Captcha benutzen, was zu empfehlen ist, musst du ein zusätzliches Plugin runterladen und den entzipten Ordner mit einem FTP-Programm in deinen Ordner xx > wp-content >plugins uploaden.
  7. Anschliessend das neue Plugin im Dasboard Plugins > Really Simple CAPTCHA aktivieren.

Webfonts:

step by step - Eine Webfont aus Google verwenden

Webfonts sind Schriften, die mit einem Browser geladen werden. Bsp. Google bietet Schriften an, die direkt aus dem Google-Font-Server eingelinkt werden. Mit CSS wird die Schrift dem Theme zugewiesen.

Anleitung

Damit der Link von Google benutzt werden kann, kann das Plugin "Header Footer Code Manager" installiert, aktiviert werden. Damit kann der Link auf einfache Weise in den Head-Bereich unserer WordPress-Installation gefügt werden.

  1. Öffne das Dashboard.
  2. Wähle > Plugins > Installieren > "Header Footer Code Manager"
  3. Aktiviere das Plugin (Du erhällst einen neuen Reiter im Dashboard: "HFCM".
  4. Mit "Add new snippet" kannst du ein neues Header-Element erstellen.
  5. Füge den Link von Google in das "Snippet/Code"-Textfeld. Bsp: 
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
  6. Speichere dein Header-Element
  7. Um die Schrift anzuwenden musst du sie als CSS-Regel im Customizer > CSS spwichern: 
    .entry-title {
    font-family: 'Anton', sans-serif;
}
  8. Veröffentliche deine zusaätzliche CSS-Regel
  9. Teste die Seite.

Aufgaben

Formular fertig erstellen!

Links & Tipp's

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero nobis aliquam recusandae placeat ab cumque, a temporibus minima ullam ea facilis veritatis sapiente sit quibusdam officiis excepturi. Accusantium, asperiores, hic?