Web-Content-Management mit WordPress

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

1
2
3
4
5

Plugins / Datein

    Lernziele
  • Ich kenne das Plugin "MetaSlider" und kann eine Galerie in Beiträgen und Seiten einfügen.
  • Ich kann mit "MetaSlider" ein Album in Beiträge oder Seiten einfügen.
  • Ich kann das Add-on "Firebug" in den Browser Firefox installieren und bedienen.
  • Ich kann mit dem Add-on "Firebug" HTML-Seiten und CSS-Dateien untersuchen und Anpassungen testen.
  • Ich kann die CSS-Datei "style.css" von Wordpress bearbeiten und das Aussehen meiner WordPress-Site verändern

Repetition
Fragen zu Tag 3 - Plugins und Formular

Das Plugin "MetaSlider"

"Meta Slider" ist ein gutes Plugin, um Bildergalerien und Bilderalben in Beiträge und Seiten zu präsentieren. Die erstellten Galerien lassen sich als Block mit dem Editor in einem beliebigen Beitrag, einer Seite oder einem Widget platzieren.

step by step - Installation

  1. Öffne das Dashboard.
  2. Wähle darin Plugins > Installieren.
  3. Suche das Plugin "Meta Slider".
  4. Installiere das Plugin.

Eine Galerie erstellen

Wir erstellen zuerst eine Galerie und fügen diese in einen Beitrag oder eine Seite ein.

Anleitung

  1. Öffne das Dashboard.
  2. Wähle darin > Meta Slider
  3. Klick auf "New Slideshow".
  4. Wähle in der Kopfleiste der Galerie "Dia hinzufügen"
  5. Zieh die Bilder von deiner Festplatte ins Media-Verzeichnis
    Download Beispieldateien: urnersee.zip
  6. Mit "Add slideshow" fügst du die Bilder ein.
  7. Erstelle eine Seite/Beitrag.
  8. Gib ihm einen Titel und erstelle einen neuen Block "MetaSlider".
  9. Wähle deine gewünschten Einstellungen für die Galerie.
  10. Veröffentliche den Beitrag und schau ihn an!

Ein Child-Theme erstellen

Anleitung

  1. Erstelle im Verzeichnis /themes (wo du die Verzeichnisse deiner Themes findest) einen neuen Unterordner , z.B /mytheme/
  2. Kopiere diejenigen Dateien, die Adaptierungen benötigen (und nur die !), vom Eltern-Theme /twentysixteen/ in den neuen Ordner /mytheme/, z.B. die ‘index.php’ oder ‘page.php’, falls in diesen zwei Dateien etwas geändert werden muss.
  3. Das Stylesheet von ‘/twentysixteen/’ muss nicht kopiert werden. In ‘/mytheme/’ erstellen du eine neue Datei ‘style.css‘ und importierst darin das Stylesheet von ‘/twentyfourteen/’ mit @import url(...), s. nachfolgende ‘style.css’-Demo..
  4. Dateien, die im Child-Theme nicht existieren werden von WP automatisch vom Eltern-Theme geholt. Praktisch!

PAUSE

Die Datei "style.css"

Anleitung

  1. Öffne das Dashboard.
  2. Wähle darin Design > Editor.
  3. Auf der linken Seite öffnet sich die CSS-Datei style.css, welche du direkt hier editieren kannst.
  4. Die Datei ist auch mit Hilfe der *Table of Contents kaum zu überblicken.

Da behelfen wir uns, indem wir die publizierten Daten im Browser "Firefox" mit dem Add-on: Firebug untersuchen.

Installation Firebug

In neueren Versionen von Firefox und Chrome ist eine ähnliches Tool bereits vorhanden.
Markiere eine HTML-Element > Kontextmenu (Rechte Maustaste) > Element untersuchen.
(Es beinhaltet einen etwas kleineren Umfang an Werkzeugen).

Anleitung

  1. Öffne den Browser Firefox
  2. Suche über Google das Add-ons: Firebug
  3. Klicke auf der ADD-ONS-Seite von Mozilla beim Firebug auf + Zu Firefox hinzufügen.
  4. Starte den Browser Firefox neu.
  5. Im Browser oben rechts sollte sich nun das Icon für den Firebug installiert haben.

Häufig verwendete CSS Eigenschaften

Diese Liste häufig verwendeter CSS-Eigenschaften, soll eine Unterstützung bieten, um mit dem Browser > Element untersuchen eigene CSS-Stile zu anzupassen.
CSS Eigenschaften und Werte

Farben: Installation ColorZilla

  1. Öffne den Browser Firefox
  2. Öffne das Menü > Add-ons
  3. Suche: ColorZilla
  4. Klicke auf den Button + Zu Firefox hinzufügen.
  5. Starte den Browser Firefox neu.
  6. Im Browser oben rechts findest du nun das Icon für ColorZilla (Pipete).
  7. Klicke auf eine Farbe im Browserfenster > ColorZilla koiert die Webfarbe in die Zwischenablage.

Mit dem Firefox Webseiten untersuchen
und style.css anpassen!

Anleitung

  1. Klick nun auf das Icon.
  2. Default sollte sich der Firebug nun unterhalb vom Browser Firefox angedogt haben.
  3. Ansonsten kannst du den Ort auswählen.
  4. Du kannst die Ansicht vom Firebug erhöhen, indem du an der Trennlinie zwischen Firebug und Browseransicht ziehst.
  5. Du solltest auf der linken Seite die HTML-Ansicht und auf der rechten Seite die CSS-Ansicht ausgewählt haben. Ansonsten wähle die entsprechenden Reiter aus.
  6. Das wichtigste Bedienerinstrument ist die Elemente-Auswahl: hellblauer Pfeil über Rahmen!
  7. Ist dieser ausgewählt, kannst du bei jeder Website die HTML-Elemente und die dazugehörigen CSS-Style anschauen.
  8. Klickst du auf ein ausgewähltes Element, wird dieses im HTML-Code unten rechts markiert, und der CSS-Code wird angezeigt.
  9. Bist du soweit kannst du den ausgewählten HTML-Code markieren.
  10. Im CSS-Code kannst du mit einem Doppelklick auf die entsprechenden Angaben direkt reinschreiben und schauen wie sich die Ansicht der Homepage verändert.
  11. Selbstverständlich überschreibst du hier nicht die orginalen CSS-Angaben der Seite. Du überschreibst nur die Angaben, welche der Browser erhalten hat. Wird die Seite neu geladen sind deine Veränderungen also wieder gelöscht!
  12. Du kannst mit Firebug aber herausfinden, wie die CSS-Selektoren heissen. Sie kopieren.
  13. In der Datei Style.css suchen und entspechend anpassen!!
  14. Um die Übersicht deiner Korrekturen zu behalten, fügst du allen Korrekturen eine Bemerkung bei.
  15. Wenn du alle CSS-Korrekturen ausgeführt hast, musst du die Datei ganz unten aktualisieren.

Aufgaben

Zuhause: Firebug installieren und Style.css anpassen nach der Anleitung: Mit dem Firebug Webseiten untersuchen und style.css!

Links & Tipp's

Du kannst einen HTML-Editor verwenden.