Birkaç forum sitesinde ve çokça da Wordpress.org forumlarında kullanıcıların sürekli “Cssremix benzeri Wordpress temalarını” nasıl oluÅŸturabileceklerine dair sorular görüyordum. Aslına bakılırsa çokta ilgimi çekmiyordu çünkü benim herhangi bir galeri görünümlü Wordpress temasıyla veya bu yöndeki bir blog temasıyla iÅŸim olmuyordu. Ancak son hazırladığım projede haliyle böyle bir temaya ihtiyaç duydum. (Bu projenin detaylarından ilerideki günlerde bahsedeceÄŸim) Böylelikle aramaya koyuldum. Bu tarz bir temanın nasıl oluÅŸturulabileceÄŸi ve yayınlanacağı ilgimi çekmeye baÅŸladı birden. Bir forum yazısında kullanıcının basit bir iki Css kodu yazdığını ve iÅŸlemi böyle yapabileceÄŸini söylediÄŸini gördüğümde kafamın üstünde “lambalar” yanmaya baÅŸladı. Tabi ya! Css ve Xhtml ile bu iÅŸ halledilebilir. Çünkü zaten Loop özelliÄŸi temada hali hazırda devrede olan birÅŸey. Onun haricinde fazladan bir döngü oluÅŸturmaya gerek yok! Bu iÅŸi local bilgisayarda denedim ve çokta zahmetli bir süreç geçirmeden istediÄŸime ulaÅŸtım. Bilginin paylaÅŸtıkça çoÄŸaldığını düşünen bir insan olarak teknik detayları ve kod açıklamalarıyla birlikte ÅŸimdi biraz yaptığımız iÅŸi anlatalım.

Åžimdi, bu iÅŸlemi hangi temada uygulayacağımızı sorarsanız, ben Wordpress’in Default temasını kullandım. Default temayı kullanmamdaki amaç bu iÅŸlemin en basit temalarda bile olabileceÄŸini kanıtlamaktı. Sanırım iyi bir seçim yaptım ve aÅŸağıda okuyacağınız iÅŸlemi Default tema üzerinde deneyerek olumlu bir sonuç aldım. Default tema dışında bir iki temada da denemeler yapıp olumlu sonuçlarla karşılaÅŸtım. Åžimdi dosyalarımızı düzenlemeye geçmeden önce biraz bilgi vereyim. Kullandığımız Wordpress temalarında her zaman bir döngü baÅŸlangıcı vardır. Bu döngü sayesinde Wordpress’te (tercihlerimize de baÄŸlı olarak) son 10 yazımız görünür ve daha sonra döngü sonlandırılır. Bu Wordpress’in klasik Loop olayıdır. Kullanıcıların ve geliÅŸtiricilerin ekstra müdahalesiyle bu teknik bahsettiÄŸim durumdan farklı ÅŸekilde de yapılabilir ancak Php ve Wordpress’e fazla hakim olmayıp sadece sitesinde iki kolonlu bir görümü elde etmek isteyen kullanıcılar için Css ve Xhtml’den faydalanmak daha iyi olacaktır. Döngünün sonuçları Wordpress temamızda ilgili alanda kodlanmıştır ve döngüde gelen sonuçlar eni, arkaplan rengi, link rengi, baÅŸlık büyüklüğü belli bir alan içinde geri döndürülür. Bizim yapmaya çalıştığımız ÅŸey bu döngü alanında mümkün olabildiÄŸince çok sonuç göstermek ve bunu alıştığımız bir görünüm olan “Galeri Görünümü”ne çevirmek. Ben yazımda döngü alanında sabit en ve boyda 2 adet sonucun dönmesini saÄŸladım. Yani bunun manası bir döngü satırında birbirinden içerik olarak farklı ama stil olarak aynı iki yazı gösterebilmek. Bunu nasıl yaptığımızı da biraz detaylandırarak anlatalım.

Artık tema dosyamızı açıp işlemimize başlayabiliriz. Yapacağımız tek şey şu; yazılarımızın gösterildiği alandaki mevcut alanı daraltmak ve Css ve Xhtml kodlarını buna göre düzenlemek. Sizin de kullandığınız temalarda bir Post ve bir de Sidebar alanı vardır. Bu alanların Css kodları temanızın style.css dosyasında tanımlanmıştır. Şimdi ben kullandığım tema olan Default tema üzerinden bu tanımlamaları size söyleyeceğim. Öncelikle default temanın style.css dosyasını herhangi bir metin editörü ile açın. Daha sonra aşağıdaki kodu bulun, bu alana yapacağımız değişikliklerle temamızı şekillendireceğiz;

.post {
margin: 0 0 40px;
text-align: justify;
}

bu alanı bulduktan sonra aşağıda yazmış olduğum iki parametreyi ekleyerek dosyayı kaydedin.

.post {
margin: 0 0 40px;
text-align: justify;
width:200px;
float:left;
}

Gördüğünüz gibi sadece post sınıfıyla tanımlanmış olan gönderi alanının genişliğini 200 piksele getirdim ve sürekli biçimde sola yaslanmasını sağladım. Yaptığım şey bundan ibaret. Daha sonrasında gönderilerimde 180*123 px boyutunda sabit resimler kullandım. Böylelikle gönderilerimin eni ve boyu eşit olmuş oldu. İstersek .post sınıfı içinde height:200px gibi bir değer atayarak 200*200px boyutunda bir alan da elde edebiliriz. Ancak ben Galeri tarzı sitelerde sabit genişlikte ve boyutta thumbnail resmi kullanılacağını düşündüğüm için Height değeri vermedim. Bunu isterseniz siz verebilirsiniz.

Default temam yaptığım işlemlerden sonra aşağıdaki hali almış oldu. Bundan sonra temamın index.php dosyasını düzenleyerek kategori, tarih ve yorum gibi alanları dilediğim yere alabilirim. Bu alanların yerleşimi ve görünümü tamamen size kalmış. Ben herhangi bir değişiklik yapmadım.

Bunun dışında daha geniş temalarda daha iyi sonuçlar alabileceğiniz ortada. Çünkü post alanı ne kadar geniş olursa bir gönderiyi sınırlamanız o kadar küçük olacaktır ve bu büyük alan küçük gönderilerle daha çok dolacaktır. Bunun denemesini de bir 900px genişliğinde temada yaptım, boyutları biraz daha küçülterek tek satıra 4 gönderi sığdırmayı başardım. (Tabi sidebar ve diğer alanları bozmadan)

Bu işlemi Default dışındaki temalara da rahatlıkla uygulayabilirsiniz. Yeter ki temanızı iyi ezberleyin ve hangi sınıfın nerede neyi gösterdiğini bilin. Bunun için temanızın index.php ve style.css dosyasını inceleyebilir değişiklikler yaparak fikir edinebilirsiniz.

Belki çok fazla aradığınız bir özellik değildir ama yinede bildiğimi paylaşmak adına yazdığım bir makale oldu. Soru ve sorunlarınızı bu yazının yorumlarında belirtirseniz size daha da fazla yardımcı olabilirim. Umarım işinize yarar.

Rastgele Yazılar