WordPress – Teil 05: Eigene Website

Im letzten Teil zu WordPress gestaltest Du eine komplett eigene Website zu einem Thema mit eigenen Inhalten. Die ersten Schritte und die Planung geschehen noch zu Hause, die weiteren Schrittte in der Schule ab 3. Juni.

  1. Überlege Dir, zu welchem Thema und für wen (Zielgruppe) Du eine kleine Website gestalten möchtest.
    Mindestanforderungen:
    3 Seiten
    2 Beiträge (News)
  2. Lege eine neue Site an: Wie das geht, zeige ich Dir in diesem Video

Du hast ein Konto bei WordPress, kannst aber mehrere unabhängige Sites anlegen (mit anderen Themes, anderer Adresse).

Schicke mir die Adresse der neuen Site und den Plan (Punkt 4) per Mail bis 3. Juni.

  1. Suche ein Theme, das zu Deinem Thema passt
  2. Plane Deine Site im Detail:
    Titel der 3 Seiten
    Inhalte der 3 Seiten
    Fotos für die 3 Seiten
    ebenso die 2 News-Beiträge

    Schreibe Deinen Plan ins Worddokument, das Du hier runterladen kannst.
    Achte strikt darauf, eigenen Text zu schreiben und eigene Fotos zu verwenden oder solche, die frei verwendbar sind (dann schreibe die Quelle dazu!).

  3. Lege die Seiten und Beiträge an und fülle sie mit den vorbereiteten Inhalten.
  4. Richte das Menü ein (wie man Beiträge mit Kategorien ins Menü bekommt, kannst Du herausfinden oder es wird in der Schule geklärt).
  5. Kümmere Dich um Titel und Untertitel der Website.
  6. Ev. kannst Du ein Logo verwenden.
  7. Ev. kannst Du Farben und Sonstiges Anpassen.
  8. Was soll auf der Startseite zu sehen sein? – Eine der 3 Seiten? Die 2 Newsbeiträge? – Stelle es ein.




WordPress – Teil 04: Erkunden

Du kennst bereits die allerwichtigsten Funktionen von WordPress: Beiträge verfassen, Kategorien (Kategorien-Widget), Seiten verfassen, Menüs, Fotos einfügen, Theme installieren …

Die Woche 08 dient dazu, WordPress selber weiter zu erkunden. (Anregung auf ai1920.wordpress.com)

  1. Lege eine neue leere Seite an mit dem Titel: “Blöcke”
  2. Probiere einige (wenigstens 4) Blöcke aus, z. B. Instagram, indem Du sie einfügst, ausfüllst …
  3. Bringe die Seite Blöcke ins Menü, und zwar als Untermenüpunkt der Startseite (Neu anordnen …, es ist selbsterklärend!)

Wenn Du das erledigst hast, gib mir per Mail Bescheid. Ich mache die Kontrolle und gib Dir Bescheid. Erst dann mache mit dem Punkt 4 weiter.

Und wichtig: Immer nur Inhalte veröffentlichen, für die Du das Recht hast (also am besten eigene Fotos und Texte).

  1. Schau Dir einige Themes an, indem Du sie installierst. Wenn Du eines hast, das Dir gefällt, richte (falls notwendig) das Menü ein, ebenso das Kategorien-Widget. Schau was Du sonst ändern kannst (z. B. Farben). Probiere einfach ein wenig herum.
    Bis Montag 25. 05.




WordPress – Teil 03

Stand

  • Das Theme TwentyTwenty ist installiert.
  • Unter Design / Anpassen (Customizer) / Website-Identität wurden ein Website-Titel (eigener Name) und ein Untertitel eingetragen.
  • Drei Beiträge mit Beitragsbildern und Inhalten wurden angelegt. Im Beitrags-Überblick schaut das so aus:

Überblicksseite der Beiträge

  • Im Fussbereich wurde ein Widget für die Kategorien eingefügt. Das sieht so aus:

TwentyTwenty mit Widget für Kategorien im Fußbereich

  • Die Seiten wurden bis auf die Startseite gelöscht. Die Inhalte der Startseite können bei den Installationen unterschiedlich sein.

Hinweis: Ich habe von mehreren KollegInnen den Hinweis bekommen, dass WordPress (Backend) mit dem veralteten Internet-Explorer Probleme macht (z. B. Einfügen von Text in einen Block). Bitte einen anderen Webbrowser verwenden (Firefox, Chrome …).

Seiten und Menüs

Neben Beiträgen kann man in WordPress Seiten verwenden. Die beiden unterscheiden sich in einigen Dingen. Beiträge werden durch Kategorien verfügbar gemacht, Seiten durch Menüs. Menüs brauchen etwas mehr Handarbeit. Häufig werden Seiten für Inhalte verwendet, die längere Zeit online bleiben, Beiträge für aktuelle Neuigkeiten, die laufend ergänzt werden (s. die Schulwebsite: die generellen Informationen über die HLW sind in Seiten, die Berichte über Aktivitäten in Beiträgen).

Die sogenannte “Homepage” (Startseite) kann in WordPress eine bestimmte Seite mit Inhalt sein (häufig eine Art Visitenkarte, mit der sich eine Firma kurz auf einer Seite vorstellt) oder zeigt automatisch die letzten Beiträge, die geschrieben worden sind (eine Mischung ist auch möglich).

  1. Startseite umstellen auf “Letzte Beiträge”

Startseite auf “Letzte Beiträge” umstellen

  1. Seiten anlegen

Inhaltstext zum Downloaden
(Zum Herunterladen: rechte Maustaste / Link speichern unter)

Seiten anlegen

  1. Menüeinträge hinzufügen

Menüeinträge




WordPress – Teil 02

  1. Melde Dich im Backend deiner WP-Installation an.
  2. Navigiere zu /Seiten und vergewissere Dich, dass Du alle Seiten bis auf die Startseite gelöscht hast. (Diese kann nicht gelöscht werden.)

Gelöschte Seiten
Seiten gelöscht

  1. Navigiere zu /Beiträge und vergewissere Dich, dass du alle Beiträge gelöscht hast.

Gelöschte Beiträge
Beiträge gelöscht

  1. Navigiere zu /Design /Themes und vergewissere Dich, dass das Theme TwentyTwenty aktiv ist.

Twenty Twenty
Twenty Twenty aktiv

  1. Bereite 6 Fotos vor: Breite: ca. 1000 px, möglichst kleine Dateigröße!
    (Achtung: Du musst UrheberIn der Fotos sein oder sie dürfen ausdrücklich vewendet werden. Die Inhalte (Text, Fotos, …) sind nach dem Veröffentlichen eines Beitrags öffentlich und müssen daher rechtlich in Ordnung sein.)
  2. Wechsle wieder zu /Beiträge und erstelle einen neuen Beitrag (drei Buttons zur Auswahl!).
    Gib ihm den Titel Obstbau. Speichere und veröffentliche den Beitrag durch zweimaliges Klicken des Buttons Veröffentlichen rechts oben.

Erster Beitrag
Beitrag erstellen

Der Inhalt eines Beitrags besteht aus einzelnen Blöcken. Es gibt Blöcke für Überschriften (1-6), für Absatztext, für ein Bild, für eine Bildergalerie, für Listen, Zitate, Tabellen u. v. m. Wenn man das kleine + anklickt, geht eine Liste aller möglichen Blöcke auf, geordnet nach Gruppen. Wann immer man die Eingabetaste betätigt, wird ein neuer Block der Art Absatz angelegt.

Rechts befinden sich Einstellmöglichkeiten, getrennt für das Dokument (= der Beitrag) und für einen einzelnen Block. Für das Dokument sind die Kategorien besonders wichtig, da damit Beiträge geordnet werden und so leichter gefunden werden. Die Website eines Gartenfreundes könnte z. B. die Kategorien “Blumen”, “Gemüse”, “Sträucher” usw. verwenden, um die Beiträge einzuteilen.

  1. Anlegen von Kategorien: Klicke rechts auf Kategorien (Du siehst, dass bereits eine Kategorie “Allgemein” angelegt ist).
    Wähle Neue Kategorie erstellen und trage unter Neuer Kategorienname Gartenbau ein und bestätige mit Neue Kategorie erstellen. Weise dem Beitrag Gartenbau die Kategorie Gartenbau durch Setzen des Hakens zu, die Kategorie Allgemein wähle ab.
  2. Lege auf die gleiche Weise die Kategorie Obst an, stelle aber als Übergeordnete Kategorie Gartenbau ein.
    Mache es gleich mit der Kategorie Sträucher.

Kategorien
Hierarchische Kategorien

Die Kategorien sind jetzt hierarchisch geordnet. Das ist wichtig, wenn es sehr viele Beiträge gibt, und die Liste der Kategorien noch weiter ginge: Forstwirtschaft mit den Unterkategorien Mischwald, Nadelwald, Laubwald usw. Für diese Übung sind hierarchische Kategorien nicht notwendig.

Unter Beitragsbild kann einem Beitrag ein Bild zugewiesen werden. Wo es angezeigt wird, hängt vom Theme ab (häufig über dem Titel).

Im Folgenden werden drei Beiträge erstellt, ihnen Kategorien zugeordnet und Inhalte eingefügt. Lade Dir dazu inhalt.txt herunter.

  1. Beiträge anlegen, Kategorien zuweisen, Beitragsbild einfügen, Inhalte (Text, Fotos) einfügen:

WP-Beiträge – 01

WP-Beiträge 02

WP-Beiträge 03

WP-Beiträge 04




WordPress – Teil 01

  1. Melde Dich in Deinem WP-Konto an und wechsle mit dem Button Meine Website links oben in Dein Backend.

WP-Backend
Linker Bereich des Backends mit dem Menü

Da wir die nächsten Schritte in WP gemeinsam zwecks kennenlernen gehen werden, ist es gut, das gleiche Theme installiert zu haben.

  1. Themes sichten, auswählen und installieren: Das Theme “TwentyTwenty” wird installiert.

Das Theme TwentyTwenty installieren

  1. Ein erster Überblick über die Site: Kopfbereich mit Website-Titel, Navigation und Suchfunktion; Inhalte der Startseite, Fussbereich.

WordPress – ein erster Überblick

  1. Site-Titel ändern: Wechsle wieder zum Backend mit der Navigation links, indem Du links oben auf das “W” klickst.
    Wähle Design / Anpassen und der Customizer wird geladen. Das ist das Programm, um Änderungen am Layout vorzunehmen. Welche Änderungen auf diese Weise gemacht werden können, hängt vom jeweiligen Theme ab.
    Gehe zu Website-Identität und trage bei Titel Deinen Namen ein, bei Untertitel “Angewandtes Informationsmanagment”.
    Anschließend gehe auf “Änderungen speichern” (oben).
    Verlasse mit dem X links oben den Customizer.
  2. Inhalte löschen: Gehe im Menü zu Seiten und lösche alle Seiten ausgenommen die Startseite über das Dreipunkt-Menü (Papierkorb).
    Lösche ebenso die drei Beiträge.




WordPress – Erste Schritte

Nachdem Du Dein Konto eingerichtet hast und die erste Website automatisch angelegt ist, bist Du im Backend.

WP Backend
Das Backend von WordPress

➜ Links oben siehst Du die Adresse für Deine Website, hier ai1920.wordpress.com
➜ Darunter das Menü
➜ Mitte und rechts: verschiedene Hinweise, wenn Seiten oder Beiträge bearbeitet werden, deren Inhalt.
➜ Deine Website ist noch nicht veröffentlicht (s. Hinweis bei der Checkliste in der Mitte). Sie kann somit von keiner Suchmaschine gefunden werden, nur wer angemeldet ist, also Du, kann sie sehen.

  1. Rufe Deine Website auf, indem Du Deine Adresse im Webbrowser eingibst. Sofern Du noch angemeldet bist, siehtst Du Deine Website.
  2. Wechsle wieder zum Backend (Tipp: halte Backend und Frontend zugleich offen). Veröffentliche Deine Website. Du wirst wieder auf bessere Adressen hingewiesen, die aber nicht gratis sind. Wähle daher Kauf überspringen.
    Auf der folgenden Seite: Weiter mit deiner kostenlosen Website
    Jetzt ist sie veröffentlicht, jeder/jede, der/die die Adresse kennt, kann sie sehen, oder mit einer Suchmaschine finden.
  3. Profil vervollständigen: Wähle rechts oben das Profilsymbol.
  4. Trage auf der folgenden Seite Deinen richtigen Namen ein, den öffentlich angezeigten Namen (sollte auch richtiger Name sein) und füge ein Profilbild von Dir hinzu. Vergiß nicht zu speichern.
  5. Wähle links Datenschutz. Wenn Du willst kannst Du “Teile Informationen …” deaktivieren.
  6. Wähle jetzt links Benachrichtigungen. Hier kannst Du einstellen, wann Du Benachrichtigungen bekommen möchtest.
    Unter der Glocke: Benachrichtigungen im System, also wenn Du in WordPress angemeldet bist
    Email: per Email eben
  7. Melde Dich jetzt links ziemlich oben von WordPress ab.
  8. Melde Dich wieder an: gehe auf die Seite de.wordpress.com und wähle rechts oben Anmelden
  9. Jetzt bist Du im Reader (ein einfaches Netzwerk). Hier kannst Du andere WP-Sites abonnieren und sieht neue Beiträge dieser.
  10. Wähle links ganz oben Meine Website und Du bist in Deinem nun schon etwas vertrauterem Backend.
  11. Sende mir per Email die Adresse Deiner Website.
    (Das dient als Kontrolle Deiner Arbeit.)

Wordpress Frontend
Frontend von einer WordPress-Seite

➜ Deine Seite kann ev. anders aussehen, weil bei der Installation automatisch ein anderes Theme gewählt worden ist.
➜ Es handelt sich um eine Startseite (entspricht einer index.html, Homepage) mit Titel, Menü, Kopfbild mit Text und den 3 neuesten Beiträgen.




Websites mit WordPress

Vorbemerkungen zum Verständnis

  • WordPress war ursprünglich eine Blogsoftware, die auf einem Webserver installiert ist und über einen Webbrowser bedient wird. Inzwischen ist WordPress so weiterentwickelt und um Funktionen ergänzt worden, dass Websites für jeden Zweck erstellt werden können, denen man den Tagebuchcharakter nicht ansieht.
  • Bei WordPress werden im sogenannten Backend die Inhalte erstellt. Um ins Backend zu gelangen, muss man sich anmelden.
  • Das Frontend ist die Seite, wie sie die BesucherInnen sehen.
  • Das Backend kann man sich als Formular vorstellen, das man ausfüllt (also mit vorgegebenen Feldern).
  • Das Layout (Groblayout, Feinlayout) der Seiten wird durch das Theme bestimmt. Ein Theme kann man mit wenigen Mausklicks installieren; es gibt tausende davon, viele sind gratis. Ein Theme kann ohne Programmierkenntnisse ein wenig angepasst werden.
  • Die Seiten werden nicht als einzelne fertige Seiten gespeichert (index.html …), sonder die Inhalte sind in einer Datenbank. Beim Aufruf einer Seite werden die dazugehörigen Daten aus der Datenbank gelesen und gesteuert durch das Theme am Bildschirm dargestellt. Man nennt die Seiten daher dynamisch (im Gegensatz zu fertig abgespeicherten statischen Seiten).
  • Widgets sind hinzufügbare Bereiche auf einer Seite, die etwas anzeigen, z. B. die letzten verfassten Beiträge.
  • Plugins erweitern die Funktion von WordPress, z. B. um die Möglichkeit, dass BesucherInnen etwas hochladen können (wie auf dieser Site die Abgabemöglichkeit), oder indem sie eine Verbindung zu sozialen Medien herstellen.
  • Die Software WordPress ist gratis und mehrere 100 Millionen Mal im Einsatz. Man kann sie bei vielen Webspace-Anbietern mit wenigen Mausklicks installieren (der Webspace selber ist nicht gratis). Wenn dieses Service der einfachen Installation nicht angeboten wird, braucht man etwas mehr Kenntnisse.
  • Die einfachste und komplett kostenlose Variante ist, WordPress auf den Servern von Automatic (der Firma, die WordPress programmiert) zu benutzen. Da gibt es dann einige Einschränkungen. Gegen Bezahlung fallen diese Einschränkungen weg.
  • Für Übungszwecke ist die kostenlose Variante völlig ausreichen und wird werden sie daher benutzen. Als ersten muss ein Konto auf de.wordpress.com eingerichtet werden. Mit diesem einen Konto kann man mehrere Websites anlegen und betreuen.
  • Eine letzte Bemerkung: Die Firma hinter WordPress ist eine seriöse Firma, man kann getrost ein Konto einrichten und WordPress benutzen.

Ein Konto auf de.wordpress.com einrichten

  1. Die Adresse für die Einrichtung: de.wordpress.com
  2. Was Du brauchst:
    – eine gültige Email-Adresse
    – einen Benutzernamen (vergibst Du selber)
    – ein Passwort (vergibst Du selber)
    – eine Subdomain (vergibst Du selber): mein Beispiel im Video unten:
    ai1920.wordpress.com
    Die Domain wordpress.com ist vorgegeben (und im Besitz von WordPress).
    Die vorangestellte Subdomain ai1920 habe ich selber ausgewählt (geht aber nur, wenn sie sonst noch niemand benutzt).
    – Die Möglichkeit, Emails zu lesen.
  3. Anleitungsvideo mit meinem Konto




Info-Zippen

Zippen
Wähle den Ordner (oder wenn nur einzelne Dateien: einzelne Dateien mit Strg) aus

Zippen
Falls ein anderes Zip-Programm installiert ist, z. B. 7-Zip: analog verfahren

Zippen
Namen des Zip-Files wenn nötig ändern, mit Eingabe bestätigen




Hochladen-Info

Hochladen
Email und Passwort: vom Lehrer per Email erhalten (bzw. Passwort selber gemacht)

Hochladen

Hochladen
Mit gehaltener Strg-Taste können mehrere Dateien ausgewählt werden (in Informatik: die Websites werden gezippt und nicht jede einzelne Datei hochgeladen)

Hochladen

Hochladen




Übung 04 “Boxmodell”

Erste Schritte

In der Übung 04 lernst Du, wie Du mit dem “Boxmodell” das Groblayout einer Seite gestalten kannst. Im Artikel Layout mit dem Boxmodell siehst Du oben die Skizze von einem Groblyout. Es sieht oben einen Kopf vor (z. B. für ein schmales Foto), links eine Navigation, in der Mitte den eigentlichen Inhalt und rechts einen Bereich für z. B. News. Unten schließlich eine Fußzeile (für z. B. das Impressum). Jeder einzelne Behälter (Box) kann Inhalte aufnehmen (Text, Fotos, …).

Eine Box hat verschiedene Eigenschaften, z. B. Breite, Höhe, Hintergrundfarbe usw., die im Stylesheet definiert werden.

Erste Schritte (wie bei jeder Website)

  1. Den lokalen Site-Ordner \uebung05 anlegen, ebenso darin den Foto-Ordner \fotos und den Materialien-Ordner \uebung05_materialien
  2. die Sitedefinition einrichten: Sitename “Übung 05”, lokaler Site-Ordner “uebung05”
    Site / Neue Site / …
  3. Erstelle die Seite index.html und das Stylesheet style.css erstellen
    Datei Neu Typ HTML, Datei neu Typ CSS, jeweils gleich speichern
  4. Füge das Stylesheet an die Seite index.html anfügen

Hilfe dazu kannst Du auch im Artikel Eine Website programmieren – Schritte finden.

Boxen im Stylesheet style.css definieren

Die Syntax ist die gleiche, wie Du sie schon kennengelernt hast: selector{Eigenschaft1:Wert; Eigenschaft2:Wert; …}
Der Selector in diesem Fall: div#name_der_box

  1. Beginne mit der ersten Box namens box1.

div#box1{
   position:relative;
   width:800px; height:240px;
   background-color:#666;
   margin-bottom:10px;
}

div# ➜ erzeugt die Box
position:relative ➜ gibt eine Methode an, wie man Boxen an eine bestimmte Stelle am Bildschirm hinbekommt (wir verwenden immer “relative”)
box1 ➜ ist der Boxname
width, height ➜ sind Breite und Höhe
background-color ➜ ist die Hintergrundfarbe
margin-bottom ➜ Aussenabstand unten, schiebt alles um 10 px weg, in diesem Fall die box2, die darunterkommen wird

  1. Definiere die box2.

div#box2{
   position:relative;
   width:800px; height:100px;
   background-color:#666;
   margin-bottom:10px;
}

  1. Definiere box3: Breite 800 px, Höhe 70 px

Boxen in die Seite index.html einfügen

  1. Gehe zur index.html
  2. Füge die box box1 so ein: Einfügen / Layoutobjekte / DivTag / ID / box1

    Hilfe findest Du im Artikel Eine Website programmieren – Schritte im Bereich “Erste Seite (HTML) anlegen im Film.

  1. Füge box2 ein: stelle den Auszeiger vorher unbedingt rechts ausserhalb von box1 und füge dann box2 ein: Einfügen / Layoutobjekte …
  2. Verfahre ebenso bei box3

Das Ergebnis schaut so aus:

index.html mit drei Boxen, Abstand zwischen den Boxen

Boxen horizontal am Bildschirm zentrieren

  1. Schöner wird das Layout, wenn die Boxen nicht links am Bildschirm picken und rechts die große freie Fläche bleibt. Eine Möglichkeit ist, jede einzelne Box zu zentrieren: Ergänze dafür im Stylesheet jede Box um folgende Zeile:

div#box1{
   ...
   margin-left:auto; margin-right:auto;
}

auto ➜ steht für automatisch: verteilt den freien Platz am Bildschirm links gleichmäßig auf links und rechts, egal wie groß ein Bildschirm ist

Das Ergebnis: