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
WordPress 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 Tricks
Hamilton Theme Tricks
Neve Theme Tricks
Page Builder Framework Tricks
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/
Layout Tools
Plugins, die das Layout Deines Themes und des Standardeditors erweitern.
Gosign WordPress Plugin Blocks
Plugins zur Erweiterung des Blockeditors (Gutenberg)
https://www.gosign.de/plugins/
Shortcodes Ultimate
Einfache Toolsammlung für Spalten und Galerien sowie Vorlagen für Aufklapptexte, Listen, Icons etc.
https://de.wordpress.org/plugins/shortcodes-ultimate/
Page Builder
Elementor Page Builder
Page Builder mit eigenem Editor
https://wordpress.org/plugins/elementor/
Page Builder by SiteOrigin
Eigener Editor, Drag an Drop Tool zur Erstellung verschiedener Module
https://de.wordpress.org/plugins/siteorigin-panels/ ( –> siehe Video auf der Seite)
erweitert mit: Livemesh SiteOrigin Widgets (+ SiteOrigin Widgets Bundle) / SO Page Builder Animate
Grid Layout / Masonry
Verlinkte Beitrags-Vorschaubilder
Gosign – Masonry Post Block (Favorit)
Bearbeitung im Beitragseditor, einfache Bedienung und viele Einstellungsmöglichkeit
https://wordpress.org/plugins/gosign-masonry-post-block
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 Galerie mit schönem Grid und Lightbox-Slider
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/wp-featherlight/
Slider
https://de.wordpress.org/plugins/ml-slider/ (einfache Bedienung)
Smart Slider
https://wordpress.org/plugins/smart-slider-3/
Plugin mit komplexem Backend, in dem einzelne Slides mit mehreren Ebenen (Bild und Text) bearbeitet werden können.
MetaSlider mit Lightbox (WP Featherlight)
https://de.wordpress.org/plugins/ml-slider-lightbox/
Visual Portfolio Plugin
SimpLy Gallery Blocks Plugin
Video & 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. 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
noch mehr Snippets
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