WordPress menülerine sosyal medya simgeleri eklemenin bir yolunu mu arıyorsunuz?
Facebook ve Twitter gibi sitelerin logoları dünyanın her yerindeki insanlar tarafından anında tanınır. Bu simgeleri menülerinize ekleyerek, sosyal medya profillerinizi çok fazla yer kaplamayan göz alıcı bir şekilde tanıtabilirsiniz.
Bu makalede, WordPress navigasyon menülerine sosyal medya ikonlarını nasıl ekleyeceğinizi göstereceğiz.
WordPress’te Menülere Neden Sosyal Medya Simgeleri Eklemelisiniz?
Web sitenize sosyal medya simgeleri ekleyerek, insanları farklı sosyal medya hesaplarınızı ziyaret etmeye teşvik edebilirsiniz. Bu sayede Facebook, Twitter, Instagram ve diğer sosyal medya hesaplarınızda daha fazla takipçi ve etkileşim elde edebilirsiniz.
Bir seçenek, WordPress kenar çubuğunuza veya benzer bir widget’a hazır alana sosyal medya simgeleri eklemektir. Ancak insanlar yeni bir sayfayı ziyaret etmek istediklerinde genellikle önce navigasyon menünüze bakarlar.
WordPress menülerinize sosyal medya simgeleri ekleyerek, tüm sosyal medya profillerinizde daha fazla tıklama, etkileşim ve takipçi elde edebilirsiniz.
Sosyal medya simgeleri, menülerinize fazladan metin eklemeden de ziyaretçinin dikkatini çekebilir. Bu sayede az bir alanda çok sayıda farklı profili tanıtabilirsiniz.
Bununla birlikte, WordPress menülerine sosyal medya simgeleri eklemenin acemi dostu 2 yoluna bir göz atalım.
Video Eğitimi
Eğer yazılı talimatları tercih ediyorsanız, okumaya devam edin. Doğrudan kullanmak istediğiniz yönteme geçmek için aşağıdaki hızlı bağlantıları kullanın:
Yöntem 1: Menü Görüntüsü Eklentisini Kullanma (Önerilen)
WordPress menülerine sosyal medya simgeleri eklemenin en kolay yolu Menu Image kullanmaktır. Bu ücretsiz eklenti, sosyal simgeler de dahil olmak üzere gezinme menülerinize resim simgeleri eklemenize olanak tanır.
Sosyal ikonlarınızı oluştururken WordPress medya kütüphanesine yüklediğiniz herhangi bir görseli kullanabilirsiniz.
Örneğin, en iyi sosyal medya şirketlerinin çoğu, Twitter marka araç seti gibi web sitenizde kullanabileceğiniz logolar sağlar. Font Awesome web sitesi gibi çevrimiçi kütüphanelerden de simgeler indirebilirsiniz.
Menu Image ayrıca Font Awesome eklentisi ile de entegre olur. Bu, tüm büyük sosyal ağlar için simgeler de dahil olmak üzere tüm Font Awesome simgelerine doğrudan WordPress kontrol panelinden göz atmanıza ve içe aktarmanıza olanak tanır.
Eğitime devam etmeden önce Font Awesome eklentisini yüklemenizi öneririz. Font Awesome’ın nasıl kurulacağına ilişkin ayrıntılı talimatlar için lütfen WordPress temanıza simge yazı tiplerini kolayca ekleme kılavuzumuza bakın.
Sosyal medya simgelerini nasıl sağlamayı planlıyor olursanız olun, Menü Görüntüsü eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, simge boyutlarına bir göz atmak ve gerekirse değiştirmek isteyebilirsiniz. Bunu yapmak için Menü Görüntüsü ” Menü Görüntüsü’ne gitmeniz gerekir.
Sosyal simgelerinizi oluştururken küçük resim, resim veya büyük gibi varsayılan WordPress resim boyutlarından herhangi birini kullanabilirsiniz. Menu Image ayrıca varsayılan olarak 24×24, 36×36 ve 48×48 piksel olarak ayarlanmış üç benzersiz boyut arasından seçim yapmanıza olanak tanır.
Bu boyutlar çoğu WordPress web sitesi için iyi çalışacaktır, ancak 1., 2. veya 3. Menü Görüntüsü alanlarına farklı sayılar yazarak bunları değiştirebilirsiniz.
Bu işlem tamamlandıktan sonra, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’e tıklayın.
Gezinti menüsüne simgeler eklemek için Görünüm ” Menüler bölümüne gidin. Varsayılan olarak, WordPress sitenizin birincil menüsünü gösterecektir.
Sosyal medya simgelerini farklı bir menü konumuna eklemek istiyorsanız, ‘Düzenlemek için bir menü seçin’ açılır menüsünü açmanız yeterlidir.
Daha sonra listeden bir menü seçebilir ve ‘Seç’e tıklayabilirsiniz.
Yeni bir menünün nasıl oluşturulacağına ilişkin adım adım talimatlar için lütfen WordPress’te gezinme menüsü ekleme kılavuzumuza bakın.
Başlamak için, her bir sosyal profili menünüze yeni bir bağlantı olarak eklemeniz gerekecektir.
Hazır olduğunuzda, ‘Özel Bağlantılar’ bölümünü genişletmek için tıklayın ve ardından kullanmak istediğiniz sosyal medya sayfasının adresini yazın. Örneğin, Facebook grubunuzun veya YouTube kanalınızın URL’sini girebilirsiniz.
Ayrıca bazı ‘Bağlantı Metni’ de yazmanız gerekecektir. Daha sonraki bir adımda, bu başlığın menüde nerede görüneceğini değiştirme veya hatta tamamen gizleme seçeneğiniz olacaktır.
Bunu yaptıktan sonra, ‘Menüye Ekle’ye tıklayın.
Bu öğe artık sağ taraftaki sütunda görünecektir.
Bir sosyal medya simgesi eklemek için yeni menü öğesinin üzerine gelmeniz yeterlidir.
Ardından, göründüğünde ‘Menü Görüntüsü’ düğmesine tıklayın.
Not: Eğer bir ‘Menü Resmi’ düğmesi görmüyorsanız, ‘Değişiklikleri Kaydet’e tıklayın. Şimdi, menüdeki herhangi bir öğenin üzerine geldiğinizde ‘Menü Görüntüsü’ düğmesi görünmelidir.
Artık WordPress medya kitaplığınızdan bir görsel mi yoksa Font Awesome tarafından sağlanan bir simge mi kullanacağınıza karar verebilirsiniz.
Hazır bir Font Awesome simgesi kullanmak için ‘Simge’nin yanındaki radyo düğmesine tıklayın.
Ardından, ‘Fontawesome’ı seçin.
Daha sonra ‘Markalar’a tıklayabilirsiniz.
Artık Facebook’tan LinkedIn’e kadar tüm büyük sosyal ağlar için simgeler de dahil olmak üzere tüm markalı simgeleri göreceksiniz. Kullanmak istediğiniz görseli gördüğünüzde, sadece bir tıklama yapın.
Diğer bir seçenek de ‘Resim’ radyo düğmesini seçerek WordPress medya kütüphanesinden kendi simgenizi kullanmaktır. Ardından, ‘Görsel Ayarla’ bağlantısına tıklayın.
Artık WordPress medya kütüphanesinden bir görsel seçebilir veya bilgisayarınızdan yeni bir dosya yükleyebilirsiniz.
Simgeyi nereden alırsanız alın, Menü Görüntüsü sağ tarafta bir önizleme gösterecektir.
Artık ‘Başlık konumu’ ayarlarını kullanarak bağlantı başlığının sosyal medya simgesinin üstünde mi, altında mı, öncesinde mi yoksa sonrasında mı görüneceğini değiştirebilirsiniz.
Birçok sosyal medya simgesi anında tanınabilir, bu nedenle bağlantı başlığı gereksiz olabilir. Bir navigasyon menüsüne çok sayıda sosyal simge ekliyorsanız, başlıklar menünüzün daha dağınık ve karmaşık görünmesine bile neden olabilir.
Bununla birlikte, ‘Gizle’ radyo düğmesini seçerek başlığı gizlemek isteyebilirsiniz.
Siz değişiklik yaptıkça, canlı önizleme otomatik olarak güncellenir, böylece neyin en iyi göründüğünü görmek için farklı ayarları deneyebilirsiniz.
Son olarak, kendi görselinizi kullanıyorsanız, ‘Görsel Boyutu’ açılır menüsünü kullanarak sosyal medya simgelerini yeniden boyutlandırabilirsiniz.
Daha büyük simgeler ziyaretçilerin dikkatini çekecektir, ancak dikkat dağıtıcı da olabilirler. Bunu göz önünde bulundurarak, WordPress blogunuzda en iyi neyin işe yaradığını görmek için farklı boyutları denemek isteyebilirsiniz.
Sosyal medya simgesinin nasıl ayarlandığından memnun olduğunuzda, ‘Değişiklikleri Kaydet’e tıklamanız yeterlidir.
WordPress menünüze daha fazla simge eklemek için bu adımları tekrarlamanız yeterlidir.
Hatta navigasyon menüsündeki diğer önemli öğelere de simgeler ekleyebilirsiniz. Örneğin, iletişim formunuza veya WooCommerce ödeme sayfanıza simgeler ekleyebilirsiniz.
Menünün nasıl ayarlandığından memnun olduğunuzda, ‘Menüyü Kaydet’e tıklayın.
Şimdi, yeni sosyal medya simgelerini çalışırken görmek için web sitenizi ziyaret edebilirsiniz.
Demo web sitemizde bu şekilde görünüyordu.
Yöntem 2: Tam Site Düzenleyicisini Kullanma (Yalnızca Blok Temalar)
WordPress, sosyal medya simgelerini içeren bir menü oluşturmanıza ve ardından bunları güzel bir düzende görüntülemenize olanak tanıyan yerleşik bir Sosyal Simgeler bloğuna sahiptir.
Bu blok, tüm büyük sosyal ağlar için yerleşik simgelerle birlikte gelir, böylece Font Awesome gibi bir eklenti yüklemenize veya medya kitaplığınıza simgeler yüklemenize gerek kalmaz.
Ancak, Sosyal Simgeler bloğuna yalnızca sosyal medya simgeleri ve bağlantıları ekleyebilirsiniz, bu nedenle Menü Görüntüsü eklentisi kadar esnek değildir.
Bir blok tema kullanıyorsanız, web sitenizin üstbilgi veya altbilgi gibi herhangi bir bölümüne bir Sosyal Simgeler bloğu ekleyebilirsiniz. Bu şekilde, web sitenizin tamamında bir sosyal medya menüsü gösterebilirsiniz.
Başlamak için WordPress panosundaki Görünüm ” Düzenleyici bölümüne gidin.
Buradan, blok temanızın tasarımını özelleştirmek için bazı menüler göreceksiniz.
Menünüze sosyal medya simgeleri eklemek için ‘Navigasyon’a tıklayın.
Bir sonraki adım, kalem şeklindeki ‘Düzenle’ simgesine tıklamaktır.
Bu, WordPress Tam Site Düzenleyicisini açacaktır.
Bunu yaptıktan sonra, artık WordPress başlık şablonunuzun bir parçası olan gezinme menünüzü düzenleyebileceksiniz.
Başlamak için sol üst köşedeki mavi ‘+’ simgesine tıklayın. Arama çubuğuna ‘Sosyal Simgeler’ yazmalısınız.
Doğru blok göründüğünde, bunu tema şablonunun üzerine sürükleyip bırakın.
İlk simgeyi eklemek için bloğun içindeki ‘+’ simgesine tıklamanız yeterlidir.
Açılan pencerede eklemek istediğiniz simgeyi yazın (örneğin ‘Twitter’ veya ‘Facebook’).
Doğru simge göründüğünde, WordPress blogunuza eklemek için tıklamanız yeterlidir.
Şimdi, yeni sosyal medya simgesine tıklayın.
Bu, Facebook sayfanız gibi bağlantı vermek istediğiniz URL’yi yazabileceğiniz küçük bir çubuk açar.
WordPress’e daha fazla sosyal simge eklemek için ‘+’ simgesine tıklamanız ve yukarıda açıklanan aynı işlemi tekrarlamanız yeterlidir.
Tüm sosyal medya platformlarını ekledikten sonra bloğu özelleştirmek isteyebilirsiniz. Bunu yapmak için, Sosyal Simgeler bloğunu seçmek için tıklayın ve ardından ‘Engelle’ sekmesine tıklayın.
‘Düzen’ ayarlarını kullanarak simgenin yaslamasını, hizalamasını ve yönünü değiştirebilirsiniz.
Varsayılan olarak, tüm sosyal medya bağlantıları aynı sekmede açılacaktır. Ziyaretçileri web sitenizde tutmak için, ‘Bağlantıları yeni sekmede aç’ geçişini etkinleştirmek için tıklamak isteyebilirsiniz.
Varsayılan olarak, WordPress herhangi bir metin olmadan yalnızca sosyal simgeleri gösterir.
Her simgenin yanında metin göstermek istiyorsanız, ‘Etiketleri göster’ geçişini etkinleştirmek için tıklayın.
Ardından, ‘Stiller’ sekmesine tıklayın.
Burada, ‘Varsayılan’, ‘Yalnızca Logolar’ veya ‘Hap Şekli’ne tıklayarak düğme stilini değiştirebilirsiniz.
Son olarak, ‘Blok Aralığı’ altındaki ayarları kullanarak sosyal simgeler arasındaki boşluğu değiştirebilirsiniz.
Menünün nasıl göründüğünden memnun olduğunuzda, ‘Kaydet’ düğmesine tıklayın.
Şimdi, web sitenizi ziyaret ederseniz, sosyal medya simgelerini canlı olarak göreceksiniz.
Bonus İpucu: WordPress Sitenize Sosyal Akışları Yerleştirme
WordPress menülerine sosyal medya simgeleri eklemek, farklı hesaplarınızda daha fazla takipçi ve etkileşim elde etmek için harika bir yoldur. Ancak Twitter, Facebook ve diğer sosyal profillerinizi tanıtmanın daha pek çok yolu var.
Daha fazla takipçi ve etkileşim elde etmenin en iyi yolu, web sitenize canlı bir sosyal akış yerleştirmektir. Bu, sosyal medya sitelerinizden gelen en son gönderileri ve ziyaretçilerin gönderilerinizle etkileşime geçmek veya sizi sosyal medyada takip etmek için kullanabilecekleri düğmeleri göstermenizi sağlar.
Web sitenize sosyal medya beslemeleri eklemenin en iyi yolu Smash Balloon kullanmaktır. WordPress için en iyi sosyal medya besleme eklentisidir ve Twitter, Instagram, Facebook ve daha fazlasından canlı beslemeleri yerleştirmenize olanak tanır.
Daha fazla bilgi için lütfen WordPress’e sosyal medya beslemelerinin nasıl ekleneceğine ilişkin WordPress eğitimimize bakın.
Umarız bu makale WordPress menülerine sosyal medya simgelerinin nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Ayrıca WordPress’e Facebook videosu yerleştir me kılavuzumuzu veya WordPress için en iyi Twitter eklentileri uzman seçimlerimizi görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Mrteesurez says
Infact users find it easier when they see social icon to easily share the post they see beneficial to their friends. In addition, one can also use sassy social share plugin, it also featured rich, thanks.
Jiří Vaněk says
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 says
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 says
Thanks for this article, it helped me a lot!
WPBeginner Support says
Glad our article was helpful!
Yönetici
Farhad says
Is there a way to have blog posts submitted to social media sites automatically?
Thank you.
WPBeginner Support says
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/
Yönetici
Jimmy Ekisa says
Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.
Shyam says
How to show icons of social profiles in footer?
WPBeginner Support says
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/
Yönetici
Kerry says
I’ve got the social media icons on my website. How do I link those icons to my social media profiles?
WPBeginner Support says
You would have the menu items be custom URLs
Yönetici
Vicki says
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 says
You would want to check with your theme’s support to see if this is due to the design of the theme itself.
Yönetici
Danielle says
I added the social media menu but it’s not showing on my site. What can I do?
WPBeginner Support says
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.
Yönetici
Lisa Jackson says
Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?
WPBeginner Support says
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.
Yönetici
andi moss says
What? No icons? Find our own?
WPBeginner Support says
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.
Yönetici
Bob Wright says
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 says
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/
Yönetici
Ankit says
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 says
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.
Yönetici
Jonathan says
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 says
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/
Yönetici
Elder Designer says
amazing tutorial keep it up
WPBeginner Support says
Glad you found our guide helpful
Yönetici
Stephanie Strand says
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support says
Glad our guide was helpful
Yönetici
Rupali Tripathi says
Thank you so very much for this video.
WPBeginner Support says
You’re welcome
Yönetici
Debbie Serjeant says
Icons are appearing without color … wonder what I did wrong?
WPBeginner Support says
You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.
Yönetici
Isaac says
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 says
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/
Yönetici
Sam Simson says
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 says
You would want to check with the support for your specific theme to see if that would be overriding your customizations
Yönetici
Tracy says
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 says
You may want to ensure the plugin was fully installed and activated for the select image to appear
Yönetici
Lea says
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 says
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.
Yönetici
Larry Hilton says
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 says
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
Yönetici
Michele A says
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support says
Glad our guide could help
Yönetici
Muneeb says
Icons are currently on the site but don’t work even link is added. whats the reason?
WPBeginner Support says
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.
Yönetici
Mr. Debtsmith says
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 says
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.
Yönetici
ARPIT says
Thank You Very Much for Essential Information that I was Seeking on the Internet.
Highly Appreciated.
WPBeginner Support says
Glad our article could be helpful to you.
Yönetici
Dan says
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 says
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.
Yönetici
David Cornish says
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 says
Hi David,
Please see our list of the best social media plugins for WordPress.
Yönetici
Rob Lilley says
Is there a way to add a target attribute, so the social page opens in a new tab/window?
Editorial Staff says
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.
Yönetici
Umarbhatti says
Hi,
This plugin looks awesome. Thanks!
Aman Singh says
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 says
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.
Yönetici