So schützt du deine Mails einfach mit SPF, DMARC und DKIM

Geschrieben von Fabian Heinz am 27. Mai 2022. Veröffentlicht in Tutorials. Keine Kommentare zu So schützt du deine Mails einfach mit SPF, DMARC und DKIM

Beitrag teilen:

Inhalte:

Was ist E-Mail-Spoofing?

Um herauszufinden wie man seine Mails schützt sollte man sich erst einmal der Problematik bewusst werden.

Grundsätzlich ist es so, dass bei Mails nicht geprüft werden kann ob der Sender tatsächlich der ist, der er vorgibt zu sein.
Soll heißen: Ich kann im Namen eines beliebigen Anderen Mails versenden. Das ist technisch ohne weiteres möglich.

So könnte ich zum Beispiel ganz leicht eine Mail schreiben, bei der als Absender nicht Fabian Heinz steht, sondern stattdessen Max Mustermann. Dein Outlook, Thunderbird, Google-Mail oder Apple-Mail, eigentlich grundsätzlich jeder Mail-Client, wird als Absender auch Max Mustermann anzeigen.

Grund ist, dass in den Mail-Clients immer auf den so genannten From-Header zugegriffen wird. In diesem steht die vermeintliche Absender-Adresse und der Absender-Name.

Diesen kann ich nun modifizieren, um dem Empfänger Glauben zu machen, dass ich Max Mustermann bin und zum Beispiel Geld brauche.

Wann wird E-Mail-Spoofing gefährlich?

Wie du dir nun vielleicht vorstellen kannst ist das alles ein ziemlich kritisches Thema.

Beispielsweise wird bei Phishing-Mails oft das E-Mail-Spoofing angewandt. Das mag so lange noch einigermaßen unproblematisch sein solange am Namen noch erkennbar ist dass es sich möglicherweise um Spam handelt – ich kenne z.B. keinen Charles Berthought.

Was aber nun, wenn das ein gezielter Phishing-Angriff ist? Wenn jemand im Namen und der Mailadresse eines guten Freundes schickt oder eines tatsächlichen Verwandten?
Würdest du dem dann genauso kritisch gegenüber stehen? Nein, natürlich nicht. Ich auch nicht.

Oder was, wenn dir deine Bank eine Mail schickt – gut aufgebaut, mit Logo usw – und dich um Freigabe einer Einzahlung bittet? Du musst nur deine Online-Banking-Daten, also Benutzername und Passwort, eingeben und schon ist die Einzahlung bestätigt. Nur ein Problem: Die Mail ist nicht von deiner Bank. Jetzt hast du deine Bank-Zugangsdaten irgendeiner Person gegeben!

Das wirklich gefährliche ist, dass oft der Name und die E-Mail-Adresse sogar übereinstimmen! Hier ein Beispiel einer Mail, die ich vor Kurzem bekommen habe:

Die Mail sieht sehr echt aus, ist aber dennoch Phishing. In diesem Fall wird versucht 50€ von mir zu ergaunern, indem sich auf Zollgebühren berufen wird.

Der Absender ist auch, wie oben markiert, die Deutsche Post, auch mit einer offiziellen E-Mail-Adresse der Post.
Das kann einem leicht Glauben machen, dass es sich tatsächlich um eine Mail der Post handelt.

Was kann ich tun um die Fälschung zu verhindern und die Mail-Sicherheit zu erhöhen?

Grundsätzlich kannst du nur etwas dagegen tun, wenn du Inhaber einer eigenen Domain bist und Zugriff auf die DNS-Einstellungen hast.

Wie oben schon angeschnitten ist es Mails erstmal technisch nicht möglich zu validieren ob der Absender auch tatsächlich korrekt ist. Um dieses Problem zu lösen wurden nachträglich mehrere Mechanismen hinzugefügt, die eben dies prüfen sollen.

Hier kommen nun SPF, DKIM und DMARC ins Spiel.

SPF prüft, ob die IP des sendenden Servers auch autorisiert ist, von der E-Mail-Adresse aus zu versenden.

DKIM signiert die ausgehenden Mails und der Empfänger prüft, ob die Signatur korrekt ist.

DMARC gibt Empfehlungen an den Empfänger, wie mit fehlgeschlagenen SPF- oder DKIM-Prüfungen umgegangen werden soll und kann den Sender benachrichtigen, ob solch eine Prüfung fehlgeschlagen ist.

So schützt du deine Mails einfach mit SPF, DMARC und DKIM

Das Problem hier ist leider auch, dass bei allen drei Methoden der Empfänger der ist, der entscheidet ob die Prüfungen überhaupt stattfinden. Trotzdem ein Apell an dich: Richte deinen Server und deine Domains mit diesen Methoden ein und aktiviere auch die Prüfungen – deine Mails werden es dir danken und deine Mail-Sicherheit ist ein Stück höher.

Was muss ich nun konkret tun?

Füge folgende TXT-Records in deinen DNS hinzu, um die Richtlinien zu aktivieren:

SPF

Die SPF-Richtlinie aktivierst du für deine Domain mit folgendem TXT-Eintrag:

v=spf1 a mx ~all

Damit erlaubst du, dass alle IPs, die in A-Records oder MX-Records deiner Domain stehen, versendet werden dürfen. Falls die Prüfung fehlschlägt, wird die Mail als Spam markiert. Wenn du noch mehr Einstellungen vornehmen möchtest, empfehle ich dir den SPF Generator.

DKIM

Der DKIM-Eintrag ist etwas komplexer – zuerst muss am Server ein DKIM-Schlüssel generiert werden, über den die Mail dann verschlüsselt wird. Wie genau das bei deinem Anbieter geht, musst du leider konkret dort erfragen. Diesen Key kannst du dann auch als TXT-Record hinterlegen.
Üblicherweise sieht er etwa so aus:

v=DKIM1; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKLDoDexpLwJUJo+d7UuMWOQh3pP7jq91WMBNVoKSgs+0WgR0YJttsjtmknmQDGuFzHxweG6JsxVQxlqgzKTAux4uK7qSCGvY1Q/+nMROTyVZ75F3GNVnjUb54DOsSbiUi4VtTMpaCMBuS6IubsYl4kwK0nxTAITYVsVD75ouLnIxMYIAQIDAGGL;

DMARC

Der DMARC-Eintrag ist wieder etwas einfacher:

v=DMARC1; p=quarantine;

Hier wird dem Empfänger empfohlen, dass alle fehlgeschlagenen Mails als Spam markiert werden sollten.
In den weiteren Einstellungen könntest du zum Beispiel Benachrichtigungen an den Absender aktivieren. Wie der Eintrag dann aussehen würde, kannst du bei dem DMARC Generator erstellen lassen.

Fazit

Leider sind die Mechanismen noch nicht so wirklich weit verbreitet. Dennoch lohnt es sich sie zu implementieren – damit wird das E-Mail-Protokoll ein Stück weit sicherer. Und vor allem kann sich niemand als du ausgeben.
Der Aufwand zur Erhöhung deiner Mail-Sicherheit hält sich ja auch in Grenzen, also, worauf wartest du noch?

Bei weiteren Fragen bin ich natürlich wie immer gern in den Kommentaren für dich da!

Ein Beitrag von

Weitere Beiträge dieser Kategorie

So erstellst du eine neue Menü-Position in deinem WordPress-Theme

Geschrieben von Fabian Heinz am 1. Mai 2022. Veröffentlicht in Tutorials, WordPress. 2 Kommentare zu So erstellst du eine neue Menü-Position in deinem WordPress-Theme

Beitrag teilen:

Inhalte:

Wann kann ich Menüs in eigene Menü-Positionen einfügen?

Generell kannst du das immer, sobald du Zugriff auf den Code des verwendeten Themes hast.
Ich empfehle jedoch vorher ein WordPress Child-Theme anzulegen, damit bei einem Theme-Update die Menü-Positionen nicht wieder gelöscht werden.

Was sollte ich vorbereiten, um die Position zu erstellen?

Suche dir am besten schon mal die .php-Datei heraus, welche letztendlich die Menü-Position integrieren soll.
Normalerweise sind das die Dateien die in /wp-content/themes/<dein-theme>/ liegen – jedoch nicht die functions.php.
Diese Datei kannst du dennoch auch öffnen, in ihr muss die neue Menü-Position registriert werden.
Wenn du dir nicht sicher bist welche Datei das ist, kommentiere hier gerne.

Wenn du kein Programm zur Bearbeitung von Code installiert hast empfehle ich dir Notepad++.
Für unseren Anwendungszweck ist es nahezu perfekt – klein, schnell und flexibel.
Alternativ kannst du die Dateien aber auch einfach mit dem Windows-Editor öffnen.

Wie erstelle ich nun eine neue Menü-Position?

Die Erstellung ist eigentlich gar nicht so schwer.

Öffne in einem Texteditor deiner Wahl die functions.php deines Themes. Diese findest du im WordPress-Installationsverzeichnis unter /wp-content/themes/<dein-theme>/

Füge nun folgenden Code-Schnipsel ganz unten ein (aber bitte, falls vorhanden, noch vor ?>).

function fhw_register_new_menu() {
    register_nav_menu( 'mein-neues-menu', __( 'Meine neue Menü-Position' ) );
}
add_action( 'init', 'fhw_register_new_menu' );

Ersetze nun die kursiv markierten Texte mit Texten deiner Wahl.
mein-neues-menu bezeichnet hierbei die eindeutige ID der Menü-Position. Diese darf nur einmal vergeben werden.
Meine neue Menü-Position ist der Name der Position, so wie sie auch im Adminbereich unter „Positionen“ und im Customizer angezeigt wird.

Der Website-Besucher wird von den beiden oben stehenden Texten nichts sehen können. Sie dienen nur der Ansicht und Übersichtlichkeit für dich im Admin-Bereich.

Nun bearbeite eine Webseiten-Datei deiner Wahl, dort wo die Menü-Position angezeigt werden soll und füge folgenden Code dort ein:

wp_nav_menu( 
    array( 
        'theme_location' => 'mein-neues-menu'
    )
);

Beachte, dass hier mein-neues-menu mit der oben vergebenen id übereinstimmen muss, sonst fehlt die Verknüpfung und deine neue Position funktioniert nicht.

Speichere nun die Dateien und lade Sie auf deinen Server. Wenn du WordPress lokal installiert hast, entfällt dieser Schritt.

Nun rufe im Adminbereich „Design“ -> „Menüs“ auf. Dort sollte deine neu erstellte Position nun vorzufinden sein.

So erstellst du eine neue Menü-Position in deinem WordPress-Theme

Du kannst nun hier ein beliebiges Navigationsmenü hinterlegen. Ob du das für Links im Footer, im Header oder wo auch immer nutzt, ist ganz dir überlassen!

War doch nicht schwer, oder?

Fazit

Das Erstellen einer neuen Menü-Position benötigt kaum Arbeitszeit. Man nutzt diese Möglichkeit, wenn das Theme keine vorkonfigurierte Position an der gewünschten Stelle einbindet.
So machen sie in Seitenleisten Sinn, in Fuß- und Kopfbereichen oder auf festen Positionen im Inhalt.
Um also weitere Menüs in deiner Webseite einzubinden ist nicht wirklich viel Arbeit erforderlich und es ist auch nicht unbedingt ein Programmierer dafür notwendig.
Trotzdem ist natürlich ein bisschen Vorsicht geboten – Fehler im Code können Errors auf der Website hervorrufen und dann ist sie nicht mehr aufrufbar.

Hat dir dieser Beitrag geholfen? Dann freue ich mich sehr über dein Feedback in den Kommentaren!

Ein Beitrag von

Weitere Beiträge dieser Kategorie

Die 4 wichtigsten Web-Requests schnell und einfach erklärt

Geschrieben von Fabian Heinz am 12. Januar 2022. Veröffentlicht in Tutorials. Keine Kommentare zu Die 4 wichtigsten Web-Requests schnell und einfach erklärt

Beitrag teilen:

Inhalte:

In der IT stößt man gelegentlich auf den Begriff „Request“. Aber was genau steckt hinter dem Begriff, wofür verwendet man es und was gibt es zu beachten?
Das alles erfährst du in diesem Beitrag.

Was ist eine Request?

Eine Request ist ein Aufruf einer bestimmten URL (API, Schnittstelle). Dieser Aufruf findet durch ein Programm statt, beispielsweise mittels fetch in JavaScript.
Dein Browser macht z.B. genau das, wenn du eine Website aufrufst: Er sendet eine GET-Abfrage ab, empfängt den Inhalt der Webseite und rendert ihn.
Diese Art der Abfragen nennt man auch AJAX.

Welche Request-Arten gibt es?

Requests können mit verschiedenen Methoden gemacht werden.

Ich werde hier beispielsweise mit meiner testapi verschiedene Anfragenausführen (JavaScript), um dir deren Funktionsweise zu verdeutlichen.
Weitere Infos erhältst du z.B. bei der offiziellen Übersicht von MDN.

GET

Bei GET erhält der Absender (JavaScript) Daten vom Server. GET sollte auch ausschließlich hierfür verwendet werden.

fetch('https://testapi.fabian-heinz-webdesign.de/simple-json-api/')
    .then(data => data.json())
    .then(console.log);

Bei dem Code wird eine Request an https://testapi.fabian-heinz-webdesign.de/simple-json-api/ geschickt, die empfangenen Daten werden zu JSON transformiert und dann über console.log ausgegeben.
Du kannst den API-Link gerne anklicken, dann siehst du was genau der Fetch von der API empfängt.
In diesem Fall wird ein Array zurückgeliefert, das einzelne Objekte enthält:

[
    {"name":"Test1", "id": 1},
    {"name":"Test2", "id": 2},
    {"name":"Test3", "id": 3},
    {"name":"Test4", "id": 4},
    {"name":"Test5", "id": 5}
]

Ein anderer GET kann z.B. auch auf https://testapi.fabian-heinz-webdesign.de/simple-text-api/ abgesetzt werden, dort wird dann mit Texten gearbeitet.

GET kann allerdings auch einfachen Text, HTML, XML oder sonst alles mögliche zurückgeben.

POST

POST sendet ein einzelnes Objekt an den Server, welcher das Objekt weiter verarbeitet.
Hierzur benötigen wir ein Objekt, in diesem Fall in JSON, welches wir an den Server senden können:

var data = {
    id: 6,
    name: "Test6"
}

fetch("https://testapi.fabian-heinz-webdesign.de/simple-json-api/", { method: "POST", body: JSON.stringify(data) })
    .then(data => data.json())
    .then(console.log);

Hier wird dann ein POST an https://testapi.fabian-heinz-webdesign.de/simple-json-api/ gesendet und über den Parameter „body“ die Daten aus der Variable „data“ in einen String gecastet und übergeben.
Diesen Anfrage kannst du im Browser leider nicht durch anklicken feststellen, da ein normaler Aufruf nur GET unterstützt.
Wenn du die Anfrage dennoch testen möchtest, kannst du Postman installieren und dort eine POST-Anfrage absetzen.

Dort können dann, genauso wie bei GET, entsprechend Daten zur Weiterverarbeitung zurückgegeben werden, weshalb wir auch hier wieder die .then-Methoden ausführen.

DELETE

DELETE löscht, wie der Name schon sagt, das mitgesendete Objekt.

fetch("https://testapi.fabian-heinz-webdesign.de/simple-json-api/6", { method: "DELETE" })
   .then(data => data.json())
   .then(console.log);

Beim DELETE wird in der URL die ID des zu löschenden Objekts übergeben. Sofern dieses Objekt existiert, wird es dann gelöscht.

Theoretisch können auch hier wieder Daten zurück geliefert werden.

Allgemeine Hinweise

Arbeiten mit eindeutigen Identifikationen

Generell sollte man immer mit IDs arbeiten (z.B. für die Primärschlüssel in einer Datenbank), um ganz eindeutig Werte zuweisen zu können.

Fehlerbehandlung

Bei jeder Anfrage an externe Server können auch Fehler erzeugt werden. Hierbei muss man unterscheiden zwischen gewollten Fehlern und zwischen ungewollten Fehlern.
Gewollte Fehler werden von der API ausgelöst, z.B. 404 (Not found) oder auch 500 (Internal Error). Diese Fehler kannst du in .then() prüfen und entsprechend behandeln.
Ungewollte Fehler allerdings müsstest du mit der .catch()-Methode ausführen und dort entsprechend behandeln. Diese werden dann beispielsweise ausgeführt wenn ein CORS-Fehler auftritt oder die URL nicht im DNS auflöst.

Eine Auflistung aller StatusCodes bekommst du ebenfalls in der Liste von MDN.

Aktualisierung der Anzeige

Nachdem ein DELETE, PUT oder POST durchgeführt wurde, empfiehlt es sich die angezeigten Daten erneut über einen GET zu laden, damit dort auch der aktuelle Stand angezeigt wird.
Dazu ist es sinnvoll die GET-Anfrage und deren weitere Verarbeitung in eine Funktion zu verpacken, die dann einfach im .then()-Bereich der DELETE, PUT oder POST-Anfrage aufgerufen wird.

Ein Beitrag von

Weitere Beiträge dieser Kategorie

So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

Geschrieben von Fabian Heinz am 8. Oktober 2021. Veröffentlicht in Tutorials, WordPress. Keine Kommentare zu So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

Beitrag teilen:

Inhalte:

Was sind WordPress Widget-Bereiche und wofür kann ich sie einsetzen?

Nun, einfach erklärt: das sind Bereiche, in welchen die Widgets von WordPress angezeigt werden können.
Widgets können Textbereiche, HTML-Code, Bilder oder vieles mehr sein. Es gibt Plugins, die fügen weitere Widgets hinzu, WooCommerce zum Beispiel, wenn man einen Shop betreiben möchte.
Sie dienen also dem einfachen Updaten und Einfügen von Elementen innerhalb der Webseite aber außerhalb vom Editor der Seiten und Beiträge.

Mehr Infos zum Thema Widgets erhältst du auf der offiziellen Erklärungs-Seite von WordPress.

Wann kann ich WordPress-Widgets in eigene Widget-Areas einfügen?

Was sollte ich vorbereiten?

Suche dir am besten schon mal die .php-Datei heraus, welche letztendlich das Widget integrieren soll.
Normalerweise sind das die Dateien die in /wp-content/themes/<dein-theme>/ liegen – jedoch nicht die functions.php.
Diese Datei kannst du dennoch auch öffnen, in ihr muss die Widget-Area registriert werden.
Wenn du dir nicht sicher bist welche Datei das ist, kommentiere hier gerne.

Wie erstelle ich einen eigenen Widget-Bereich?

Die Erstellung ist eigentlich gar nicht so schwer.

Öffne in einem Texteditor deiner Wahl die functions.php deines Themes. Diese findest du im WordPress-Installationsverzeichnis unter /wp-content/themes/<dein-theme>/

Füge nun folgenden Code-Schnipsel ganz unten ein (aber bitte, falls vorhanden, noch vor ?>).

add_action( 'widgets_init', 'fhw_register_custom_widget_area' );
function fhw_register_custom_widget_area() {
    register_sidebar(
        array(
            'id' => 'neue-widget-area',
            'name' => esc_html__( 'Meine Widget-Area' ),
            'description' => esc_html__( 'Ein eigener Bereich' ),
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '',
            'after_title' => ''
        )
    );
}

Ersetze nun die kursiv markierten Texte mit Texten deiner Wahl.
neue-widget-area bezeichnet hierbei die eindeutige ID der Area. Diese darf nur einmal vergeben werden.
Meine Widget-Area ist der Name der Area, so wie sie auch im Adminbereich unter „Widgets“ angezeigt wird.
Ein eigener Bereich ist lediglich die Beschreibung, wie sie im Customizer angezeigt wird.

Der Website-Besucher wird von den drei oben stehenden Texten nichts sehen können. Sie dienen nur der Ansicht und Übersichtlichkeit für dich im Admin-Bereich.

Nun bearbeite eine Webseiten-Datei deiner Wahl, dort wo das Widget angezeigt werden soll und füge folgenden Code dort ein:

<?php dynamic_sidebar( 'neue-widget-area' ); ?>

Beachte, dass hier neue-widget-area mit der oben vergebenen id übereinstimmen muss, sonst fehlt die Verknüpfung und dein Bereich funktioniert nicht.

Speichere nun die Dateien und lade Sie auf deinen Server. Wenn du WordPress lokal installiert hast, entfällt dieser Schritt.

Nun rufe im Adminbereich „Design“ -> „Widgets“ auf. Dort sollte dein neu erstellter eigener Widget-Bereich nun vorzufinden sein.

Du kannst nun also hier Navigationsmenüs, Bilder, Texte, HTML oder viele andere Widgets einbinden – und sie werden genau an der Stelle angezeigt wo du den Code hinterlegt hast.

Gar nicht so schwer, oder?

Fazit

Das Erstellen einer eigenen Widget-Area benötigt kaum Arbeitszeit und bietet sich vor allem dann an, wenn sich Inhalte häufig ändern.
So machen sie in Seitenleisten Sinn, in Fuß- und Kopfbereichen oder auf festen Positionen im Inhalt.
Um also weitere Widgets in deiner Webseite einzubinden ist nicht wirklich viel Arbeit erforderlich und es ist auch nicht unbedingt ein Programmierer dafür notwendig.
Trotzdem ist natürlich ein bisschen Vorsicht geboten – Fehler im Code können Errors auf der Website hervorrufen und dann ist sie nicht mehr aufrufbar.

Hat dir dieser Beitrag geholfen? Dann freue ich mich sehr über dein Feedback in den Kommentaren!

Ein Beitrag von

Weitere Beiträge dieser Kategorie

Wie du schnell und einfach ein WordPress Child-Theme erstellst

Geschrieben von Fabian Heinz am 13. September 2021. Veröffentlicht in Tutorials, WordPress. 1 Kommentar zu Wie du schnell und einfach ein WordPress Child-Theme erstellst

Beitrag teilen:

Inhalte:

Was ist ein Child-Theme und warum brauche eines?

Child-Themes sind, grob gesagt, Klone von bestehenden Themes.
Natürlich denkst du jetzt „Warum sollte ich so eines nutzen wenn ich doch das Haupttheme direkt nutzen kann?“. Berechtigte Frage, der Grund hat jedoch einen sehr technischen Hintergrund.

Es kann immer einmal vorkommen, dass du Anpassungen im Quellcode des Themes vornehmen musst. Sei es weil du zusätzliche Inhalte einbetten, einen weiteren Widgetbereich oder eine neue Menü-Position erstellen möchtest.
Nimmst du nun diese Anpassungen direkt im Haupt-Theme vor, werden die Änderungen beim nächsten Update des Themes wieder überschrieben und sind wieder wie vorher. Dann musst du die ganzen Anpassungen erneut von Vorne machen.

Deshalb erstellt man WordPress Child-Themes. Diese Child-Themes sind erstmal leer, und wenn du eine Datei bearbeiten möchtest, kopierst du die Datei vom Haupt-Theme-Ordner an die gleiche Stelle im Child-Theme-Ordner.
Nun kannst du beruhigt deine Änderungen an dieser kopierten Datei machen, da bei einem Update des Hauptthemes nur die Datei im Haupt-Theme-Ordner überschrieben wird.

Ein weiterer Vorteil: Hierdurch kannst du in deiner Themes-Liste ein eigenes Theme stehen haben, wie du im folgenden Screenshot siehst.

Aus welchen Themes kann ich ein Child-Theme erstellen?

Die Antwort ist einfach:
Aus jedem!

WordPress hat die Theme-Struktur extra so erstellt, dass man von jedem Plugin ein Child-Theme erstellen kann, um eben dort sicher Anpassungen vornehmen zu können.

Wie erstelle ich ein WordPress-Child-Theme?

Hier kommt nun die Erklärung, wie du ein solches Child-Theme erstellen kannst.
Ich unterscheide in zwei verschiedene Möglichkeiten, einmal mittels einem Plugin und einmal den manuellen Weg.

Ein Child-Theme über ein Plugin erstellen

Für die Erstellung eines Child-Themes empfehle ich das Plugin Child Theme Wizard, auf welches ich in diesem Tutorial näher eingehen möchte.

Zu Anfang muss das Plugin natürlich installiert und aktiviert werden.

Navigiere danach zu „Werkzeuge -> Child Theme Wizard“.
Du siehst nun das folgende Fenster:

Wähle nun bei „Parent Theme“ dein gewünschtes Haupt-Theme aus, welches geklont werden soll.

Unter „Title“ darfst du den Namen des Themes rein schreiben, bei meinem Beispiel oben ist es „fabian heinz webdesign theme“.
„Description“ kann eine Beschreibung beinhalten, darf aber auch leer gelassen werden.
„Child Theme URL“ kann in den meisten fällen auch leer gelassen werden. Dies füllst du nur aus, wenn du eine extra Website für dein Child-Theme hast.
„Author“ dürfte schon mit deinem Namen vorausgefüllt sein. Wenn nicht, trage hier deinen Namen ein.
„Author URL“ kann auch leer gelassen werden oder aber einen Link zu deiner Website enthalten.
„Version“ ist mit 1.0 vorausgefüllt und kann auch so belassen werden.
„Include GPL License“ stelle ich persönlich immer auf „No Thanks“, da das Theme privat ist und ich es nicht weiter verbreite.

Das Formular sollte nun so aussehen:

Klicke anschließend auf „Create Child Theme“.

Wenn nun alles funktioniert hat, sollte „Your Child Theme was created successfully!“ in der grünen Erfolgsbox stehen.

Navigiere nun zu „Design -> Themes“ um das Plugin zu aktivieren.

Das wars!
Du kannst nun updatesicher Anpassungen in deinem Child-Theme vornehmen, den Quellcode bearbeiten oder auch komplett ändern.

Möchtest du nun noch das Bild des Themes in der Themeübersicht ändern, navigiere via FTP in deinen „/wp-content/themes/“-Ordner, dort in dein neu erstelltes Theme und ersetze einfach die „screenshot.png“-Datei.

Wenn du das Ganze lieber manuell machst, kommt hier die Anleitung dazu.

Manuell ein Child-Theme erstellen

Um ein Child-Theme manuell zu erstellen musst du zuerst einmal mittels FTP auf deinen Server verbinden.
Handelt es sich um eine lokale Installation, navigierst zu zu deinem WordPress-Ordner (meistens in „C:\xampp\htdocs“).

Nun gehe in den Ordner /wp-content/themes.
Erstelle dort einen Ordner mit einem Namen deiner Wahl. Nutze hierzu bitte KEINE Leerzeichen. Ich empfehle ausschließlich Kleinschreibung und Bindestriche.
Nun merke dir bitte den Namen des Ordners deines Eltern-Themes.

Dein „/wp-content/themes“-Ordner sollte nun so aussehen:

Ordnerstruktur eines WordPress-Child-Themes

Nun navigiere in deinen soeben erstellten Ordner, bei mir ist es „fabian-heinz-webdesign-theme“.
Lege dort eine Datei namens „style.css“ an und fügt folgenden Inhalt ein:

/* 
     Theme Name: Mein eigenes Theme
     Description: Das tollste Theme überhaupt
     Author: Fabian Heinz
     Author URI: https://fabian-heinz-webdesign.de
     Template: twentytwentyone
     Version: 1.0 
     Text Domain: fabian-heinz-webdesign-theme
*/

Hier musst du jedoch die Zeilen etwas anpassen.

Unter „Theme Name“ darfst du den Namen des Themes rein schreiben.
„Description“ kann eine Beschreibung beinhalten, darf aber auch leer gelassen werden.
„Author“ dürfte schon mit deinem Namen vorausgefüllt sein. Wenn nicht, trage hier deinen Namen ein.
„Author URI“ kann auch leer gelassen werden oder aber einen Link zu deiner Website enthalten.
Trage nun bei „Template“ den vorher gemerkten Ordnernamen des Eltern-Themes ein.
„Version“ sollte auf 1.0 belassen werden.
„Text-Domain“ muss der von dir gewählte Ordnername sein, in meinem Fall „fabian-heinz-webdesign-theme“.

Bitte prüfe anschließend, dass keine Leerzeichen hinter den einzelnen Zeilen stehen.

Nun speichere die Datei und lade Sie auf den Server hoch (entfällt bei lokalen Installationen).

Wenn du deinem Theme noch ein Thumbnail geben möchtest, lade die Bilddatei hoch und benenne Sie „screenshot.png“.

Wenn du nun in WordPress auf „Design -> Themes“ gehst, wird dir das Theme angezeigt.

Du kannst das Theme nun aktivieren und nutzen.

Wie passe ich nun den Code korrekt an?

Nun, das ist nicht schwer.
Du gehst via FTP in den Themes-Ordner deines Eltern-Themes (in /wp-content/themes/) und lädst die Datei, die du ändern möchtest, herunter.
Danach lädst du sie an der gleichen Stelle in deinem Theme-Ordner wieder hoch.

Die soeben hochgeladene Datei kannst du nun ganz nach deinem Belieben bearbeiten.

Fazit

Es ist wirklich nicht schwer ein Child-Theme zu erstellen.
Man hat hierdurch den Vorteil, dass man updatesicher Anpassungen vornehmen kann – welche bei einem normalen Theme überschrieben werden würden.

Ein Beitrag von

Weitere Beiträge dieser Kategorie

Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

Geschrieben von Fabian Heinz am 26. Juli 2021. Veröffentlicht in Tutorials, WordPress. 9 Kommentare zu Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

Beitrag teilen:

Inhalte:

Manchmal muss FontAwesome lokal eingebunden werden.
Wer die Icon-Bibliothek FontAwesome jetzt noch nicht kennt und verwendet hat wirklich was verpasst.
Mit über 1600 Icons in über 70 Kategorien, sowohl für den Desktop als auch für Websites, ist das Open-Source-Projekt eine der größten kostenfreien Icon-Sammlungen unserer Zeit.
Aber die Einbindung der Icons über das Content-Delivery-Network (CDN) von FontAwesome ist nicht DSGVO-Konform – somit bleibt nichts anderes übrig als die Icons selbst auf dem Webspace lokal zu hosten.
Ich gehe hierbei ausschließlich auf die Einbindung auf Websiten (ohne und mit WordPress) ein.

Im Folgenden erfährst du, wie das ganz einfach mit kaum Aufwand super leicht umsetzen kannst.

Bevor wir richtig beginnen, musst du

Die Icon-Sammlung herunterladen

Lade die aktuelle Datei einfach unter https://fontawesome.com/start herunter. Wähle dort „Download“ und lade die .zip-Datei auf der folgenden Seite herunter.
Anschließend entpacke Sie in einen Ordner deiner Wahl.

Wie du FontAwesome lokal ohne WordPress auf deiner Website einbinden kannst

1. Hochladen der Icon-Sammlung auf den Webspace

Erstelle nun einen Ordner auf deinem Webspace, also der ersten Ebene (dort, wo die index.html liegt). In meinem Beispiel nenne ich ihn „fonts“.
In diesem Ordner erstellst du am besten einen weiteren Ordner und nennst ihn „fontawesome“.
Dort hinein lädst du die eben entpackten Ordner „css“ und „webfonts“.

Die Struktur des Webspaces sollte nun so aussehen:

Struktur des eben angelegten Font-Ordners

2. Einbinden der Icons in den Code

Damit FontAwesome lokal korrekt geladen wird, reicht eigentlich eine einzige Zeile Code im head:

<link rel="stylesheet" href="/fonts/css/all.min.css" />

Bitte achte hierbei drauf, den Pfad entsprechend anzupassen falls dein fonts-Ordner sich wo anders befindet.

In einem bestehenden head-Bereich würde dies dann eingebunden so aussehen:

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Test</title>
      
   <link rel="stylesheet" href="/fonts/fontawesome/css/all.min.css" />
</head>

3. Einfügen der Icons

Um ein Icon anzuzeigen suche dir auf https://fontawesome.com/ oben auf „Icons“ ein Icon raus. Ich werde im Beispiel „github“ verwenden.
Klicke nun das gewünschte Icon an. Oberhalb des Icons hast du nun ein HTML-Element, welches du per Klick kopieren kannst:

Füge den Code nun auf der gewünschten Stelle im body deiner HTML-Datei ein:

<body>
   <i class="fab fa-github-square"></i>
</body>

Das Icon sollte nun korrekt auf deiner HTML-Seite angezeigt werden.

Wie du FontAwesome lokal in deinem WordPress-Theme einbinden kannst

Bevor du beginnst FontAwesome in dein Theme einzubinden möchte ich erwähnen, dass du hier unbedingt ein Child Theme anlegen solltest, da sonst bei einem Theme-Update dein FontAwesome wieder gelöscht sein könnte!

Gut, ich gebe zu, hier sind es etwas mehr als 2 Zeilen – aber es ist nicht schwieriger!

1. Die Icon-Sammlung in dein Theme hochladen

Erstelle nun einen Ordner innerhalb des Theme-Ordners (/wp-content/themes/dein-theme/), also der ersten Ebene (dort, wo die style.css liegt). Auch hier nenne ich ihn „fonts“.
In diesem Ordner erstellst du am einen weiteren Ordner und nennst ihn „fontawesome“.
Dort hinein lädst du die eben entpackten Ordner „css“ und „webfonts“.

Die Struktur deines Theme-Ordners sollte nun so aussehen:

2. Einbinden der CSS-Dateien in das Theme

WordPress bietet eine Schnittstelle, um schnell und einfach CSS-Dateien mit in den HEAD einzuschleusen.

Hierfür bearbeite bitte die functions.php (sollte auf gleicher Ebene deiner style.css sein) und füge folgenden Code ein:

function fhw_themename_register_style() {
    wp_enqueue_style( 'fhw_themename_fontawesome', get_stylesheet_directory_uri() . '/fonts/fontawesome/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'fhw_themename_register_style' );

3. Prüfen, dass FontAwesome lokal korrekt eingebunden und geladen wird:

Öffne nun eine Seite deiner WordPress-Website.
Lass dir dort den Quelltext anzeigen (in Chrome und Firefox Strg + U). Suche dort (Strg + F) nach „awesome“.

Wird dir dort eine Zeile ähnlich wie diese hier angezeigt

<link rel='stylesheet' id='fhw_themename_fontawesome-css' href='http://localhost/wordpress/wp-content/themes/fhw-example/fonts/fontawesome/css/all.min.css?ver=5.7.2' type='text/css' media='all' />

dann klicke auf den Link (in dem Fall http://localhost/wordpress/wp-content/themes/fhw-example/fonts/fontawesome/css/all.min.css?ver=5.7.2).
Wird dir hier der CSS-Code angezeigt, ist soweit alles super!

4. Einfügen der Icons

Auch hier ist der WorkFlow ähnlich wie beim Einbinden Ohne WordPress:

Um ein Icon anzuzeigen suche dir auf https://fontawesome.com/ oben auf „Icons“ ein Icon raus. Ich werde hier erneut „github“ verwenden.
Klicke nun das gewünschte Icon an. Oberhalb des Icons hast du nun ein HTML-Element, welches du per Klick kopieren kannst:

Nun bearbeite eine Seite oder einen Beitrag im WordPress-Backend.

Füge über den Gutenberg-Editor einen Block „individuelles HTML“ ein.
Dort fügst du den eben kopierten Text ein.

Jetzt noch die Seite/Beitrag speichern oder veröffentlichen – schon sollte dort das Icon angezeigt werden!

Fazit

Es ist gar nicht schwer, FontAwesome lokal auf deiner Website einzubinden und die dadurch möglicherweise entstehenden Probleme der DSGVO zu umgehen.
Falls du Hilfe bei der Einbindung brauchst oder weitere Fragen hast darfst du dich natürlich gerne in den Kommentaren melden!

Ein Beitrag von

Weitere Beiträge dieser Kategorie

Netzwerkfreigaben (Samba) in 8 einfachen Schritten in Linux erstellen

Geschrieben von Fabian Heinz am 11. Februar 2020. Veröffentlicht in Tutorials. Keine Kommentare zu Netzwerkfreigaben (Samba) in 8 einfachen Schritten in Linux erstellen

Beitrag teilen:

Inhalte:

Ein Netzlaufwerk ist schon praktisch. Man kann die Netzwerkfreigabe auf beliebigen Rechnern verbinden und die Dateien nutzen. Quasi so, wie eine private Cloud.

Das einzige, was man dafür braucht, ist ein Linux-Server. Wir werden dieses Tutorial anhand eines Debian 9-Servers machen.
Damit deine Cloud dann auch von überall aus erreichbar ist, reicht ein virtueller Server, wie man ihn beispielsweise bei Hetzner mieten kann.
Falls es nur zuhause von allen Rechnern aus funktionieren soll, benötigst du nicht zwingend einen extra Server. Dann kannst du das ganze auch auf einem PC installieren. Da dies aber zu umfangreich wäre, lassen wir das hier raus.

Prozessorleistung oder sonstige technische Daten sind hierbei fast zu vernachlässigen, einzig der Festplattenspeicher ist wichtig.

Doch Achtung!

Ich möchte an dieser Stelle noch darauf hinweisen, dass du aus Sicherheitsgründen, wenn du von einem anderen Netzwerk zugreifen möchtest, eine VPN nutzen solltest.
Das erkläre ich aber an anderer Stelle, da es hier den Rahmen sprengen würde.

1. SSH-Client konfigurieren

Damit wir die Einstellungen auf dem Server vornehmen können, müssen wir mittels SSH auf den Server zugreifen.

Hierzu empfehle ich das Programm Putty (Website). Dieses kannst du hier herunterladen. Dabei muss es nicht installiert werden.
Wenn du das Programm ausführst, sollte es so aussehen:

Dort trägst du als „Host Name“ die IP-Adresse deines Servers ein. Als Port nutzt du Port 22.

Um die Daten zu speichern, klicke einfach auf „Default Settings“ und danach auf „Save“.

2. Verbinden und einloggen

Bitte drücke jetzt auf „Open“.
Es öffnet sich folgendes Fenster:

Als Benutzer gibst du bitte „root“ ein.
Danach wist du aufgefordert, ein Passwort einzugeben. Dazu nutzt du bitte das Passwort des „root“-Benutzers, welches du von dem Server-Anbieter erhalten hast.

3. Installieren von Samba

Um die Freigabe zu erstellen, müssen wir zuerst den Freigabedienst Samba installieren. Dies machst du mittels

apt install samba

Du wirst gefragt, ob du wirklich installieren möchtest. Bestätige diese Meldung einfach mit Enter.

Sollte ein blaues Dialogfenster kommen, gehst du mit den Pfeiltasten auf „Ja“ und bestätige mit Enter.

4. Ordner konfigurieren

Erstelle einen neuen Ordner, in welchem die Dateien der Cloud angelegt und gespeichert werden sollen.

mkdir -p /freigabe/cloud1

Damit wird im Hauptordner (Position /) ein neuer Ordner „freigabe“ mit dem Unterordner „cloud1“ erzeugt.

Jetzt legen wir den Eigentümer und die Gruppen fest, die darauf zugreifen dürfen:

chown root.cloud1 /freigabe/cloud1

Jetzt müssen noch Berechtigungen erteilt werden, damit keine Unberechtigten Personen Zugriff darauf hätten:

chmod 775 /freigabe/cloud1

5. User anlegen

Damit du auf die Netzwerkfreigabe zugreifen kannst, lege eine neue Gruppe an:

groupadd cloud1

Die Gruppe musst du nur einmal anlegen, nicht für jeden Benutzer extra.
Jetzt legen wir noch den Benutzer an:

useradd -g cloud1

Damit ist der Benutzer in Linux registriert. Setze ihm nun noch ein Passwort:

smbpasswd -a <Nutzername>

6. Netzwerkfreigabe erstellen

Um die Konfiguration von Samba zu bearbeiten, führe folgenden Befehl aus:

nano /etc/samba/smb.conf

Damit bist du in einem Linux-Internen Editor. Bewege den Cursor mit den Pfeiltasten ganz nach Unten zum Ende der Datei.
Dort tippe folgendes ein:

[cloud1]
    comment = Cloud 1
    path = /freigabe/cloud1
    write list = @cloud1
    create mask = 0750
    directory mask = 0750

Drücke STRG + O um die Datei zu speichern. Bestätige den Dateinamen mit Enter.
Danach drücke STRG + X, um zur Eingabeaufforderung zurückzukehren.

7. Dienste neustarten

Damit die Änderungen übernommen werden, gib diesen Befehl ein:

systemctl restart smbd

8. Einbinden des Netzlaufwerks

Über Windows können Sie die Netzwerkfreigabe wie folgt einbinden (nur im gleichen Netzwerk!):

Öffne die Eingabeaufforderung in Windows, indem du die Windows-Taste gleichzeitig mit „S“ drücken. Gib dort „CMD“ ein. Auf den Eintrag „Eingabeaufforderung“ machst du bitte einen Rechtsklick und klickst auf „Als Administrator ausführen“.

In der Eingabeaufforderung gib folgendes ein:

net use Z: \\<IP-Adresse>\cloud1 /user:<Nutzername> /persistent:yes

Damit ist die Netzwerkfreigabe eingebunden!

Wie immer: Falls Fragen bestehen, bitte gerne in die Kommentare!

Ein Beitrag von

Weitere Beiträge dieser Kategorie

Einfache Einrichtung der 4 wichtigsten E-Mail-Clients

Geschrieben von Fabian Heinz am 20. Februar 2019. Veröffentlicht in Tutorials. Keine Kommentare zu Einfache Einrichtung der 4 wichtigsten E-Mail-Clients

Beitrag teilen:

Inhalte:

Hier eine kleine Schritt-für-Schritt-Anleitung , wie du schnell und simpel die 4 gängigsten E-Mail-Clients einrichten kannst.
Ich gehe hierbei davon aus, dass du die Programme bereits installiert hast.

Info

Dein Server ist deine E-Mail-Adresse ohne den Text vor dem @, z.B. bei info@fabian-heinz-webdesign.de wäre der Server fabian-heinz-webdesign.de

Du hast noch keine eigene E-Mail-Adresse?
Dann kontaktiere uns für ein Angebot!

Mobil mittels Gmail-App

Klicke auf „Konto hinzufügen“
Wähle „Sonstige“
Gib die gewünschte Mail-Adresse ein.
Wähle „Privat (IMAP)“
Ändere den Server (Punkt 3) auf deinen Server.
Klicke bei „Zertifikat nicht gültig“ auf „Erweitert“.
Scrolle ganz nach unten und bestätige mit „trotzdem fortfahren“
Ändere den Server (Punkt 3) auf deinen Server.
Aktiviere alle Haken
Gib deinen Namen ein. Der Kontoname muss genau so wie deine Mail-Adresse lauten.
Bestätige eventuell aufgehende Meldungen

Mozilla Thunderbird

Starte bitte zunächst dein Thunderbird.
Wähle nun oben rechts die drei Menü-Striche und navigiere zu „Konten-Einstellungen“.

Klicke in dem Fenster unten links auf „Konten-Aktionen“ und wähle „E-Mail-Konto hinzufügen“

Gib im folgenden Fenster unter „Ihr Name“ deinen Namen ein. Dieser wird beim Empfänger als Absender angezeigt.
Bei „E-Mail-Adresse“ gibst du bitte die gewünschte E-Mail-Adresse ein, welche du einbinden möchtest.
Direkt darunter gibst du das zur E-Mail-Adresse gehörige Passwort ein und aktivierst den Punkt „Passwort speichern“.

Bitte bestätige das mit „Weiter“.

Können die Daten erfolgreich geladen werden, solltest du unter deinen Eingaben folgendes sehen:

Bitte wähle beim Protokoll das Feld „IMAP“ aus.
Nun bestätige mit „Fertig“.

Sind alle Einstellungen korrekt, kannst die Mail in Thunderbird jetzt nutzen.
Gegebenenfalls kann es kurz dauern, bis alle Mails vollständig geladen sind.

Microsoft Office Outlook

Wähle in Outlook oben links „Datei“
Mittig oben findest du „Konto hinzufügen“
Gib deinen Namen ein
Gib die gewünschte Mail-Adresse ein
Gib zweimal das dazugehörige Passwort ein
Drücke „Weiter“
Bestätige eventuell aufgehende Meldungen mit „Ja“
Klicke auf „Fertig stellen“

Apple Mail (iMac und MacBook)

Starte die Apple Mail App.
Solltest du bereits ein Konto eingebunden haben, wähle „Mail -> Accounts“ und drücke unten links das Plus-Zeichen.

Im folgenden Fenster wählst du bitte „Anderer Mail-Account“. Gegebenenfalls musst du noch „Mail-Account“ auswählen.

Wähle nun „Fortfahren“.

Trage im nächsten Fenster deinen Namen als Absendenamen ein, füge deine E-Mail-Adresse hinzu und hinterlege das dazugehörige Passwort deines E-Mail-Accounts.

Bestätige mit „Anmelden“.
Im folgenden Fenster kannst du den roten Text unten ignorieren.
Wähle als Accounttyp „IMAP“ aus.
Als Server wähle deine Domain aus, in meinem Fall ist es „fabian-heinz-webdesign.de“.

Auch hier kannst du nun „Anmelden“ klicken.
Sind die Daten korrekt, kannst du auswählen ob du Mail und Notizen mit dem Account verknüpfen möchtest.
Ich wähle hierbei nur Mail, da ich keine accountgebundenen Notizen benötige.

Verknüpfung Mail und Notizen bei Apple Mail

Wenn du dieses Fenster mit „Fertig“ bestätigst, bist du fertig und kannst deinen E-Mail-Account bei Apple Mail nutzen.
Gegebenenfalls kann es kurz dauern, bis alle Mails vollständig geladen sind.

Ein Beitrag von

Weitere Beiträge dieser Kategorie

3 wichtige Tipps, um in Google weiter oben zu stehen

Geschrieben von Fabian Heinz am 1. März 2018. Veröffentlicht in Tutorials. Keine Kommentare zu 3 wichtige Tipps, um in Google weiter oben zu stehen

Beitrag teilen:

Inhalte:

Um bei Google weiter oben zu landen, muss man einige Veränderungen auf der Seite vornehmen.

Jedoch ist mit diesen Tipps das betreiben von SEO (Suchmaschinenoptimierung) relativ einfach.

SEO teilt man in 2 Teile ein:

On-Page-SEO (SEO auf der Internetseite selbst) und Off-Page-SEO (SEO außerhalb der Internetseite).

Ich gehe hier vorwiegend auf On-Page-SEO ein.

Keywords – Für Google entscheidend

… sollen nicht irgendwo platziert werden, sondern müssen perfekt sitzen.

Die Keywords sollten überall present sein. Das heißt nicht, dass jedes dritte Wort aus dem Keyword bestehen soll, da Google dies auch wieder negativ bewertet. Ich empfehle etwa eine Keyword-Dichte von 2,5 %. Das sind bei den empfohlenen 900 Wörtern pro Seite etwa 22 mal.
Nutze für jede Seite ein anderes Keyword! Sonst konkurrieren deine Seiten gegenseitig in Google, nutze lieber Synonyme!
Setze das Keyword gleich in den ersten Satz der Website, damit wird der Leser zum weiterlesen animiert, und Google erkennt rechtzeitig, dass es um dieses Keyword geht.
Füge das Keyword in die Beschreibung der Website (meta discription) ein!
Nutze genügend Überschriften! Organisiere diese gestaffelt von <h1> bis <h6> und nutze (vor allem in der <h1>) das Keyword. Es müssen natürlich nicht alle 6 Überschriften vergeben werden, <h1> bis <h3> reicht im Normalfall auch.

Wichtigster Tipp zum Thema Keywords:

Schreibe die Texte nicht für die Suchmaschine! Schreibe sie für deine Leser. Google merkt das – und bewertet das extrem negativ.

Bilder

- Versehe deine Seite mit möglichst vielen Bildern – Google mag Bilder!
- Füge allen Bildern einen alternativen Text hinzu, damit, falls das Bild nicht angezeigt werden kann, man trotzdem weiß, was dort zu finden sein sollte.
- Mache die Bilder Datenmäßig so klein wie möglich. Kleine Bilder auf der Seite brauchen nicht zwingend eine Auflösung von 1920 Pixeln.
Für die Nutzer von WordPress empfehle ich wärmstens das Plugin Rank Math. Mit dessen Hilfe kann man Seiten und Beiträge sehr gut optimieren.

Ein Beitrag von

Weitere Beiträge dieser Kategorie