Türk çocuğu ecdadını tanıdıkça daha büyük işler yapmak için
kendinde kuvvet bulacaktır! Mustafa Kemal ATATÜRK

WordPress’te Nasıl Tema Yapılır? (1)

Kategori Wordpress
08.03.2006
6815 Okunma

Artık böyle bir makale şart sanırım :) Hazır tema kullanmaktan bıktıysanız, kendi temanızı yapmanın zamanı gelmiş demektir. Bu makaleyi iki parça halinde hazırlamaya karar verdim çünkü temelden anlatmaya başlayacağım. Önce bunu tamamlayın(zaten fazla uzun değil) daha sonra 2ncisini yazacağım. Haydi başlayalım o zaman :)

WordPress, temalarında table yerine, günümüzde daha çok geçerliliği olan css kullanmaktadır. Ben size tema yapmayı anlatırken css’in size yetecek kadarından bahsedeceğim. Gelelim temamıza. Her temanın içinde mutlaka bir style.css dosyası bulunur ve sitemizi bu dosya şekillendirir. Sitemizin ana hatlarının “genel olarak” dizilişi resimdeki gibidir.

Tema

Yukarıda gördüğünüz gri renkli yazılar (container, content…) sitemizin temel seçicileridir. Bu makale de bunları öğrenmenizi amaçlıyorum. Kendi temanızın bulunduğu klasöre gidip, style.css dosyasını açıp içinde bu seçicileri arayın. Oradan daha iyi takip edebilirsiniz.

container: Bu seçici (yukarıdakilere seçici denir) sitemizin ana şablonudur. Sitenin sayfa içindeki yerini belirlemede(sağdan, soldan ne kadar uzakta olduğu gibi) kullanılır. Örneğin benim kullandığım Blix temasının css dosyasında container seçicisinin olduğu satır şu şekilde:

#container {
  width:690px;
  margin:0 auto;
  padding:30px 30px 0 30px;
  text-align:left;
}

Gördüğünüz gibi width:690px diyor yani sitemin genişliği 690 piksel. Bunu rahatlıkla değiştirebilirsiniz. Diğer seçiciler de aynı bu şekilde rahatlıkla değiştirilebilir.

header: Sitemizin üst kısmıdır. Arkaplan resmini yine style dosyasında header seçicisiyle oynayarak değiştirebilirsiniz.

content: Blogumuzun orta kısmıdır ve yazıların ekranda nasıl görüneceğine bu seçici ile karar veririz.

sidebar: Yan sütundur.

footer: Sitemizin alt kısmıdır. Yine genişlik vb. değişiklikleri style.css dosyasında bu seçiciyi bularak yapabiliriz.

Bu konuda anlamadığınız bir nokta varsa yorumunuzda belirtin.

NOT

  • Size tavsiyem ise css’in ne olduğunu tam anlamıyla öğrenmeniz. Bunun için yarım saatinizi ayırmanız yeterli. Css öğrenmeye başlamak için tıklayınız.
  • Css dosyalarını düzenleyebilmek için normal bir notepad bile kullanabilirsiniz. Ama sıf css için yapılmış ve yaptığınız değişiklikleri önizlemeli olarak gösteren bir program da var : TopStyle Lite

Comments of this post

harun özer

harun özer
16 Haziran 2007

kardeş kolay gelsin. özellike yazıyı okudum ve çok beğendim ancak ben kubrick default thema sını kullanıyorum ve orada sayfa boyutlarını ayarlayamıyorum çünkü style.css de container seçicisi yok. yardımcı olabilirsen sevinirim. teşekkürler

yakuter

yakuter
16 Haziran 2007

container yerine başka bir seçici olabilir. Ykarıdaki genel yapıdır. Bu yapı temadan temaya değişir. Css konusunu biraz incelerseniz sorularınızın yanıtlarını bulacağınıza inanıyorum.

Hakan

Hakan
21 Ekim 2007

Her yazı başka bir bilgi denizi. Süper akıcı ve oturup çerez niyetine yenilesi bir makale olmuş. Kolay gelsin

Ersin

Ersin
24 Şubat 2008

Oldukça faydalı, açık ve net emeğinize sağlık.
Çok teşekkürler.
Saygılarımla

Mehmet ALP

Mehmet ALP
03 Mayıs 2008

WordPress teması yapmak isteyenler için oldukça güzel ve anlaşılır bir yazı…Ellerinize Sağlık Yakut bey..

cem kongur

cem kongur
26 Temmuz 2008

ben buradaki yazı ile başladım, yakında yeni temamı diğer tarayıcılara da uygun hale getirip sunacağım. teşekkürler yazı için

Safa GÜRSOY

Safa GÜRSOY
07 Eylül 2008

Merhabalar Erhan Bey;

Yazı, her yazınız gibi çok mükemmel olmuş. Zannediyorum 2. yazı dizisi daha yayınlanmadı. Ya da ben bulamadım.

Eğer yayınlandı ise link alabilir miyim ?

Saygılar..

yakuter

yakuter
07 Eylül 2008

Evet yayınlandı. Buradan ulaşabilirsiniz.

Serdar

Serdar
02 Ocak 2009

kardeş css derslerinin linki patlamış sende yenisi varsa güncellermisin teşekkürler

harvy

harvy
20 Ocak 2009

kardeş bu yan menüyü sağ veya sol taraf olarak nasıl deiştirebilirim

yakuter

yakuter
21 Ocak 2009

CSS’te float özelliği vardır. Şurada detaylı bilgi bulunuyor. Bu özellik sayesinde yan menünün konumunu değiştirebilirsin.

murat

murat
26 Ağustos 2009

beyfendi ben birşeyi öğrenmek istiyorum, css4 ile gelen bi özellik varmış, bu çerçevede kenarları yuvarlaklaştırıyormuş, keskinliği kaybediyormuş, bunun hakkında biraz bilgi verebilirmisiniz.

1234

1234
22 Eylül 2009

Gerçekten yararlı bir yazı olmuş teşekkürler..

MR.KayaogLu

MR.KayaogLu
07 Ocak 2010

SaoL Arkadasım.. Guzel Başarılı Bir Anlatım.

istanbul

istanbul
24 Şubat 2010

tema yapmak her yiğidin harcı değildir. bazı arkadaşlar gerçekten ortaya çok farklı ve harika temalar çıkartabiliyor. dizi, video temaları buna bir örnektir. kendi kişisel siteleri için tema yapmak isteyen arkadaşlar için kısa ve öz açıklama olmuş. teşekkürler.

Berke

Berke
23 Mart 2010

Merhaba ,Öncekilke elinize sağlık , Yaşım 41 zorunlu olarak wordpress le uğraşmam gerekti başlarda çok zorluk çektim ama sonradan bir eğitim seti aldım ve şuan da ayıptır sölemesi Yeterince Uzmanlaştığıma inanıyorum. Tamamı Videolu anltımlarla geçen bi eğitim seti bu nimeti sizlerle paylaşmak istiyorum İlgilenen arkadaşlar olur ise link aşağıda.http://www.xticaret.com/xticaret/?655_4381_=&ref=wordpress

Osman

Osman
25 Mart 2010

Gerçekten çok güzel ve sade bir anlatım çok tşk ederim.

yazar

yazar
05 Temmuz 2010

Css öğrenmek için yazmış olduğunuz link silinmiş düzeltebilir misiniz?

vetvolkan

vetvolkan
09 Şubat 2011

css öğrenmek için yarım saatinizi ayırmanız yeterli demişsin ve bunun için tıklayın demişsin =) Fakat ben o tıklama yerini bulamadım sanki?

yakuter

yakuter
11 Şubat 2011

2006 yılında yazmış olduğum bir yazı. Sanırım biraz iddialı bir laf olmuş. Kendime göre düşünmüş de olabilirim o zamanlarda :)

Göktürk

Göktürk
19 Nisan 2011

üstadım aslında videolu bir örnek anlatım hepimizin işine çok yarar
emeğinize sağlık

cihan

cihan
17 Kasım 2012

standart bir tema olan twentyeleven temasının orta bölümündeki resim alanını nasıl sabitleyebilirim.f5 veya sayfa yenilendiğinde değişik resimler çekip linki ise anasayfa verilmiş.Bu döngü ye yeni bir resim ekleyip ve resime bir link nasıl verebilirim.Cvp için şimdiden teşekkürler.

Cemil

Cemil
26 Nisan 2014

Merhaba. Daha önce Themeforest'ten ücretli bir tema satın aldım. Ancak, bir süre sonra aldığım temanın yazılımcısı sistemden ayrıldı ve temayı da satıştan kaldırdılar. Aslında çok güzel özellikleri olan bir temaydı. Themeforest benim mağduriyetimi giderdi ve yeni tema almamı sağladı. Benim sorum şu: Satışı kaldırılan temanın çatısı üzerinde değişiklikler yaparak, kendimize göre uyarlayıp, wp'nin son versiyonuna uygun hale getirmek, Amerikayı yeniden keşfetmek kadar aptalca ve vakit kaybı mı olur, yoksa uğraşmaya değer mi? Teşekkürler.