in

En Hafif Sosyal Medya Eklentisi: CSS Share Buttons

Soolence.com

En Hafif Sosyal Medya Eklentisi: CSS Share Buttons

Piyasadaki en hızlı, en hafif, en datlı sosyal medya eklentisi CSS Share Buttons, hız problemi olanlara ilaç gibi gelecek. Yalnızca 1,5 kb olan bu eklentinin kullanımını sizler için anlattık…

İçeriklerimizin ziyaretçiler tarafından sosyal medyada paylaşılmasını sağlayan sosyal medya eklentilerinin en büyük handikaplarından biri, basit bir işlem için görselliğe yüklenmek üzere kodlarının şişirilip, sayfa yüklenme hızlarını oldukça düşürmesi. Bu noktada CSS Share Buttons adlı eklenti, ilaç gibi geliyor.

Eklenti, o kadar hafif kodlanmış ki CSS dosya boyutu sadece 1,5 kb. Evet, o kadar minnak ve hafif bir eklenti. Facebook, Twitter, Google+ ve Linkedin butonlarına sahip eklentimiz hem hızlı, hem mobil uyumlu responsive tasarım. Floating; yani sayfa yanına yapışma özelliği de bulunan eklentimizin kurulumu da kullanması da gayet basit. Görsel açıdan hoşumuza gitmeyen taraflarını da CSS kodlarına müdahale ederek aşabiliyoruz. Listemizde hepsine değindik.

1- CSS Share Buttons Kurulumu

Admin panelimizden Eklentiler > Yeni Ekle yolunu izliyoruz. Sağ taraftaki arama kutusuna CSS Share Buttons yazıp enter’a basıyoruz. Geliştiricisi “Purab Kharat” olan sonucun üstündeki Şimdi Kur butonuna tıklıyoruz. Eklentiyi Etkinleştir yazısına tıklayıp kurulum işlemini tamamlıyoruz.

2- CSS Share Buttons Kontrol Paneli

Eklenti admin paneli ana menüsüne direk olarak kendine yer açıyor. Bir kere ayarını yapıp bir daha yüzüne bakmayacağımız bir eklentinin admin menüsüne direk yerleşip ayak altında dolaşması biraz can sıkıcı bir durum. Kontrol paneli menüsü Ayarlar menüsüne dahil edilebilirdi. Neyse, eklentinin kontrol paneline admin ana menümüzden CSS Share yazısından ulaşıyoruz.

Kontrol panelinde sadece iki ayar var; Display Position ve hiç bir işe yaramayan bir kutu. Paylaşım butonlarının digcms.com’daki gibi görünmesi için şunları kutuya yazın gibisinden bir şeyler yazılmış fakat dediği site cortlamış. Orada nasıl görünüyordu bilemiyoruz. Verdiği css kodlarını kutuya yazdık fakat bir değişiklik göremedik.

3- CSS Share Buttons Kullanımı ve Özeleştirme

Paylaşım butonlarının nerede görüneceklerini ayarlamak için Display Position ayarını kullanıyoruz. Zaten başka da ayar yok.

Floating: Paylaşım butonları sayfanın solunda, simge, olarak alt alta ve sticky yani yapışık olarak yer alırlar.

Before: Butonlar yazınızın üzerinde görüntülenirler.

After: Paylaşım butonları yazının sonunda yer alırlar.

Before and After: Butonlar hem yazının üstüne hem yazının altında görünürler.

Manual: Eklentinin php kodunu manuel olarak istediğiniz yere ekleyerek, butonalrın istediğiniz yerde görüntülenmesini sağlar. Gerek yok.

Bu yerlerden istediğinizi seçerek Değişiklikleri Kaydet butonuna basıyoruz.

CSS Share Buttons Butonları

Butonların yazı tipleri ve altlarındaki gereksiz gölgelendirmeler bizim pek hoşumuza gitmedi. Bu yüzden eklentinin kodlarına müdahale ederek kabul edilebilir bir kıvama getirmeye çalıştık. Siz de yazı tipini değiştirmek ve gölgelendirmeyi kaldırmak isterseniz aşağıdaki adımları izleyin.

Butonların Yazı Tipini Değiştirme

#1 Admin panelimizden Eklentiler > Düzenleyici yolunu izliyoruz. Sayfanın sağ üst köşesinde Düzenlemek istediğiniz eklentiyi seçin: bölümünden CSS Share Buttons‘u seçip hemen yanı ndaki Seç butonuna tıklıyoruz. Sağ taraftan css-share-buttons/csssharebuttons.css‘e tıklıyoruz.

CSS Share Buttons Özelleştirme

#2 Düzenleme sayfası açılınca klavyemizden CTRL+F tuşlarına basarak sayfa içi aramayı açıyoruz. Arama kutusuna font-family yazarak ilgili kodu buluyoruz.  Kodun karşısındaki Inconsolata,sans-serif; yazan yere istediğimiz herhangi bir font ailesini yazabiliriz. Mesela Arial yazı tipi için Arial,sans-serif; Helvetica yazı tipi için Helvetica Neue,Helvetica,Arial,sans-serif; kodlarını kullanabilirsiniz. Kodun sonundaki noktalı virgüllere dikkat edin yalnız.

#3 Düzenlememiz bitince aşağıdaki Dosyayı Güncelle butonuna basıyoruz. Şimdi bu sayfadaki tüm kodları kopyalayıp https://cssminifier.com/ adresine gidiyoruz. Du bi dakka , neden yaptığımızı sonra anlatacağız. Kopyaladığımız kodlarımızı sitedeki Input CSS alanına yapıştırıyoruz. Alttaki Minify butonun basıyoruz. Sayfanın sağındaki Minified Output alanında kodlarımız beliriyor. Bu kodları olduğu gibi kodlayıp düzenleme alanımıza geri dönüyoruz. Bu sefer sağ taraftaki css-share-buttons/csssharebuttons.min.css‘e tıklıyoruz. Buradaki tüm kodları silip az önce diğer siteden kopyaladığımız kodları buraya yapıştırıyoruz ve Değişiklikleri Kaydet butonuna basıyoruz. İşlem bu kadar.

Şimdi yolu neden bu kadar uzattığımızı anlatalım. Eklentimiz kodlarını çağırırken sıkıştırılmış CSS dosyasını kullanıyor. Bu da butonların yüklenme hızını kısaltıyor. Biz ilk başta eklentinin ana CSS dosyasında değişiklik yaptık. Fakat eklenti sıkıştırılmış CSS’yi kullandığından, biz de ana CSS kodlarını CSS Minifier sitesinde sıkıştırdık ve ilgili alana yerleştirdik. Sadece ana CSS’de değişiklik yapsaydık, değişikliklerimiz çalışmayacaktı.

Peki CSS kodlarını sıkıştırmayla uğraşmak yerine direk sıkıştırılmış CSS üzerinden değişiklik yapsaydık olmuyor muydu? Oluyordu elbette. Fakat biz işin mantığını kavramanızı istiyoruz. Basit bir eklenti kurarken bir şey daha öğrendiniz fena mı?

Butonlardaki Gölgeyi Kaldırma

Yukarıdaki adımları tekrar tekrar yazmaya gerek yok. Aynı şekilde bu sefer css-share-buttons/csssharebuttons.css sayfasındaki box-shadow: 0 10px 6px -6px grey; kodunu bulup siliyorsunuz. Aynı işlemi css-share-buttons/csssharebuttons.min.css sayfasında da tekrar ediyorsunuz.

Geldik bir listemizin daha sonuna. Kafanıza takılan her türlü sorununuz için yorum alanımız hizmetinizde. Haftalık bültenimize kayıt olarak, böyle işe yarar konuların ayağınıza gelmesini sağlayabilirsiniz. Kendinize iyi bakın, görüşmek üzere…

Written by Ekrem Süyüncü

Soolence.com Blog sahiplerine yönelik bilgi verme, tavsiyede bulunma ve rehberlik etme amacı taşıyan ekipsel bir girişimdir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Soolence.com

WordPress All In One SEO Pack Eklentisi Kurulumu Ve Ayarları

Soolence.com

WordPress Contact Form 7 Kurulumu ve Ayarları