Das Sammeln, Auswählen und Ordnen des Materials ist die halbe Arbeit auf dem Weg zu Deiner Website.
Schritt 1 – Material sammeln und ordnen weiterlesenAutor: v3r0k0k0
Schritt 2 – Gliederung und Struktur
Nachdem Du das Material geordnet hast, gilt es daraus eine Struktur zu entwickeln.
Schritt 2 – Gliederung und Struktur weiterlesenAufbau einer Website
Eine Website baut sich im Wesentlichen aus 2 Ebenen auf: einer unsichtbaren Metaebene und der sichtbaren, gestalteten Ebene.
Aufbau einer Website weiterlesenHTML und CSS
Um Deine Website in WordPress zu realisieren, musst Du nicht coden können.
Ein Grundverständnis von HTML und CSS hilft Dir aber, Deine Website mit dem Webentwickler Tool oder Firebug zu untersuchen und die Stilvorlage Deines Child-Themes (style.css) zu bearbeiten.
https://wiki.selfhtml.org/wiki/CSS
zum Ausprobieren und weiterlesen https://www.w3schools.com/
CSS #1 | Die Stilvorlage
Das Ausstehen Deiner Website wird durch die Stilvorlage bestimmt. Änderungen kannst Du in der Datei style.css des Child-Theme bestimmen.
CSS #1 | Die Stilvorlage weiterlesenCSS #2 | Schriften formatieren
CSS #3 | Textformatierung
CSS #4 | Elemente verstecken
Beiträge und Seiten in WordPress
Die Inhalte einer Website werden in WordPress in Beiträgen und Seiten veröffentlicht. Was ist der Unterschied und wann nutze ich was?
Beiträge und Seiten in WordPress weiterlesenDas Block-Theme
Block-Themes, oder Full Site Editing Themes, sind die logische Weiterentwicklung des Gutenberg Editors. Damit kann nun auch das Theme der Website im WordPress Backend mit dem Block-Editor bearbeitet werden.
Das Block-Theme weiterlesenWordPress Theme – Gestaltungsvorlage für Deine Website
Hier findest Du wichtige Kriterien für die Auswahl des WordPress Themes, eine Übersicht der änderbaren Elemente und ein paar grundlegende Regeln für Gestaltung und Inhalt.
WordPress Theme – Gestaltungsvorlage für Deine Website weiterlesenWordPress Themes suchen und finden
Mit WordPress kannst Du eine Vielzahl von Gestaltungsvorlagen (Themes) nutzen. Hier findest Du Links zu kostenfreien Themes und eine Liste meiner Favoriten.
Das Childtheme
Auf Grundlage eines Themes erstellen wir im Kurs ein sog. Childtheme, in dem alle Änderung an der „elterlichen“ Vorlage gesichert werden.
Das Childtheme weiterlesenWebfonts in Child Theme einbinden
Es gibt eine Vielzahl von Web-Schriften, die Du kostenfrei nutzen kannst. Aber …
Webfonts in Child Theme einbinden weiterlesenTwentyfifteen Theme
Hamilton Theme
Neve Theme
Page Builder Framework Theme
Domain und Hosting
Um eine Website zu erstellen brauchst Du eine Domain, also Deine Adresse im Internet. Diese wird bei einem Provider gehostet, d.h. er stellt Dir Speicherplatz zur Verfügung, auf dem Deine Daten aufgespielt werden.
Domain und Hosting weiterlesenImpressum
Für öffentliche Websites besteht eine Impressumspflicht.
Impressum weiterlesenDatenschutzerklärung
Jede Website braucht eine Datenschutzerklärung, die über die Verwendung der personenbezogenen Daten der Besucher*innen aufklärt.
Datenschutzerklärung weiterlesenInhalte in WordPress anlegen
In WordPress kannst Du Inhalte als Seiten oder Beiträge anlegen.
Backend Tools
Plugins, die die Arbeit im Backend der Website erleichtern.
Maintenance Modus für Zeiten des Auf- und Umbaus
https://de.wordpress.org/plugins/wp-maintenance-mode/
Umsortieren von Seiten, Posts und Kategorien per Drag and Drop
https://de.wordpress.org/plugins/post-types-order/
Post Duplicator
https://wordpress.org/plugins-wp/post-duplicator/
Mediathek organisieren
https://de.wordpress.org/plugins/enhanced-media-library/
Frontend Tools
Plugins, die für mehr Funktionalität auf der Website sorgen
Zum Anfang der Seite springen
https://wordpress.org/plugins/to-top/
Fügt einen Button am Ende der Seite hinzu, sodass man wieder an den Anfang der Seite springen kann (ohne nach oben scrollen zu müssen)
Social Media Teilen-Buttons
https://de.wordpress.org/plugins/shariff/
„Shariff stellt Teilen-Buttons bereit, die die Privatsphäre der Besucher schützen und im Einklang mit der Datenschutzgrundverordnung (DSGVO) stehen.“ sagt der Entwickler.
Accordion Blocks
https://de.wordpress.org/plugins/accordion-blocks/
Darstellung von Bildern
Plugins zur Darstellung von Bildern in Galerien, Lightboxes und Slidern
Visual Portfolio, Photo Gallery & Post Grid
https://visualportfolio.co/
Zahlreiche Einstellungen im Gutenberg-Editor. Globale Einstellungen können als „Saved Layout“ in den Plugin-Einstellungen getroffen werden.
Die Lightbox lässt sich nur mit etwas CSS anpassen.
SimpLy Gallery
https://wordpress.org/plugins/simply-gallery-block/
Video Tutorial (die Bilderauswahl ist mittlerweile anders, über „Items“). Umfangreiches Plugin mit vielen Einstellmöglichkeit und eines der besseren, das ich unter den kostenlosen Galerien gefunden habe. Alle Lightboxes (Galerien und Einzelbilder) erhalten seitenweit die gleiche Erscheinung. Leider gibt es Rückmeldungen, wonach sich die Bildreihenfolge ändert – bislang haben wir keine Erklärung gefunden.
Anleitung mit Screenshots
Lightbox
https://wordpress.org/plugins/ari-fancy-lightbox/
/* Entfernt den Hintergrund hinter der BU */
.fancybox-caption-wrap {background: none;}
Meta Slider
https://de.wordpress.org/plugins/ml-slider/
Der MetaSlider ist relativ simpel zu bedienen. In der kostenfreien Version es gibt nicht all zu viele Features, z.B. Thumbnails kommen erst in der Pro-Version mit. Du findest den MetaSlider Block unter den Allgemeinen Blöcken.
Meta Slider mit Lightbox
https://de.wordpress.org/plugins/ml-slider-lightbox/
https://wordpress.org/plugins/ari-fancy-lightbox/
Gemeinsam mit den Plugins MetaSlider Lightbox und ARI Fancy Lightbox kannst Du den MetaSlider in einen Lightbox-Slider verwandeln.
Smart Slider
https://wordpress.org/plugins/smart-slider-3/
Das Plugin Smart Slider kommt auch in der kostenfreien Version mit ziemlich umfangreichen Einstellungsmöglichkeiten. Es gibt viele Optionen für Pfeile, Kugeln, Thumbnails, Beschriftung etc. Auch die einzelnen Slides, also Bilder, können jeweils mit Ebenen (Bild und Text) versehen und komplex überarbeitet werden. Eine Lightbox gibt es leider nur in der Pro Version.
Hat an sich einmal durchgearbeitet, lässt sich ein Slider schnell kopieren und damit als Vorlage für anderen Seiten nutzen. Mein absoluter Favorit!
Visual Portfolio Plugin
SimpLy Gallery Blocks Plugin
GDPR Cookie Compliance Plugin
Einstellungen für das Cookie-Banner
GDPR Cookie Compliance Plugin weiterlesenVideo & Sound
Videos und Sound können einfach in einem Block eingebettet oder per iframe eingebunden werden. Plugins erweitern die Darstellungsmöglichkeiten.
Lazy Load für Videos
https://de.wordpress.org/plugins/lazy-load-for-videos
Überlagert Videos mit einem Vorschaubild, sodass die Ladezeit verschoben wird. Außerdem verhindert das Plugin, dass Youtube und Co. Cookies vor dem abspielen setzen.
Gosign – Youtube Video Player Block
https://wordpress.org/plugins/gosign-youtube-video-player-block/
Gosign – Vimeo Video Player Block
https://de.wordpress.org/plugins/gosign-vimeo-video-player-block/
Text & Sprache
Plugins für Mehrsprachigkeit, PDF Viewer
Polylang ist DAS Plugin, um Deine Website mehrsprachig zu machen. Einziger Wermutstropfen: alle Bilder / Medien müssen einmal pro Sprache hochgeladen werden.
https://wordpress.org/plugins/polylang/
PDF Viewer z.B. für Katalogansicht (ungetestet)
https://de.wordpress.org/plugins/tags/flipbook/
Datenschutz, Sicherheit und SEO
Allgemeiner Schutz der Seite
https://de.wordpress.org/plugins/ninjafirewall/
Angeblich reichen die default-Einstellungen, ansonsten ziemlich komplex. DSGVO-konformität herstellen: NinjaFirewall > Firewall Options > IP Anonymization > enable
Verschlüsseln der Serverpfade
https://de.wordpress.org/plugins/wp-hide-security-enhancer/
Entfernen von Malware
https://wordpress.org/plugins/gotmls/
Schutz vor Spam (nur bei eingeschalteter Kommentarfunktion)
https://wordpress.org/plugins/antispam-bee/
Verschlüsseln der Mail-Adresse (für Bots)
https://wordpress.org/plugins/email-address-encoder/
Cookie Banner (notwenig nach EU-Richtlinie)
https://de.wordpress.org/plugins/gdpr-cookie-compliance/
GDPR Cookie Compliance ist aktuell das beste kostenlose Plugin mit Opt-In-Verfahren. Meine Einstellungen findest Du hier.
Sollen z.B. Tracking Cookie gesetzt werden, empfehle ich unbedingt das kostenpflichtige Plugin Borlabs Cookie.
Yoast – SEO, Titel und Sitemap
https://de.wordpress.org/plugins/wordpress-seo/
W3 Total Cache (Web Perfomance Optimation)
Tutorial: https://hootproof.de/w3-total-cache-einrichten/
https://de.wordpress.org/plugins/w3-total-cache/
Statistik (IP-Anonymisierung notwendig)
https://wordpress.org/plugins/wp-statistics/
Datenbank Backup (empfohlen vor jeder Aktualisierung)
https://de.wordpress.org/plugins/wp-db-backup/
Disable Emojis (GDPR friendly)
https://de.wordpress.org/plugins/disable-emojis/
Artikel zu Plugins und DSGVO
https://www.blogmojo.de/wordpress-plugins-dsgvo/
Borlabs Font Blocker blockiert das Laden von Schriften auf dem Google Server
https://borlabs.io/borlabs-font-blocker/download/
WordPress Installation im Unterverzeichnis – Abruf über Domain Haupverzeichnis
Mit der Registrierung Deiner Domain ist die Website im World Wide Web erreichbar. Wird WordPress in einem Unterverzeichnis installiert, um den Server aufgräumt zu halten, muss der Abruf der Domain über das Hauptverzeichnis einrichtet werden.
WordPress Installation im Unterverzeichnis – Abruf über Domain Haupverzeichnis weiterlesenMedia Queries
Media Queries (Medienabfragen) fügst Du Deinem Stylesheet (Stilvorlage) hinzu, um Dein Layout für die verschiedenen Devices (Endgeräte) zu optimieren.
Copyright mit dynamischer Jahreszahl
Snippets / CSS / PHP
Bilder
Bilderverwaltung in der WordPress Mediathek und die Darstellung von einzelnen Bilder, Galerien, Slidern, Lightboxes und gifs.
Bilder weiterlesenVideos
Videos selbst hosten oder einen Youtube-/ Vimeolink einbetten?
Videos weiterlesen