Sidebar Genişliğini Değiştirmek

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.

http://sanalduvar.googlepages.com/sidebar-ayarlari-1.jpg

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.

http://sanalduvar.googlepages.com/sidebar-ayarlari-2.jpg

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.
http://sanalduvar.googlepages.com/sidebar-ayarlari-3.jpg
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.

 http://sanalduvar.googlepages.com/sidebar-ayarlari-4-5.jpg

Ş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.

http://sanalduvar.googlepages.com/sidebar-ayarlari-6.jpg

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.

http://sanalduvar.googlepages.com/sidebar-ayarlari-7.jpg

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!

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

İlginizi çekebilir...

15 Yorum

  1. kumaşçı dedi ki:

    sidebarı genişletirken anasayfayı daraltmak gerek diyorsunuz

    • Veysel dedi ki:

      Eğer manuel olarak işlem yapacaksanız böyle olması mantıklı olacaktır.
      Yorumlayan kısmına isminizi yazmanız hoş olacaktır. Siteniz ile ilgili etiketleri yazarak ve site linkizini ekleyerek eğer backlink kasmayı düşünüyorsanız hoş bir durum değil. Kaldı ki site linkleri kapalıdır.
      Teşekkür ederim.

  2. tekstil, iplik, kumaş dedi ki:

    Selam
    yazıyı epey inceledim ama sorunum çözülmedi, sidebar genişliğini ayarlayabileceğim bir css kodu yok mu ?

    • Veysel dedi ki:

      Bu ayarlama temaya göre değişiklik göstereceği için sabit bir kod söylemek doğru olacağını sanmıyorum.
      Yorumlayan kısmına isminizi yazmanız hoş olacaktır. Siteniz ile ilgili etiketleri yazarak ve site linkizini ekleyerek eğer backlink kasmayı düşünüyorsanız hoş bir durum değil. Kaldı ki site linkleri kapalıdır.
      Teşekkür ederim.

  3. mustafa dedi ki:

    Selam temamın styl css kodlarında sidebar genişlik kodlarını bulamıyorum temadan temaya fark ediyormu

  4. BaybayKo dedi ki:

    Merhaba arkaraşım. WordPress temam war. Sitebarı tamamen sol almak istiyorum ama bir türlü başaramadım.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir