Eklentisiz WordPress Sosyal Medya Butonları Ekleme
6 Aralık 2018Bu yazımızda sizlere hiçbir eklenti kullanmadan WordPress blogunuza sosyal medya butonları eklemeyi göstereceğiz. Günümüzde bir çok tema artık bu butonlar ile birlikte geliyor. Fakat halen daha sosyal medya butonları eksik olanlar mevcut. Bazıları ise FontAwesome ile yapılan butonlar olduğu için küçük veya göze hitap etmiyor.
Bu işi gören bir çok eklenti mevcut fakat böyle basit bir işlem için eklentiler kullanmak yerine basit birkaç kod eklemek, sitenizin daha hızlı açılmasına ve eklentilerden kaynaklanabilecek bazı güvenlik açıklarını engellemenize olanak sağlayacaktır.
[the_ad id=”775″]
Eğer henüz okumadıysanız WordPress Güvenlik Önlemleri ve WordPress Site Hızlandırma Yöntemleriyazılarımızı mutlaka okumanızı okumanızı tavsiye ederiz
Bu yazımızda kendi bulacağınız sosyal medya ikonlarını, herhangi bir eklenti kullanmadan birkaç basit HTML ve CSS koduyla sitenize nasıl ekleyebileceğinizi öğreneceksiniz.
Anlatıma başlamadan önce önemli bir hatırlatma yapmakta fayda var. Temanızda değişiklik yapmadan önce temanızın ve sitenizin yedeklerini almanızı tavsiye ederiz.
Öncelikle en önemli adımlardan bir tanesi sitenize uygun sosyal medya ikonları bulabilmenizdir. Google’da kısa bir arama ile bir çok ücretsiz ikon setine rahat bir şekilde ulaşabilirsiniz. Ücretli tasarımlar için de GraphicRiver gibi siteleri ziyaret edebilir 3-5$ gibi ücretlerle istediğiniz tasarımları satın alabilirsiniz.
Seçtiğiniz sosyal medya ikonlarını sunucunuza Cpanel’deki Dosya Yöneticisi veya Filezilla gibi FTP programları ile atın. İşin bundan sonraki kısmında HTML ve CSS yardımıyla bu ikonları uygun bir tasarımla sitemize ekleyeceğiz.
HTML Kodları
Öncelikle HTML kodları ile başlayalım. Aşağıdaki yazılı kodları, sosyal medya ikonlarını sitenizde nereye eklemek istiyorsanız, sitenizin o bölümüne ait dosyasına eklemelisiniz.
- Örneği Üst kısımda görünmesini istiyorsanız Header.php’ye eklemelisiniz.
- Eğer sidebar kısmında görünmesini istiyorsanız, WordPress Menüsü –> Görünüm –> Bileşenler –> Metin bileşeni oluşturup aşağıdaki kodları yazabilirsiniz..
- [the_ad id=”144″]
Not: Eğer sizde sitenizde yazı içine kodlar eklemek istiyorsanız WordPress Yazı İçine Kod Ekleme yazımızı okuyabilirsiniz.
|
1 2 3 4 5 6 7 |
<div class="sosyal"> <ul id="sosyal"> <li><a href="Facebook Adresiniz"><img src="facebook-sosyal-medya-icon-linki" /></a></li> <li><a href="Twitter Adresiniz"><img src="twitter-logo-resmi-linki" /></a></li> <li><a href="Youtube Adresiniz"><img src="resim-linki" /></a></li> </ul> </div> |
CSS Kodları
CSS kodlarını temanızın style.css dosyasına eklemelisiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#sosyal { float:left; } #sosyal li { list-style: none; padding-right:3px; } #sosyal a:hover { opacity: 0.7; visibility: visible; } |
Örnek olarak kullanabileceğiniz CSS kodlarını yukarıda bulabilirsiniz. Kısaca CSS kodlarının özelliklerinden bahsedersek;
- Float left komutu ile birlikte ikonları sol tarafa yaslamanıza yardımcı olacaktır. Right komutu ile sağa yaslayabilir veya Text-Align: Center komutu ile ortalayabilirsiniz.
- Eğer ikonların üst üste olmasını isterseniz Float komutunu silebilirsiniz. Bu durumda #Sosyal li komutuna Padding-top: 3px; eklemeniz ikonların arasında 3 piksel boşluk olmasını sağlayacaktır.
- List-Style: None komutu listeme özelliklerini anlatmaktadır.
- #sosyal li satırındaki Padding-right: 3px komutu her ikon arasında 3 piksel boşluk olmasını sağlayacaktır.
- Hover komutu ise imleç sosyal medya ikonunun üzerine geldiğinde saydamlık sağlayacaktır.
Piksellerle ve diğer komutlarla oynayarak tasarımınıza en uygun görünümü elde etmeye çalışın.
WordPress sitenize sosyal medya ikonları eklemek işte bu kadar kolay. Takıldığınız yerleri yorum yaparak bizlere sorabilirsiniz.
[the_ad id=”790″]
