Sidebar Genisletmek
Birkaç arkadaşımın göndermiş olduğu e-postalara binaen şimdi bahsedeceğim konu blogumuzun “sidebar” kısmını nasıl genişletebilirim sorusuna cevap vermeye çalışacağım. Ancak ben bu sorunu biraz daha geniş tutup blogumuz da bulunan colonların(column) genişliklerini ve böylelikle blogumuzu nasıl boyutlandırabiliriz sorusuna genel bir cevap vermeye çalışacağım.
Konuyu WordPress’in “default” olarak adlandırılan teması üzerinden anlatağım.
Boyutlar ve stil ayarları WordPress temaları için “style.css” dosyasında yapılmaktadır.
Ancak tanımlamayı boyutunu değiştirmek istediğimiz dosya içerisinde id=”tanımlama” şeklinde görebilirsiniz. Bu tanımlamayı dosyayı açtığınızda sayfanın en başında görebilirisiniz. Çünkü böylelikle bölümünün içeriğini belirlemeden önce ona şeklini kazandırmak gerekir. WordPress temalarında eğer bir sidebar mevcut ise bu genelde sadece sidebar diye tanımlanırlar. Fakat iki veya daha fazla var ise bunlarda genelde l_sidebar ve r_sidebar şeklinde görmeniz mümkün yani sol(left) ve sağ(right) olacak şekildedirler.
Açıklamayı “default” temasından yapacağımdan dolayı burada bir tane sidebar olması sebebi ile tema hazırlanırken tanımlama yani id=”sidebar” şeklinde yapımıştır.
Aynı şekilde index.php dosyası için de bir tanımlama yapılmıştır. Buradaki boyutlandırma baktığımızda class=”narrowcolumn” ile yapılmış. Bunu nereden biliyoruz sorusuna “style.css” dosyasından kontrollerimiz ile söyleyebiliriz. Çünkü id=”content” için bir boyut tanımlaması yapıladığını görüyoruz.
Ben burada sizlere sidebar’ın genişliğini artırmak kaydı ile yapacağımız değişiklikleri kaleme alıyorum. Eğer bir sidebar’ı genişletmek istiyorsan bu fazlalığı başka bir yerden kısmamız gerekiyor bunu da yandaki class=” narrowcolumn” dan yapacağımız kesme ile olacak. Eğer bu bölümün boyutlarında bir değişiklik yapmak istemiyorsak komple sayfanın genişliğini arttırmamız gerekiyor ki genişlettiğimiz sidebar sayfanın aşağısına kaymasın.
Şimdi işlemimize başlayalım “style.css” dosyasını açıp resimde görmüş olduğunuz satırları buluyorsunuz ve sidebar’ımızın 190px olan boyutları 300px olarak büyütelim ve “magrin-left” komutu ile verilen 545px lik farkıda haliyle geri çekmek gerekecek. Bunuda yapmış olduğumuz fark kadar yapmamamız gerekir yani 435px’e düşürmemiz gerekiyor.
Bu değişiklikleri yaptıktan sonra sidebar’ımınız sayfanın altına düştüğünü göreceksiniz. Bunu düzeltmek için sayfanın genişliğinin sabit olduğunu düşünüyoruz. “default” temamız için verilen sayfa genişliğini eğer öğrenmek isterseniz, “header.php” dosyasında id=”page” tanımlamasının “style.css” dosyasındaki stilini incemeniz yeterli.
Şimdi sayfanın altına kayan sidebarı yukarıya çekelim. Bunun için “index.php” dosyasındaki class=”narrowcolumn” tanımlamasını “style.css” dosyasındaki stil ayarlarını buluyoruz.
Ve sidebar’ımızda yaptığımız genişlik değişikliği kadar kısaltıyoruz, yani 450px’den 340px’e indiriyoruz.
İşlemlerimizi tamamladığımızda aşağıdaki görünümü elde edeceğiz.
Aslında yaptığımız tanımlama takibi ve .css stil dosyasındaki boyut değişikliği orantılı bir şekilde yapmakla olacak.
Umarım faydalı olmuştur, kolay gelsin!