WordPress Blocks Teması Header Resmi Eklemek

Kendi sayfamda kullandığım Blocks2 temasının farklı bir verisiyonu. Blocks2 temasında da header için resim yoktu. Css ile blogunuzu şenlendirin yazımı okursanız header resmini nasıl eklediğimi görebilirsiniz. Bugün Ömer Aykıl aradaşım Facebook’ta Block teması için header resmi nasıl yapılacağını bana sordu. Açıkcası Blocks teması ile daha önce hiç uğraşmamıştım. Kodlama Blocks2 teması ile hemen hemen aynı olsada bariz farklılıkları dikkatimi çekti.

Blocks temasına header resmi eklemek için style.css dosyasına ihtiyacımız olacak.  Öncelikle değişiklik yapmadan bu dosyanızın yedeğini almanızı tavsiye ederim.

Header.php içerisinde dikkat ederseniz Header üzerinde H1 başlık yazımızın arka planı renkli durumda.  Header.php içerisindeki div komutlarına bakarsak Style.css içerisinde  header.content değişkeninde değişiklik yapmamız gerektiğini anlıyoruz.

Style.css dosyamızın içerisinde ;

#header .content {
background: #fff;
width:100%;
height:100%;
}

Satırlarını buluyoruz. Bu satırlarda baktığımızda header kısmının renkle doldurulduğunu göreceksiniz.

background:#fff

Biz bu satıra hiç dokunmuyoruz ve aşağıdaki gibi bir satır ekliyoruz.

#header .content {
background: #fff;
width:100%;
height:100%;
background: url(header-bg.jpg) no-repeat top left;
}

Görebileceğiniz gibi alta bir satır daha ekledim ve arka plana resim yolu gösterdim.  Bu sayede üst header başlığımızın olduğu yere arka plan resmi tanımlamış olacağız.  Burada dikkat etmeniz gereken nokta  header-bg.jpg resminin tema klasörü içerisinde yer alması gerektiğidir. Eğer tema klasörü içerisinde bir images diye klasör açıp içine resmi atarsanız bu satırı background: url(images/header-bg.jpg) no-repeat top left;  olarak değiştirmemiz gerekecek.

Hadi kolay gelsin..

Blocks tema sayfası : http://www.neoease.com/themes/