Yeni menü hakkında
Bu sefer site içindeki yeniliklerden, gelişmelerden bahsetmek istiyorum. Çok başarılı bir blog yazarı olmadığımı biliyorum, çok büyük iddalarım da yok. Ben sadece yaparken öğrenmek, öğrenirken not etmek(paylaşmak) istiyorum. İlk yazılarımda neden bu tarz bir tema seçtiğimi, artılarını, eksilerini ve kendime uyarladığım yerlerden bahsetmiştim. Bu sefer yukarda gördüğünüz menü resimleri yeni. Eski hali için sitenin en altındaki tema linkine bakabilirsiniz.Menüdeki resimler aslında tek resim, Tek resim dosyasını çağırıp farklı posisyonlarını seçerek gerekli şekilde sitede kullanma işlemine CSS Sprite tekniği deniliyor. avantajları ise sunucuya her resim için tek tek istek göndermektense tek sorgu ile cağırmak trafiği rahatlatıyor. Bir diğeri ise özellikle benzer renkli resimlerde dosya boyutunda kazanç oluyor. Bu teknik hakkında daha detaylı bilgi Web Deneyimleri (Volkan Görgülü) deki videoyu izleyebilirsiniz.
CSS Sprite resmini oluşturmada burdaki online hizmet kullandım. Bu sitenin güzelliği kullanacağın resimleri bir zip dosyası halinde gönderiyorsunuz ve o size hazırlanmış halini sunuyor, dahası css kodlaması yaparken yardımcı olacak olan resmin kordinatlarını da veriyor.
Şimdi kodlara geçmeden önce girişte tema bağlantısına yönlendirmiştim ama gene dayamadım ve resmi paylaşıyorum.
-
Wordpress’de sitedeki sayfaları listelemek icin wp_list_pages fonksiyonu kullanılıyor bunun çeşitli parametreleri var. Şu sayfaları gösterme, hepsini göster, sadece bunları göster, <li> etiketleri arasında göster gibi başlıca etiketler gibi bir çok parametresi var. Detaylar için buyrun
Bu fonksiyonu siteme göre düzenlemiş halinin html çıktısı şu şekilde.
<ul> <li class="page_item ana current_page_item"><a href="#">Anasayfa</a></li> <li class="page_item page-item-1"><a href="#" title="Hakkında">Hakkında</a></li> <li class="page_item page-item-2"><a href="#" title="Projeler">Projeler</a></li> <li class="page_item page-item-3"><a href="#" title="İletişim">İletişim</a></li> <li class="page_item page-item-4"><a href="#" title="Sanal Yaşam">Sanal Yaşam</a></li> </ul>
Burada bizi ilgilendiren noktalar page_item, page-item-#, ve current_page classları. ayrıca orda “ana” isimli bir class daha var, onu ben elle verdim. Temada zaten <li> etiketleri düzenli bir şekilde sıralı. Benim sadece kodlarda düzenlidiğim şeyler şınlar;
- menüler arası mesefa margin değeri ile verilmişti, arkaplan resmi koyduğumda yazı resmin üstünde gelmesin diye padding ile içeriği kaydırdığımda menüler arası mesafe gereğinden fazla olduğu için margin değerini kaldırdım.
- link üzerinde gelince altında border çıkıyordu bu özelliği kaldırdım.
- aktif sayfa olduğunu gösteren border-bottom kalınlığını, rengini ve sitilini değiştirdim.
ul li a{background: url('images/menu/navsprite.png') no-repeat ;}
.page_item a:link, .page_item a:visited{color:#fff; text-decoration:none; font-weight:bold;padding:0 10px 10px 26px;}
.current_page_item a:link, .current_page_item a:visited {color:#fff;font-weight:bold; border-bottom:2px dashed #0099cc;
padding-bottom:10px;}
#nav ul li.ana a{background-position: 0 -30px; }
#nav ul li.page-item-1 a{background-position: 0 -84px; }
#nav ul li.page-item-2 a{background-position: 0 -192px; }
#nav ul li.page-item-3 a{background-position: 0 -138px; }
#nav ul li.page-item-4 a{background-position: 0 -246px; }
ilk satırda bütün li etiketlerimizin içindeki a (link) etiketlerinine css sprite resmini atadım. 2. satır zaten temanın kendi satırı ben sadece az önce bahsettiğim padding ve margin değerlerini ayarladım bu satırda.bir sonraki satırda current_page yani aktif sayfanın durumunu belirttiğimiz tanımlamalar bulunuyor. altı çizgili özelliğini kendime göre düzenledim. Geri kalan kodlar da her sayfa için kişisel classlarını kullanarak ilk satırda tanımladığım arkaplanı kordinatlara göre tanımladım.
Bu şekilde sonuca ulaşmadan önce farklı yollarla sonuca ulaşmaya çalıştım ama bir türlü istediğim gibi olmadı. Hatalarımdan birisi de bir class ile sadece arkaplan tanımlayıp başka bir class ile kordinatını ayarlamaya çalışıyordum. Burda bilinmesi gereken 2 şey var birincisi Fatih Hayrioğlu ‘na danışarak öğrendiğim css baskın seçici konusu. Merak edenler için burdan. Bir diğer konu ise class üzerinden bir özellik tanımlandığında diğer class kısmi müdalede bulunamıyor.bu ikincisi biraz karışın gelebilir ama yukarıdaki örnek kodlara bakarsanız göreceksiniz ki, “ul li a” şeklinde tanımlama yaptım eğer bunu yine hepsini kapsıyan “.page_item” classı ile yapsadım daha sonraki kordinat tanımlamalarım çalışmıyacaktı. (en azından ben çalıştıramadım 
)
Teşekkürler Fatih Hayrioğlu, ilginiz ve hızlı geri dönüşünüz için.
Son olarak bir ufak değişiklik daha söz konusu oda RSS işini feedburn üzerine taşıdım.