Wordpress

Wordpress Yakuter

Tatilde sona mı yaklışıyoruz ne :( Twitter

546 takipçi

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

KategoriWordpress

08 Mart 2006

2.721 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

Benzer Yazılar

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Sponsor Olmak İstiyorum!

Bu Yazıya Ait Yorumlar

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
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
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
24 Şubat 2008

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

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
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
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
07 Eylül 2008

Evet yayınlandı. Buradan ulaşabilirsiniz.

Serdar
02 Ocak 2009

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

harvy
20 Ocak 2009

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

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
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
22 Eylül 2009

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

MR.KayaogLu
07 Ocak 2010

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

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