So fügen Sie Social Media-Symbole zum WordPress-Menü hinzu

Unabhängig davon, ob Sie eine geschäftliche oder eine private Website betreiben, müssen Sie sicherstellen, dass Benutzer Ihre Inhalte in sozialen Medien teilen können. Deshalb zeigen wir Ihnen in diesem Beitrag, wie Sie Social-Media-Symbole zu Ihrem WordPress-Menü hinzufügen .

Warum Social-Media-Symbole zum WordPress-Menü hinzufügen?

Aktuellen Studien zufolge nutzen fast 50 % der Weltbevölkerung mindestens ein soziales Netzwerk. Das Verbinden Ihrer Website mit Facebook oder das Hinzufügen von Instagram-Feeds zu Ihrer Website sind gute Optionen, aber Sie können noch etwas anderes tun, um Ihre Präsenz in den sozialen Medien auszubauen. Das Menü ist eines der auffälligsten Elemente auf Ihrer Website. Darüber hinaus ist es eines der ersten Dinge, die Benutzer sehen, wenn sie Ihre Website besuchen. Schauen Sie sich zum Beispiel das Hauptmenü unserer Website an.

Um Ihre Website anzupassen und Ihre Social-Media-Kanäle optimal zu nutzen, können Sie Ihrem WordPress-Menü Social-Media-Symbole hinzufügen. Darüber hinaus können Sie Symbole in anderen Bereichen Ihrer Website anzeigen, die Widgets wie Ihre Fußzeile, Seitenleiste usw. unterstützen.

Obwohl einige Themen wie Divi einige Optionen zum Hinzufügen von Symbolen für soziale Medien zum Menü enthalten, verfügen die meisten Themen nicht über diese Funktion. Und WordPress enthält auch keine native Funktion, um Symbole in das Menü aufzunehmen.

In diesem Beitrag zeigen wir Ihnen also drei Methoden, um Social-Media-Symbole ganz einfach zu Ihrem WordPress-Menü hinzuzufügen .

So fügen Sie Social Media-Symbole zu Ihrem WordPress-Menü hinzu

Es gibt drei Möglichkeiten, Social-Media-Symbole zu Ihrem WordPress-Menü hinzuzufügen:

1. Mit Plugins
   1. QuadMenü
   2. WP Social-Symbole
2. Aus dem Theme-Customizer
3. Manuell mit FontAwesome-Symbolen

In dieser Anleitung beschreiben wir jede Methode Schritt für Schritt, damit Sie diejenige auswählen können, die Ihnen am besten gefällt.

1) Plugins

Die Verwendung von Plugins ist der einfachste Weg, Social-Media-Symbole in Ihr Menü aufzunehmen. Es gibt mehrere Optionen, um Ihnen das Leben zu erleichtern, haben wir zwei der besten Plugins aufgelistet, die Sie verwenden können.

1.1) QuadMenü

QuadMenu ist das beste Tool, um Ihre WordPress-Menüs einfach anzupassen und auf die nächste Stufe zu heben. Dies ist ein Freemium-Plugin. Es gibt eine kostenlose Version mit grundlegenden Funktionen und drei Premium-Pläne mit erweiterten Funktionen und vorrangigem Support.

Um Social-Media-Symbole zu Ihrem Menü hinzuzufügen, benötigen Sie die Premium-Version. Sehen wir uns also an, wie Sie es installieren und das Plugin auf Ihrer Website aktivieren.

Installation und Aktivierung

Zuerst müssen Sie das Plugin kaufen und die Dateien auf Ihren Desktop herunterladen. Dann müssen Sie vor der Installation die kostenlose Version auf Ihrer Website installieren. Gehen Sie dazu zu Ihrem WP-Dashboard > Plugins > Add New . Verwenden Sie dann die Suchleiste und suchen Sie nach QuadMenu. Danach drücken Sie Installieren und dann Aktivieren .

Verwenden Sie nach der Aktivierung die Dateien der zuvor heruntergeladenen Premium-Version und installieren Sie sie auf Ihrer Website.

Nachdem Sie das Plugin aktiviert haben, müssen Sie Ihren Lizenzschlüssel verifizieren. Auf dem Dashboard Ihres QuadMenu-Kontos sehen Sie die Lizenzoption.

Kopieren Sie den Schlüssel von dort und fügen Sie ihn mit Ihrer registrierten E-Mail-Adresse in das Lizenzfeld ein, um Ihren Schlüssel zu verifizieren.

Das Plug-in ist in unserem Shop, Envato und auf dem Elegant-Marketplace erhältlich. Verwenden Sie also das Dropdown-Menü, um die entsprechende Option für Ihren Kauf auszuwählen. Nachdem Sie es überprüft haben, können Sie loslegen.

Fügen Sie mit QuadMenu Social-Media-Symbole zu Ihrem WordPress-Menü hinzu

QuadMenu funktioniert mit jedem kostenlosen oder Premium-Design. Für diese Demo werden wir GeneratePress verwenden, aber der Prozess ist ähnlich wie bei jedem anderen Thema. Gehen wir zunächst zu den Einstellungen des Plugins, indem wir zu QuadMenu > Options gehen.

Dort sehen Sie mehrere Anpassungsoptionen wie:

• Hauptmenü
• Reaktionsschnell
• Standardthema
• Anpassen
• Sozial
• Import Export

Konfigurieren Sie soziale Optionen

In unserem Fall müssen wir Social-Media-Symbole zu unserem Primärmenü hinzufügen. Also wählen wir die Social -Option.

Sie sehen mehrere Standardoptionen, die Sie je nach Ihren Kanälen bearbeiten oder löschen können. Sie haben bereits Symbole mit Social-Media-Profilen zugewiesen.

Sie können sie jedoch auch anpassen, indem Sie auf die Schaltfläche + Symbol hinzufügen klicken. Außerdem können Sie neue Social-Media-Kanäle hinzufügen, indem Sie auf die Schaltfläche + klicken .

Angenommen, Sie möchten das Facebook-Symbol ändern. Drücken Sie + Symbol hinzufügen und Sie sehen ein Popup mit vielen Symbolen, aus denen Sie auswählen können.

Es gibt viele Symbole, daher empfehlen wir Ihnen, die Suchfunktion zu verwenden, um die Ergebnisse zu filtern.

Wie Sie sehen können, haben wir nach Facebook-Symbolen gesucht. Es zeigt Ihnen alle verfügbaren Symbole, die sich auf Ihre Suchanfrage beziehen, also wählen Sie das gewünschte aus und speichern Sie es. Sie können auch die Titel und URLs ändern. Nachdem Sie alle gewünschten Änderungen in QuadMenu vorgenommen haben, speichern Sie die Einstellungen.

Gehen Sie danach zu den WordPress-Menüs. Dort sehen Sie alle verfügbaren Menüs. Um die QuadMenu-Optionen in Ihrem Menü zu verwenden, müssen Sie es unter den Menüeinstellungen als QuadMenu Dev markieren. Speichern Sie danach das Menü.

Beim Laden der nächsten Seite sehen Sie die QuadMenu-Optionen.

Unter den QuadMenu-Elementen sehen Sie die Liste der sozialen Symbole. Wählen Sie sie aus und drücken Sie Zum Menü hinzufügen .

Danach sehen Sie den Bereich „Soziales“ unter den Optionen des Hauptmenüs. Bewegen Sie die Maus darüber und Sie sehen die QuadMenu-Anpassungsoptionen.

Wenn Sie zusätzliche Anpassungen benötigen, wählen Sie diese Option aus. Andernfalls drücken Sie die Schaltfläche Menü speichern und Sie können loslegen.

Symbole im Menü (Frontend)

Jetzt ist es an der Zeit, die Ergebnisse zu überprüfen. Gehen Sie also auf die Homepage Ihrer Website und Sie werden die sozialen Symbole sehen. Und wenn Sie den Mauszeiger darüber bewegen, werden die Symbole gerendert.

Das ist es! Sie haben Ihren WordPress-Menüs mit QuadMenu erfolgreich Social-Media-Symbole hinzugefügt .

1.2) WP-Menüsymbole

Wenn Sie sich keine Premium-Plugins leisten können, machen Sie sich keine Sorgen. Wir haben eine kostenlose Lösung für Sie. In diesem Abschnitt zeigen wir Ihnen, wie Sie Social-Media-Symbole mit einem kostenlosen Plugin namens WP Menu Icons zu Ihrem WordPress hinzufügen.

Installation und Aktivierung

Installieren und aktivieren Sie zunächst die WP-Menüsymbole auf Ihrer Website.

Dieses Tool ist sehr einfach zu bedienen und erfordert keine zusätzliche Anpassung.

Anpassen von Menüsymbolen

Wenn Sie kein Menü auf Ihrer Website haben, können Sie eines im Konfigurationsbereich erstellen.

Weisen Sie Ihrem Menü einen Ort zu und können Sie ihm dann Elemente hinzufügen. Um Ihre Social-Media-Profile zum Menü hinzuzufügen, wählen Sie das Element Benutzerdefinierte Links . Sie müssen die URL zu der Seite eingeben, die Sie verlinken möchten, sowie ein Label. Drücken Sie dann auf Zum Menü hinzufügen .

Nachdem Sie das Symbol zum Menü hinzugefügt haben, sieht die Konfigurationsseite wie folgt aus.

Ebenso können Sie andere Social-Media-Symbole hinzufügen. In diesem Fall haben wir unserem Menü Symbole für Twitter, Pinterest und Instagram hinzugefügt.

Unter den Menüpunkten gibt es eine +-Schaltfläche . Das ist die Einstellung, die Sie verwenden müssen, um Symbole zu den Menüelementen hinzuzufügen, also klicken Sie darauf.

Dann sehen Sie eine große Auswahl an Artikeln zur Auswahl.

Es gibt Dutzende von Symbolen, also verwenden Sie die Suchfunktion, um die gewünschten Ergebnisse zu filtern. In diesem Fall haben wir den Menüpunkt Facebook ausgewählt, also suchen wir nach dem Facebook-Icon. Nachdem Sie das gewünschte ausgewählt haben, sehen Sie die Symboleinstellungen in der rechten Spalte. Hier können Sie die Beschriftung ein- oder ausblenden sowie Position, Größe und Ausrichtung anpassen. In diesem Fall werden wir das Label ausblenden. Nachdem Sie mit der Anpassung fertig sind, klicken Sie auf Speichern .

Sie können die Pinterest-, Twitter- und Instagram-Symbole auf die gleiche Weise anpassen. Nachdem Sie die erforderlichen Symbole hinzugefügt haben, speichern Sie das Menü.

Jetzt ist es an der Zeit, das Ergebnis zu überprüfen. Gehen Sie zum Frontend Ihrer Website und Sie sehen die neuen Symbole.

So können Sie mit WP Menu Icons Social-Media-Symbole zu Ihren Kopfzeilenmenüs in WordPress hinzufügen . Schließlich können Sie Ihre Symbole auch auf der Einstellungsseite der WP-Menüsymbole gestalten.

2) Fügen Sie Social Media-Icons mit dem Theme Customizer hinzu

Wenn Sie keine Plugins installieren möchten, können Sie mit Ihrem Design-Anpasser Symbole für soziale Medien in Ihre Menüs einfügen. Einige Premium-Themen wie Divi, Newspaper oder Avada verfügen über integrierte Themenfelder, mit denen Sie das Thema anpassen und Symbole für soziale Medien hinzufügen können.

Wenn Sie nicht sicher sind, ob Ihr Design die Option zum Hinzufügen von Social-Media-Symbolen bietet, gehen Sie in Ihrem WordPress-Dashboard zu Darstellung > Anpassen > Menüs > Standorte anzeigen und prüfen Sie, ob es ein Menü für soziale Netzwerke oder eine Option für soziale Symbole gibt.

Für unsere Demonstration werden wir das Divi-Thema von Elegant Themes verwenden. Gehen Sie zuerst zu Ihrem WP-Dashboard > Aussehen > Anpassen .

Gehen Sie dann zur Kopfzeilenanpassung und zu den Kopfzeilenelementen. Dort sehen Sie eine Option zum Aktivieren von Social Header-Symbolen.

Aktivieren Sie diese Option und Sie werden sie in der Kopfzeile Ihrer Website sehen.

Darüber hinaus können Sie sie anpassen, indem Sie zu Divi > Designoptionen gehen.

Dort können Sie die gewünschten Symbole aktivieren und die URL Ihrer Social-Media-Profile eingeben. Die Social-Media-Symbole werden standardmäßig sowohl in der Kopf- als auch in der Fußzeile Ihrer Website angezeigt.

Sie können sie jedoch über die Customizer-Einstellungen ausblenden.

Andere Themen wie Newspaper und Newsmag haben ihre eigenen Anpassungsoptionen, sodass Sie Symbole aktivieren/deaktivieren und sie direkt über das dedizierte Themenfenster anzeigen können. Wenn Sie den Abschnitt mit den Symbolen für soziale Medien im Design-Anpasser oder -Bedienfeld nicht finden können, können Sie unten einen Kommentar hinterlassen, und wir werden versuchen, Ihnen zu helfen.

3) Verwenden von FontAwesome

Schließlich können Sie Social-Media-Symbole manuell zu Ihren Menüs in WordPress hinzufügen. Auch wenn Sie kein Entwickler sind oder keine Programmierkenntnisse haben, können Sie Social-Media-Symbole mit etwas HTML-Codierung anzeigen. Dazu verwenden wir die Symbole von FontAwesome.

Also, das erste, was Sie tun müssen, ist, auf die FontAwesome-Website zu gehen.

Verwenden Sie die Suchfunktion, um die benötigten Symbole zu finden. Für diese Demo suchen wir nach Twitter-Symbolen .

Auf der nächsten Seite zeigt Ihnen die Website die Suchergebnisse. Wählen Sie die, die Ihnen am besten gefällt.

Auf der nächsten Seite sehen Sie die Details des ausgewählten Symbols. Kopieren Sie einfach den HTML-Code des Symbols.

Font Awesome Icons zu WordPress hinzufügen

Gehen Sie dann zum Abschnitt „Menüs“ auf Ihrer WordPress-Site. Auf der linken Seite sehen Sie den Abschnitt für benutzerdefinierte Links. Sie müssen die URL zu Ihrem Twitter-Profil eingeben und den soeben kopierten HTML-Code in das Feld Linktext einfügen. Sobald Sie dies getan haben, drücken Sie Zum Menü hinzufügen .

Speichern Sie danach die Änderungen. Gehen Sie dann zum Frontend Ihrer Website und Sie sehen das Symbol.

Auf diese Weise können Sie jedes Social-Media-Symbol zu Ihrem Menü hinzufügen .

HTML-Code funktioniert nicht

Wenn Sie jeden Schritt dieses Tutorials befolgt haben, aber der HTML-Code nicht funktioniert, versuchen Sie dies. Wenn der fab -Code nicht funktioniert, versuchen Sie, den HTML-Code zu ändern, indem Sie das b aus dem fab entfernen.

In unserem Fall sieht der endgültige HTML-Code beispielsweise so aus: <i class=“fa fa-twitter“></i> statt <i class=“fab fa-twitter“></i> . Beispiel:

Fügen Sie Social-Media-Symbole zum WordPress-Header hinzu

Die Kopfzeile ist einer der beliebtesten Orte, an denen Sie möglicherweise Symbole für soziale Medien hinzufügen möchten. Sehen wir uns also schnell an, wie dies mit dem Design-Anpasser funktioniert.

Beachten Sie, dass Sie ein Thema benötigen, das Ihnen die Möglichkeit gibt, Social-Media-Symbole zum Menü hinzuzufügen. Denken Sie auch daran, dass die Schritte je nach Thema leicht unterschiedlich sein können, aber Sie sollten in der Lage sein, den Schritten in den meisten Themen ohne Probleme zu folgen.

Sehen wir uns zwei Optionen an: Erstellen eines neuen Menüs und Bearbeiten eines vorhandenen.

Hinzufügen von Social-Media-Symbolen zur Kopfzeile in einem neuen Menü

1. Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung > Menüs
2. Klicken Sie auf den Link Neues Menü erstellen neben der Schaltfläche Auswählen und geben Sie ihm einen Namen
3. Jetzt können Sie die Symbole hinzufügen. Wählen Sie das neue Menü und geben Sie die sozialen Medien und URLs ein, die Sie einschließen möchten (Instagram, Facebook, YouTube usw.) und drücken Sie auf Zum Menü hinzufügen
4. Speichern Sie die Änderungen
5. Platzieren Sie danach das soeben erstellte Menü im Kopfbereich
6. Speichern Sie die Änderungen und das war's! So fügen Sie dem WordPress-Header Social-Media-Symbole hinzu!

Hinzufügen von Social-Media-Symbolen zur Kopfzeile in einem vorhandenen Menü

1. Gehen Sie in Ihrem WordPress-Dashboard zu Aussehen > Anpassen > Menüs
2. Gehen Sie zum Abschnitt Kopfzeile und klicken Sie auf die Schaltfläche Elemente hinzufügen
3. Wählen Sie dann das Symbol der Social-Media-Plattform aus, die Sie hinzufügen möchten, geben Sie die URL ein und drücken Sie Zum Menü hinzufügen . Sie müssen dasselbe für jedes soziale Medium tun, das Sie hinzufügen möchten
4. Wählen Sie die Menüposition aus, an der Sie die Symbole anzeigen möchten. Die Optionen, die Sie haben, hängen von Ihrem Thema ab.
5. Speichern Sie die Änderungen. Das ist es!

Wenn Sie die Symbole beispielsweise zur Fußzeile hinzufügen möchten, gehen Sie alternativ genauso vor, wählen Sie jedoch die Fußzeile als Speicherort für die Symbole aus.

Bonus: Öffnen Sie Social-Media-Symbole in einem neuen Tab

Das Hinzufügen von Social-Media-Symbolen zu Ihrem WordPress-Menü wird Ihnen helfen, Ihre Social-Media-Präsenz auszubauen. Das Problem ist jedoch, dass, wenn ein Benutzer auf das Symbol in Ihrem Menü klickt, die Seite der sozialen Medien im selben Fenster geladen wird und der Benutzer Ihre Website verlässt. Die Lösung besteht darin, das Social-Media-Symbol dazu zu bringen, die Seite auf einem neuen Tab zu laden. Mal sehen, wie es geht.

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung > Menüs , öffnen Sie die Bildschirmoptionen oben rechts und aktivieren Sie die Option Linkziel . Gehen Sie dann zu jedem Menüelement und aktivieren Sie das Kontrollkästchen Link in neuem Tab öffnen. Alternativ können Sie jedes Ziel auf _blank setzen.

Speichern Sie abschließend die Änderungen und Sie sind fertig!

So fügen Sie soziale Feeds zu Ihrer Website hinzu

Neben dem Hinzufügen von Social-Media-Symbolen zu Ihrem Menü können Sie Ihrer Website auch Social-Feeds hinzufügen, um die Interaktion mit Ihren Benutzern zu erhöhen. In diesem Abschnitt zeigen wir Ihnen, wie Sie Instagram und TikTok mit Ihrer Website verbinden.

Füge einen Instagram-Feed zu WordPress hinzu

Der einfachste Weg, Instagram mit Ihrer Website zu verbinden, ist die Verwendung des Social Feed Gallery-Plugins. Es ist ein Freemium-Tool, mit dem Sie Ihren Instagram-Feed mit wenigen Klicks anzeigen können.

Installieren und aktivieren Sie zunächst das Plugin über diesen Link. Gehen Sie dann zur Social Feed Gallery und melden Sie sich bei Ihrem Instagram-Konto an.

Gehen Sie danach zu Social Feed Gallery > Accounts und Sie haben die Möglichkeit, sich bei Ihrem persönlichen oder geschäftlichen Konto anzumelden (denken Sie daran, dass das Geschäftskonto mehr Optionen bietet). Fügen Sie dann ein Konto hinzu, melden Sie sich an und erteilen Sie der App die erforderlichen Berechtigungen, um Ihr Konto mit WordPress zu verbinden.

Sobald dies erledigt ist, gehen Sie zur Registerkarte Feeds , drücken Sie +Feed und fügen Sie den Feed hinzu, den Sie anzeigen möchten. Passen Sie schließlich Ihren Feed an, und wenn Sie fertig sind, sehen Sie, dass das Plugin Ihnen einen Shortcode zur Verfügung stellt, den Sie auf jeder Seite oder jedem Post einfügen können, um Ihren Feed anzuzeigen.

Weitere Informationen finden Sie in unserem Leitfaden zur Integration von Instagram in WordPress.

Füge einen TikTok-Feed zu WordPress hinzu

Ebenso können Sie Ihre Website auch mit TikTok verbinden. Um TikTok-Feeds anzuzeigen, verwenden wir ein spezielles Plugin namens WP TikTok Feed. Dies ist das beliebteste TikTok-Plugin für WordPress und es gibt eine kostenlose Version und einige Premium-Pläne.

Nachdem Sie das Plugin installiert und aktiviert haben, müssen Sie in Ihrem WordPress-Dashboard Ihr TikTok-Konto verknüpfen und dann zu Tiktok-Feed > Feeds gehen. Drücken Sie dort +Feed und fügen Sie den Feed hinzu, den Sie anzeigen möchten. Darüber hinaus sehen Sie mehrere Optionen zum Anpassen der Anzeige des Feeds auf Ihrer Website.

Weitere Informationen dazu finden Sie in unserem Tutorial zum Einbetten von TikTok-Videos in WordPress.

Fazit

Alles in allem ist das Hinzufügen von Social-Media-Symbolen zu Ihren WordPress-Menüs eine hervorragende Möglichkeit, Ihre Social-Media-Präsenz zu verbessern. In diesem Handbuch haben wir 3 verschiedene Möglichkeiten gesehen, dies zu tun:

1. Mit Plugins
2. Aus dem Theme-Customizer
3. Manuell

Wenn Ihr Design standardmäßig das Hinzufügen von Symbolen zulässt, müssen Sie keine zusätzlichen Plugins oder HTML-Code verwenden. Wenn Sie ein Plugin bevorzugen, empfehlen wir Ihnen die Verwendung von QuadMenu. Es ermöglicht Ihnen, die volle Kontrolle über Ihre gesamte Anpassung des WordPress-Menüs zu erlangen, und es ist außerdem mit vielen leistungsstarken Funktionen ausgestattet.

Wenn Sie jedoch eine kostenlose Lösung bevorzugen, werfen Sie einen Blick auf WP Menu Icons. Es ist ein einfaches Tool, mit dem Sie im Handumdrehen soziale Symbole einfügen können.

Wenn Sie andererseits kein Plugin installieren möchten, können Sie Social-Media-Symbole mit ein wenig HTML und FontAwesome-Symbolen hinzufügen. Mit dieser Option können Sie die Symbole auch mit etwas CSS anpassen oder den Styling-Teil vermeiden und die Standardsymbole verwenden.

Fanden Sie diesen Artikel hilfreich? Wenn ja, hinterlassen Sie uns unten einen Kommentar und teilen Sie diesen Beitrag in den sozialen Medien. Weitere verwandte Tutorials finden Sie in den folgenden Anleitungen:

• Beste Plugins zum Hinzufügen von Social-Media-Feeds zu WordPress
• So fügen Sie Facebook-Gruppen-Feeds zu WordPress hinzu