Yeni temaya geçtik. Şimdiden birçoğunuzun aklında soru işaretleri vardır bu tema üzerindeki özelliklerin nasıl yapıldığına dair. Gelin bazılarını açıklayalım ve tema hakkında ileride sorabileceğiniz birçok soruyu yanıtlayayım 🙂
Yeni tema hakkında merak ettikleriniz
Her tema değişimimden sonra birçok soru geliyor iletişimden tema ile alakalı 🙂 Bazı sorular o kadar çok soruluyor ki, tekrar tekrar yanıt vermek zorunda kalıyorum. O nedenle şimdiden sorabileceğiniz birçok soruyu yanıtlamaya çalışacağım 🙂
Temayı sen mi dizayn ettin?
Temanın dizayn kısmı bana ait değil. Bildiğiniz üzere kodlama yönüm ağır basıyor ve dizayn etmek gerçekten yoruyor beni. O nedenle bu temayı ücretini ödeyerek Cenk Akyıldız arkadaşımıza dizayn ettirdim. Temanın tüm görsel tasarımı Cenk’e ait. Kendisinden PSD formatında teslim aldım dizaynı.
Kodlamak sana ait öyleyse?
Evet, temanın tüm kodlamaları bana ait. Cenk dizayn etti ve kendisinden istediğim PSD formatında bana teslim etti. Ben ise önce XHTML formatına dönüştürdüm. Ardından WordPress’e uyarladım ve gerekli kodlamaları yaptım.
Haber manşetini nasıl yaptın? Eklentisi mi var?
Haber manşet bölümünün herhangi bir eklentisi yok arkadaşlar 🙂 En azından ben kullanmıyorum. Temanın Javascript tarafı jQuery tabanlı. Manşet ve diğer bölümlerin kodlaması ise bana ait yine. Yani jQuery ile bu işler çok daha kolay oluyor. Yoksa salt JavaScript ile de kodlayabilirdim.
Tema üzerindeki tab menüler peki? Eklentisi mi var?
Tema üzerindeki tüm tab menülerin de kodlaması bana ait. Bir eklenti kullanmadım. Zaten tab menüler Cenk’in yolladığı tema dizaynı üzerinde yer alıyordu. Bana XHTML formatına dönüştürmek ve çalışır hale gelebilmesi için kodlamak kaldı.
Her yazı için bir resim var. Bu nasıl oluyor?
Yazı eklerken, özel alanlardan mansetresim adında bir anahtar tanımlıyorum. Bunun değerine ise yazı ile alakalı resmin tam URL adresini giriyorum. Bu resimler kendi sunucumdan olmuyor. Google Görsel Arama ile resimleri buluyorum. Ancak resmin kaynak sitesinin bant genişliğini tüketmemek için, tanımlanan tüm resimleri kendi sunucuma yükletiyorum. Böylece ne resmi aldığım sitelerin kaynağını tüketiyorum, ne de resimler yavaş yükleniyor.
Resimler ise tema üzerinde şu şekilde yükleyebiliyorsunuz:
Buradaki $id, yazının ID numarası oluyor.
Her resmin birden fazla boyutlandırması var. Bu nasıl oluyor?
Bu özel bir resim ufaltma sistemi ile. Bunu sizinle paylaşmayacağım. Ancak mantık kolay. Bu dosya yazı ID numarasını ve istediğim resim boyutlarını söylüyorum. O da, o yazıya ait resmi alıp verdiğim boyutlara göre biçimlendiriyor. Ve sonrasında bu yeni resmi sunucuma kaydediyor. Ve her bu resmi çağırdığımda, sunucu üstünden okuyarak çıktı veriyor. Eğer yazıya ait bir resim yoksa, o durumda boş ve beyaz bir resim çıktı veriyor.
Peki ana sayfadaki yazı resim ve başlık kayar liste?
O bölüm de eklenti değil arkadaşlar 🙂 Onu da kendim kodladım.
E-posta ile abonelik nasıl oluyor?
FeedBurner’ın kendi özelliği arkadaşlar 🙂 http://www.feedburner.com üzerinden hesap açarak, bu özelliği kullanabilirsiniz.
Yazıyı arkadaşlara yollamak peki?
Onu da FeedBurner üzerinden kullanıyorum.
Paylaşma bölümü nasıl oluyor?
O da EkleBunu.
Neden tema simgeleri birleşik?
Buna CSS Sprite diyoruz arkadaşlar. Böylelikle sunucuya daha az istek gidiyor ve site fark edilir derecede hızlı yükleniyor. Konu ile alakalı olarak:
- CSS Sprite’ların kullanış alanları
- CSS Sprite Tekniği
Bu tekniği birçok noktada kullandım. Örneğin temanın genel kısmını kaplayan resimler tek bir parça:
http://img.dmry.net/blog/01/dmry-tema-css-sprite.jpg
Yeni kod renklendirme
Kod renklendirme eklentisini değiştirdim. Yeni kullandığım eklenti SyntaxHighlighter Plus
Dizin yolları?
Üst tarafta,
Nerdeyim? › Giriş › Sevgili Günlük › Yeni tema hakkında merak ettikleriniz
gibi dizin yolları görüntülenir. İşte bu Breadcrumb NavXT – Core eklentisi ile oluyor.
Okunacak listem ve favorilerim
Bu iki özellik tamamen yeni ve kendim kodladım. Sistem çerezler ile çalışıyor. Çerezleri sildiğiniz vakit tüm liste kayboluyor. Okunacak listesine eklediğiniz bir yazıyı görüntülediğiniz vakit, listeden siliniyor. Favoriler de ise böyle bir durum söz konusu değil 🙂
Stil dosyan boş? Nasıl oluyor bu?
Evet stil dosyam boş, ve sadece zorunlu olarak o dizinde yer alıyor. Çünkü stil dosyası olmayınca, WordPress temayı geçerli kabul etmiyor. Her bölümün kendine özel bir stil dosyası var ve bu dosyalar HTML kodlar arasına yükleniyor. Yani stil dosyası ayrıca yüklenmiyor. Bu sayede site daha hızlı açılıyor.
Css çıktı verilmeden önce bir güzel temizleniyor. Yani yorum satırları, boşluklar ve gereksiz kodlar siliniyor. Böylece boşluksuz bir stil bölümü elde ediliyor. Bunu küçük bir PHP fonksiyonu tek başına hallediyor.
function css_optimize($kaynak) {
echo str_replace('; ',';',str_replace(' }','}',str_replace('{ ','{',str_replace(array("\r\n","\r","\n","\t",' ',' ',' '),"",preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!','',$kaynak)))));
}
Peki JavaScript kodların?
JavaScript kodları da CSS kodları ile aynı mantıkta yükleniyor. Ayrıca javascript dosyaları yüklenmiyor ve kodlar sıkıştırılarak HTML arasına alınıyor.
JavaScript kod sıkıştırma için hazırlanan birçok betik inceledim ancak hepsi JavaScript kodlarının çalışmasını engelledi. Ancak sonrasında JSMin ile tanıştım. Kusursuz şekilde JavaScript kodlarını temizliyor ve biraz da olsa küçültüyor.
Yazıya ait sadece yorum sayısını nasıl buluyorsun?
Özel bir fonksiyon yazdım. Şöyleki:
function yazi_toplam_yorum($yaziID) {
global $wpdb;
$toplamyorum = (int) $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$yaziID' AND comment_approved = '1' AND comment_type NOT IN ('trackback', 'pingback')");
return $toplamyorum;
}
Kullanım:
Bunu single.php, index.php içerisindeki döngü (Loop) arasına koyacaksınız.
Yazıya ait sadece geri izleme sayısını nasıl buluyorsun?
Ona da özel bir fonksiyon yazdım. Şöyle:
function yazi_toplam_trackback($yaziID) {
global $wpdb;
$toplamtrackback = (int) $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$yaziID' AND comment_approved = '1' AND comment_type ='trackback' ");
return $toplamtrackback;
}
Kullanım:
Bunu da single.php, index.php içerisindeki döngü (Loop) arasına koyacaksınız.
Yazıya ait sadece ping sayısını nasıl buluyorsun?
Ona da bir fonksiyon yazdım. Şöyle:
function yazi_toplam_pingback($yaziID) {
global $wpdb;
$toplampingback = (int) $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$yaziID' AND comment_approved = '1' AND comment_type ='pingback' ");
return $toplampingback;
}
Kullanım:
Bunu da single.php, index.php içerisindeki döngü (Loop) arasına koyacaksınız.
Her üçünde de fonksiyon kodlarını temanıza eklemeniz gerekiyor. Bunları varsa functions.php dosyasına ekleyin.
Eğer yoksa functions.php adında bir dosya oluşturun(tema klasörünüz içerisine). Ve içerisine alttaki kodları ekleyin:
get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$yaziID' AND comment_approved = '1' AND comment_type NOT IN ('trackback', 'pingback')");
return $toplamyorum;
}
function yazi_toplam_trackback($yaziID) {
global $wpdb;
$toplamtrackback = (int) $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$yaziID' AND comment_approved = '1' AND comment_type ='trackback' ");
return $toplamtrackback;
}
function yazi_toplam_pingback($yaziID) {
global $wpdb;
$toplampingback = (int) $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$yaziID' AND comment_approved = '1' AND comment_type ='pingback' ");
return $toplampingback;
}
?>
İletişim bölümü eklenti mi?
İletişim bölümü eklenti değil arkadaşlar 🙂 Onu da kendim kodladım 🙂