Beitrag teilen:

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.

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.

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.

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?

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

Beitrag teilen:

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.

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 Bereiche nicht wieder gelöscht werden.

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.

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.

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?

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

Beitrag teilen:

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.

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.

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.

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.

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:

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.

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.

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

Beitrag teilen:

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

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.

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:

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>

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.

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!

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:

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' );

Ö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!

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!

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