Das Hinzufügen von Social-Media-Symbolen zu Ihrem WordPress-Menü ist eine intelligente Möglichkeit, Ihre Profile zu bewerben, ohne Ihre Website zu überladen. Diese kleinen, wiedererkennbaren Logos können Besucher dazu ermutigen, Ihnen auf verschiedenen Plattformen zu folgen, was Ihre Online-Präsenz und Ihr Engagement steigern kann.
Wir haben festgestellt, dass es bei WordPress davon abhängt, ob Sie ein klassisches oder ein Block-Theme verwenden, wie Sie Symbole für soziale Medien zu Ihrem Menü hinzufügen. Aber wir haben für beide Arten von Themes effektive Wege gefunden, dies zu tun.
In diesem Artikel zeigen wir Ihnen, wie Sie Social-Media-Symbole in WordPress-Menüs einfügen, und zwar mit Methoden, die sowohl für klassische als auch für Block-Themes funktionieren.
Warum Social Media Icons zu Menüs in WordPress hinzufügen?
Durch das Hinzufügen von Social-Media-Symbolen zu Ihren WordPress-Menüs können Sie oft mehr Klicks, Engagement und Follower für alle Ihre Social-Media-Profile erhalten.
Social-Media-Symbole können auch die Aufmerksamkeit der Besucher auf sich ziehen, ohne dass Sie Ihren Menüs zusätzlichen Text hinzufügen müssen. So können Sie viele verschiedene Profile auf kleinem Raum bewerben.
Das Hinzufügen von Symbolen für soziale Medien unterscheidet sich vom Einfügen von Bildsymbolen in Ihr WordPress-Menü. Das liegt daran, dass diese Bilder mit Ihren sozialen Profilen verknüpft werden müssen und oft ein spezielles Styling erfordern, um ihr Aussehen auf verschiedenen Geräten und Bildschirmgrößen zu erhalten.
Außerdem müssen Sie sicherstellen, dass diese Symbole erkennbar sind und eine einheitliche Größe haben, was bei der Verwendung normaler Bilddateien schwierig sein kann.
Schauen wir uns also 2 anfängerfreundliche Möglichkeiten an, um Social-Media-Symbole in WordPress-Menüs einzufügen.
Video-Anleitung
Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter. Verwenden Sie einfach die nachstehenden Links, um direkt zur gewünschten Methode zu gelangen:
Methode 1: Verwendung des Menübild-Plugins (nur bei klassischen Themen)
Der einfachste Weg, Social Media Icons in WordPress-Menüs einzufügen, ist die Verwendung von Menu Image.
Bei der Erstellung Ihrer Social Icons können Sie jedes Bild verwenden, das Sie in die WordPress-Mediathek hochgeladen haben.
Viele der führenden Social-Media-Unternehmen bieten beispielsweise Logos an, die Sie auf Ihrer Website verwenden können, wie z. B. das Twitter Brand Toolkit. Sie können auch Symbole aus Online-Bibliotheken wie der Font Awesome-Website herunterladen.
Menu Image ist auch mit dem Font Awesome-Plugin integriert. Damit können Sie alle Font Awesome-Symbole direkt aus dem WordPress-Dashboard durchsuchen und importieren, einschließlich der Symbole für alle wichtigen sozialen Netzwerke.
Wir empfehlen, zuerst das Font Awesome-Plugin zu installieren, bevor Sie mit diesem Tutorial fortfahren. Detaillierte Anweisungen zur Einrichtung von Font Awesome finden Sie in unserer Anleitung zum einfachen Hinzufügen von Icon-Schriftarten zu Ihrem WordPress-Theme.
Unabhängig davon, wie Sie die Social-Media-Symbole bereitstellen möchten, müssen Sie das Menu Image Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung sollten Sie sich die Größe der Symbole ansehen und sie gegebenenfalls ändern. Dazu müssen Sie zu Menübild ” Menübild gehen.
Bei der Erstellung Ihrer Social Icons können Sie eine der Standard-WordPress-Bildgrößen verwenden, z. B. Thumbnail, Image oder Large. Bei Menu Image können Sie außerdem zwischen drei einzigartigen Größen wählen, die standardmäßig auf 24×24, 36×36 und 48×48 Pixel eingestellt sind.
Diese Größen sollten für die meisten WordPress-Websites ausreichen, aber Sie können sie ändern, indem Sie andere Zahlen in die Felder für das 1., 2. oder 3.
Klicken Sie anschließend auf “Änderungen speichern”, um Ihre Einstellungen zu speichern.
Um Icons zu einem Navigationsmenü hinzuzufügen, gehen Sie zu Darstellung ” Menüs. Standardmäßig zeigt WordPress das Hauptmenü Ihrer Website an.
Wenn Sie Symbole für soziale Medien an einer anderen Stelle des Menüs hinzufügen möchten, z. B. in einem schwebenden Menü, öffnen Sie einfach das Dropdown-Menü “Zu bearbeitendes Menü auswählen”.
Sie können dann ein Menü aus der Liste auswählen und auf “Auswählen” klicken.
Eine schrittweise Anleitung zum Erstellen eines neuen Menüs finden Sie in unserer Anleitung zum Hinzufügen eines Navigationsmenüs in WordPress.
Zu Beginn müssen Sie jedes soziale Profil als neuen Link zu Ihrem Menü hinzufügen.
Wenn Sie bereit sind, klicken Sie auf , um den Abschnitt “Benutzerdefinierte Links” zu erweitern, und geben Sie dann die Adresse der sozialen Medienseite ein, die Sie verwenden möchten. Sie könnten zum Beispiel die URL Ihrer Facebook-Gruppe oder Ihres YouTube-Kanals eingeben.
Sie müssen auch einen “Linktext” eingeben. In einem späteren Schritt haben Sie die Möglichkeit, die Position dieses Titels im Menü zu ändern oder ihn sogar ganz auszublenden.
Klicken Sie anschließend auf “Zum Menü hinzufügen”.
Dieser Eintrag erscheint nun in der rechten Spalte.
Um ein Symbol für soziale Medien hinzuzufügen, bewegen Sie einfach den Mauszeiger über den neuen Menüpunkt.
Klicken Sie dann auf die Schaltfläche “Menübild”, wenn diese erscheint.
Hinweis: Wenn Sie keine Schaltfläche “Menübild” sehen, klicken Sie auf “Änderungen speichern”. Jetzt sollte die Schaltfläche “Menübild” erscheinen, wenn Sie den Mauszeiger über einen beliebigen Eintrag im Menü bewegen.
Sie können nun entscheiden, ob Sie ein Bild aus Ihrer WordPress-Mediathek oder ein von Font Awesome bereitgestelltes Symbol verwenden möchten.
Um ein vorgefertigtes Font Awesome-Symbol zu verwenden, klicken Sie auf das Optionsfeld neben “Symbol”.
Wählen Sie dann “Fontawesome”.
Sie können dann auf “Marken” klicken.
Sie sehen nun alle Markensymbole, einschließlich der Symbole für alle großen sozialen Netzwerke, von Facebook bis LinkedIn. Wenn Sie ein Bild sehen, das Sie verwenden möchten, klicken Sie einfach darauf.
Eine andere Möglichkeit ist die Verwendung eines eigenen Symbols aus der WordPress-Mediathek, indem Sie das Optionsfeld “Bild” auswählen. Klicken Sie dann auf den Link “Bild einstellen”.
Sie können nun entweder ein Bild aus der WordPress-Mediathek auswählen oder eine neue Datei von Ihrem Computer hochladen.
Unabhängig davon, woher Sie das Symbol beziehen, zeigt Menu Image auf der rechten Seite eine Vorschau an.
Sie können jetzt ändern, ob der Link-Titel über, unter, vor oder nach dem Social-Media-Symbol erscheint, indem Sie die Einstellungen für die Titelposition verwenden.
Viele Social-Media-Symbole sind sofort erkennbar, so dass der Link-Titel überflüssig sein kann. Wenn Sie viele soziale Symbole zu einem Navigationsmenü hinzufügen, können die Titel Ihr Menü sogar noch unordentlicher und komplizierter aussehen lassen.
Daher können Sie den Titel ausblenden, indem Sie das Optionsfeld “Ausblenden” auswählen.
Während Sie Änderungen vornehmen, wird die Live-Vorschau automatisch aktualisiert, so dass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was am besten aussieht.
Wenn Sie ein eigenes Bild verwenden, können Sie die Größe der Social-Media-Symbole über die Dropdown-Liste “Bildgröße” ändern.
Größere Symbole ziehen die Aufmerksamkeit der Besucher auf sich, können aber auch ablenken. Aus diesem Grund sollten Sie verschiedene Größen ausprobieren, um zu sehen, was in Ihrem WordPress-Blog am besten funktioniert.
Wenn Sie mit der Einrichtung des Symbols für soziale Medien zufrieden sind, klicken Sie einfach auf “Änderungen speichern”.
Wiederholen Sie einfach diese Schritte, um weitere Symbole zu Ihrem WordPress-Menü hinzuzufügen.
Sie können sogar Icons zu anderen wichtigen Punkten im Navigationsmenü hinzufügen und diese Menüpunkte hervorheben, um die Aufmerksamkeit Ihrer Nutzer zu erregen.
Wenn Sie mit der Gestaltung des Menüs zufrieden sind, klicken Sie einfach auf “Menü speichern”.
Jetzt können Sie Ihre Website besuchen, um die neuen Symbole für soziale Medien in Aktion zu sehen.
So sah es auf unserer Demo-Website aus.
Methode 2: Verwendung des vollständigen Site-Editors (nur Blockthemen)
WordPress verfügt über einen integrierten Social Icons-Block, mit dem Sie ein Menü mit Social Media Icons erstellen und diese dann in einem schönen Layout anzeigen können.
Dieser Block verfügt über integrierte Icons für alle wichtigen sozialen Netzwerke, so dass Sie kein Plugin wie Font Awesome installieren oder Icons in Ihre Mediathek hochladen müssen.
Sie können jedoch nur Symbole und Links für soziale Medien in den Social Icons-Block einfügen, so dass es nicht so flexibel ist wie das Menu Image Plugin.
Wenn Sie ein Block-Theme verwenden, können Sie einen Block mit sozialen Symbolen zu einem beliebigen Teil Ihrer Website hinzufügen, z. B. in der Kopf- oder Fußzeile. Auf diese Weise können Sie ein Menü für soziale Medien auf Ihrer gesamten Website anzeigen.
Um loszulegen, gehen Sie im WordPress-Dashboard zu Erscheinungsbild ” Editor .
Von hier aus sehen Sie einige Menüs, mit denen Sie das Design Ihres Blockthemas anpassen können.
Um Symbole für soziale Medien zu Ihrem Menü hinzuzufügen, klicken Sie auf “Navigation”.
Klicken Sie im nächsten Schritt auf das Bleistiftsymbol “Bearbeiten”.
Dadurch wird der WordPress Full Site Editor geöffnet.
Damit können Sie nun Ihr Navigationsmenü, das Teil Ihrer WordPress-Header-Vorlage ist, bearbeiten und gestalten.
Klicken Sie zunächst auf das blaue “+”-Symbol in der oberen linken Ecke. In der Suchleiste müssen Sie “Social Icons” eingeben.
Wenn der richtige Block erscheint, ziehen Sie ihn auf die Themenvorlage und legen ihn dort ab.
Um das erste Symbol hinzuzufügen, klicken Sie einfach auf das “+”-Symbol innerhalb des Blocks.
Geben Sie in dem daraufhin angezeigten Popup das Symbol ein, das Sie hinzufügen möchten, z. B. “Twitter” oder “Facebook”.
Wenn das richtige Symbol erscheint, klicken Sie einfach darauf, um es zu Ihrem WordPress-Blog hinzuzufügen.
Klicken Sie nun auf das neue Symbol für soziale Medien.
Es öffnet sich eine kleine Leiste, in die Sie die URL eingeben können, zu der Sie verlinken möchten, z. B. Ihre Facebook-Seite.
Um weitere Social Icons zu WordPress hinzuzufügen, klicken Sie einfach auf das “+”-Symbol und wiederholen Sie den oben beschriebenen Vorgang.
Nachdem Sie alle sozialen Medienplattformen hinzugefügt haben, können Sie den Block anpassen. Wählen Sie dazu den Block “Soziale Symbole” aus und klicken Sie dann auf die Registerkarte “Block”.
Sie können die Ausrichtung des Symbols in den Einstellungen für “Layout” ändern.
Standardmäßig werden alle Links zu sozialen Medien in derselben Registerkarte geöffnet. Um Besucher auf Ihrer Website zu halten, können Sie die Option “Links in neuem Tab öffnen” aktivieren.
Standardmäßig zeigt WordPress nur die sozialen Symbole an, ohne jeglichen Text.
Wenn Sie neben jedem Symbol einen Text anzeigen möchten, aktivieren Sie die Option “Beschriftungen anzeigen”.
Klicken Sie anschließend auf die Registerkarte “Stile”.
Hier können Sie den Stil der Schaltfläche ändern, indem Sie auf “Standard”, “Nur Logos” oder “Pillenform” klicken.
Schließlich können Sie den Abstand zwischen den sozialen Symbolen über die Einstellungen unter “Blockabstand” ändern.
Wenn Sie mit dem Aussehen des Menüs zufrieden sind, klicken Sie auf die Schaltfläche “Speichern”.
Wenn Sie jetzt Ihre Website besuchen, sehen Sie die Symbole für soziale Medien live.
Bonus-Tipp: Soziale Feeds auf Ihrer WordPress-Seite einbetten
Das Hinzufügen von Social-Media-Symbolen zu WordPress-Menüs ist eine großartige Möglichkeit, um mehr Follower und Engagement für Ihre verschiedenen Konten zu gewinnen. Es gibt jedoch noch viele weitere Möglichkeiten, Ihre Twitter-, Facebook- und anderen sozialen Profile zu bewerben.
Die beste Möglichkeit, mehr Follower und Engagement zu erreichen, ist die Einbettung eines sozialen Live-Feeds auf Ihrer Website. Auf diese Weise können Sie die neuesten Beiträge von Ihren Social-Media-Websites anzeigen, zusammen mit Schaltflächen, mit denen die Besucher auf Ihre Beiträge reagieren oder Ihnen in den sozialen Medien folgen können.
Die beste Möglichkeit, Social Media Feeds auf Ihrer Website einzubinden, ist Smash Balloon. Es ist das beste Social-Media-Feed-Plugin für WordPress und lässt Sie Live-Feeds von Twitter, Instagram, Facebook und anderen einbetten.
Weitere Informationen finden Sie in unserem WordPress-Tutorial zum Hinzufügen von Social Media Feeds zu WordPress.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Social-Media-Symbole zu WordPress-Menüs hinzufügt. Vielleicht interessieren Sie sich auch für unseren Artikel über die Erstellung eines Dropdown-Menüs in WordPress und unsere ultimative Anleitung zum Hinzufügen einer Suchleiste zu Ihrem Navigationsmenü.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Jiří Vaněk
The Menu Image plugin is fantastic. I actually wrote an article about it when I was dealing with the exact same issue. Creating a main ‘Contact’ folder in the menu and adding a submenu with links to social networks along with icons—it works like magic. Previously, I used Font Awesome, and it was quite impractical. This is a much more elegant solution.
Ralph
As I love your article tutorials this time I only watched video and it was great! Short, no fluff and straight to the point. You guys should include more video tutorials. You are great at it and now I have new icons in my menu (not only for my socials). Thanks a lot!
Jonas
Thanks for this article, it helped me a lot!
WPBeginner Support
Glad our article was helpful!
Admin
Farhad
Is there a way to have blog posts submitted to social media sites automatically?
Thank you.
WPBeginner Support
There are a few different options for that, you would want to start by taking a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
Admin
Jimmy Ekisa
Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.
Shyam
How to show icons of social profiles in footer?
WPBeginner Support
If your site has a widget area for your footer you could use one of the plugins from our list below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Admin
Kerry
I’ve got the social media icons on my website. How do I link those icons to my social media profiles?
WPBeginner Support
You would have the menu items be custom URLs
Admin
Vicki
Thanks for this, I’ve managed to add the Goodreads logo to my Social Menu and chose the Social Menu location too. However when I view the page it shows the magnifying glass next to the new Goodreads logo, rather than just the logo on it’s own – why is this and how do I get rid of it?
WPBeginner Support
You would want to check with your theme’s support to see if this is due to the design of the theme itself.
Admin
Danielle
I added the social media menu but it’s not showing on my site. What can I do?
WPBeginner Support
We would first recommend reaching out to the plugin’s support for them to take a look and ensure this isn’t a hiccup with the plugin.
Admin
Lisa Jackson
Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?
WPBeginner Support
It would depend on your specific theme, you would first want to check with your theme’s support to ensure it is not an issue with how their menu is styled that could be causing that.
Admin
andi moss
What? No icons? Find our own?
WPBeginner Support
We do not have a specific set we would recommend at the moment but there are many different options available depending on the style you’re looking for.
Admin
Bob Wright
Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).
WPBeginner Support
You would want to ensure you are an admin user and the site is on WordPress.org for the most likely reasons. You can see our comparison in our guide below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ankit
Hi,
Once again, a great and helpful tutorial. I’m just facing one issue, though. For the last step, when I try to select the menu location option, I can only see the primary menu option there. How do I get the social menu option as well?
WPBeginner Support
Your specific theme may not have a social specific menu location. If you reach out to your theme’s support they can clarify and assist.
Admin
Jonathan
I’m trying to get my head round how to add social media accounts to my WordPress blogsite. Any assistance appreciated. If I’ve skipped an earlier step in setting up the site, my apologies in advance for a stupid comment!
WPBeginner Support
No worries, it depends on what you’re looking for. For a starting point, we would recommend taking a look at our recommended plugins below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Admin
Elder Designer
amazing tutorial keep it up
WPBeginner Support
Glad you found our guide helpful
Admin
Stephanie Strand
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support
Glad our guide was helpful
Admin
Rupali Tripathi
Thank you so very much for this video.
WPBeginner Support
You’re welcome
Admin
Debbie Serjeant
Icons are appearing without color … wonder what I did wrong?
WPBeginner Support
You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.
Admin
Isaac
Hello, is there a way to space the icons farther apart from one another? Mine seem to be too close to each other…. Thank you
WPBeginner Support
That would normally require changing CSS, for a starting point you may want to take a look at our article here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Sam Simson
I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.
WPBeginner Support
You would want to check with the support for your specific theme to see if that would be overriding your customizations
Admin
Tracy
Hi! I tried using this method but I didn’t get the “select image” part. I only get to introduce the URL and Navigation Label… any ideas?
WPBeginner Support
You may want to ensure the plugin was fully installed and activated for the select image to appear
Admin
Lea
Thank you! Seems to be a better working solution than with font awesome! Is it allowed though to just use a e.g. facebook icon picture from google pictures then for the image I upload?
WPBeginner Support
You would want to be sure to check the image usage rights if you take an image off of Google but if you are allowed to use it you could upload it to your site.
Admin
Larry Hilton
I followed the directions for adding social images to my footer area and the Google & Yelp images aren’t visible. I did them the same way as those displayed. This does not appear to be browser related. Any suggestions
WPBeginner Support
Start by reaching out to the plugin’s support to ensure there aren’t any known issues with those icons or how the menu is being added
Admin
Michele A
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support
Glad our guide could help
Admin
Muneeb
Icons are currently on the site but don’t work even link is added. whats the reason?
WPBeginner Support
If the urls are structured properly then you would want to let the plugin’s support know about your error to take a look if the error is with the plugin itself.
Admin
Mr. Debtsmith
Hi guys,
Installed the plug in. Added 3 social accounts and clicked “Main Nav” location box. The widget replaced the existing main menu instead of being added to it, and instead of the icons showing, the social account titles show instead. I’m looking forward to the benefits of this plug in. Hope you guys can help.
Thanks!
WPBeginner Support
You would want to let the plugin’s support know: https://wordpress.org/support/plugin/menu-image and they should be able to see if this is an error with the plugin itself.
Admin
ARPIT
Thank You Very Much for Essential Information that I was Seeking on the Internet.
Highly Appreciated.
WPBeginner Support
Glad our article could be helpful to you.
Admin
Dan
My current theme has social media icons on the main top header in the desktop version, but when switched to mobile version the social icons are gone. how can I get them to stay and possibly my header links also?
WPBeginner Support
Hi Dan,
It seems like your theme hides them on the mobile version. Please contact your theme author and they will be able to help you with this.
Admin
David Cornish
Thanks for the advice, I use Simple Social Icons now and I like them very much. Any advice on what plugin to use to display a “share on twitter” or “share on facebook” button above and/or below a post, similar to what you have under the title of this article?
WPBeginner Support
Hi David,
Please see our list of the best social media plugins for WordPress.
Admin
Rob Lilley
Is there a way to add a target attribute, so the social page opens in a new tab/window?
Editorial Staff
Yes, you can easily open the links in a new window. If you’re not seeing the option in your Custom Links by default, then you will have to click on the “Screen Options” tab on the top right of the screen and make sure that “Link Target” option is checked.
Admin
Umarbhatti
Hi,
This plugin looks awesome. Thanks!
Aman Singh
Hello,
Can I get the custom code for the widget to look similar to what it is on WPbeginner?
I like the widget look for social media icons on WPBeginner so can I get the code.
Thank you.
WPBeginner Support
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.
Admin