Für alle Interessierten aus dem Bereich des "CMS Online Designer (VHS)" findet ab dem 01.04.2019 ein Seminar "CMS WordPress" bei der VHS Braunschweig als Bildungsurlaub statt.
In diesem CMS-WordPress-Workshop wollen wir uns alle notwendigen Fähigkeiten von der WordPress-Installation bis zur ausgebauten Website erarbeiten. Das Seminar orientiert sich dabei an den "Ideen/Roter Faden" des CMSOD-Zertifikats (VHS) aber natürlich vor Allem auch an den Bedürfnissen der Teilnehmer im Seminar.
Hier die Rahmendaten unseres Seminars:
Ort: VHS Braunschweig, Heydenstraße 2, Raum 2.11
Zeiten: Mo, 01.04. - Fr, 05.04.2019; jeweils 08.30 - 16.00 Uhr
Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...
Ihr Trainer Joe Brandes
Tag 01
Montag, 01.04.2019, 08.30 - 16.00 Uhr
Allgemeine Infos / Intro
- Orientierungsphase
- Ablaufplanung Seminar: Pausenzeiten, Anfangs-/Endzeiten
- Kurzdarstellung "CMS Online Designer (VHS)"
- Cobra-Shop mit Software für VHS-Schulungsteilnehmer
Windows-Umgebung konfigurieren
Bei der VHS Braunschweig sind entsprechende Windows Profile zur Nutzung vorinstalliert:
Windows 10 BU beim Starten auswählen!
Ansicht für den Standard-Dateimanager Window Explorer (Win + E) einstellen:
Windows Einstellungen - Dateierweiterungen einblenden
Anzeige der Dateiendungen mit Windows Explorer (Win + E);
Windows Vista / 7 / 8 / 10: Organisieren - Ordner- und Suchoptionen - Register Ansicht ...
Alternativ bei Windows XP: Menü Extras - Ordneroptionen
Grund: Dateien heißen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das genau wissen!
Software für CMSOD-Seminare: (siehe auch Beitrag Toolsammlung auf diesem Portal)
Anm.: die Programme sind ggf. schon installiert oder werden bereitgestellt!
- XAMPP für Windows (Link)
wird maßgeschneidert von Trainer J. Brandes bereitgestellt oder die TN nutzen eine aktuelle Apachefriends.org-Version - Notepad++ (Link)
Texteditor (für Konfigurationsdateien oder auch HTML / CSS / JS
siehe auch Alternative: Microsoft Visual Studio Code (Link) - 7-Zip (Link)
Packer / Entpacker
Serverumgebung "WAMP"
LAMPP
XAMPP für Windows - Seminar-Version: XAMPP 7.2.8 mit PHP 7.2.8
X - Betriebssysteme Linux (L), Windows (W), MacOS (M) oder Sun Solaris;
A - Apache (Webserver),
M - MariaDB / MySQL (Datenbankserver),
P - PHP (serverseitige Skriptsprache)
P - Projekt;
bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)
oder auch mal als WAMPP mit einer Windows Server Betriebssystem Basis und dem IIS (Internet Information Server) als Webserver und dem MSSQL-Server als Datenbankserver
XAMPP-CMSOD installieren
Vorgehensweise im "Windows"-Seminar (XAMPP-Server für Windows):
Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-7z-Archiv bereit, das bereits für die CMS Joomla, TYPO3 und die anderen CMSOD-Seminare vorkonfiguriert ist.
| Archivname: | xampp-cmsod-TEILNEHMER-20180824.exe |
| MD5-Prüfsumme: | 4A1B634170BB3A585147B3A25C388B64 |
Tipp für MD5-Prüfsumme in PowerShell: (Anm.: hier Aufruf im Ordner des Archivs)
$a = Get-FileHash -Path .\xampp-cmsod-TEILNEHMER-20180824.exe -Algorithm MD5
$a.Hash
Das Archiv wird nur bei Notwendigkeit (siehe PHP-Version 7.2 für TYPO v9) aktualisiert.
Die eingebauten Techniken (s.u.a. PortableApps, ...) können selber aktualisiert werden!
XAMPP-CMSOD
1) XAMPP-Archiv auf TN-PC kopieren über Netzwerkfreigabe (oder von bereitgestellter Trainer-CD)
2) Selbstentpackendes 7z-Archiv mit Doppelklick "öffnen/entpacken"
3) Zielordner: C:\xampp-cmsod angebeben
Anm.: Entpacken in Zielpfad C:\xampp-cmsod ist wichtig!
Grund: alle eingebauten CMSOD-Techniken und Tools auf dieses lokale Verzeichnis optimiert wurden.
Tipp: eigene XAMPP-Testumgebungen kann man dann einfach in anderen Verzeichnissen wie C:\xampp unterbringen.
4) Starten / Doppelklicken xampp-control.exe (Kontrollcenter) und
5) Starten der nötigen Server mit Hilfe des Kontrollcenters:
→ Apache Webserver und
→ MySQL Datenbankserver per Schaltflächen "Starten" im Kontrollcenter
Anm.: die Nachfragen der Windows-Firewall bei den Dienste-Starts können bestätigt werden, falls wir Zugriffe auf unsere Testinstallationen über das Netzwerk wünschen.
Die Aktionen zum Starten Webservice Apache und Datenbankserver MySQL (bzw. MariaDB) sollten wir täglich (also jeweils bei Bedarf) durchführen.
Empfehlung: von einer automatischen Bereitstellung des XAMPP-Server über (automatisch startende) Services (Dienste) rate ich ab!
6) Browser / Webclient - Starten eines Browsers Ihrer Wahl mit Adresse localhost
Hinweis: portable Firefox (s. PortableApps Anwendungen) nutzen keinen Browser-Cache; Sie können einen installierten und einen portablen Firefox nicht gleichzeitig nutzen!
Die vorbereitete Umgebung in einer kleinen Übersicht:
| Technik | Info | Bemerkung |
|---|---|---|
| XAMPP | C:\xampp-cmsod\ |
Basispfad des XAMPP-CMSOD |
| Web-Dokumente | C:\xampp-cmsod\htdocs\wordpress\... |
mit Unterordnerstrukturen |
| Apache | C:\xampp-cmsod\apache\conf\httpd.conf |
Konfigurationsdatei Webserver |
| PHP | C:\xampp-cmsod\php\php.ini |
Konfigurationsdatei PHP |
Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich unter (URL) http: //localhost/cmsod-overview eine Website mit Infos rund um den CMSOD
und die genutzten Techniken und Konfigurationen.
WordPress (Links / URLs / Infosites)
Die folgende (kleine ;-) Linksammlung soll auch nach dem Seminar Ihr Interesse und die Nutzung von WordPress unterstützen. Wir werden die Sammlung aber natürlich nicht komplett nachrecherchieren.
- WordPress
https://wordpress.org/
https://de.wordpress.org/ - Wikipedia Beitrag WordPress
https://de.wikipedia.org/wiki/WordPress - Releases - hier auch ältere WordPress-Versionen verfügbar!
https://de.wordpress.org/category/release/ - Roadmap (engl. + dt.)
https://wordpress.org/about/roadmap/
https://de.wordpress.org/about/roadmap/ - Requirements + Techn. Anforderungen
https://wordpress.org/about/requirements/
https://de.wordpress.org/about/requirements/ - Forums (engl.)
https://wordpress.org/support/forums/ - Support (engl.)
https://wordpress.org/support/ - Security (engl.)
https://wordpress.org/support/category/security/ - Plugins
https://de.wordpress.org/plugins/ - Themes
https://de.wordpress.org/themes/ - Anleitungen (dt.)
https://de.wordpress.org/category/anleitungen/ - online manual and documentation (codex)
https://codex.wordpress.org/ - functions, classes, methods, and hooks
https://codex.wordpress.org/Function_Reference
https://developer.wordpress.org/reference/
Forum WPDE https://forum.wpde.org/
Und natürlich erhebt diese Liste keinen Anspruch auf Vollständigkeit.
Und auch in WordPress-Projekten sind solche und weitere Informationen als "ReadMe"-Dokumente verfügbar:
- Projektordner/liesmich.html (deutsch)
- Projektordner/readme.html (englisches Original)
- Projektordner/license.txt (die WordPress Lizenz)
Wie bei allen Webprojekten lohnt eine Durchsicht der Text- und ReadMe-Dateien.
WordPress - Historie / Versionen
s.a. https://de.wikipedia.org/wiki/WordPress
Anfangs ein Weblog, das sich über die Jahre zum CMS "mauserte".
Offizielle Schreibweise seit 3.0: WordPress ("Kamelhöcker"; engl. CamelCase)
Webportal zum Hosten von WordPress-Projekten: wordpress.com
Anm.: wird von mir in den Seminaren nicht diskutiert/dargestellt.
Ab 2003 von Matthew Mullenweg (https://de.wikipedia.org/wiki/Matthew_Mullenweg) als reine Weblog Software (Blog-Software) entwickelt.
Versionen werden (seit Version 1.0.1) nach Jazzmusikern benannt.
Die erste stabile Version: 3. Januar 2004 WordPress 1 mit Codename "Davis"
Links:
- https://de.wikipedia.org/wiki/WordPress#Versionen
- https://de.wordpress.org/download/releases/
- https://de.wordpress.org/about/history/
Neuerungen - siehe Wikipedia und die WordPress Beitragslinks
- WordPress 4.9 Tipton 16. November 2017
Customizer mit Planungsfunktion,
vereinfachte Menüerstellung und Sandbox für Sicherheit bei Plug-in- oder Theme-Bearbeitung
Anm.: fataler Fehler nahezu unmöglich, da statt des White Screens die vorherige Version wiederhergestellt wird
https://de.wordpress.org/2017/11/wordpress-4-9-tipton/
https://wordpress.org/news/2017/11/tipton/ - WordPress 5 Bebo 6. Dezember 2018
ein auf Inhaltsblöcken basierender Editor (siehe auch: https://de.wordpress.org/gutenberg/ )
Theme Twenty Nineteen
https://wordpress.org/news/2018/12/bebo/ - Wordpress 5.1 Betty 21. Februar 2019
Performance-Verbesserungen des Editors,
Site-Health-Funktion für Verbesserung der Sicherheit und Geschwindigkeit
https://de.wordpress.org/2019/02/wordpress-5-1-betty/
https://wordpress.org/news/2019/02/betty/
Aktuelle (Haupt-)Version: 21. Februar 2019 WordPress 5.1 mit Codename "Betty"
Seminarversion: 19. März 2019 WordPress 5.1.1
Aktuelle Verbreitung: Statistikportal https://trends.builtwith.com/cms
Anm.:über 30% der CMS Nutzungen weltweit!
WordPress Technik
Anforderungen an die Servertechnik: es wird eine (empfohlene) PHP-Version 7.x und eine "aktuelle" MySQL/MariaDB Datenbank benötigt.
Anm.: in den aktuellen Technikseiten von WordPress wird auch gerne gleich nach PHP 7.3 verlangt! (siehe Hoster?!)
Das readme/liesmich.html-Dokument einer WordPress 5.1.1 Installation nennt als (minimale) Systemanforderungen
- PHP in Version 5.2.4 oder höher
- MySQL in Version 5.0 oder höher
Und die Empfehlungen lauten:
- PHP in Version 7.2 oder höher
- MySQL in Version 5.6 oder höher
- Apache-Modul mod_rewrite
- HTTPS Unterstützung
- Einen Link zu wordpress.org auf der Website ;-)
Mit Version WordPress 5.2 (Beta veröffentlicht 27.03.2019) wird die Minimum-PHP-Version auf 5.6 gesetzt.
Info-Link: https://wordpress.org/news/2019/03/wordpress-5-2-beta-1/
Lizenz: GPLv2 (or later; https://wordpress.org/about/license/ )
Stichworte:
- Beiträge in Kategorien (Archivierung möglich)
- Tagging, selbst definierte Taxonomien (engl. Custom Taxonomies), Metadaten (benutzerdef. Felder)
- Navigationselemente können automatisch erzeugt werden
- Webfeeds (RSS, RDF, Atom)
- Statische Seiten erzeugen und ausliefern
- Versionierungen von Seiten und Artikeln
- Kommentare und Links verwalten
- Redaktionssystem
5 Rollen: Administrator, Redakteur, Autor, Mitarbeiter, Leser - Mediengalerie
- Volltext-Suche
- Suchmaschinen-Optimierung (SEO)
- Editor(en):
WordPress Block-Editor Gutenberg, vorher: TinyMCE (siehe Plug-in "Classic Editor" oder ähnliche) - Plug-ins (Erweiterungen; >50.000; z.B. Anti-Spam mit Akismet; https://wordpress.org/plugins/)
- Themes - Auslieferung von Designs (https://wordpress.org/themes/)
- Multi-Site Funktion (könnte auch für mehrsprachige Sites genutzt werden)
Mehrsprachigkeit wird aktuell nicht nativ unterstützt! Geplant in WordPress für aktuelle Roadmap Phasen 3 und 4 (nicht mehr in 2019!) - Trackbacks (oder Pingbacks)
Verfügbarkeit von Aktualisierungen
Die WordPress Versionen werden aktuell (zum Seminarzeitpunkt) bis einschließlich Version 3.7 Basie gepflegt!
Anm.: aktuelle Version 3.7.29 vom 13. März 2019
Das sind seit Einführung der WordPress Version 3.7 Basie am 24. Oktober 2013 jetzt bereits über 5½ Jahre! Hierin liegt einerseits eine große Stärke - aber auch eine Schwäche des WordPress Systems (siehe PHP-Kompatibilität, Hosting-Techniken, Security, Updates/Upgrades auf aktuelle WordPress-Versionen, ...)
Die technische Durchführung von Aktualisierungen von WordPress besprechen wir an anderer Stelle.
WordPress Installation
Immer bedenken: WordPress besteht aus einem Webserver-Projekt-Ordner und einer "verbundenen" Datenbank!
| Technik | Info | Bemerkung |
|---|---|---|
| Lokal | C:\xampp-cmsod\htdocs\wordpress\wordpress-bu |
htdocs hier mit Unterordnerstruktur |
| Web | http://localhost/wordpress/wordpress-bu |
immer über htdocs aufrufen nie über Laufwerkspfad C:\... aufrufen |
| Datenbank | wordpress_bu ↑ Unterstrich in DB-Name! |
DB erlaubt keine Bindestriche/Minus |
WordPress-Projekt-Ordner
Bitte beim Entpacken im geplanten WordPress-Webdokument-Ordner unseres XAMPP-Servers auf die saubere Ordnerstruktur achten.
Hinweis: WordPress-Archive erzeugen beim Entpacken einen Unterordner "wordpress".
Download bzw. Bereitstellung der aktuellen
deutschen Version 5.1.1 von https://de.wordpress.org/download/releases/ bzw. lokal in Seminarumgebung
Anm.: wenn Sie die WordPress-interne Update-Technik ausprobieren wollen, dann können Sie später gerne auch Vorgängerversionen in anderen Projekten ausprobieren.
WordPress-Projekt-Datenbank
Wichtig: Für die Installationsroutine von WordPress muss immer erst eine Datenbank für unsere WordPress-Projekte erstellt werden!
Für die zu erstellende Datenbank (hier: wordpress_bu ) empfehlen die WordPress-Entwickler die Zeichensatz/Kollation der MySQL-Verbindung: utf8mb4_unicode_ci .
Hinweise zum Unterschied zwischen utf8mb4_unicode_ci und utf8mb4_general_ci siehe z.B. Link
XAMPP-Datenbank-Zugangsdaten:
(Übersicht mit Hilfe Datei password.txt im XAMPP-Hauptverzeichnis)
| Datenbankserver: | localhost |
| Benutzer: | root |
| Passwort: | leer (kein Passwort) |
Hinweis zur Umsetzung mit Online-Hosting-Technik:
für die Komplettierung der Installation direkt bei einem Hoster muss ebenfalls vorher eine Datenbank mit DB-Tool des Hosters (oft: phpMyAdmin) auf Ihrem Hosting-Datenbankserver angelegt werden (siehe Hosting Kundencenter...)!
Anm.: CMS-Vorinstallationen oder Seminarinstallationen meines XAMPP-CMSOD Systems haben immer folgende Zugangsdaten: Benutzer (admin) + Passwort (cmsodcmsod)
WordPress-Installation/Setup
Aufruf der Webadresse http://localhost/wordpress/wordpress-bu zeigt uns die Installationroutine für WordPress.
WordPress rühmt sich für eine "Famous 5-minute-install"-Routing. Das klappt aber natürlich auch "schneller" und bei anderen CMSen ;-).
Bei den Verbindungsdaten zur (vorher angelegten) Datenbank empfehlen wir die Nutzung eines ausgefalleneren DB-Präfix (z.B. wp_1234xzy_ statt nur wp_ )
Man sollte für vertiefende Kenntnisse immer auch mal die roh-entpackte und die Ordnerstruktur nach der Installation vergleichen:
siehe Datei wp-config-sample.php vs. wp-config.php
Installation - Kurzanleitung
- Datenbank anlegen: wordpress_projektname (Zeichensatz/Kollation: utf8mb4_unicode_ci )
- WordPress Archiv sauber in htdocs-Ordner entpacken (z.B.: .\htdocs\wordpress\wordpress-projektname )
- Mit Browser Projektsite aufrufen: localhost/wordpress/wordpress-projektname
Anm.: hier (noch) keine technische Diskussion zu "HTTPS/SSL" oder VirtualHosts (VHosts Webserver; z.B. URL: www.projektname.local)
WordPress Projektordner
Vor bzw. nach der Installation findet man folgende Ordner-/Dokumentstruktur vor:
| Ordner / Datei(en) | Hinweis |
|---|---|
./wp-admin |
Backend - also die Admin-Oberfläche (Dashboard) Hinweis: niemals Änderungen vornehmen! |
./wp-includes |
Technik - inkludierte Skripte und PHP-Techniken Hinweis: niemals Änderungen vornehmen! |
./wp-content |
Projekt - alles, was zu unserer WP-Website gehört:./wp-content/languages - Sprachinfos./wp-content/plugins - Plug-ins / Erweiterungen./wp-content/themes - Themes (Design/Layout)Nach der Installation: ./wp-content/upgrade - Aktualisierungen/Upgrades recovern können./wp-content/uploads/year/month - Ordner für Medien-Uploads./wp-content/mu-plugins - Must-Use Plug-insAnm.: die Unterordner werden bei den entsprechenden Topics weiter erläutert. |
index.php |
Hauptdatei für Projekt Anm.: lädt wp-blog-header.php und weist WP an, das Theme zu laden |
wp-config.php |
Konfigurationsdatei für Projekt (s. DB-Connection) vor der Installation: wp-config-sample.php |
license.txt |
Lizenzdatei |
liesmich.html readme.html |
deutsche Hilfe-/Info-Webdatei englisches Help-/Info-Webfile |
wp-*.php |
Diverse Helper-Skripte |
Hier mal der PHP-Code der Hauptdatei unseres WordPress-Projekts: aber keine Angst - wir werden jetzt nicht anfangen zu coden ;-){code lang:php showtitle:false lines:true hidden:false}<?php
/**
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
*
* @package WordPress
*/
/**
* Tells WordPress to load the WordPress theme and output it.
*
* @var bool
*/
define( 'WP_USE_THEMES', true );
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp-blog-header.php' );{/code}Anm.: hier passiert also noch nicht "viel" ;-)
In den Unterordnern finden sich auch immer wieder Dummy-index.php-Dateien:{code lang:php showtitle:false lines:true hidden:false}<?php
// Silence is golden.{/code}Diese Dummys sollen den Direkt-Aufruf der Unterordner weiter absichern.
Empfehlung: für eine saubere Analyse der WordPress-Rohinstallation sollte man erst einmal keinerlei Themes ändern/aktivieren, sondern nur vorhanden Projektsite nutzen.
Für eine "Admin-lose" Betrachtung der Website (siehe Werkzeugleiste im CMS-Frontend) sollte man einen alternativen Browser nutzen, oder über die Profileigenschaften des Admins die Werkzeugleiste deaktivieren.
Also z.B. WP-Dashboard mit Mozilla Firefox und Website mit Google Chrome (oder natürlich andere Kombinationen/Browser). Eigentlich benötigt man für bestimmte Tests (s. Kommentare) sogar noch einen dritten Browser! Aber man muss die Site ja eh immer mit den unterschiedlichsten Browsern testen.
Dashboard
WordPress Dashboard
Wir starten mit einem ausführlichen Rundgang durch das Backend von WordPress - dem Dashboard.
Sicherlich gerade für Einsteiger eine der besseren Backend-Lösungen im CMS-Bereich und dadurch auch mit Sicherheit am Erfolg von WordPress beteiligt.
Die nebenstehende Übersicht lässt sich per Klick vergrößern. Wir werden mit einem Gang durch das Dashboard die nächsten Schritte vorbereiten.
Übungen zu Beiträgen und Medien
Wir machen erste Schritte mit dem neuen Block Editor "Gutenberg" (seit WordPress 5; Anm.: kann später auch gegen den "alten Classic Editort TinyMCE" ausgetauscht bzw. kombiniert werden).
Empfehlung zu Medien: Medien immer erst "sauber" und voll dokumentiert (Titel, Beschriftung, Alternativtext, Beschreibung) in die Mediathek aufnehmen und dann in den Beitragsbereichen (Post-Blöcken) aufnehmen.
Wir betrachten nur Beiträge, also die klassichen Posts/Blog-Posts (Vergleich zu Seiten; Link mit Gegenüberstellung)
Datenbank erstellen
WordPress Installation
Arbeitsumgebung
wp-config.php
Block Typen
Gutenberg - Block Editor
Tag 02
Dienstag, 02.04.2019, 08.30 - 16.00 Uhr
Ausführliche Rekapitulation zu Tag 01 (... ist ja schon immer ne Menge am ersten Tag ;-),
TN-Fragen
Ausführliche Rekapitulation zu Tag 01
Mit Hilfe der Ausarbeitungen und Darstellungen zu Tag 01 haben wir die Themen nachgearbeitet.
Insbesondere:
Installationspraxis und Inbetriebnahme eines neuen WordPress-Projekts "WordPress Dienstag"
- Datenbank anlegen: (Zeichensatz/Kollation: utf8mb4_unicode_ci )
wordpress_dienstag - WordPress Archiv sauber in htdocs-Projekt-Ordner entpacken:
.\htdocs\wordpress\wordpress-dienstag - Mit Browser Projektsite aufrufen:
localhost/wordpress/wordpress-projektname
Empfehlung: ab heute in Projekt "WordPress Dienstag" trainieren und bei Tests und Ausprobieren einfach auf das gestrige "WordPress Montag" ausweichen!
Forts. Übungen Editor Gutenberg
Intensive Praxis über den Vormittag mit diversen Block-Typen und Techniken des neuen Block-Editors Gutenberg.
Die Block-Typen sind übersichtlich in Kategorien verdrahtet und wir haben beispielsweise verschieden der Typen ausprobiert.
Übersicht Blocktypen: (nicht vollständig)
- Meistgenutzt
die "usual suspects" und gerade genutzten Typen - Allgemeine Blöcke
Absatz, Bild, Überschrift, Bild, Galerie, Cover, Zitat
Praxis: Textfluss um Bilder mit Ausrichtungen - Formatierung
hier: Tabelle genutzt - Layout-Elemente
hier: Mehr (Trennung des "Teasers/Anreißer" vom kompletten Post-Restbeitrag) - Widgets
Technik-Schnippsel für z.B. "Neue Kommentare" - Einbettungen
hier: Youtube Video, Twitter Feed ausprobiert
Anm.: beim Einbinden von Multimedia-Daten bitte immer Rechte / Copyrights beachten!
Tipp: für das Einschätzen von Design/Layouts sollte man Test-Texte nutzen (Stichwort: Lorem Ipsum Dummytexte)
Forts. Beiträge
Praxis mit
- Kategorien
- Tags
Unterschiedliche Ansätze für das Erstellen neuer Kategorien oder Tags - Standard: über die Beiträge...
Die Kategorien kann man später auch für Links in Menü nutzen - die Tags nicht!
Für die Tags gibt es Widgets für die Darstellung der genutzten Tags auf der Site (Tag-Cloud).
Medien - Mediathek
Praxis: Bilder "webtauglich" in die Mediathek hochladen. WordPress erstellt mit Hilfe der PHP-Grafik-GD-Bibliothek nach Einstellungen im Dashboard kleiner dimensionierte Bildformate: Vorschaubild, Mittel, Volle Größe
Größenordnung/Empfehlung: ein 800px-Bild sollte immer (deutlich) kleiner 100kB sein!
Tipps/Tools für die Bildoptimierung für das Web folgen.
Jedes Bild sollte sauber mit seinen Grund-Infos versehen werden:
Titel, Beschriftung, Alternativtext, Beschreibung
Durch Übungen/Tests sollte man herausfinden, wo/welche Info in der Site ausgegeben/angezeigt wird.
Wichtig: nachträgliche Änderungen der Daten in der Mediathek bei den Bildern wirkt sich nicht auf die Daten in der Site aus!
Profitipp: die Qualität der "Kleinrechnung" von Bildmaterialien lässt sich mit Hilfe des Tools ImageMagick auf dem Webserver deutlich verbessern! Hierfür gibt es entsprechende WP-Plugins, die dann für WordPress die Technik auf ImageMagick umstellen.
Plugins (Teil I)
Für die eingefügten Bilder und Galerien wollen wir eine dynamische Präsentation einbauen: Lightbox Technik
Plugin: Simple Lightbox (Link) von Archetyped
Über Plugins im Dashboard lässt sich das gewünscht Plugin leicht finden, installieren und aktivieren.
Die hier genutzte Technik ist sofort (out-of-the-box) funktionstüchtig.
Anm.: bei Bildern / Galerien muss lediglich der Link auf Medien-Datei gesetzt werden - Voilá
Wir werden uns aber später weitere Gedanken zum Thema "Erweiterungen WordPress / Plugins" machen....
Kommentare
Ausführliche Übung zum Kommentieren von Beiträgen (Posts)
Wichtig: verschiedene Browser nutzen!
Konfiguration: Einstellungen - Diskussion
Bitte die automatische Aktivierung neuer Kommentare eher konservativ konfigurieren.
Auf größeren WordPress-Plattformen benötigt man da sicherlich wieder technische Unterstützung (siehe Plugins).
Avatare - Hinweise auf Gravatar (Plattform für Benutzer-Avatare im WWW)
WordPress unterstützt die Gravatar-Plattform speziell (siehe Fa. Automattic - die treibende Kraft hinter WordPress und vielen Plugins/Techniken)
Seiten
engl.: Pages - die statischen Beitragsauslieferungen als Alternative zu Beiträgen (Posts)
Für die Verfügbarkeit dieser Seiten sollte man sich Menüs bauen - sonst findet man die Seiten nur über eine Suche!
Seiten haben keine Kategorien und können nicht getagt werden!
Es gibt eine Seitentechnik namen CPT (Custom Post/Page Types) mit der man sich eigene "Beitrags- bzw. Seiten-Typen" im Dashboard definieren kann.
Für diese "Sonderseiten" können dann auch sogenannte Taxonomien (engl. Taxonomies) erstellt werden - im Grunde nicht anderes als spezielle Kategorien für unseren neuen Seitentyp.
Beispiel: neuer Seitentyp "Produkte" (zur Darstellung von Produkten ;-) mit Taxonomien ("Kategorien") wie "Preis" (z.B. "10 - 100 €", "100 - 200 €", "mehr als 200 €") oder "Farbe" (z.B. "Rot", "Blau", ...).
Menüs
Da Menüs letztlich über die Themes ausgeliefert werden müssen, bietet sich auch dort der Ansatz für die Erstellung neuer Menüs.
Praxis: Menü "Hauptmenü" erstellen und mit diversen Links ausstatten, das Menü dann im Theme platzieren (hierfür müssen die Themes entsprechend vorbereitet sein)
Tipp: falls die Site mal Fehler beim Ausliefern von neuen Seiten oder geänderten Seiten ausgiebt, dann bitte einfach mal über Dashboard - Einstellungen - Permalinks die bestehenden Einstellungen nochmals speichern (Schaltfläche: Änderungen speichern)!
Themes (Teil I)
Über das Dashboard - Design - Themes bekommen wir eine Übersicht über die installierten Themes und können weitere Konfigurationen vornehmen.
Mit Hilfe des Customizer können die im aktiven Theme hinterlegten Techniken und Konfigurationen angepasst werden:
- Website-Information
z.B. Name der Site, Info zur Site - Farben
z.B. Primärfarbe für Links und Bildeffekte - Menüs
hier finden sich die Menü-Konfgurationen wieder - Widgets
diverse Technik-Schnippsel; z.B. Schlagwörter-Wolke - Startseiten-Einstellungen
- Zusätzliches CSS
Wie gesagt: die Optionen hängen immer auch vom verwendeten Themes ab!
Plugin: Simple Lightbox
Kommentare
Pingback und Trackbacks
Menüs
Kategorien
Widgets
Tag 03
Mittwoch, 03.04.2019, 08.30 - 16.00 Uhr
Rekapitulation, TN-Fragen
Forts. Übungen "Content" + "Design"
- Beiträge (Posts)
Inhalte (Blöcke), Medien, Kategorien, Tags
Speziell: Revisionen für Beiträge - Seiten (Pages)
Hierarchien (Seitenstruktur), Menüs (auf Seite einbinden) - Design
Theme "Twenty Nineteen" (aktuelles WP-5er-Theme) konfigurieren
Zusammenhang mit Inhalten (Posts, Pages, Widgets/Plugins) - Einstellungen
Hauptkonfigurationen für Auslieferungen von Inhalten, Kommentaren, ...
Nachfragen und praktische Lösungen mit TN geklärt und besprochen.
Website Sprachen
Tests mit verschiedenen Website-Sprachen: Deutsch, English, Dänisch, ...
Das Dashboard wechselt die Sprache, weil bei den Benutzerprofile immer die Website-Sprache als Standard eingestellt ist.
Das kann man aber natürlich über sein Benutzerprofil anpassen!
Die Website liefert an vielen Stellen die gewünschten Sprachen aus:
Infos zu Beiträgen, Suchbox, ...
Hier bedient sich WordPress des Ordners ./wp-content/languages und der *.mo und *.po Dateien für deren Bearbeitung es sogar einen speziellen Editor gibt PoEdit (s. z.B. Link: https://www.miss-webdesign.at/wordpress-uebersetzen-mit-poedit/ ).
Themes (Teil II)
Die Dokumenten- und Ordner-Struktur von WordPress-Themes erkunden.
Die Themes aus dem "WordPress-Repository" und aus freien Quellen einschätzen und dann testen:
- Feedback zum Theme
- Aktualität
- Downloads
- Technische Parameter: Farben, Inhalte modifizieren, ...
- Entwicklerteam / Hersteller-Website
- Kosten
- Rücklink zu Hersteller nötig?
- Support / Forum / Dokumentation
Hinweis: Child-Themes stellen - einfach gesprochen - Erweiterungen von "Haupttemplates" dar.
Recherche zu Themes im Dashboard und Online: https://de.wordpress.org/themes/
Praxis an "Testsite WordPress Montag" mit Design Appointment ( https://de.wordpress.org/themes/appointment/ )
Einige Tests mit dem Customizer des neuen Themes und andere Themes unternommen.
Spezielle Hinweis:
- Nutzung von Font Awesome - also Schriften, die als Icons in der Website hochqualitativ zum Einsatz kommen
Die Icons gelangen über geschickte CSS-Klassen in die Site:
z.B. https://fontawesome.com/icons/creative-commons?style=brands - das CC (Creative Commons) Logo - Hinweise auf "Pro Version" - also eingeschränkte, technische Umsetzungen bei den Lite-Version gegenüber den Pro-Version ($, €)
- Bitte immer Lizenzbedingungen beachten!
Für die optimale Nutzung von Bildern in Designs müssen diese Bilder entsprechend webtauglich und und in passenden Dimensionen und Proportionen bereitgestellt werden!
Bilder
...webtauglich machen! Anm.: WordPress übernimmt das Upload-Bild immer auch in der Originalgröße (24 MegaPixel aus Digikam gerne mal 20 MB)!
Aus den aktuellen Smartphone, iPad, Tablets, Kompaktkameras, Digitalen Spiegelreflexkameras kommen also "Mega-Pixel" in "MegaBytes":
z.B. 1600 x 1200 Pixel (oder auch 6000 x 4000 Pixel) in Größen von mehreren Megabytes
Beispielbilder mit (nahezu) uneingeschränkten Lizenznutzungen: unsplash.com (Link)
Bei den Bildern sind immer die Quellen und Lizenzen zu beachten!
Tools zum sehr einfachen "Kleinrechnen":
- RIOT - Radical Image Optimization Tool (Riot)
- Paint.Net (Link) oder das
- Windows-Tools: 3D-Paint oder nur MS Paint
- alternative Bildbearbeitungsprogramme von GIMP über Photoshop, ...
Übungen: Bildoptimierung per Klick mit RIOT für gewünscht Bilder in 800px (Beiträge) und 1600px (Header / Slider)
Backup & Wiederherstellung (Restore)
Verschiedene Techniken zum Sichern und Wiederherstellen von WordPress-Installationen auf lokalen und Hosting Servern.
Status WordPress (dt.) 5.1.1: 175 Ordner mit 1741 Dateien (42.155.751 Bytes)
Klarstellung der technischen Rahmenbedingungen: Projektordner + Datenbank(-Tabellen)
Trainer zeigt manuelle Sicherung und Wiederherstellung von Projekt "WordPress Dienstag"
TN-Praxis ab morgen...
Hinweis: es gibt auch Tools (Plugins/Erweiterungen), die hier helfen können!
Revisionen
Themes
Theme suchen
Theme Customizer
RIOT
DB-Tabellen Exportieren
Tag 04
Donnerstag, 04.04.2019, 08.30 - 16.00 Uhr
Rekapitulationen, TN-Fragen
Backup & Restore - klassisch/manuell
... klassische, manuelle Sicherung eines WordPress-Systems, also beide WordPress-"Teile" einzeln mit entsprechenden Techniken behandeln.
1) Projekt-Ordner/-Dateien (aktuell ca. 170+ Ordner mit 1700+ Dateien)
htdocs-WordPress-Projektverzeichnis mittels manueller Ordnerkopie oder per ZIPper/Packer sichern
hier: ./htdocs/wordpress/wordpress-dienstag
Anm.: für die Übertragung zum Hoster (oder die Sicherung beim Hoster) nimmt man ein FTP-Programm und überträgt den Ordnerinhalt in die gewünschte Richtung.
Vorschlag für FTP-Software: Filezilla FTP-Client
2) Projekt-Datenbank (Standard-Installation: 12 Tabellen)
WordPress-Datenbank-Tabellen mittels phpMyAdmin exportieren und wieder importieren (technisch: DB-Dumps)
Anm.: das Ganze recht technisch, aber funktioniert immer und läst sich von Experten auch per Skripting automatisieren (s.u.)
Datenbank-Export erstellen: (Kurzanleitung)
- DB-Verwaltung PhpMyAdmin aufrufen:
beim XAMPP:localhost/phpmyadmin(im Browser)
beim Hoster: über Ihr Kundencenter die Verwaltung der Datenbank für Ihr WordPress-Projekt aufrufen (meistens ebenfalls PhpMyAdmin) - Datenbank auswählen: Übersicht über die Tabellen wird angezeigt
- Oben in Menüleiste auf "Exportieren" klicken und die erweiterte Ansicht für den Export aktivieren
Wichtig: wir sichern/exportieren immer die Tabellen (-Hierarchie) nicht die komplette Datenbank!
Grund: beim Wiederherstellen beim Hoster besitzen wir für komplette Datenbanken nicht die Rechte - nur für die Tabellen! - Für das zu erstellende Export-Format "Zip" auswählen
- Export erstellen lassen:
quasi ein Download, den man mit aussagestarkem Namen (z.B. inkl. Datum/Uhrzeit) lokal speichert
Datenbank-Import / Datenbank wiederherstellen: (Kurzanleitung)
- DB-Verwaltung PhpMyAdmin aufrufen
- WordPress Datenbank auswählen; DB sollte für den Import leer sein (keine Tabellen)
Anm.: ist bei neu erstellten Datenbanken beim Hoster ja sowieso der Fall ;-) - Oben in Menüleiste von PhpMyAdmin auf "Importieren" klicken und lokales Sicherungs-Archive auswählen
- Fertig!
Wichtig: wenn man ein lokales WordPress-Projekt (z.B. XAMPP) zum Hoster übertragen hat, muss man bedenken, dass das lokale WordPress-Projekt eine wp-config.php hat, die auf den XAMPP-Datenbankserver konfiguriert ist!
Für das WordPress-Projekt beim Hoster muss man die wp-config.php kopieren und für die Datenbank-Konnektion beim Hoster anpassen!
Hier nochmals die wichtigen Datenbank-Konfigurationen für die wp-config.php :
| wp-config.php-Versionen: | wp-config-XAMPP.php | wp-config-HOSTER.php |
|---|---|---|
| DB_NAME | wordpress_dienstag | dbxyz5899-5 |
| DB_USER | root | dbxyz5899-user-5 |
| DB_PASSWORD | NULL (kein Passwort; leere Zeichenkette) | ***************** (geheim ;-) |
| DB_HOST | localhost | dbserver158.1und1.com |
Und natürlich muss die jeweils genutzte Version im WordPress-Projekt-Ordner immer sauber wp-config.php heißen! Wichtig: für die Bearbeitung der Datei bitte immer einen guten Editor benutzen; z.B. Notepad++.
WordPress Einstellung für Dashboard - Einstellungen - Allgemein:
WordPress-Adresse (URL), Website-Adresse (URL)
beachten und auf die jeweilige Umgebung (URL) anpassen!
Es müssen also auch immer CMS-spezifische (hier: WordPress) Eigenarten bedacht werden!
An dieser Stelle ist auch die komplette Umstellung des CMS auf https zu bedenken.
Anm.: man kann die Entwicklungsrichtung natürlich auch umdrehen und die eigene WordPress-Entwicklung direkt auf dem Hosting-Server (mit https!) starten und dann für die Entwicklung der Site mit einer Kopie auf dem lokalen Entwicklungsserver (z.B. XAMPP) nutzen.
WordPress Backup-Tools (Plugins)
Natürlich hat die WP-Community diverse Plugins zum Sichern und Wiederherstellen von Wordpress-Projekten hervorgebracht.
Ein ausführliches Testen lohnt! Die Tools lassen sich einfach über Suche in den Plugins finden (Suchbegriff: Backup).
Auswahl:
- UpdraftPlus WordPress Backup:
https://de.wordpress.org/plugins/updraftplus/ - BackWPup - WordPress-Backup:
https://de.wordpress.org/plugins/backwpup/ - Akeeba Backup für WordPress:
https://www.akeebabackup.com/products/akeeba-backup-wordpress.html
Anm.: gibt es auch für Joomla! und steht nicht direkt als Plugin-Installation über das Dashboard zur Verfügung!
Also Core-Variante herunterladen und manuell installieren.
Für die Wiederherstellung benötigen wir dann noch die Skriptsammlung Kickstart: Beispielvideo
Und wie gesagt: Backup-Techniken müssen nicht nur installiert sondern auch getestet werden!
Rollenverwaltung
... 5 Standard-Rollen; über (meist kostenpflichtige) Plugins erweiterbar
Anleitungen zu Benutzerrollen:
Übung zu Benutzerrollen
Anm.: bitte zum Testen der Benutzerumgebungen wieder unbedingt einen zweiten Browser nutzen!
Classic Editor
... wer statt mit Gutenberg (Block-Editor) lieber mit dem klassischen TinyMCE Editor arbeiten möchte installiert sich einfach das Plugin Classic Editor.
Nach der Installation stehen wieder Einstellungen für das Plugin zur Verfügung:
- Standard-Editor festlegen
- Auswahlmöglichkeit zwischen Editoren anbieten
Empfehlung: standardmäßig den neuen Block-Editor Gutenberg nutzen!
Für "Fans" der alten, klassischen TinyMCE Technik steht dieser sogar in einer "Advanced"-Version als WP-Plugin zur Verfügung.
Plugins
... WordPress erweitern!
Wie bei den Themes sollte man sich zu den Plugins ("Pro & Contra") genauere Gedanken machen und vorab Tests durchführen.
Die Plugins aus dem "WordPress-Repository" und aus freien Quellen einschätzen und dann testen:
- Feedback zum Plugin
- Aktualität
- Downloads
- Technische Parameter:
Konfigurationsmöglichkeiten, Abhängigkeiten von anderen Plugins, Unverträglichkeit mit anderen Plugins - Entwicklerteam / Hersteller-Website
- Kosten
- Rücklink zu Hersteller nötig?
- Support / Forum / Dokumentation
Hinweis: den Einsatz von Plugins also immer sehr gut abwägen! Wenn man erst einmal von einem Plugin "abhängig" ist, dann ist guter Rat oft teuer, wenn diese Techniken auf einmal nicht mehr verfügbar sind oder nicht mehr funktionieren.
Übungen mit Plugins (bisher):
- Plugin-Analyse und -Suche
- Simple Lightbox
- Classic Editor
- Akeeba Backup
- Google XML Sitemap
- WP Maintenance Mode
Eine weitere Übersicht (mit Quellen und Infos) zu WordPress-Plugins werden wir noch erarbeiten.
DB-Tabellen + Projektordner
5 Benutzerrollen
Beitrag - ausstehend
Neues Passwort
Wartungsmodus - Plugin
Classic Editor
Tag 05
Freitag, 05.04.2019, 08.30 - 16.00 Uhr
Rekapitulation, TN-Fragen
Forts. Plugins
Übersicht über Plugins / Empfehlungen / Best-of / Literaturerwähnungen ...
Ein paar Links zum Wiedereinstieg oder auch spätere Vertiefungen und eigene Versuche mit Plugins:
- https://www.blogmojo.de/die-besten-wordpress-plugins/
mit Tipp: Je weniger Plugins, desto besser! ;-) - https://tobier.de/wordpress-plugin-erstellen-so-einfach-geht-es/
- https://plötzlich-selbständig.de/programmieren/wordpress-plugin-erstellen/
- https://strato.de/blog/dein-eigenes-wordpress-plugin-leicht-gemacht/
Technik:
- technischer Ordnerim WordPress-Projekt
./wordpress-demo/wp-content/plugins/classic-editor - mit Haupt-Plugin-PHP-Skript
classic-editor.php
Plugin-Übersicht: (ohne Anspruch auf Vollständigkeit ;-)
| Technik | Plugin | Anmerkungen |
|---|---|---|
| Spam | Akismet (Fa. Automattic) Antispam Bee (Sergej Müller) |
Kostenpflichtig ($) Alternative |
| Formulare | Contact Form 7 | sehr aufwendig |
| Lightbox | Simple Lightbox (Archtyped) | 1-Klick-Solution |
| Sitemap | Google XML Sitemap (A. Brachhold) | erstellt sitemap.xml für Google |
| SEO | Yoast SEO (Team Yoast) | Search Engine Optimization sehr aufwändig |
| Wartungsmodus | WP Maintenance Mode (Designmodo) | gut für Updates, Projektumbauten |
| Tote Links | Broken Link Checker (ManagWP) | ehemals J. Elsts |
| Suchen / Ersetzen | Better Search Replace (Delicious Brains) | |
| E-Mail-Verschleierung | Email Address Encoder (Till Krüss) | wichtig gegen Spam |
| Benutzerverwaltung | User Role Editor (V. Gargulya) | $ |
| Grafikverarbeitung | ImageMagick Engine (Orangelab) | Bildoptimierung verbessern |
| Backup | BackWPup von Inpsyde GmbH (5.1- kompatibel?) Akeeba for Wordpress |
bitte immer testen! |
| DSGVO | ... diverse | s.a. Cookie-Banner, GDPR |
Mit den Links oben kann man es ja auch mal mit eigenen Plugins versuchen (PHP-Code!! ;-)...
Bücher / Literatur
Zur aktuellen WordPress 5 Version gibt es (aktuell) nur sehr wenig Lesestoff.
WordPress 5 Grundlagen - Direkt einsteigen und durchstarten! (Link)
Herdt-Verlag; Autor: Isolde Kommer
Ausgabe: 1. Ausgabe, April 2019; Matchcode: WORDPR5
ISBN: 978-3-86249-892-5; Umfang: 137 Seiten
Rheinwerk-Verlag (früher Galileo-Verlag) führt einige WordPress Bücher und Video-Training (Link)
ab 24.06.2019 ist das aktualisierte "Handbuch" für WordPress 5 verfügbar:
WordPress 5 - Das umfassende Handbuch (Link)
von Richard Eisenmenger
1000 Seiten, 2019, gebunden
Rheinwerk Computing, ISBN 978-3-8362-5681-0
Mehr ist da im Moment nicht zu "holen".
Backup & Restore - mit dem XAMPP-CMSOD
Als Entwickler des CMSOD-Zertifikatssystems habe ich spezielle Backup/Restore Technik (Batchdateien, Skripte) im Ordner C:\xampp-cmsod\__backups bereitgestellt.
Diese vorbereiteten Skripte sind zum Sichern von Prüfungen im CMSOD gedacht - eignen sich aber natürlich auch für die lokalen XAMPP-Projektsicherungen (wie "WordPress Montag").
Wichtig: die Skripte (Batchdateien) nutzen die grundsätzlichen Techniken zum Sichern von Ordner und Datenbanktabellen.
Die Skripte eignen sich so aber nur für die XAMPP-CMSOD-Testumgebungen.
Der Ordner C:\xampp-cmsod\__backups enthält auch eine Anleitung zum
- Nutzen der Sicherungsskripte (Batchdateien
*.bat) und zum - Wiederherstellen mit dem
restore-*.bat-Skript.
Für eigene Projektsicherungen muss man nur eine Batchdatei kopieren und ein paar Bezeichner austauschen!
Und dann gibt es natürlich noch die Master-Sicherung der gesamten XAMPP-Installation. Ich werde meinen XAMPP-CMSOD zum Ende als selbstentpackendes Archiv mit 7-Zip erstellen. Mit einem solchen selbstentpackendem Archiv haben wir ja auch am Montag die Arbeiten mit WordPress begonnen.
Themes - Technik
Analyse Template-Ordner: (hier mal mit beispielhaften Dateien und Ordnern)
Wichtig: alle Dateien immer mit unserem Notepad++ bearbeiten - niemals mit Editor von Windows!
| Datei / Ordner | Anmerkungen / Bedeutung |
style.css |
die CSS-Styles |
style.scss |
das CSS-Styling mit SASS (CSS-Precompiler) |
./sass |
Ordner für die SASS-Technik |
./js |
JavaScript |
./inc |
Include-Dateien |
./fonts |
Schriften (Fonts |
print.css |
Styling für Druckausgabe |
*.php |
Diverse Teilskripte für das Theme |
404.php |
Ausgabe "Dokument nicht gefunden" |
favicon.ico |
Favorite Icon (siehe Favicon Generatoren) |
screenshot.png |
Bild für die Darstellung des Templates im Backend |
index.php |
die Hauptdatei für das Template |
Diese Dateien/Ordner (und andere) finden sich so auch im aktuellen Theme "Twenty Nineteen".
Die beiden fetten Dateien stellen die Minimalausstattung für ein Theme dar.
Themes - Links / Infos
Wer sich mit Themes weiter beschäftigen möchte dem seien die folgenden Links vorgeschlagen:
Themes zum Downloaden / Aussuchen:
- https://wordpress.org/themes/browse/featured/
- https://www.webtimiser.de/kostenlose-wordpress-themes-fuer-blogger/
- https://www.webtimiser.de/kostenlose-wordpress-themes/
- https://wplift.com/wordpress-starter-themes
- https://fastwp.de/magazin/wordpress-basis-themes/
- https://colorlib.com/wp/free-bootstrap-wordpress-themes/ (26 Themes)
Understrap - Bootstrap Theme Framework
- https://understrap.com/
- https://de.wordpress.org/themes/understrap/
- https://github.com/understrap/understrap
Bootstrap 4 Theme
HTML5blank (Boilerplate)
Anleitungen zu Theme-Techniken:
Anleitungen mit ZIPs / Dateidownloads:
- https://www.lyrathemes.com/bootstrap-wordpress-theme-tutorial-1/
- https://www.lyrathemes.com/bootstrap-wordpress-theme-tutorial-2/
- https://www.lyrathemes.com/bootstrap-carousel-tutorial/
Strato (3-Teiler mit underscores.me Roh-Template und Bootstrap !!)
- https://strato.de/blog/eigenes-wordpress-theme-testumgebung/
- https://strato.de/blog/eigenes-wordpress-theme-bootstrap/
- https://strato.de/blog/eigenes-wordpress-theme-layout/
s.a. (Bootstrap 3 Navi) https://strato.de/blog/bootstrap-navigation-wordpress/
Tutorials:
- https://max2-consulting.de/ein-eigenes-wordpress-theme-erstellen/
- https://www.df.eu/blog/wordpress-theme-erstellen/
- https://wphierarchy.com/
- https://www.akademie.de/wissen/wordpress-theme-erstellen
- https://www.sandra-messer.de/twenty-seventeen-wordpress-theme-deutsche-anleitung
- https://www.youtube.com/results?search_query=wordpress+twenty+nineteen
- https://www.wiegrefe.com/wordpress_themes.html
- https://www.wiegrefe.com/wordpress_theme_erstellen.html
Themes-Code
Child-Themes
Das sollte für eine Nachbearbeitung und Vertiefung von Themes mal reichen ;-)
Seitentypen
engl.: Custom Post Types (CPT)
Jetzt wollen wir uns noch einen eigenen Seitentyp kreiren!
Denn als Standard liefert uns WordPress nur:
- Beiträge (Blog-Posts - die klassische Auslieferung: Blogtechnik)
- Seiten (Pages - Statische Seiten; keine Kategorien, Tags, ...)
Beiträge vs. Seiten: Link mit Gegenüberstellung
Kurzanleitung für die Integration von CPT in WordPress:
- functions.php (im Themes-Ordner) mit nötigem PHP-Code ergänzen
- zusätzliche PHP-Code-Dateien in den Themes-Ordner kopieren
- eigene Beitragstypen mit Kategorien (Taxonomies) erweitern
Anm. für die "Profis":
besser werden die CPT-Code später in eigenen Plugins ausgelagert. Denn mit unserer Kurzanleitung wird die Integration der nötigen PHP-Codes im Themes-Bereich bei einem Themes-Update gefährdet!
Anleitungen:
- https://www.cpu20.de/2015/wordpress-cms-eigene-seiten-typen-definieren/
- https://www.drweb.de/wordpress-intern-einstieg-custom-post-types-50402/
- https://krautpress.de/2017/custom-post-types/
- mit Video und Plugin vs. manuell
https://www.wpbeginner.com/wp-tutorials/how-to-create-custom-post-types-in-wordpress/
Custom Post Type als Plugin
Icons für Dashboard
Plug-ins für Custom Post Types
- https://www.codeinwp.com/blog/top-custom-post-types-plugins-for-wordpress/
- https://de.wordpress.org/plugins/custom-post-type-ui/
Übung: Praxisbeispiel für einen neuen Seitentyp Produkte nach Anleitung "WordPress 4 - Das umfassende Handbuch - Alexander Hetzel"
WordPress Wissen anwenden...
Webprojekt planen ... in dieser Woche in angemessener Kürze ;-)
gerne ausführlicher als Literatur:
J. Jacobsen benutzerfreun.de "Website-Konzeption - Erfolgreiche Websites planen, umsetzen und betreiben"
Wir gehen mal ein Projekt an: (eine beispielhafte Vorgehensweise)
- Neues Blanko WordPress-Projekt auf einem lokalen Entwicklungssystem erstellen
Vorschlag: das fertige XAMPP-CMSOD von Ihren Teilnehmer-Unterlagen
Alternative: gleich beim Hoster mit passender Domain-Adresse (oder Relaunch-Adresse) und https-Unterstützung installieren und entwickeln! - Kategorien (planen / erstellen), Beiträge, Menüs (planen / erstellen)
Anm.: alles erst einmal mit Standard-Template Twenty Nineteen - Ausstattung mit Erweiterungen/Techniken nach Wahl:
Theme und PlugIns - WordPress-Projekt stetig während der Überarbeitung sichern:
Backup(s) erstellen: site-localhost-xxxxyyzz-hhmmss.jpa
(hier Beispielhaft Sicherungen mit Akeeba Backup für WordPress) - ...
- ... die Zeit vergeht! ...
- ...
- Theme (das Design) - die größte "Baustelle"
siehe Anmerkungen und Darstellungen in unserem Seminarbeitrag - Jetzt sind Sie fertig! (Anm.: ne - ist man nie ;-)
und haben eine "letzte" Sicherung / einen Sitestatus: site-localhost-development-final-yyyymmdd-hhmmss.jpa - Hoster suchen / finden
Domain:mein-wordpress-projekt.de
Webserver:./wordpress-projekt(Ordner für Ihre Website/Domain auf Ihrem gemieteten Webserver) - Lokales Entwicklungsprojekt auf Hosting veröffentlichen / übertragen
Für die Datenbank muss vorher im Kundencenter des Hosters eine entsprechende DB erstellen
Die DB-Zugangsdaten muss man kennen und sollte eine entsprechende Dokumentation besitzen!
Übertragen und Wiederherstellen der Ordner und DB beim Hoster mittels Akeeba Kickstart - Kurzanleitung: alle nötigen Dateien in Ihren Projekt-Ordner "hochladen"
(Alternativen: a) FTP, b) Dateimanger im Hosting-Kundencenter - wir nehmen natürlich FTP)site-localhost-yyyymmdd-hhmmss.jpa,kickstart.php
Wiederherstellung nach unseren Übungen am Donnerstag/Freitag mit "Kickstart" durchspielen
So in der Art halt ;-)
Dokumente und Unterlagen für TN
XAMPP-Versionen (Wochenanfang - Seminarende Trainer-XAMPP),
Screenshots der Seminartage (Bildergalerie/Diashow der Seminarwoche)
und Ordner-/Dateistrukturen + DBs mit Backup-Skripts
Feedbackbögen, TN-Bescheinigungen, letzte Fragen
Plugins und Ordner
Eigenenes CSS
Theme-Ordner
Weiteres Theme
Custom Post Type
XAMPP packen
Vielen Dank für die tollen Feedbacks und viel Spaß mit WordPress...
Ihr Trainer Joe Brandes
