24 Haziran 2013 Pazartesi

Sosyal Simgeler ile TwentyEleven Navigasyon uzatın

Bu küçük yazıda TwentyEleven Tema Bizim RSS, bizim Twitter sayfası ve bizim Facebook profiline simgeleri ile bir bağlantı navigasyon nasıl ekleneceğini gösterir. PHP kodu tek bir satır yazmadan. Sen WordPress Menü ile bunu gerçekleştirmek için edebiliyoruz.
İlk Tasarım-> Menü arka uç gitmek ve CSS Sınıfları etkinleştirin. Bu nedenle biz doğru çok üst köşesindeki "Ekran Seçenekleri" tıklayın. Ve unter Eğer "CSS Sınıfları" için onay kutusunu ve Ekran Seçenekleri yakın "Gelişmiş menü özellikleri göster".
WordPress menü ekranı seçenekleri
Bundan sonra biz menü girişleri oluşturmak için "Özel Bağlantılar" kullanın. Biz RSS, Facebook ve Twitter adresleri ekleyebilir ve menü ekleyebilirsiniz. Orada CSS sınıfları için 3 menü girişleri atayın. RSS Feed sınıfı vardır rss , Twitter sınıf twitter ve Facebook facebook . Kaydetmek unutmayın.
WordPress Menü
Sana gibi bir sağ klik-> Save Image ile indirebilirsiniz bir sprite, hazırlanan .... Bu klasöre bu sprite kaydetmek zorundatwentyeleven / images / .
Sosyal Sprite
Sonra bir metin editörü ile dosyayı TwentyEleven style.css açın ve Menü blok sona ekleyiniz # erişmek bizim ek CSS. Biz eklemek çok yok. Biz görünümü ve pozisyon grafik metnini dışarı itmek, bizim 3 liste öğeleri sağa yüzer sağlar. Sadece hover, odak ve aktif devletler için, biz TwentyEleven arka plan geçişlerini aşmak için biraz zor CSS kuralı tanımlamanız gerekir.

  • #. Twitter, # erişim erişim. Rss, # erişim. Facebook'a {
  •     şamandıra : Doğru ;
  • }
  • # Erişim. Twitter bir, # erişim. Rss bir, # erişim. Facebook {
  •     arka plan : saydam url ( resim / sosyal - sprite . png ) 0 0 yok - tekrar ;
  •     dolgu : 0 ;
  •     metin - girinti : - 9999px ;
  •     genişliği : 70px ;
  • }
  • . # Rss bir {: 0 0 background-position;} erişim
  • . # Facebook erişim {background-position: 0-96px;}
  • . # Twitter bir erişim {background-position: 0-48px;}
  • . # Erişim rss a: hover, # erişim rss bir:. Odak, # erişim rss bir:. Aktif {
  •     arka plan : saydam url ( resim / sosyal - sprite . png ) 0 - 144px yok - tekrar ;
  • }
  • # Erişim twitter bir:.. Vurgulu, # erişim twitter a: odak, # erişim twitter bir:. Aktif {
  •     arka plan : saydam url ( resim / sosyal - sprite . png ) 0 - 192px yok - tekrar ;
  • }
  • # Erişim facebook:.. Vurgulu, # erişim facebook:. Odak, # erişim facebook: aktif {
  •     arka plan : saydam url ( resim / sosyal - sprite . png ) 0 - 240px yok - tekrar ;

Hiç yorum yok:

Yorum Gönder