Interaktive Medien 1. Semester Martin Vollenweider - Webserver einrichten; Installation von WordPress
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Webserver einrichten; Installation von WordPress Interaktive Medien 1. Semester Martin Vollenweider Interaktive Medien 1. Semester, Martin Vollenweider 30.09.2021
Ziele
1. In den Interaktiven Medien arbeiten wir mit einem Webserver. Bei der Arbeit in
den Interaktiven Medien ist es wichtig, die erstellten Dateien immer im
Internet auf einem Webserver zu testen. Nur dann ist sichergestellt, dass
alles wunschgemäss funktioniert.
2. Im Kurs «Sketch&Draw» des Moduls Visualisieren müssen Sie Ihre Lösungen
der Aufgaben und Übungen auf einem WordPress-Blog publizieren. Sie
können entweder WordPress auf Ihrem FHGR-, dem Hosttech-Webserver oder
bei einem beliebigen Hoster platzieren.
Notwendige Schritte
1. FHGR Webserver einrichten
2
2. Einrichten des Webservers mit Atom
3. Download der neuesten Version von Wordpress und auf Festplatte entzippen
4. Installation des FTP Clients FileZilla
5. Kopieren der Dateien in Filezilla auf den Webserver
6. Installation von Wordpress
3
Webserver via FHGR Intranet erstellen
Diesen Punkt können Sie erst ausführen, wenn Sie mit Ihrem Benutzernamen und
Passwort auf das Intranet der FHGR zugreifen können!
Via Intranet > Campus > Web-/FTP Ausbildungsserver:
4
Benennen der Installation des Webservers
5
Ergebnis
Bei Ihrer Installation haben Sie andere Namen, Bezeichnungen und Passwörter!
Testen des Webservers
Nach 5 Minuten können Sie den Webserver testen. Solange braucht die
Installation! Klicken Sie auf den Link (URL):
6
Ergebnis des Tests
Wenn der Webserver richtig installiert wurde, sehen Sie folgende Darstellung
nach dem Klick auf die URL
7
Was tun, wenn eine andere obige Darstellung erscheint?
Warten Sie nochmals einige Minuten (mindestens 10 Minuten). Wenn es danach
immer noch nicht funktioniert, die Instanz NICHT löschen, sondern gleich einen
neuen Webserver erstellen. Wenn der neue Server funktioniert, erst dann den
nicht funktionierenden löschen:
8
Was tun, wenn der Webserver zu einem späteren Zeitpunkt nicht mehr funktioniert?
Klicken Sie auf den Link Problem melden:
9
FTP-Host, -Benutzername und -Passwort merken und kopieren
Vorsicht
Vorsicht beim Kopieren des Passwortes! Oft wird ein überflüssiger Leerschlag
oder Tabulator am Anfang des Passwortes mitkopiert! Fügen Sie das Passwort
zur Kontrolle in einem Text-Editor ein:
10Einrichten des Webservers mit Atom
1. Menü File > Open Folder… den Ordner fhgr > web auswählen:
2. Von Atom aus Menü Packages > Remote FTP > Create FTP config file
Achtung: Sie müssen das Remote FTP zuerst installieren (siehe Skript Seite 3,
11erste Aufgabe: Installationen) via File > Settings > Install:
3. Die erstellte Datei mit den Angaben des Webservers ergänzen und speichern:
12Die Einträge für host
und remote stimmen
auch bei Ihrer
Installation mit dem
Screenshot überein.
Passen Sie auf jeden
Fall user und pass an!
4. Via Packages > Remote FTP > Connect auf den Server zugreifen. Mit Packages
> Remote FTP > Toggle das Remote-Fenster (Sicht auf den Server) darstellen.
5. In vorgängigen Schritt (030_ordnerstruktur) erstellten wir die Datei index.html
im Ordner im1 > aufgabe_testing. Diese lokale Datei index.html in Atom öffnen,
13etwas verändern und speichern. Sie sollte automatisch auf den Server kopiert
werden.
6. Die Site via Browser öffnen:
Die Zahl in der URL – im Screenshot 537449-25 – muss an Ihre Konfiguration
angepasst werden.
Wichtig
In jedem Webprojekt (und somit in jedem Projekt-Ordner) braucht es eine
index.html Datei!
14Der Ordnername «aufgabe_testing» ist nur
als Beispiel für Projekt-, resp. Aufgaben-
Ordner gedacht. Die Ordner-Struktur im
Projektordner ist aber zwingend («css»,
«html», «images», «js» und «index.html»).
Für jede Aufgabe einen eigenen Projekt-Ordner (im Beispiel «aufgabe_testing»)
erstellen.
In jedem Projekt-Ordner braucht es eine index.html Datei!
15Zusammenfassung
16Refresh im Browser
Chrome
Mit den aktivierten Developer Tools (Mac: Cmd + Opt + I; Windows: F12 or Ctrl +
Shift + I) können durch langes Drücken auf den Refresh-Button alle Optionen
eingeblendet werden. Verwenden Sie den Hard Reload:
17Wenn im Browser noch die alte Version angezeigt, ist ein «harter Refresh» nötig:
Browser Windows Macintosh
Chrom CTRL und F5 1) CMD und SHIFT und R
CTRL und Reload Icon CMD und Reload Icon
Firefox CTRL und F5 1) CMD und SHIFT und R
CTRL und SHIFT und R
Safari – OPTION und CMD und E, dann Shift
und klick Reload in der Toolbar
Edge CTRL und F5 1) –
CTRL und Reload Icon
1) Wenn das nicht gehen sollte: Shift+F5 oder Ctrl+Shift+R
18Arbeit mit dem Webserver
Mit Webserver verbinden
Packages > Remote FTP > Connect
19Synchronisieren (lokale Daten auf Webserver kopieren)
Projektordner mit dem rechten
Mausknopf anwählen, dann
Sync local -> remote
20Wordpress herunterladen
1. Installation von Wordpress auf die lokale Festplatte laden
… in der Zwischenzeit gibt es neuere Versionen …
2. Erstelle einen temporären Ordner auf deinem PC/Laptop wo du Wordpress
abspeichern willst. Geb diesem Ordner einen Namen ohne Umlaute oder
Abstände. In diesem Ordner Wordpress entzippen, resp. extrahieren. Es gibt
einen Unterordner wordpress-x.y.z (im Beispiel wordpress-5.3-de_CH.zip)
21Installation FTP Client Filezilla
Zusammenhänge
22Download von Filezilla
23Richtige Version herunterladen: nicht die Pro Version wählen
24Unbedingt Show
additional download
options wählen.
Beim normalen
Download werden
unerwünschte Gratis-
Programme installiert.
2526
Einrichten von Filezilla
27Den rechten Teil gemäss Webserver Datenblatt der FHGR ausfüllen. Es geht um
den Teil FTP-Benutzer.
28Vorsicht beim Kopieren des Passwortes!
Oft wird ein überflüssiger Leerschlag am Anfang des Passwortes mitkopiert!
Fügen Sie das Passwort zur Kontrolle in einem Text-Editor ein:
2930
Löschen von index.html im obersten Ordner mit Filezilla
Auf dem Webserver im obersten Ordner bitte zuerst die Datei index.html löschen
31Kopieren der Dateien in Filezilla auf den Webserver
Der Inhalt des lokalen Ordners wordpress-x.y.z/wordpress gehört im Server in den
Ordner web
32Installation von Wordpress
Aufruf der URL des Web-Ausbildungsservers:
Sprache von Wordpress wählen: Deutsch oder English (United States)
3334
35
Erfolgreiche Eingabe:
36Wichtig: Bei der Frage
nach dem
Administrator NICHT
den Namen admin
verwenden! Details
Merken Sie sich
Username und
Passwort gut.
Schreiben Sie sich
Username und
Passwort auf.
37Aufruf Backend
URL/wp-login.php
38Backend von Wordpress
39Inhalte: Beiträge und Seiten
Unterschiede zwischen Beiträge (=Posts) und Seite (=Pages)
Beiträge oder Blogs: Inhalte nach
Datum geordnet. Es stehen
Beitragsformate, Kategorien und
Schlagworte zur Verfügung.
Pages: Unabhängige Seiten, für
klassische Website. Kann in Menü
eingebaut werden, sind hierarchisch
aufgebaut
40Blog oder Beitrag
Editor
41Kategorien und Schlagworte/Tags für Blogs
42Medien
Das Erstellen einer Galerie fügt einen Shortcode dazu
Shortcode
[gallery ids="21,16,15"]
43Von URL einfügen für Video oder Audio
oder via iFrame
Beispiel soundcloud.com
44Pages oder Seiten mit Hierarchie
Erstellung der Menüs siehe Seite 51
45Benutzeradministration
1. Administrator: alle Rechte
2. Redakteur: Erstellen, editieren, löschen, veröffentlichen aller Seiten und
Beiträge aller Benutzer
3. Autor: Eigene Beiträge erstellen, editieren, löschen und veröffentlichen
4. Mitarbeiter: Eigene Beiträge erstellen, editieren und löschen
5. Abonnent: Eigenes Profil anpassen
46Themes
Theme aktivieren, deaktivieren und anpassen
Themes lassen sich
aktivieren, suchen und
installieren
=> Trennung von Inhalt
und Formatierung
47Theme anpassen
Design > Anpassen
48Design > Editor:
Nie ein Theme im Code abändern!
49Theme installieren
Viele Themes lassen sich auch gratis bei
wordpress.org herunterladen. Die
Installation ist auch via Download der
ZIP-Datei möglich
50Menüs erstellen
Seiten erscheinen automatisch in Design > Menüs
51Inhalte für Menüs
ev. in aktivieren.
52Startseite festlegen
Einstellungen > Lesen
Beitragsseite erlaubt, eine (neue leere) Seite für die Blogs zu definieren. Diese
wird dann in der Regel via ein Menü (siehe Seite 51) aufgerufen.
53Widgets und Plugins
Widgets (Details)
Man kann Widgets in die dafür vorgesehenen Bereiche verschieben, ändern
etc.
54Unterschied Widget und Plugin
Widgets: Drag & Drop Interface;
Widgets werden an spezielle Stellen
hinzugefügt
Plug-Ins: von einer bestimmten Stelle
und dem Theme unabhängige PHP-
Dateien, welche die Funktionalitäten
von Wordpress erhöhen.
55Plug-Ins
Liste der Plug-Ins
56Evaluation von Plug-Ins
1. Plug-In evaluieren
2. Kompatibilität anschauen (Version von Wordpress und PHP)
3. Letztes Update anschauen, letzter Update in 6 Monaten?
4. Rating anschauen
5. Nach Plug-In-Namen recherchieren um F&As, Kritiken etc. zu finden
6. Debug Mode in wp-config.php aktivieren (siehe
http://codex.wordpress.org/Editing_wp-config.php#Debug)
7. Austesten mit kleineren Tests, erst dann grössere Projekte in Angriff nehmen
57Nur durchspielen falls Passwort vergessen
Sie haben das Passwort für das Einloggen ins Backend von Wordpress
vergessen
Weder auf einer lokalen Installation noch auf dem FHGR Studierendenserver
funktioniert der Link «Passwort vergessen». Es ist kein Mailprogramm
installiert.
Lösung: Vorgehen
1) phpMyAdmin aufrufen, für den FHGR Studierendenserver via Intranet
5859
2) In der Datenbank wordpress die Tabelle wp_users öffnen und beim
gewünschten Benutzer mit dem Bleistift editieren:
603) Bei user_pass die Funktion MD5 wählen und das gewünschte
unverschlüsselte Passwort eingeben:
4) Unten Schaltfläche bestätigen.
5) Ins Backend von WordPress einloggen.
61Sie können auch lesen
