Aylardır wordpress üzerine yazılar yazmıyordum ama bugün bir değişiklik yapıp siteme uyguladığım sistemi sizinle paylaşmak istedim. Sosyal medyanın artış göstermesi ile birlikte sitelerin sosyal ağları paylaşma isteği artıyor ve bunun için yüzlerce farklı tasarımla karşılaşabiliyoruz.

Bugün anlatmak istediğim kodlar ile sol tarafta ikonların üzerine geldiğinizde açılan bir pencere yapacağız ve açılan pencereye tıkladığımda sosyal medya sitesine gidiyoruz. Aslında ben bunu kategoriye dönüştürmeyi düşünüyorum daha tatlı olacağını ve googlenin son zamanlarda geçiş sağlamaya çalıştığımı bir geçişi siteme uygulayacağımı düşünüyorum. Neyse çok fazla konuştum şimdi ilk olarak sitede nasıl göründüğüne bakalım daha sonra neler yapmanız gerektiğini sizinle paylaşacağım.




Resimi büyütürseniz ok ile gösterdiğim kısımı yapmaya çalışacağız. Bunun için ilk olarak yapmamız için az wordpress bilgisi gerekli.

Kurulumu
  • ilk olarak eklentiyi aşağıdaki KOD 1'i alıyoruz ve Css'ye ekliyoruz bunun için yapıcağınız işlemleri size tarif ediyorum.
  • sitenizinadresi.com/wp-admin/theme-editor.php giriyorsunuz. ( Wp-admin --> Görünüm --> Düzenle --> Style.css =
  • Düzenleme sayfası açıldıktan sonra temanıza ait olan style.css tıklıyorsunuz ve en aşağı gelerek aşağıdaki Css kodunu yapıştırıyorsunuz. ( Not: resimleri şimdilik domatessuyu.com'dan çekiyor ama siz uzantısını değiştirirseniz sağlıklı olacağınız düşünmekteyim. )
  • CSS kodunu buradan indirebilirsiniz.
Style.Css Kodu : 
.domatessuyu-wordpress{     background:url('http://www.domatessuyu.com/dsosyal/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px;    z-index:1000;}
 .domatessuyu-wordpressc{   background:url('http://www.domatessuyu.com/dsosyal/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px;    z-index:1100;}
 .domatessuyu-isi{margin:0px 0 0 43px}
  .domatessuyu-twitter{background:url('http://www.domatessuyu.com/dsosyal/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
  .domatessuyu-twitterc{background:url('http://www.domatessuyu.com/dsosyal/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px;    z-index:1100;}
 .domatessuyu-isitwitter{margin:0px 0 0 43px}
  .domatessuyu-facebook{background:url('http://www.domatessuyu.com/dsosyal/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px;    z-index:1000;}
  .domatessuyu-facebookc{background:url('http://www.domatessuyu.com/dsosyal/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px;    z-index:1100;}
 .domatessuyu-isifacebook{margin:0px 0 0 43px}
  .domatessuyu-rss{background:url('http://www.domatessuyu.com/dsosyal/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px;    z-index:1000;}
  .domatessuyu-rssc{background:url('http://www.domatessuyu.com/dsosyal/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px;    z-index:1100;}
 .domatessuyu-isirss{margin:0px 0 0 43px}
Style.css dosyasının en altına bu kodları yapıştırdıktan sonra yapacağınız işlem aslında çok basit.

1. ve 2. BÖLÜMÜ YAPMAK İÇİN TIKLAYINIZ
  • wp-admin panelinde Görünüm --> Bileşenler --> Metin Kutucuğunu sağ tarafta bulunan herhangi bir yere gönderin ve içine aşağıdaki kodu yapıştırın. Wordpress kullanan arkadaşların anlayacağı dilde konuşmam gerekirse aşağıdaki kodu direk olarak witget oluşturup metin html kutusunun içine yapıştıracaksınız.
  • Kodu indirmek için widgetcode tıklayınız ve içindeki kodu alıp witget yapıştırınız.
  • Kodların içinde düzeltmeniz gereken yerler zaten belli. Domatessuyu yazarsanız çıkar o kodları facebook, twitter, +google ve rss adreslerini değiştirmeniz gerekmektedir.

SON İŞLEM
  • Gelelim son işleme ilk resimde görünen Facebook açılır kapanır pencereyi yapmak için header.php'ye ufak bir kod yapıştırmamız gerekiyor.
  • Görünüm --> Düzenleyici --> header.php seçiyoruz. Daha sonra aşağıdaki kodu </head > kodunun hemen üzerinde bir yere yapıştırıyoruz.
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
İşlem bitti herşey bu kadar kafanızı umarım karıştırmamışımdır. Eğer aklınıza gelen soru olursa iletişim kısmından benimle iletişime geçmeyi unutmayın yada yorum yaparak yardım isteyebilirsiniz. İlerleyen zamanda bunu wordpress eklentisi yapmak için çabam olacak başarırsam sizler için yayınlayacağım.

Kaynak : WordPress Sağa Yaslı Sabit Sosyal İkonlar Yapma