WordPress Backup erstellen

WordPress Backup erstellen

von | März 30, 2023 | WordPress

Echt simpel: WordPress Backup erstellen in 10 Minuten!

Die perfekte Anleitung für Anfänger und Fortgeschrittene.

Die Website ist fertig – allerhöchste Zeit, dein WordPress Backup zu erstellen. Denn dies passiert schneller, als dir lieb ist: Die Festplatte hat den Geist aufgegeben, dein Server wurde gehackt, deine WordPress-Installation ist verunglückt… Egal aus welchem Grund die Daten deiner Website futsch sind: Wenn du jetzt kein Backup hast, wirst du dir die Haare raufen oder schlecht schlafen. Auf jeden Fall ist deine gute Laune dahin.

In meinen WordPress-Kursen ist dies der erste Schritt – gleich nach der Installation des Themes: Ich zeige meinen Teilnehmern, wie das Backup-Plugin installiert und eingestellt wird.

Was ist ein Backup?

Ein Backup ist eine Sicherungskopie von Daten oder Informationen. Die Daten werden auf einem Computer, einem Server oder Speicher gesichert. Speicher können externe Festplatten oder USB-Sticks sein.

Ein Datenverlust passiert schneller und häufiger, als man denkt. Gerade WordPress-Websites werden gern gehackt. Nicht, weil WordPress unsicher ist, sondern weil es weit verbreitet ist.

Aber es gibt noch mehr Ursachen, seine Daten zu verlieren: Softwareprobleme, menschliches Versagen, Viren, Malware oder andere Katastrophen. Dein Backup ist der doppelte Boden, deine Sicherheitsleine, dein Fallschirm.

Wie und wo kann ich ein Backup machen?

Ein Backup kannst du entweder manuell oder automatisch machen. Wie genau – das erkläre ich unten. Wo und auf welchem Gerät du speicherst, hängt davon ab, wie sicher deine Speicherung sein soll. Als Speicherorte sind mehrere Möglichkeiten denkbar: externen Festplatten, USB-Sticks, CDs/DVDs, Cloud-Speicher oder Netzwerkspeicher.

Cloudspeicher scheinen sicher – aber natürlich können auch dort die Server gehackt werden (alles schon passiert). Und Hardware wie USB-Sticks kann mechanisch zerstört werden.

Mehrgleisige Backups sind deshalb sinnvoll.

Zu Beginn meiner Selbständigkeit vor 20 Jahren hab ich meine Daten auf externe Festplatten gespeichert. Eine der Festplatten hatte ich im Haus, die andere hatte ich in einen gemieteten Tresor der Bank gebracht. Clouddienste, so wie wir sie heute kennen, gab es zu der Zeit noch nicht. Heute sichere ich meine Daten in einem Clouddienst und zusätzlich auf externe Festplatten.

Wie mache ich ein Backup meiner Website in WordPress?

Für ein Backup hast du drei Möglichkeiten:

Eine bequeme und schnelle Methode ist das Backup mit einem Plugin. Ich nutze dazu UpdraftPlus. Die Basisversion ist kostenlos und dennoch sehr umfangreich. Ich habe einige Plugins getestet und kann dir dieses Plugin gut empfehlen. Für UpdraftPlus gibt es einige Gründe: Das Plugin ist leicht zu verstehen und obendrein in Deutsch, du kannst Zeitpläne erstellen (die Backups werden dann automatisch erledigt) und du kannst deine Backups auf anderen Servern als deinem Hoster erstellen.
Einige Webhoster bieten eine Backup-Möglichkeit an. Falls du einen guten Hoster hast und dich darauf verlassen kannst, dann ist diese Option komfortabel.
Manuelles Backups: Meine Websites sichere ich immer zusätzlich manuell. Das empfehle ich dir, selbst wenn du ein Plugin nutzt oder deine Daten per Hoster sicherst.
So machst du das WordPress-Backup mit einem Plugin (UpdraftPlus)

Zuerst musst du UpdraftPlus (oder jedes andere Backup-Plugin) in deinem WordPress installieren. Das ist sehr simpel:

Im WordPress-Menü klickst du auf > Plugins und
gehst du auf > Plugin installieren.
Dort werden dir standardmäßig diverse Plugins angezeigt.
Rechts oben im Suchfeld > Plugin suchen gibst du UpdraftPlus ein und
das Icon des Plugins wird dir gezeigt.
Jetzt drauf klicken, installieren und aktivieren.
UpdraftPlus führt dich mit einem Assistenten durch das Prozedere uns lässt dich gleich ein 1. Backup machen.

Unter > Einstellungen kommst du auf die Oberfläche von UpdraftPlus.

Das Fenster zeigt dir mehrere Tabs. Der erste ist der, auf dem du deine Sicherungen machst: > Sicherung/Wiederherstellen. Gleich unter den Tabs kannst du sofort sichern. Wichtig: Du musst immer beides sichern – Datenbank und Dateien. Mit dem Klick auf den blauen Button wird sofort alles gesichert.

Über den Reiter > Einstellungen kannst du deinen Sicherungsplan anlegen. Damit werden die Sicherungen automatisch von UpdraftPlus ausgeführt – und du kannst dich entspannt zurücklehnen.

Die Standartsicherungen werden auf deinem Hoster abgelegt.

Aber du kannst – und solltest – zusätzliche andere Orte wählen, auf deinen du deine Daten sicherst. UpdraftPlus bietet dir sogar in der kostenlosen Version verschiedene Möglichkeiten an

Die Einstellungen von UpdraftPlus
Datenbank und Dateien in UpdraftPlus sichern

backup plan
Zeitplan der Sicherung festlegen

Das Backup über deinen Hoster

Einige Hoster bieten diese komfortable Sicherung an. Ich bin mit einer meiner Websites bei Raidboxes. Dort wird regelmäßig ein Backup meiner Installation durchgeführt, die ich auf meinen Rechner laden kann.

Schau einfach nach, ob dein Hoster diesen Service anbietet. Allerdings solltest du dich nicht unbedingt nur auf diese Sicherungen verlassen. Ich finde es sinnvoll, zusätzlich manuelle Backups zu laden.

So machst du ein manuelles Backup deiner Website

Nie verkehrt: ein manuelles Backup deiner Website

Ich gebe es zu: Dieser Weg ist weit umständlicher als mit einem Plugin. Und bestimmst fragst du dich jetzt: Warum soll ich mir dann die Mühe machen? Ich empfehle dir diese zusätzliche Sicherung, weil du dann ein Gefühl dafür bekommst, aus welchen Dateien deine Website besteht.

Mich beruhigt die Tatsache, dass alle meine Dateien selig auf meinem Rechner schlummern – und dass ich sie bei Bedarf einfach nur auf den Webserver hochladen brauche.

Es gibt noch einen anderen Grund, warum ich das zusätzliche manuelle Backup empfehle: Ein Plugin ist ein Tool, das auch mal versagen kann. Getreu dem Gesetz: alles was passieren kann, passiert irgendwann.
Oder die Dateien, die vom Plugin auf deinen Server gespeichert werden, sind aus welchen Gründen auch immer futsch. Dann wirst du der glücklichste Mensch auf unserem Planeten sein, wenn du irgendwo auf einer deiner Festplatten ein Backup schlummern hast…

Die Kopie deiner Dateien geht völlig simpel:
Du brauchst dazu ein FTP-Programm
Damit wählst du alle deine WordPress-Dateien bzw. den Ordner mit den Dateien aus
Und dann lädst du diesen Ordner einfach in einen beliebigen Order auf deinem PC.

Deine Datenbank darfst du natürlich nicht vergessen.
Dazu wählst du dich im Kundenbereich deines Hosters ein und dort in den technischen Bereich, wählst deine Datenbank aus und lädst sie ebenfalls auf deinen PC.

Damit ist dein manuelles Backup abgeschlossen.

WordPress ist einfach zu erlernen, aber hat auch einige Stolpersteine. Wenn du Hilfe brauchst, wende dich gern an mich. In einem 4-stündigen Workshop kannst du viele Stolpersteine aus dem Weg räumen.

WordPress Bilder optimieren

WordPress Bilder optimieren

von | Dez. 13, 2022 | Anleitungen, WordPress

Bilder optimieren für WordPress – wie du in 5 Schritten die Bilder für deine Website verkleinerst.

Schritt 1: Verkleinere das Bild auf die richtigen Pixelmaße

Hat dein Foto mehr als 2.000 Pixel Seitenbreite?

Die meisten Fotos, die du vom Handy oder der Kamera aufnimmst, haben eine ziemlich hohe Pixeldichte. Die Breite der Fotos beträgt oft mehr als 4.000 Pixel. Diese Pixelzahl brauchst du nur, wenn du das Foto ausdrucken möchtest. Für eine Website reichen kleinere Pixelzahlen.

Aber Achtung: Die Pixelzahl ist abhängig vom Einsatzort auf deiner Website. Wenn du nur ein kleines Begleitbild zum Text brauchst, reichen 300 bis 600 Pixel in der Breite. Anders Bilder für dein Herobild. Herobilder oder auch Headerbilder sind die Fotos, die man am Kopf vieler Webseiten sieht und die über die ganze Breite des Displays laufen. Die sollten mindestens 1.920 Pixel breit sein, damit das Bild auf großen Monitoren nicht unscharf (pixelig) wird.

Schritt 2: Verringere die Dateigröße

Ist dein Foto mehr als 200 KB oder sogar 1 MB groß?

Selbst wenn du die Pixelzahl reduziert hast: Meistens hast du danach immer noch eine relativ hohe Dateigröße. Willst du also deiner Website Beine machen, muss du nochmal an deine Bilder ran: Die Bytes müssen verringert werden. Das nennt sich Komprimierung. So kann ein Foto mit ehemals 330 KB auf 70 KB gebracht werden. Das macht im Endeffekt bei vielen Fotos auf der Seite wertvolle Sekunden aus, die die Website schneller lädt.

Schritt 3: Wähle das richtige Dateiformat

Ist jpg immer das richtige Dateiformat für mein Bild?

Beim Dateiformat hast du die Qual der Wahl. Einige Programme zeigen dir beim Speichern deiner Bilder gleich eine ganze Anzahl an möglichen Formaten an: JPG, Tiff, PNG, ICO, PICS, PICT, RAW, EPS, PSD, BMP, heic, Gif, Webp, SVG, PDF… Aber was unübersichtlich aussieht, ist recht einfach.

Du musst nur wissen, welche Formate dafür geeignet sind, auf Internetseiten dargestellt zu werden, also welche Formate von einem Browser gelesen werden können. Außerdem müssen die Formate auf verschiedenen Betriebssystemen ausgetauscht werden können.

Und damit wird die Wahl schon enger:

JPG,
PNG,
GIF,
Webp
SVG

sind die einzigen 5 Formate, die du dir für deine Website merken musst. Da du in der Regel nur Fotografien auf deine Website lädst, kommen für dich überwiegend JPG und Webp infrage.

JPG und Webp

sind die Formate für Fotografien. Warum? Weil sie einen hohen Farbumfang haben (über 16 Millionen Farben). Anders als PNG, GIF oder SVG. Das GIF kann nur 256 Farben abbilden.

PNG

Das PNG brauchst du, wenn dein Bild eine Transparenz hat.

Transparenzen bei Bildern – was ist das nun wieder? Das ist schnell erklärt:

Ich erkläre es am Beispiel von JPGs. Die haben immer einen weißen, rechteckigen Hintergrund. Da dein Foto normalerweise ein rechteckiges Motiv ist, siehst du den Hintergrund nicht. Das siehst du erst, wenn du das Motiv ausschneidest. Beim Freistellern nämlich. Es gibt Programme – oder auch Online-Tools – mit denen du Motive freistellen kannst, also ohne Hintergrund.

Dumm nur: Wenn du dieses freigestellte Motiv als JPG abspeicherst, ist der Hintergrund hinter dem freigestellten Motiv: ein weißer Kasten. Du siehst es am Beispiel der Fotoreihe unten: das verwelkte Blattmotiv. Vom Originalfoto hab ich das Blatt freigestellt. So nennt man das, wenn man den Hintergrund ausschneidet. Als JPG kann ich das Blatt nur mit einem weißen Kasten als Hintergrund speichern.

Das PNG dagegen kann ich vor einem beliebigen Hintergrund stellen, ohne weißen Kasten um das Blatt. (Im Beispiel hier hab ich das Blatt vor einem anderen Hintergrund gesetzt und als JPG abgespeichert, da das PNG zu groß ist. Aber der Effekt sollte deutlich sein.)

GIF

Das GIF brauchst du nur, wenn du eine Animation auf deiner Website zeigen möchtest. Das kann eine winkende Katze sein oder ein Bild mit einem blinkenden Text – kennst du bestimmt von diesen nervigen Werbebanner. Das sind GIFs.

SVG

Als letztes hast du noch das SVG. Das ist eine Besonderheit, weil es kein Rasterformat ist (wie JPG, GIF, PNG oder Webp), sondern ein Vektorformat. Vektoren bilden Grafiken immer messerscharf ab, Pixel gibt es nicht (hier kannst du mehr lesen über Raster- und Vektorformate).

Das SVG eignet sich deshalb besonders für dein Logo.

Zusammenfassung: Welche Formate setzt du wann ein?

  • Deine Fotos speicherst du als JPG oder WebP ab.
  • Bilder mit Transparenzen speicherst du als PNG ab.
  • Dein Logo speicherst du als SVG (allerdings muss es vorher in einem Vektorprogramm erstellt werden, ansonsten speicherst du es als PNG ab).
  • Hast du animierte Bilder? Die speicherst du als GIF ab.

Schritt 4: Gib dem Bild den richtigen Dateinamen

Falsche Zeichen innerhalb des Dateinamens können verheerende Folgen haben: Die Bilder werden vom Server, Betriebssystem oder Browser nicht erkannt. Dann können sie nicht angezeigt werden. Und dein Besucher sieht nichts. Deshalb musst du sehr genau darauf achten, welche Zeichen du im Dateinamen anwendest.

Hier die Grundregeln für richtige Dateinamen:

  • Keine Umlaute (ö, ü, ä, auch nicht das ß)
  • Keine Sonderzeichen (außer Binde- oder Unterstrich)
  • Keine Leerzeichen
  • Keine Großbuchstaben
  • Beispiel für einen falschen Dateinamen:

Schneider Müller-nimmt Maß.jpg

Fallen dir die 4 Fehler auf?

Lösung: 3 x Großbuchstaben, 2 x Leerzeichen, 1 Umlaut und 1 ß sind falsch.

Dies ist die richtige Schreibweise:

schneider-mueller-nimmt-mass.jpg

Der Grund ist, dass diese Schreibweise der kleinste gemeinsame Nenner ist für alle Betriebssysteme und Programme, um das Bild wirklich anzeigen zu können. Nicht alle Systeme und Programme können z.B. mit Großbuchstaben oder Leerzeichen etwas anfangen. Ergebnis: Einigen Benutzern wird dein Bild nicht gezeigt.

Wenn du auf Nummer sicher gehen willst, achtest du also auf diese Schreibregeln für Dateinamen.

Der richtige Dateiname ist auch für Google wichtig

Der richtige Dateiname hat nichts mit der Ladezeit deiner Website zu tun. Und neuesten SEO-Erkenntnissen zufolge ist der Dateiname eines Bildes eher unwesentlich für eine gutes Ranking. Das aber trifft vor allem zu, wenn das Bild keinen Alt-Titel hat. Fehlt der Alt-Titel, dann ist der Dateiname wieder relevanter.

SEO-Experten raten, der URL des Bildes (also dem Dateinamen) Keywords aus dem umliegenden Text zu geben. By the way: Auch die Nähe zum umliegenden Text ist für das SEO wichtig. Je kleiner der Abstand zwischen Bild und dem umliegenden Text mit Keyword ist, desto eher wird das Bild von Google berücksichtigt.

Ich sehe den Dateinamen vor allem für mich wichtig. Wenn ich nämlich auf meinem Desktop ein bestimmtes Bild suche, brauche ich nur ein Schlagwort eingeben. Eine Bezeichnung wie img-2537.jpg hilft mir wenig, das Selfie vom letzten Waldspaziergang zu finden.

Schritt 5: Nach dem Upload: Gib dem Bild einen Alt-Text.

Dieser Punkt gehört nicht mehr zu den Vorbereitungen, denn du kannst ihn erst umsetzen, wenn du das Bild in WordPress hochgeladen hast. Erst in der Mediathek von WordPress vergibst du dem Bild einen Alt-Text.

Der Alttext ist aus 2 Gründen wichtig: Zum einen kann das Bild so von blinden Menschen gelesen werden. Der Screenreader liest den Alt-Text vor – und der Mensch hört so, was sich auf dem Bild befindet.

Der andere Grund ist: Der Alt-Text in Verbindung mit dem umliegenden Text deiner Website und einem Keyword im Text und im Alt-Text liefert einen kleinen Schub in Richtung SEO.

Ein richtig verständlicher Fahrplan, den du sofort umsetzen kannst. Hol dir meinen Newsletter und erhalte den Fahrplan geschenkt.

Diese Bildbreiten und Dateigrößen sind optimal für deine Website

So wählst du die richtige Pixel-Breite

Oben hab ich‘s schon erwähnt: Für die Texte reichen kleine Bilder, für den Header ganz oben auf den Seiten brauchst du breitere Formate mit höheren Pixelzahlen.

Für jeden Einsatzort auf deiner Website solltest du die richtige Größe parat haben. Und jedes Bild sollte nur so breit sein, wie es tatsächlich angezeigt wird, um Ladezeiten zu optimieren.

Die Größe der Bilder hängt von der Layoutgröße deiner Seiten ab.

Was ist die Layoutgröße?

Die Layoutgröße ist die Breite deiner Website. Genauer: Die Breite, innerhalb derer deine Inhalte wie Texte und Bilder dargestellt werden. Und diese Breite kannst du einstellen. Wo? In WordPress bzw. im Theme deiner WordPress-Installation stellst du das Layout ein.

Bei mir beträgt die Breite des Layouts 1.120 Pixel. Die weiße Fläche, auf der dieser Text steht, den du gerade liest, ist 1.120 Pixel breit.

Wie komme ich jetzt zur Bildbreite?

Angenommen, du hast wie ich eine Layoutbreite von 1.120 Pixel und dein Bild soll über diese ganze Breite der weißen Fläche gehen. Dann muss dein Bild 1.120 Pixel breit sein, wenn es nicht verpixelt sein soll.

Meine Bilder sind schmaler, wie du siehst, weil ich einen „inneren“ Abstand zu den Texten und zu den Bildern eingebaut habe. Auf beiden Seiten dieser weißen Fläche ist ein Abstand von 70 Pixel.

Das heißt:

1120 Pixel – 2 x 70 Pixel = 980 Pixel.

Die Bilder auf dieser Seiten brauchen also nur eine Breite von 980 Pixel.

So einfach ist das 😉

Das Headerbild

Das Headerbild ist das breite Bild (auch Herobild genannt), das über die gesamte Displaybreite geht.

Hier im Beispiel die Website von Carmen Putschky. Für das Headerbild wählst du 1.920 Pixel in der Breite.

Die Höhe des Headerbildes kannst du so wählen, wie du es haben möchtest. Ich verwende meistens Panoramaformate, also z.B. 1980 x 600 Pixel.

Für Bilder im Text wählst du zwischen 1080 und 250 Pixel Seitenbreite. Je nachdem, wie groß die Bilder angezeigt werden sollen.

Das heißt im Endeffekt: Wenn du ein und dasselbe Motiv mehrfach in unterschiedlichen kleinen und großen Breiten auf deiner Website darstellst, dann solltest du das Bild in unterschiedlichen Größen in WordPress parat haben.

Übrigens: WordPress selber legt von jedem Bild, das du in die Mediathek lädst, drei unterschiedliche Größen an. Das hat den Effekt, dass für jeden Zweck und jedes Display die richtige Bildgröße dem Besucher der Seite angezeigt wird. Und nicht etwa ein 1080 breites Bild, wenn nur 150 Pixel gebraucht werden.

Allerdings sind die voreingestellten Größen in WordPress nicht mehr zeitgemäß und passen nicht zu den modernen Themes. Deshalb kannst du hier die Größen für deine Zwecke einstellen. Das machst du in WordPress im Dashboard unter > Einstellungen > Medien.

Und noch etwas: Aus SEO-Sicht sind eher größere Bilder optimal. Hier musst du also den Kompromiss finden zwischen Dateigröße und Ladezeit.

Speicher die richtige Größe der Datei:

Eine kleine Dateigröße ist bei großen Headerbildern nicht ganz einfach. Aber es kommt auch auf das Motiv an. Je detailreicher ein Motiv ist, je stärker die Farbtiefe, desto größer kann die Datenmenge ausfallen. Schwarzweiß-Bilder sind meist kleiner als Farbbilder desselben Motivs.

Mehr als 150 KB sollte ein Bild jedoch nicht haben.

Tipp: Mit diesen Tools optimierst du deine Bilder vor dem Upload.

Bildoptimierung per App

Es gibt unterschiedlich Möglichkeiten, Bilder zu beareiten: Online oder mit einer App.

Ich arbeite mit dem Programm Photoshop von Adobe. Damit kann ich alle Fliegen mit einer Klappe schlagen:

  • das Bild zuschneiden,
  • die Pixelzahl reduzieren,
  • die Dateigröße reduzieren (komprimieren)
  • als JPG oder PNG abspeichern und schließlich
  • den richtigen Dateinamen vergeben.

Zugegeben, die wengsten Laien arbeiten mit Photoshop, denn es ist ein teures Profiprogramm. Aber das ist auch nicht nötig, denn es gibt andere Programme:

  • Gimp – das ist soweit ich weiß sogar kostenlos
  • Grafic Converter – ein sehr gutes Programm, mit dem ich gelegentlich arbeite. Das gibt es allerdings nur für Apple-Geräte
  • Affinity Photo

Daneben gibt es jede Menge Apps für das Smartphone. Dies erwähne ich nur der Vollständigkeit halber, denn das Bearbeiten von Bildern auf dem Handy finde ich sehr mühsam – kann aber für dich eine Alternative sein.

Bildoptimierung per Online-Tool

Gute Möglichkeiten der Bildbearbeitung sind einige Online-Tools.

Das meiner Meinung nach beste Online-Tool heißt iLoveIMG. Ich hab’s selbst ausprobiert:

  • Ausschneiden,
  • Pixel reduzieren,
  • Dateigröße verringern,
  • in jpg oder webp konvertieren,
  • Bild drehen –

fast alles ist möglich. Du kannst das Bild sogar mit Text versehen – etwa als Wasserzeichen oder als kleine Botschaft.

Tipp: Mit diesen Plugins optimierst du die Bilder für WordPress während des Uploads

Wie oben erwähnt kannst du alle Arbeiten zur Bildoptimierung vor dem Upload auf dem Desktop oder dem Handy machen.

Aber WordPress wäre nicht WordPress, wenn es nicht auch dafür ein Plugin gäbe. Mit dem richtigen Plugin kannst du während des Hochladens die Bilder zuschneiden, auf das richtige Pixelmaß bringen, die Dateigröße optimieren und einen Dateinamen vergeben. Alles in einem Aufwisch. Dafür eignet sich

Shortpixel Optimizer – automatische Bildoptimierung

Bonus: So behältst du die Übersicht über deine Bilder – meine 3 besten Tipps.

Ordnung auf dem PC:

Ordnung? Was hat das mit Bildoptimierung zu tun? Naja, erstmal nichts. Ordnung hilft dir aber, immer sofort die richtigen Bilder zu finden. Das spart Zeit und Nerven.

Damit kein Bilderwust und Kuddelmuddel entsteht, finde ich es innvoll, eine gute Ordnerstruktur für deine Bilder schon auf dem PC anzulegen. Ich sortiere meine Bilder für die Website zum Beispiel nach Einsatz:

  • für den Header,
  • für Beiträge,
  • für Anleitungen,
  • private Fotos,
  • Selfies usw.

Sinnvoll kann auch die Sortierung nach Pixelgröße sein.

Wenn man möchte, kann man noch Unterordner erstellen, um die Bilder z.B. nach Ausrichtung zu sortieren (Hochformat, Querformat). Was auch immer du für Ordner anlegst: Eine gute Struktur ist die halbe Miete.

Für die Verwaltung von Bildern gibt es natürlich auch Tools, wie Photoshop Lightroom von Adobe.

Ordnung in der Mediathek von WordPress:

WordPress bietet leider keine Bildverwaltung. Die Mediathek in WordPress ist meiner Meinung nach ziemlich grottig. Es gibt nur zwei Möglichkeiten der „Ordnung“: Entweder man ordnet per Voreinstellung die Bilder nach Monaten (sie werden dann in monatsbasierten Ordnern im System abgelegt). Oder man läd alle Bilder zusammen in der Mediathek. So oder so wird man sich schon nach kurzer Zeit einen Wolf suchen, wenn man ein konkretes Bild finden möchte.

Deshalb empfehle ich Plugins, die dir das Auffinden von Bildern erleichtert. Es gibt Plugins, die die Bilder innerhalb von WordPress ordnen. So kann man die Bilder nach unterschiedlichen Themen sortieren und behält den Überblick.

Ein gutes Plugin zur Bilderverwaltung in WordPress ist:
Real Media Library

Und falls deine Mediathek bereits ein gewisses Maß an Unordnung erreicht hat, gibts auch dafür Plugins:
Enable Media Replace

Damit kannst du Bilder ersetzen und alte löschen, ungenutzte Bilder finden und löschen und vieles mehr.

Was ist ein Theme? Was ist WordPress?

Was ist ein Theme? Was ist WordPress?

von | Nov. 10, 2022 | Anleitungen, Startseite, WordPress

Was ist ein Pagebuilder?
Was sind Plugins?

Meine Antworten, wenn es schnell gehen soll:

  • WordPress ist das Programm, mit dem du eine Website baust. Dafür hat WordPress alle grundlegenden Funktionen „an Bord“.
  • Das Theme legt das Design und die Optik deiner Website fest und beeinflusst einige Funktionen von WordPress.
  • Ein Pagebuilder ist ein Tool, das den Aufbau einer Website leichter macht. Manche Themes haben einen Pagebuilder integriert (so wie „Divi“)
  • Plugins erweitern WordPress um zusätzliche Funktionen. Manche Funktionen sind wichtig. Sie sorgen u.a. für die Sicherheit und Ladegeschwindigkeit der Website.

Keine besonders originellen Antworten.

Und irgendwie etwas trocken und abstrakt.

Nichts für visuell denkende Menschen.

Deshalb hab ich eine Art Übersetzung überlegt.

Eine, die das Thema verständlich macht, ohne mit Technik zu langweilen.

Falls du jetzt die Stirn runzelst: Keine Sorge, der Titel diese Artikels soll dich nicht in die Irre führen. Am Ende der Geschichte sage ich dir, mit welchem Theme ich arbeite und welche Plugins du WIRKLICH brauchst.

Lass mich dir ein Bild malen

Stell dir drei neu gebaute Häuser vor.
In eines der Häuser möchtest du einziehen.
Dazu schaust du dir Haus für Haus an.

Du schließt die Haustür von Haus Nummer eins auf.
Schon im Flur siehst du, dass mit dem Haus etwas nicht stimmt:

Der Fußboden ist ein grauer, kalter Betonboden.
Das Haus ist kalt, denn im Haus gibt es keinen einzigen Heizkörper.
Die Küche ist leer. Aus den nüchternen Wänden ragen die nackten Wasserrohre. Wasseranschluss, Stromanschluss und Rohre sind zwar verlegt, aber die Einrichtungen und Anschlüsse fehlen: Spülbecken, Herd, Kühlschrank und Schränke gibt es nicht.
Auch das Bad hat nur die offenen Wasseranschlüsse und einen Ablauf für die Toilette. Waschbecken, Dusche und ein WC: Fehlanzeige.
Licht gibt es natürlich auch nicht: An der Decke baumeln die nackten Stromkabel.

Ziemlich unwohnlich also.

Du ahnst es vielleicht:

Dieses leere Haus ist deine WordPress-Installation.

Ohne Theme, ohne Plugins.

Nur das nackte WordPress.

Du kannst dich in diesem Haus aufhalten, du hast sogar einen Schlüssel für die Haustür, die du abschließen kannst. Du kannst deine Sachen mitbringen und in den Räumen ablegen.

Aber wohnen kann man diesen Aufenthalt nicht nennen.

Diesem Haus fehlt die Grundausstattung:
Heizkörper, Küchenschränke, Herd, Spülbecken, WC, Dusche, Waschbecken.

Erst mit dieser Grundausstattung kann das Haus als „Wohnung“ bezeichnet werden.

Das sagt sogar Wikipedia 😉

So machst du WordPress „wohnlich“: mit einem Theme

Also schaust du dir das zweite Haus an.

Du schließt wieder die Tür auf.

Dieses Haus sieht schon ganz anders aus:

Auf dem Fußboden wurde ein einfaches, aber schickes Klicklaminat verlegt. Das macht einen warmen und gepflegten Eindruck.

Die Küche ist vollständig eingerichtet. Mit Küchenschränken, Arbeitsplatte, Spüle, Herd und sogar einen Kühlschrank gibt es. In den Schränken findest du Tassen, Gläser und Teller.

Auch das Bad ist vollständig: Darin findest du eine Dusche mit Schiebetüren, ein Waschbecken und nebenan ein Stand-WC. Die Wände und der Fußboden sind mit weißen Fliesen bedeckt.

Und natürlich hat das gesamten Haus moderne Flachheizkörper unter den Fenstern.

Die Grundausstattung einer Wohnung ist also schon mal da.

Doch nicht nur das: Mittlerweile dämmert es und du siehst keine Details mehr. Du tippst auf den Lichtschalter und siehe da: Licht. In diesem Haus hängt in jedem Raum eine flache Deckenleuchte. Elegant geht anders, aber du kannst alles sehen. Das ist ja die Hauptsache.

Du gehst weiter:
In einem Raum findest du ein Bett und daneben ein Nachttisch mit einer kleinen LED-Lampe drauf. Im nächsten Raum stehen zwei Sessel, ein kleiner Hocker als Beistelltisch und eine Stehlampe. Im dritten Raum steht ein kleiner Esstisch mit zwei Stühlen.

Zwar ist dieses Haus immer noch nicht der Knaller. Aber wenn du Purist bist, reicht diese Einrichtung völlig: Du kannst dir einen Tee machen, dich auf dem Sessel ausruhen, im Bett die Nächte verbringen und für’s Frühstück setzt du dich an den Tisch.

So, jetzt kommt das Theme ins Spiel:

Dieses rudimentär eingerichtete Haus ist dein kostenloses Standard-Theme.

Nicht besonders schick und sehr einfach gestrickt.

Wenn du dein individuelles Design hinbekommen möchtest, brauchst du Zeit, Geduld und musst vielleicht etwas Technikkenntnisse haben, denn das Theme ist nicht so einfach zu handhaben.

Aber es reicht völlig aus, um damit einen einfach gestalteten Blog zu starten.

Jetzt denkst du sicher: Da geht natürlich mehr.

Und, weil wir ja malen wollen:

Du möchtest nicht nur „irgendwie“ wohnen.

Du möchtest es gemütlich haben, du möchtest deine Wohnung geniessen!

Also gehst du ins Haus Nummer drei.

In diesem Haus findest du das, was eine Wohnung erst so richtig behaglich macht: Teppiche auf den Fußböden, Bilder an den Wänden, Vorhänge an den Fenstern, passend zu den Sesseln eine gemütliche Coach, eine Musikanlage, um richtig schön zu chillen, weiche Kissen und ein hübsches Plaid auf dem Sofa, damit du dich wohlig zurücklehnen und dich einkuscheln kannst, während du dein Lieblingsbuch liest.

An der Wand steht ein cooles Echtholzregal für deine Bücher. Und gegenüber steht eine schicke Landhaus-Kommode, auf der eine stylische Tischlampe steht, die deinen Raum in warmes und gemütliches Licht taucht.

Die Wände haben einen Farbanstrich. Im Esszimmer steht ein einladender, großer Holztisch mit sechs gepolsterten Stühlen. Der Tisch bietet viel Platz und lädt dazu ein, mit Freunden stundenlang gemütlich zu brunchen.

Auch Küche und Bad sind tippitoppi: In der Küche sind moderne Einbaumöbel mit Schubladenelemente, in denen alles seinen festen Platz hat und die beim Schließen wie von Zauberhand leise zufahren. Hier findest du Küchenhelferchen, mit denen du ruckzuck deine Lieblingssachen machen kannst: Kaffee, Smoothies, Toast, Tee oder Kuchen. Eine Spülmaschine ist natürlich ebenfalls vorhanden – damit du deine Zeit nicht mit dem lästigen Abwasch verschwenden musst.

Diese Wohnung hat alles, wonach du dich sehnst, wenn du kaputt von der Arbeit kommst und dich einfach nur in den Kissen rekeln willst, um Vivaldis Vierjahreszeiten zu lauschen.

Das ist dein Premium-Theme, das viele zusätzliche Funktionen hat. Mit diesem Theme bekommst du deine Website schneller und einfacher nach deinem Geschmack hin als mit einem kostenlosen Standard-Theme.

Mit dem Pagebuilder baust du ruckzuck deine Seiten

Doch dieses 3. Haus hat noch mehr zu bieten.

Zu diesem Haus gehört ein Team von Helfern.

Du hast also nicht nur eine exquisite Wohnungseinrichtung, sondern zusätzlich Hilfe für deinen Haushalt:

eine Köchin, die dein Mittagessen zubereitet,
eine Haushaltshilfe, die deine Wohnung in Schuss hält und
eine Fachkraft, die deine Fenster putzt
Du hast endlich mehr Zeit für deine Hobbys.
Du brauchst keine lästige Hausarbeit machen.

Das ist dein Theme mit Pagebuilder

Der Pagebuilder nimmt dir viel Aufbau-Arbeit ab und hilft dir, Zeit zu sparen.

Die Entscheidung ist gefallen:
Haus Nummer 3 ist es. Hier ziehst du ein.

Nun fehlt dir fast nichts mehr zum Glück in deiner Wohnung.

Oder?

Plugins bringen wichtige Funktionen mit

Fast.

Denn dir fällt ein, dass du ein paar Erweiterungen für dein schickes Haus brauchst:

Du möchtest dich vor Einbruch absichern. Und du brauchst einen Schutz vor Sonneneinstrahlung, damit es im Sommer nicht zu heiß wird in der Wohnung. Also lässt du dir eine Aussenjalousie installieren.
Ein Gartenhäuschen fehlt dir auch noch. Damit du Rasenmäher, Werkzeuge und Fahrräder unterstellen kannst. Deshalb holst du dir vom Baumarkt eines der netten Holzhäuschen, die es als Bausatz gibt.
Außerdem fehlt noch ein gut sichtbares Nummerschild am Garteneingang, damit Besucher dich schnell finden und
ein großer Briefkasten, damit der Postbote mit einem Blick sieht, wo er deine Briefe einwerfen darf.
Und schwups: Schon hat deine WordPress-Installation 4 Plugins bekommen.

Du siehst: Es ist gar nicht soooo kompliziert 😉

Mein Empfehlung zu deinem „Haus“

Mit diesem Theme arbeite ich

Ich arbeite seit Jahren mit dem Theme Divi.
Divi stammt vom Anbieter „Element Themes“. Divi ist ein Theme mit integriertem PageBuilder und wird ständig weiterentwickelt.

Mit so einem PageBuilder kannst du die einzelnen Elemente einer Seite ruckzuck zusammen bauen. Denn der Pagebuilder hat fertig programmierte Module, die du nur noch „zusammenstecken“ brauchst. Wie die Steine eines Lego-Hauses.

Übrigens: Viele sagen mir, dass sie Divi getestet haben und damit nicht zurecht gekommen sind.

Ich fand die Arbeit am Divi zu Anfang auch holperig. Immer wieder bin ich gestolpert. Und tatsächlich: Noch vor wenigen Jahren war Divi etwas sperrig – Anfänger konnten schon mal ihre liebe Not mit dem Divi haben.

Inzwischen ist das Theme richtig gut geworden. Es wurde schneller und es wurden Funktionen eingebaut, die richtig Gold wert sind. Einmal das Theme kennengelernt, können Laien ihre Seitenelemente ohne Probleme ruckzuck zusammenbauen.

Diese 4 Plugins brauchst du wirklich

Was ist ein Plugin?

Ein Plugin ist eine technische Erweiterung der Grundprogrammierung von WordPress.
Leider stellen Plugins immer wieder DIE Schreckgespenster von WordPress dar. Ganz zu unrecht. Denn im Gegensatz zu anderen Systemen kannst du auswählen, welche Plugins du installierst und welche nicht. Das ist ein riesiger Vorteil. Denn je mehr Plugins im System installiert werden, desto „schwerer“ wird das System – die Ladezeit der Website wird immer langsamer. Das stört den Besucher der Website und ist deshalb auch ein Rankingfaktor von Google. Außerdem: Die Website wird anfälliger für Störungen.

Viele Websitebetreiber nutzen leider zu viele Plugins.

Hier also meine Empfehlungen. Du brauchst:

ein Plugin für die Ladegeschwindigkeit
ein Plugin, um Spams zu vermeiden
ein Plugin für deine BackUps
ein Plugin zur Suchmaschinenoptimierung
Vielleicht noch das ein oder andere Plugin zusätzlich. Als Beispiel: Falls du viele Bilder auf deiner Website hast, lohnt sich noch Smash, das den Ladevorgang von Bildern optimiert.

Die wichtigsten Plugins:

Ladezeit der Website:
Ein Caching-Plugin verringert die Ladezeit deiner Website. Und das honoriert Google mit einem besseren Ranking. Ich empfehle dafür WP Rocket oder WP Super Cache.

Kommentar-Spams:
Ein Spam-Plugin sorgt dafür, dass du nicht mit Spam-Kommentare deiner Beiträge überhäuft wirst. Ein gutes Plugin ist Antispam Bee. Vorinstalliert in WordPress ist Akismet – das aber würde ich löschen, da es datenschutzrechtlich bedenklich ist.

Backup des Systems:
Ein Backup-Plugin ist wohl eines der wichtigsten Plugins. Zwar machen gute Hoster von sich aus regelmäßige Backups deiner Website. Aber sicher ist sicher und du hast mit einem Plugin die volle Kontrolle deiner Sicherungen. Ein gutes Plugin ist Backup Draft. Aber auch andere funktionieren gut und machen, was sie sollen.

SEO (Suchmaschinenoptimierung)
Du brauchst ein Plugin für die Suchmaschinenoptimierung. Ich nutze auf unterschiedlichen Websites Yoast SEO und RankMath. Beide Plugins sind gut und richtig wertvoll für dich, um dein Ranking zu verbessern.

Datenschutz und Google Fonts

Datenschutz und Google Fonts

von | Sep. 5, 2022 | WordPress

So nutzt du Google Fonts DSGVO-konform – einfach und schnell umsetzbar

Eine Anleitung, wie du Google Fonts auf deiner Website lokal einbindest und Abmahnungen verhinderst

Nutzt du Google Fonts?

Falls du jetzt mit den Achseln zuckst:

„Öh – was sind Google Fonts?“

Oder wenn du nicht weißt, ob du Google Fonts für deine Website nutzt:

Dann wird es höchste Zeit.

Zeit, daß du dich um das Thema „Schriften auf deiner Website“ kümmerst.

Der Hintergrund: Laut eines Urteils des LG Münchens vom Januar 2022 ist die Nutzung von Google Fonts unter bestimmten Umständen rechtswidrig. Die Folge: In den letzten Wochen wurden etliche Abmahnungen an Websitebetreiber verschickt. Weil sie die Google Fonts nicht DSGVO-konform nutzen.

Aber keine Sorge:

In diesem Artikel zeige ich dir:

  1. wie du Google Fonts lokal – also DSGVO-konform – einbindest,
  2. welche Möglichkeiten außer Google Fonts du hast, Schriften auf deiner Website zu nutzen.

Google Fonts ist ein Verzeichnis von mehr als 1400 Schriftarten, die wir für unsere Website nutzen dürfen. Fonts ist ein anderer Begriff für Schriften.

Google Fonts sind sogenannte Webfonts. Diese Art der Schriften wurde entwickelt, damit Texte auf Internetseiten oder Apps einheitlich dargestellt werden können.

Jetzt nerve ich etwas. Mit einem kleinen Ausflug in die Geschichte:

In den Anfangsjahren des Internets hat man nur eine Handvoll Schriften gehabt: Arial, Tahoma, Times und Palatino waren solche Kandidaten. Über die Schönheit der Schriften kann man streiten — aber sie waren zu 99,9 Prozent aller Rechner vorinstalliert. So konnten die Websitebetreiber sicher sein, dass die Texte der Website vernünftig angezeigt werden.

Überall auf der Welt.

Tja, lang ist’s her. Das war im Internet-Steinzeitalter.

Inzwischen sind Websites anspruchsvoller geworden. Und mit den mobilen Geräten sind neue Anforderungen gekommen. Deshalb werden heute auf den meisten Websites und in Apps Webfonts eingesetzt.

Für Websitebetreiber sind diese Schriften eine schicke Sache: Es ist ziemlich einfach, mit schönen Schriften eine Website aufzupeppen. Websites können mit Webfonts einen individuellen Stil bekommen. Selbst Scriptschriften sind möglich. Scriptschriften sind Schriften, die aussehen wie von Hand geschrieben.

Was wäre eine DIY-Seite oder eine Kosmetik-Seite ohne Scriptschriften.

Natürlich gibt es noch andere Hersteller bzw. Vertreiber von Webfonts – wie Linotype, Adobe oder Typekit. Hier bezahlst du für die Schriften die Lizenzen. Dafür hast du unter Umständen eine Schrift, die seltener auf anderen Websites zu sehen ist. Womit du deiner Website eine noch individuellere Note gibst.

Unter welchen Umständen ist die Nutzung von Google Fonts problematisch?

Google Fonts können lokal oder dynamisch auf Websites genutzt werden. Problematisch ist die Verwendung von Google Fonts, wenn du sie dynamisch in deine Website einbindest.

Was bedeutet dynamische Nutzung?

Bei der dynamischen Nutzung von Google Fonts liegen die Schriftdateien auf dem Server von Google. Bei jedem Besuch einer Website, die die Schriften dynamisch nutzt, geht eine Anfrage an den Google Server. Dazu werden Daten des Besuchers der Website an den Google Server in den USA gesendet.

Das Urteil des Landgerichts München von Januar 2022 zur dynamischen Nutzung von Google Fonts auf einer Website.

Und genau DAS ist das Problem: Beim Öffnen einer Website, die Google Fonts dynamisch nutzt, wird die IP-Adresse des Website-Besuchers an den US-Server gedendet. Für viele wohl keine große Sache. Dumm nur: Die IP-Adresse zählt zu den personenbezogenen Daten. Und personenbezogene Daten dürfen nur mit einer „qualifizierten Einwilligung“ des Besuchers der jeweiligen Website in die USA übermittelt werden. So heißt es im Juristendeutsch.

So kam es, wie es kommen musste: Gegen die Übermittlung seiner IP-Adresse hat ein Besucher einer Website gegen deren Websitebetreiberin geklagt. Das Landgericht München hielt die Klage „ganz überwiegend für begründet“. Die Betreiberin der Website wurde dazu verurteilt, an den Kläger 100 Euro Schadenersatz zu zahlen.

In den Entscheidungsgründen des Urteils heißt es unter anderem:
„Die unterlaubte Weitergabe der dynanischen IP-Adresse des Klägers durch die Beklagte an Google stellt eine Verletzung des allgemeinen Persönlichkeitsrechtes in Form des informationellen Selbstbestimmungsrechts nach § 823 Abs. 1 BGB dar. Das Recht auf informationelle Selbstbestimmung beinhaltet das Recht des Einzelnen, über die Preisgabe und Verwendung seiner personenbezogenen Daten zu bestimmen.“

Quelle: LG München, Urteil vom 20.01.2022 – Az. 3 O 17493/20

Abmahnungen bei dynamischer Nutzung von Google Fonts

Das Urteil des Landgerichts zeigt, dass die „simple“ dynamische Einbindung von Schriften auf einer Website keine Bagatelle ist. Denn: Die dynamische Einbindung von Schriften ohne Einwilligung des Websitebesuchers ist ein Verstoß gegen das Datenschutzgesetz.

Vielleicht hast du davon gehört oder gelesen. Denn das Thema wurde bereits in diversen Newslettern beschrieben: In den letzten Wochen haben einige Websitebetreiber Abmahnungen erhalten, weil sie Google Fonts dynamisch nutzen.

So nutzt du Google Fonts DSGVO-konform

Du kannst natürlich einen entsprechenden Banner für so eine Einwilligung einrichten. Das aber hat einige Nachteile.

Ich halte es für sinnvoller, die Schriften lokal einzubinden. Vor allem deshalb, weil das relativ einfach machbar ist. Bei dieser Einbindung sind alle auf der sicheren Seite: die BesucherInnen deiner Website und du.

Was ist eine lokale Einbindung?

Die Schrift, die auf deiner Website angezeigt wird, befindet sich dort, wo auch deine Website gespeichert ist. Also auf deinem (angemieteten) Webspace. So können keine Daten an den Google Server übertragen werden.

Was kannst du tun, wenn du wegen der Nutzung von Google Fonts abgemahnt wirst?

Eine schlechte Idee ist: nichts tun. Denn mit Sicherheit hat der Abmahner ein Screenshot deiner Website angefertigt.

Rausreden ist also nicht. Und auch wenn „nur“ gemahnt wurde: Eine anschließende Klage ist immer noch möglich.

Was du als erstes machen solltest:

Prüfe, ob deine Schriften tatsächlich dynamisch eingebunden sind.

Wenn du feststellst, dass bei der Einbindung der Schriften Daten der Besucher übertragen werden können: Jetzt solltest du schnell handeln, um den Schaden zu begrenzen.
Dann ist der nächste Schritt: Das Laden der Schriften vom Google Server deaktivieren. Wie das geht, erkläre ich unten. Außerdem erkläre ich, wie du deine Lieblingsschrift lokal einbindest.

Wie gehst du mit dem Abmahnschreiben um?

Zunächst: Meine Einschätzung ist keine Rechtsberatung. Die kann und darf ich nicht leisten. Hier gebe ich lediglich wieder, wie ich mich verhalten würde.

Ich würde dann das Schreiben ignorieren, wenn zu dem Zeitpunkt, als der Abmahner deine Website besucht haben will, die Schriften bereits lokal eingebunden waren.

Wenn der Abmahner recht hat, wenn die Schriften tatsächlich dynamisch eingebunden waren: Auf keinen Fall würde ich den geforderten Geldbetrag zahlen. Denn: Aus meiner Sicht sind Seitenbetreiber nicht verpflichet, lediglich auf eine Aufforderung wegen eines Verstoßes der DSGVO eine Geldzahlung zu leisten. Denn der Vorwurf müsste zunächst juristisch geprüft werden. So jedenfalls meine Kenntnis. Heißt: Der Anspruchsteller müsste zunächst klagen.
Das kann er zwar wie gesagt immer noch. Doch so einfach ist das nicht. Denn der Kläger trägt vor Gericht die Beweislast. Der Kläger muss also zunächst gut argumentieren. Zudem müssen die Gerichtsgebühren im Voraus bezahlt werden.

Man kann über die Abmahnungen bestimmt unterschiedlicher Meinung sein. Mit Sicherheit haben die Abmahner recht: Personenbezogene Daten müssen geschützt werden. Die Frage ist aber, ob man unbedingt klagen muss. Ich vermute, dass mit der Abmahnwelle nicht wenig Leute versuchen, sich auf möglichst schnellem Weg ein kleines Taschengeld zu verdienen. Dabei spielen sie mit der Verunsicherung, Angst oder Unkenntnis mancher Websitebetreiber.

So prüfst du, welche Schriften auf deiner Website aktiv sind

Die Schriftart und die Art der Einbindung ist bei jeder Website anders. Bei WordPress wird das vom Theme oder dem Childtheme erledigt. Und wo genau die Schrift zu finden ist, das kann bei jedem Theme anders aussehen. Deshalb kann ich hier keine allgemein gültige Antwort geben, an welcher Stelle du in deinem WordPress deine Schrift findest.

Mach es einfach: Du kannst mit deinem Browser feststellen, welche Schrift du nutzt.

Dafür öffnest du deine Website im Browser Chrome oder Firefox. Ich nutze Chrome, weil ich die Handhabung dort einfacher finde. Im Browser nutzt du einfach die Entwicklerkonsole (heißt so, ist aber nicht kompliziert).

  1. Öffne deine Website in Chrome.
  2. Wenn deine Website im Browser angezeigt wird, klicke mit der rechten Maustaste auf einen beliebigen Bereich der Website
  3. Dort, wo du klickst, öffnet sich ein Kontextfenster
  4. Klicke im Kontextfenster auf „Untersuchen“
  5. Dein Browserfenster wird geteilt und in einem Bereich wird ein Fenster mit dem Elementangaben deiner Webside angezeigt. Das ist die Entwicklerkonsole.
  6. Klicke oben in der horizontalen Leiste auf den Reiter „Quellcode“ (oder Sources)
  7. In dem weißen Feld siehst du verschiedene Angaben. Wenn du dort die Angabe „fonts.gstatic.com“ findest, dann weißt du: Google Fonts werden vom Google Server geladen. Im selben Fenster kannst du die Schriften erkennen, die vom Google Server auf deine Website geladen werden.

Klick auf den kleinen Pfeil vor fonts.gestatic.com

Darin findest du einen Ordner mit der Bezeichnung „s“
Den Ordner kannst du auch öffnen, darin befinden sich die Schriften.

Anleitung: So bindest du Google Fonts DSGVO-konform lokal in deine WordPress-Website ein.

Schritt 1:

Schriften überprüfen

Überprüfe wie oben beschrieben, welche Schriften du auf deiner Website geladen hast.

Schritt 2:

„google-font-helper“ ist dein Helferchen:

  1. Schriften aussuchen und laden
  2. CSS kopieren

Schriften aussuchen, auswählen und Downloaden:

Der google-webfont-helper ist wunderbar übersichtlich aufgebaut und selbsterklärend: In der linken Spalte wählst du deine Schrift, auf der rechten Seiten werden die verschiedenen Schriftschnitte angezeigt. Hier kannst du die Schrift runterladen.

Um die Schrift zu finden, kannst du entweder scrollen oder oben links den Namen der Schrift eingeben.

Wähle auf der rechten Seite deine gewünschten Schriftstärken aus. Wichtig sind die Einstellungen in dem Feld:

Select charsets
Select styles

Unter Select charsets ist „latin“ vorausgewählt. Diese Einstellung wird in den meisten Fällen richtig sein – sofern du keine anderen Sprachen auf deiner Website anbietest.

Unter „Select styles“ wählst du die Schriftstärken, die du für die Texte auf deiner Website vorgesehen hast. Nicht jede Schrift hat alle Styles: Die Roboto als Beispiel hat 12 Styles, die Lato nur 10 Styles. Ich finde, dass 3 Styles ausreichen. Sonst wird die Gestaltung schnell chaotisch. Schau gern in meinem Artikel zum Thema Gestaltung der Website.

CSS kopieren:

Wenn du die Schriftstärken ausgewählt hast, werden dir im grauen Feld darunter die CSS-Angaben und Verlinkungen zur Schrift automatisch angelegt. Für diesen Schritt wählst du die Option „Best Support“ (ist in der Regel voreingestellt).

Falls du dich wunderst, dass die Schriften mehrfach angezeigt werden: Die Schriftdateien werden in verschiedenen Formaten erstellt. Das ist wichtig, damit alle unterschiedlichen Browser auf diversen Systemen die Schriften richtig anzeigen können.

Diese CSS-Angaben kopierst du in deine Zwischenablage.

Download der Schriften:

Die Schriften kannst du unter Punkt 4. auf der Seite downloaden. Die Schriften landen dann in einem gezippten Ordner auf deinem PC. Wie der Ordner heißt, wird auch auf dem Download-Button angezeigt.

Schritt 3:

Plugin laden und Schriften lokal einbinden

Es gibt verschiedene Plugins, mit denen du deine Schriften lokal einbinden kannst. Ich nutze „Fonts-lokal“ von Sonia Rieder (www.webtimiser.de). Fonts-lokal ist ein kleines, aber sehr feines Plugin.

Fonts-lokal

Schritt 4:

Schrift und CSS ins Plugin setzen

Das Plugin entzippst du nach dem Download. Wichtig für dich sind jetzt die beiden Ordner

fonts
css

In dem Ordner „fonts“ liegen bereits Schriften als Beispielschriften. Diese Schriften löscht du einfach und ersetzt sie durch deine Schriften. Wähle alle deine Schriftformate aus deinem geladenen Schriftordner und schiebe sie in den Ordner „fonts“ innerhalb des Plugin-Ordners „Fonts-lokal“.

Deine kopierten CSS-Angaben (die du noch in der Zwischenablage hast) musst du noch in die Datei „local-fonts-style.css“ im Ordner „css“ des Plugins einsetzen. Die Datei enthält bereits CSS-Code. Dieser Code steht dort nur als Beispiel und du kannst auch dies löschen und durch deinen Code ersetzen (den du vom google-webfont-helper hast).

Wichtig! Was du zur Datei local-Fonts-style.css wissen musst:

Die Datei local-fonts-style.css ist eine einfache Textdatei, die du mit einem Texteditor öffnen kannst. Achtung: Du kannst die Datei nicht mit einem Schreibprogramm wie Word öffnen und bearbeiten.

Tipp: Als Windows-Nutzer kannst du „Editor“ oder „Notepad“ nehmen.

Mac-Nutzer nutzen „TextEdit“. Ich nutze dafür das Codeprogramm „CotEditor“.

Schritt 5:

Plugin installieren

Sind Schriften und CSS-Code in deinem Plugin? Dann kannst du das Plugin einfach über das Backend von WordPress unter „Plugins“ installieren. Wichtig: Dazu musst du das Plugin vorher als Zip-Datei packen.

Alternativ kannst du das fertige Plugin (den Ordner Fonts-lokal mit deinen Schriften) per FTP in den Ordner plugins in deinem WordPress-Verzeichnis hochladen („wp-content“ > „plugins“).

Und wieder aufpassen: Über FTP darfst du das Plugin nicht zippen!

Falls du nicht weißt, wie du ein FTP-Zugang einrichtest oder falls du wissen möchtest, wie du per FTP Dateien in deine WordPress-Installation laden kannst: Ich hab dazu eine schöne Anleitung am Beispiel des Hosters „Allinkl“ geschrieben, lies hier.

Schritt 6:

Google Fonts in WordPress deaktivieren

Das Plugin hat zwar den Befehl programmiert, dass Google Schriften nicht geladen werden sollen.

Aber sicher ist sicher: Die Google Fonts solltest du noch deaktivieren. Im Divi kannst du ganz einfach über einen Button Google Fonts deaktieren.

Dazu gehst du in deinem WordPress-Dashboard auf den Menüpunkt

  1. Divi
  2. Theme-Optionen
  3. Google Schriftarten verwenden >
  4. Google Fonts => hier den Button deaktivieren.

Welche anderen Möglichkeiten gibt es, Schriften auf einer Website zu nutzen?

Puh, das war jetzt doch ganz schön viel.

Aber vielleicht stellst du ja eine ganz andere Frage:

Muss ich unbedingt Google Fonts nehmen?

Nö.

Du kannst andere Webfonts nehmen.

Oben hab ich schon andere Schriftenhersteller erwähnt. Fonts von anderen Anbietern zu kaufen kann sich durchaus lohnen, wenn du Wert legst auf eine besonders gestaltete Schrift.

Wenn dir wichtig ist, dass die Schrift dieselbe ist, die du auch für dein Logo und dein gesamtes Corporate Design nutzt, kann eine gekaufte Schrift sinnvoll sein. Schriften sind wichtige Gestaltungsmerkmale deines Brandings, deiner Marke als UnternehmerIn.

Ein völlig entgegengesetzter Ansatz ist, überhaupt keine Schriften zu kaufen oder zu laden.

Wie das geht? Du nutzt einfach Systemschriften.

Was sind Systemschriften?

Wie der Name schon sagt: Systemschriften gehören zum System (wer hätte das gedacht).

Ob PC oder Smartphone: Jedes Computersystem braucht Schriften, damit der Mensch das System bzw. die Programme darin anwenden kann. Dabei hat jedes System seine eigene Schrift: Windows-Rechner nutzen Segoe UI, Android-Geräte nutzen Roboto, Ubunto nutzt Ubunto und so weiter.

Das bedeutet für deine Website natürlich, dass die Texte auf deiner Website je nach System ein wenig anders aussehen.

Ist aber nicht wirklich ein Problem.

Sofern du keine ausgefallene Schrift nutzen möchtest, sind die Unterschiede der einzelnen Schriften nicht so gravierend, dass sie die Gestaltung deiner Website völlig über den Haufen schmeißen. Und wenn du in der Hinsicht eher Purist bist, kann es sich lohnen, die Texte deiner Website mit den Systemschriften anzeigen zu lassen.

Noch ein Vorteil: Die Ladezeit der Website wird beschleunigt.

Wie wende ich Systemschriften an?

Das ist ganz einfach: Schritt 1 ist natürlich, dass du die Verwendung von Google Fonts auf deiner Website deaktiviert hast. Wie das beim Divi funktioniert, habe ich oben beschrieben. Anschließend bindest du in deinen Stilangaben einfach den Code ein, der dafür sorgt, dass die jeweiligen Systemschriften geladen werden. Im Theme Divi setzt du den Code direkt im style.css deines Child-Themes ein oder einfach im >

Divi > Theme Optionen > ganz unten im schwarzen Feld „Eigene CSS“.

Diesen Code setzt du dort ein:

body {
font-family: -apple-system,BlinkMacSystemFont,“Segoe UI“,Roboto,
Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue“,sans-serif;
}

Übersicht: Nützliche Plugins und Links, mit denen du Google Fonts DSGVO-konform lokal einbindest

WhatFont
Fontanello

Beide Tools sind schöne Helfer, wenn man auch zwischendurch wissen möchte, welche Schrift in welcher Stärke und Größe auf einer Website genutzt werden. WhatFont ist eine Erweitung für den Browser Chrome, Fontallo ist die Erweiterung für Firefox.

Google web font helper

Eine hilfreiche Plattform, um Google Fonts mit den dazugehörigen CSS-Dateien zu laden. Hier kannst du die Schriften in allen notwendigen Formaten erhalten (eot, svg, ttf, woff, woff2).

Fonts-lokal

Ein schönes Plugin von Sonia Rieder (webtimizer.de), wenn du deine Schriften lokal hosten möchtest.

Google Fonts Checker

Hier kannst du prüfen, ob du Google Fonts auf deiner Website nutzt und welche Schriften auf deiner Website geladen werden,

WordPress Installieren

WordPress Installieren

von | Mai 24, 2022 | WordPress

WordPress installieren: 6 einfache Schritte zu deiner perfekten WordPress-Website

Vielleicht hast du mal gelesen, dass kaum jemand ohne Fehlermeldungen WordPress installieren kann. „WordPress ist viel zu kompliziert“ höre ich auch immer wieder. Neulich sagte mir jemand, „dass man für WordPress programmieren können muss“.

Das ist Unsinn. Glaub mir, solche Aussagen sind Mythen. Sie entstehen, weil Anwender aus Unkenntnis Fehler gemacht haben beim WordPress installieren und dann enttäuscht waren, weil es nicht weiterging.

WordPress zu installieren ist nicht schwer. Aber ich gebe es zu: Wenn man nicht aufpasst sind Fehler möglich. Damit gerade Anfänger nicht unnötig enttäuscht werden, habe ich diese kleine Anleitung geschrieben. Mit diesem Fahrplan installierst du ruckzuck und ohne Stress dein WordPress.

Was brauche ich, um WordPress installieren zu können?

Wahrscheinlich hast du mindestens eine Grundvoraussetzung: einen PC oder ein Notebook. Der PC sollte einigermaßen modern sein. Das heißt: Er sollte aktuelle Programme und ein relativ aktuelles Betriebssysteme haben. Arbeitsspeicher sollte auch genügend drauf sein. Dann hast du es später einfacher. Der Browser, das ist das Programm, das dir Internetseiten anzeigt, sollte die neueste Version sein. Natürlich brauchst du auch eine gute Internetverbindung. Je schneller die Verbindung ist, desto mehr Spaß macht die Arbeit an der Website.

Nun kommt das, was du dir zusätzlich holen musst:

Hoster:

Natürlich brauchst du noch einen Hosting-Anbieter. Das ist die Firma, die dir Speicherplatz zur Verfügung stellt. Denn du brauchst einen Platz, auf dem deine Website-Daten „lagern“. Der Hoster bietet dir die Infrastruktur, damit deine Website im Internet gesehen werden kann. Achte hier beim Buchen des Hosters auf Mindestvoraussetzungen: genügend Speicherplatz, PHP, SSL-Zertifikat, Datenbank.

Domain:

Deine Website braucht einen Ort, an dem sie im Internet zu finden ist. Dafür ist die Domain da: Die Domain ist Adresse und Name für deine zukünftige Website. Bei jedem Hoster kannst du deine Domain bestellen.

Datenbank

Eine Datenbank brauchst du, wenn du ein Content Management System (CMS) installierst. WordPress ist so ein System. Andere CMS sind Joomla, Typo 3, Redaxo usw., auch sie funktionieren im Zusammenhang mit einer Datenbank. Aber keine Sorge, du musst dafür nichts großartig machen. Die Datenbank muss lediglich einmal – mit einem Klick – angelegt und später mit WordPress verbunden werden.

Datenzugang – ein FTP-Programm:

Du brauchst eine Möglichkeit, die Daten auf deinen Hoster hochladen zu können. Dafür gibt es sogenannte FTP-Programme. Eine Alternative ist das Web-FTP: Das bieten manche Hoster an. Damit kannst du ohne eigenem FTP-Programm deine Daten hochladen. Sicherer und bequemer ist allerdings ein FTP-Programm wie FileZilla.

WordPress

WordPress ist eine Software, mit der du deine Website erstellen kannst. WordPress ist die technische Grundlage für deine Website. Natürlich gibt es viele weitere Systeme und auch Baukästen wie Wix, Jimdo oder Squarespace, allerdings bevorzuge ich WordPress. Du bekommst WordPress vollkommen kostenlos unter dieser Adresse: wordpress.org.

Zusammengefasst brauchst du:

  • ein PC oder ein Notebook
  • Hoster
  • Domain
  • Datenbank
  • FTP-Programm
  • WordPress
  • Auf dem Hoster eine Datenbank anlegen

WordPress funktioniert nur mit einer Datenbank

Eine Datenbank speichert all die Texte, die du auf deiner WordPress-Website schreibst. Auch dein Zugang zu deiner WordPress-Website und andere Passwörter werden in der Datenbank gespeichert. Davon merkst du nichts, denn das Speichern spielt sich im Hintergrund ab. Und du musst auch nichts an der Datenbank machen.

Alles was du machen musst: Einmal eine Datenbank anlegen. Doch keine Sorge: Das Anlegen der Datenbank ist mit einem Klick erledigt.

Über die Benutzeroberfläche deines Hosters wählst du deine Datenbank aus. Wo genau du die Datenbank findest und aktivierst, sieht bei jedem Hoster anders aus. Ich erkläre das am Beispiel von Allinkl, einer meiner Hoster:

  • Du loggst dich im Kundencenter bei Allinkl ein.
  • Dort im linken senkrechten Menü klickst du auf -> Technische Verwaltung.
  • Im nächsten Fenster klickst du rechts auf den roten Schriftzug -> KAS Login.
  • Du siehst eine neue Ansicht mit einem neuen senkrechten Menü auf der linken Seite. Hier klickst du auf -> Datenbanken
  • Nun siehst du das Fenster -> Datenbanken > Übersicht
  • Rechts oben findest du ein kleines Symbol mit einem roten Pluszeichen (+). Und die Option daneben: „neue Datenbank anlegen“..
  • Hier klicken und es erscheint ein neues Fenster, in dem du die Beschreibung und das Passwort deiner Datenbank eingeben kannst.
  • Speichern
  • Nun kommst du automatisch auf die Datenbank-Übersicht mit deiner 1. Datenbank.
  • Hier findest du rechts den Datenbanknamen und den Nutzernamen deiner Datenbank.
  • Datenbankname, Nutzername und dein Passwort musst du sorgfältig notieren.

Tipp: Lege alle Zugangsdaten in einer Excel- oder Google-Tabelle an.

WordPress von wordpress.org herunterladen

WordPress ist ein Open Source System

Das heißt: WordPress ist kostenlos und kann einfach von der offiziellen WordPress-Website heruntergeladen und für jeden Zweck eingesetzt werden.

Dazu gehst du einfach auf wordpress.org und klickst auf den blauen Button oben rechts.

Falls dir englisch nicht so liegt, gibt es eine deutschsprachige Version der Seite -> de.wordpress.org.

Deine Datenautobahn zu deinem Hoster

Nun hast du WordPress auf deinen Rechner runtergeladen.

Der nächste Schritt ist: WordPress muss nun auf deinen Hoster hochgeladen werden. Dafür brauchst du einen sogenannten FTP-Zugang, die Datenautobahn zu deinem Hoster. Jeder Hoster bietet so einen FTP-Zugang an – du musst nur noch die „Autobahnzufahrt“ anlegen. Also Passwort und Zugangscode. Um im Bild zu bleiben.

Im nächsten Schritt (Schritt 4) erkläre ich dir 2 unterschiedliche Wege, auf welche Art du deine Daten auf deinen Hoster lädst. Aber egal welchen Weg du wählst: Als erstes muss der FTP-Zugang angelegt werden.

Doch keine Sorge: Das Anlegen des FTP-Zugangs ist simpel.

Was ist FTP?

Das Kürzel FTP bedeutet File Transfer Protocoll. Auf deutsch und in einfachen Worten: FTP bedeutet schlicht den Vorgang zur Übertragung von Daten.

Und so gehst du bei Allinkl vor:

  • Du loggst dich (du kennst das bereits) im Kundencenter bei Allinkl ein.
  • Dort im linken senkrechten Menü klickst du auf -> Technische Verwaltung (kennst du auch schon).
  • Im nächsten Fenster klickst du rechts auf den roten Schriftzug -> KAS Login.
  • In dem neuen Fenster klickst du im linken, senkrechten Menü auf -> FTP.
  • Es öffnet sich das Fenster -> FTP > Zugang
  • Dort siehst du oben auf der rechten Seite ein kleines Seiten-Symbol mit einem roten Pfeil und der Option daneben -> „Neuen FTP-Nutzer anlegen“.
  • Diese Option klickst du an.
  • Es öffnet sich ein neues Fenster.

Hier kannst du wie bei der Datenbank eine Beschreibung deines FTP-Zugangs notieren (optional). Ein Passwort ist Pflicht — nimm hier ein sicheres Passwort, möglichst 12-stellig und mit Sonderzeichen und Ziffern (ohne Umlaute)
Das Feld Pfad kannst du leer lassen, dann siehst du beim Einwählen auf deinen Webspace immer alle Verzeichnisse, die du angelegt hast (du bist dann im sogenannten Rootverzeichnis, dem obersten Verzeichnis).

Abschließend wie immer -> Speichern.

  • Du kommst dann zurück auf das Übersichtsfenster.
  • Dort siehst du nun deine FTP-Verbindung in einer kleinen Tabelle angelegt.
  • Den Benutzernamen musst du dir gut notieren, ebenso dein gewähltes Passwort und den FTP-Server

Den FTP-Server nennt dir dein Hoster. Auf Allinkl findest du die Bezeichnung des Servers, wenn du in deiner FTP-Tabelle auf das rechte, kleine, rote Seitensymbol mit dem roten Pfeil klickst: Es öffnet sich ein Fenster mit all den Daten, die du für deinen FTP-Zugang brauchst. Hier kannst du auch dein Passwort ändern.

Hinweis: Auf der Tabellenansicht deines FTP-Zugangs findest du einige grüne Haken. Wenn die Buchstaben R, W, L, V jeweils einen grünen Haken haben, dann ist bei dir alles richtig eingestellt.

Deinen WordPress-Ordner auf den Hoster hochladen

Zwei Wege, um Daten per FTP hochzuladen

Möglichkeit 1

Hochladen mit dem Web-FTP

Du kannst den WordPress-Ordner mit den Web-FTP deines Hosters hochladen. Viele Hoster bieten diese Möglichkeit an. Web-FTP bedeutet: Über das Login deines Hosters kannst du Daten direkt mit dem Browser wie Firefox oder Chrome (oder jeden beliebigen Browser) hochladen.

Und so geht das bei Allinkl:

Wenn du das noch nicht getan hast, legst du zunächst deinen FTP-Zugang an. Wie das geht, hab ich in Schritt 3 erklärt.

Dann gehst du wieder in das KAS.

  • Im KAS klickst du wieder im linken, senkrechten Menü auf -> FTP.
  • Jetzt bist du wieder im Fenster: FTP > Übersicht.
  • Dort steht unten in der Tabelle dein angelegter FTP-Zugang.
  • Du klickst auf das linke Symbol mit den 2 kleinen roten Kästchen (wahrscheinlich sollen das Rechner sein)
  • Es öfffnet sich ein neues Fenster in deinem Browser: Du siehst nun die Verzeichnisstruktur auf deinem Hoster.
  • Dein Verzeichnis mit dem Namen deiner Domain klickst du an, es öffnet sich ein neues Fenster.
  • Hier siehst du oben ein horizontales Menü. Dort auf -> Upload klicken.
  • Nun kannst du auf -> Durchsuchen klicken.
  • Nun wählst du deinen gezippten WordPress-Ordner aus, der auf deinem PC liegt. Wichtig: Es kann nur der gezippte WordPress-Ordner hochgeladen werden.
  • Wenn der gezippte Ordner hochgeladen ist, muss er noch entzippt werden.
  • Dazu klickst du das kleine weiße Auswahlkästchen links neben dem Symbol der gezippten WordPress-datei aus.
  • Dann gehst du auf > Aktionen.
  • Es öffnet sich ein Auswahlfeld, hier klickst du auf > Archiv entpacken.
  • Mit > ok bestätigen.
  • Nun wird der WordPress-Ordner entpackt. Das dauert ein paar Minuten, einfach abwarten.
  • Wenn alles entpackt ist, kannst du wieder auf > ok klicken.

Möglichkeit 2

Hochladen mit einem FTP-Programm

Ich nutze zum Hoch- und Runterladen von Dateien immer ein FTP-Programm. Der Grund ist ganz einfach: Hier kann ich sämtliche Zugänge zu allen möglichen Hostern zentral anlegen. Ich brauche dazu nicht jeden Hoster extra aufrufen, alle Zugänge habe ich in meinem FTP-Programm gespeichert. Falls du nur einen Hoster hast, reicht auch das Web-FTP für dich aus. Wenn du mehrere unterschiedliche Zugänge verwalten möchtest, ist das FTP-Programm komfortabler. Außerdem hast du mit dem Programm noch einige zahlreiche Möglichkeiten.

Gute und kostenlose FTP-Programme sind FileZilla und CyberDuck.

Damit du mit einem FTP-Programm deine Daten hoch- oder runterladen kannst, musst du bei deinem Hoster zunächst einen FTP-Zugang einrichten. Wie das geht, hab ich oben in Schritt 3 erklärt.

Das FTP-Programm musst du vorher noch einrichten. Dort trägst du die Daten ein, die du erhalten hast, als du den FTP-Zugang bei Allinkl angelegt hast.

Verzeichnisstruktur anpassen

Ein wichtiger Schritt, der oft vergessen wird.
Hierauf musst du achten, damit es nicht zu Fehlermeldungen kommt.

Wenn du dein WordPress-Ordner hochgeladen hast, muss du sehr wahrscheinlich die Verzeichnisstruktur auf deinem Hoster anpassen. Was es damit auf sich hat erkläre ich hier:

Du kennst es ich von deinem PC oder Mac: Jedes deiner Dokumente ist in einem „Ordner“ angelegt. Deine Apps (Programme) sind ebenfalls in einem „Ordner“, dem Ordner „Programme“. Und so weiter. Nun wunderst du dich, dass ich „Ordner“ in Tüddelchen gesetzt habe… Natürlich sind die Ordner nicht wirkliche Ordner, wie wir sie aus dem analogen Leben kennen, sondern Verzeichnisse. Und genau solche Verzeichnisse befinden sich auf deinem Hoster.

Wenn du eine Domain hast bei Allinkl, dann kannst du beim Einloggen über FTP sehen, dass dort ein Verzeichnis steht, das den Namen deiner Domain hat. Beispiel: Wenn du eine Domain hast, die „sabinemeier.de“ heißt, dann liegt in deinem FTP-Bereich ein Verzeichnis mit dem Namen sabinemeier.de.

Du kannst das Verzeichnis öffnen, darin befindet sich die Datei index.htm. Das ist eine voreingestellte Standarddatei, die immer in neuen und damit leeren Verzeichnissen liegt. Sie sorgt dafür, dass du eine Platzhalterseite mit dem Logo von Allinkl siehst, wenn du deine noch leere Domain sabinemeier.de aufrufst (um im Beispiel zu bleiben).

Wenn du nun in dieses Verzeichnis deinen Ordner WordPress hochgeladen hast, dann steht dort immer noch diese index.htm von Allinkl. Aber du möchtest natürlich, dass dein neues WordPress aufgerufen wird, wenn du deine Domain in den Browser eintippst. Und nicht die index.htm.

Wie das geht?

Du musst ein interne Umleitung einrichten. Damit sagst du dem System: Im Browser des Besuchers soll nicht die Platzhalterseite index.htm von Allinkl angezeigt werden, sondern die Startseite, die in deinem hochgeladenen WordPress-Ordner liegt.

  • Das machst du so:
  • Du loggst dich wieder bei Allinkl ein.
  • Wieder auf technische Verwaltung.
  • Dann gehst du wie gehabt auf KAS Login.
  • Hier im linken senkrechten Menü klickst du auf Domain.
  • Du erhältst eine Übersicht all deiner Domains.
  • In der Zeile, in der deine Domain gelistet ist, klickst du auf das linke, kleine Symbol, das rote Dokumentsymbot mit dem roten Pfeil.
  • Es öffnet sich ein neues Fenster.
  • Hier kannst du ein Ziel angeben für deinen Webspace.
  • Damit die Inhalte in deinem WordPress-Ordner angezeigt werden, gibst du in das Feld bei Ziel einfach den Namen deines Ordners an. Das ist in der Regel eben „wordpress“. Wenn du den Ordner umbenannt hast in „meinetolleseite“, dann muss dein Ziel natürlich „meinetolleseite“ heißen. Natürlich immer ohne Tüddelchen und hinter einem Slash (/).
  • Nun wird beim Aufruf deiner Domain auf den Inhalt deines WordPress-Ordners verwiesen – und nicht mehr auf die index.htm.

WordPress mit der Datenbank verbinden

WordPress installieren heißt: mit der Datenbank verknüpfen

Dieser Schritt ist die eigentliche Installation. Du hast dein WordPress zwar hochgeladen – aber damit ist noch nichts erreicht. WordPress funktioniert nur in Verbindung mit einer Datenbank. Darum musst du im nächsten Schritt WordPress mitteilen, wie die Datenbank heißt und welches Passwort sie hat. Erst dann kann WordPress mit der Datenbank kommunizieren.

  • Den Installationsprozess startest du, indem du deine Domain in die Adresszeile deines Lieblingsbrowsers eingibst (Firefox, Chrome, Safari – was du willst).
  • Hinter der Domain tippst du ein Slash (/).
  • Und direkt hinter dem Slash tippst du „wpadmin“ oder einfach „admin“ ein – ohne Anführungszeichen natürlich.
  • Beispiel: sabinemeier.de/wpadmin
  • Dann Entertaste drücken.
  • Es öffnet sich ein Fenster, in dem du weiterklicken kannst zum nächsten Schritt.
  • Nun erscheint ein großes weißes Formularfenster.
  • Hier gibst du die Daten zu deiner Datenbank ein, die du vom Hoster erhalten hast.
  • Für das Feld „localhost“ kannst du probieren: Häufig passt „localhost“ und du musst nichts ändern. Bei Allinkl bleibt es bei localhost. Andere Hoster aber könnten einen anderen Datenbankhost haben. Das erfährst du bei deinem
  • Hoster. Du findest diese Angaben im Kundenlogin deines Hosters. Falls das nicht zu finden ist: einfach beim Hoster anrufen.
  • Das Feld Tabellenpräfix kannst du unverändert lassen.

Damit ist die Installation fertig.

Wenn alles geklappt hat und du dich nicht vertippst hast, erhältst du von WordPress eine Erfolgsmeldung.

 

WordPress-Menü erstellen

WordPress-Menü erstellen

von | Feb. 23, 2022 | WordPress

5 mögliche Menüs und wie sie umgesetzt werden

Außerdem: 5 Fehler, die du beim Aufbau deines Menüs vermeiden solltest

Du möchtest die Besucher sicher durch deine Website führen? Du möchtest ein WordPress Menü erstellen? Dann brauchst du nicht nur eine gute Navigation. Du brauchst mehrere Menüs an verschiedenen Stellen deiner Website. Die schlechte Nachricht: In WordPress ein Menü erstellen kann verwirrend sein. Je nach Theme hast du mehrere Möglichkeiten, wie und wo du Menüs auf deiner Website einsetzt. Die gute Nachricht: Eine durchdachte Navigation anzulegen ist technisch einfach. Ich zeige dir hier, wie du Menüs in WordPress erstellst.

Welche Menüs gibt es?

WordPress selber bietet von Haus aus drei Menüpositionen an. Wo die Menüs stehen, wie genau sie aussehen – das hängt von deinem Theme ab. Denn jedesWordPress- Theme bietet unterschiedliche Menüpositionen an. Deshalb ist als 1. Frage sinnvoll: Wo soll deine Navigation stehen? Für die Antwort darauf musst du folgendes wissen:

  • Welche Menüs gibt es überhaupt?
  • Welche Menüs bietet dein Theme?
  • Welche Positionen können Menüs auf der Website haben?

In WordPress arbeite ich mit dem Theme Divi. Mit WordPress + Divi sind die gängigsten Menüs mit den gängigsten Positionen möglich. Falls du ein anderes Theme benutzt, kann es sein, dass das ein oder andere Menü anders aussieht. Aber ich bin sicher: Meine Anleitungen werden dir weiterhelfen.

Hauptmenü – ein Must-have und das Leitsystem deiner Website

Mit dem Hauptmenü ist die Navigation gemeint, die auf einer Website die erste Geige spielt. Hier werden die wichtigsten Seiten deiner Website angesteuert. Was du wissen solltest: Das Hauptmenü kann verschiedene Positionsmöglichkeiten haben. In dieser Anleitung zeige ich dir, wie ein horizontales Menü am Kopf der Seiten in WordPress erstellt wird.

Footermenü: das Menü am „Fuß“ der Seiten

Das Footermenü findest du im untersten Bereich einer Website. Eben im Footer. Das ist der Bereich, der die einzelnen Seiten deiner Website abschließt und dem Besucher sagt: Weiter kannst du nicht scrollen. Ein Footermenü ist sinnvoll, weil damit die Besucherin ohne scrollen zu müssen weitere Unterseiten findet. Wenn du im Footer ein WordPress Menü erstellen möchtest, hast du mehrere Möglichkeiten. In dieser Anleitung zeige ich dir, wie du ein vertikales Footermenü und wie du ein horizontales Footermenü erstellst.

Sekundäres Menü — eine Linkleiste im Headerbereich

Das Sekundäre Menü steht im Headerbereich oberhalb vom horizontalen Hauptmenü. Dieses Menü ist eher auf großen Portalen sinnvoll. Auf Shopseiten oder mehrsprachigen Seiten kann diese Leiste sinnvoll sein, wenn Warenkorb, Login oder die Sprachauswahl untergebracht werden sollen. Weitere mögliche Elemente sind die Such-Lupe, Social-Icons, deine Telefonnummer oder die Mailadresse.

DropDown-Menü — die Erweiterung des Hauptmenüs

Wenn du ein nicht sichtbares WordPress Menü erstellen möchtest, wählst du das Das DropDown-Menü. Es wird auch Untermenü oder Submenü genannt. Der Name sagt es bereits: Es ist ein „Klappmenü“. Das heißt: Die Besucher klicken zuerst ein Link im Hauptmenü an, damit das Untermenü aufklappt. Sinnvoll ist das DropDown-Menü, weil in der horizontalen Menüleiste nicht mehr als sieben Links angeordnet sein sollten. Je weniger Links im Hauptmenü, desto übersichtlicher ist die Navigation. Der Rest kommt ins DropDown.

Horizontales WordPress Menü erstellen im Header

Eine einzelne Webseite wird in verschiedene Bereiche eingeteilt:

  • Header
  • Body
  • Footer

Der zuerst sichtbare Bereich ist der Header. Der Header ist der Kopfbereich einer Webseite. Deshalb wird hier in der Regel das Hauptmenü angebracht. Gut zu wissen: Die Seiten können so eingestellt werden, dass die Navigation auch beim Scrollen oben stehen bleibt. Und so kommst du zum wichtigsten Menü deiner Website:

Schritt 1

Seiten in WordPress anlegen

Damit du überhaupt ein Menü in WordPress sehen kannst, möchte WordPress zunächst Seiten haben. Der umgekehrte Weg – erst Menü, dann Seiten – ist zwar auch denkbar und technisch möglich, aber umständlich. Der erste Schritt also: Seiten anlegen. Auch inhaltlich ist das sinnvoll, denn dann machst du dir vor dem Anlegen der Website Gedanken über deine Inhalte.

Ich erlebe es immer wieder, dass Websitebetreiber zuerst an das Menü denken. Ohne bereits Seiten zu haben. Das ist, als würden sie erst den Sattel kaufen und dann das Pferd… Apropos: Hast du ein Konzept für deine Website? Das ist nämlich sehr sinnvoll und erleichtert dir die Arbeit. Falls du Tipps brauchst, lies gern meine Anleitung, wie du ein Konzept für deine Website erstellst > klick hier

Schritt 2

Bereich „Menüs“ im Dashboard von WordPress öffnen

Du loggst dich wie gewohnt in deine WordPress-Installation ein. Standardmäßig öffnet sich das Dashboard deiner Installation. Hier siehst du links die vertikale Menüleiste mit den Optionen, die du zum Aufbau deiner Website ansteuern kannst. Diese vertikale Menüleiste beginnt oben mit

  1. > Dashboard, dann
  2. > Beiträge, dann
  3. > Medien, dann
  4. > Seiten

Weiter unten findest du den Link Design. Dieser Menüpunkt enthält den Punkt Menüs. Es gibt 2 Möglichkeiten, zum Bereich Menüs zu kommen.

Möglichkeit 1:
Du „schwebst“ mit dem Mauscurser über den Begriff Design (ohne zu klicken!).
Es öffnet sich nach rechts ein Kontextfenster
Hier findest du unter den aufgeführten Links wie Themes, Customizer, Widgets den Punkt Menüs
Menüs anklicken.

Möglichkeit 2:
Diesmal klickst du auf Design
Das vertikale Hauptmenü in deinem Dashboard öffnet sich nach unten.
Nun siehst du im Menü unter Design dieselben Menüpunkte wie in Möglichkeit 1)

Schritt 3

Den Namen des Menüs eintragen

Wenn du auf Menüs geklickt hast, dann öffnet sich im Dashboard ein neuer Bereich. Das ist der Menübereich. Im Bereich Menüs kannst du deine Navigationen definieren, anlegen und ändern. Links im Bereich findest du einen Kasten Menüeinträge hinzufügen und rechts den Kasten Menü-Struktur. So gehst du vor:

  • im Kasten Menü-Struktur findest du das Feld Name des Menüs
  • hier trägst du einen beliebigen Namen für dein Menü ein
  • dabei ist es sinnvoll, einen eindeutigen Namen zu wählen
  • anschließend klickst du auf den blauen Button Menü erstellen.

Schritt 4

Seiten auswählen und dem Menü hinzufügen

Wenn du noch keine Seiten angelegt hast, dann ist das Feld Menüeinträge hinzufügen grau. Ansonsten ist das Feld wie der Kasten Menü-Struktur weiß. Nun kannst du Seiten auswählen. Standardmäßig ist hier der Tab Zuletzt erstellt vorausgewählt. So gehst du vor:

  • Gewünschte Seite in der Checkbox links neben der Seitenbezeichnung auswählen
  • du kannst auch mehrere Seiten auswählen -> dann mehrere Checkboxen anklicken
  • auf den Button klicken: Zum Menü hinzufügen
  • anschließend werden die Seiten rechts unter Menü-Struktur als Button dargestellt.

Diese Button kannst du wie erwähnt aufklappen. Im Feld Angezeigter Name kannst du den Namen der Seite ändern. Wichtig: Wenn du hier den Seitennamen änderst, dann ändert sich nicht die URL der Seite! Es wird lediglich die Linkbezeichnung innerhalb des Menüs geändert. Du kannst den Seiten also nach Herzenslust an dieser Stelle neue Namen vergeben.

Schritt 5

So ordnest du dem Hauptmenü eine Position im Theme zu

Nun muss WordPress noch mitgeteilt werden, an welcher Stelle der Website dein neues Menü stehen soll. Soll es im Header stehen? Oder im Footer? Auch das ist kein Hexenwerk: Du setzt einfach einen Haken. Das machst du so: Im selben Feld – im Feld Menü-Struktur – findest du die Option Menü-Einstellungen. Darunter 4 Auswahlfelder, die du jetzt anklicken kannst. Da dein neues Menü als Hauptmenü erscheinen soll, muss die Checkbox Hauptmenü angeklickt werden. Ganz simpel. Oder?

Dasselbe wird später mit dem horizontalen Footermenü und dem Sekundären Menü gemacht.

Seiten automatisch hinzufügen: Diese Auswahlbox kann ebenfalls angeklickt werden. Ich lass diese Box immer deaktiviert, denn es gibt immer mal Seiten, die nicht hinzugefügt werden sollen (wie das Impressum). Zum Abschluss speichern nicht vergessen.

5 Fehler, die du beim Erstellen eines Menüs vermeiden solltest

1. Das Menü hat zu viele Links

Wenn das horizontale Hauptmenü zu viele Menüeinträge hat, wird es unübersichtlich für deine Besucher. Denn die Leser haben keine Zeit zu raten, wo genau was sein könnte… Ein anderer Punkt ist die geringe Aufmerksamkeit für Details: Die Besucher wollen sich auf die Inhalte konzentrieren. Bedienelemente wie Menüpunkte sollten deshalb schnell verstanden werden. Es gibt Untersuchungen, wonach bis zu 7 Links noch gut in Erinnerung bleiben. Je besser Elemente im Gedächtnis bleiben, desto schneller kann sich die Besucherin durch die Website navigieren: Sie muss nicht ständig suchen und überlegen.

2. Die Navigationsleiste läuft zu breit

Manchmal sehe ich horizontale Navigationen, die zwar eine übersichtliche Anzahl an Links haben, aber zu breit laufen. Zu breit laufende Menüs sind natürlich genauso problematisch. Passieren kann das, wenn für die Links im Menü Wörter gewählt werden, die einfach zu lang sind. Bei kleinen Monitoren wie Tablets in der Queransicht oder Notebooks reicht dann der Platz nicht mehr aus – das Menü erhält einen Umbruch. In einem Menü mit Umbruch kann man schlimmstenfalls nicht mehr navigieren, weil sich die Links überlagern oder weil das Submenü nicht mehr angeklickt werden kann. Deshalb: Die Website auch immer auf kleinen Displays ausprobieren.

3. Unwichtige Links im Hauptmenü

Klar, das Impressum ist wichtig. Aber nicht für deine Besucher. Jedenfalls in der Regel. Das Impressum und andere rechtliche Angaben wie der Datenschutzhinweis sind gesetzliche Vorgaben. Es sind Seiten, die die meisten Besucher eher selten bis gar nicht besuchen. Warum also sollten ausgerechnet gesetztliche Pflichtangaben im Hauptmenü stehen? Schließlich ist dort am wenigsten Platz. Mein Tipp: Stell solche Links ganz nach unten. In die unterste Footerleiste.

4. Die Schrift der Links ist schlecht zu lesen

Zu kleine Schrift oder ein schlechter Kontrast: Wenn die Schrift im Hauptmenü nur undeutlich gelesen werden kann, dann muss mehr Zeit investiert werden, um die einzelnen Seiten zu finden. Die Besucher werden unnötig aufgehalten und springen unter Umständen entnervt ab. Mach es deinen Lesern so einfach wie möglich, deine Seiten zu finden. Ein wichtiger Schritt dahin ist eine gut lesbare Navigation.

5. Stumme Links: Menüpunkte, die nichts aussagen

Anbahnung, Mag ich, Katzenliebe… Was mag sich wohl hinter diesen Menüpunkten verbergen? Schwachpunkte eines Menüs sind Linkeinträge (Menüpunkte), die man nicht versteht. Mach es auch hier deinen Besuchern so einfach wie möglich. Lass sie nicht raten, sondern wähle „sprechende“ Links. Gut sind Begriffe, bei denen ohne zu überlegen sofort klar ist, welche Seiten man dahinter findet. „Über mich“? Klar, hier schreibt jemand über sich, was ihn oder sie ausmacht oder ihr Werdegang. „Kontakt“? Versteht sich von selbst, was dort zu finden ist. Auch wenn’s mal langweilig wirkt – du tust deinen Besuchern einen Riesengefallen, wenn du dich an anderer Stelle kreativ austobst.