Banner

WordPress Teması Yapımı İçin Bilinmesi Gerekenler

Kategori Wordpress
14.07.2010
8945 Okunma

Merhabalar, bu makalede WordPress teması yapımı için bilmeniz gerekenleri ve kısaca bunların nasıl kullanılacaklarını açıklamaya çalışacağım. Sıfırdan başlayanlar için bilinmesi gerekenler çok fazla görünebilir ama biraz araştırma ve dene yanıl yöntemiyle kendinizi geliştirebilir ve o hayal ettiğiniz temalara sahip olabilirsiniz. Ayrıca yeni bir tema oluşturmanın tüm yükünü kendi üzerinizde tutmak zorunda değilsiniz. Bu işi tasarımcı, arayüz kodlayıcı ve ve programcı olarak 3 kişi ortak çalışarak da yapabilir. İş bölümü yapmak çoğu projede olduğu gibi bu projede de size büyük bir avantaj sağlayacaktır.

Makaleyi bilinmesi gereken Programlama Dilleri ve Programlar olarak ikiye ayrıdım. Böyle daha anlaşılır olur umarım.

Programlama ve Mark-Up Dilleri

HTML / XHTML / DHTML

HTML, tüm web sayfalarının temelinde olan bir Mark-Up dildir. HTML normal bir web sayfası yapmak için en gerekli olan ve kısmen yeterli olan bir dildir. Ancak HTML ile yapılacak sayfalar oldukça basit ve sade görünen sayfalar olacaktır. Ayrıca XHTML standartlarına da uygun olmayacaktır. HTML öğrenmesi oldukça zevkli bir dildir, tema ve hatta temadan ziyade web site yapmak isteyenlerin ilk olarak öğrenmesi gereken dildir.

XHTML, HTML kodlarının bir standarda bağlanmış şeklidir. Temel olarak yine aynı HTML’dir. Günümüzde artık HTML kavramının yerini XHTML almaktadır. HTML öğrendikten sonra, XHTML öğrenmek çok daha kolay olacaktır. Çünkü kodlar arasında fazla bir fark yoktur. XHTML’yi temamızın ana şablonunu oluştururken CSS ile bir bütün olarak kullanmalıyız. Bununla birlikte XHTML kullanıyoruz çünkü SEO’ya önem veriyoruz. Arama motorlarında üst sıralarda çıkmak bazılarımızın asıl amacıdır, bu yolda HTML yerine XHTML kullanmak mantıklı olacak harekettir çünkü günümüzde arama motorları sitelerin web standartlarına uygun olup olmadığına da bakmaktadırlar. XHTML kurallarını w3 school’dan ulaşabilirsiniz. Ayrıca bazı arkadaşlara yararlı olacağını düşündüğüm, “XHTML kuralları” adlı bir makaleyide en kısa sürede yazmak istiyorum.

DHTML ise HTML kodlarının Javascript dili ile güçlendirilmiş ve bir nevi hareket kazandırılmış halidir. Buna en güzel örnek tasarımlardaki kayan haberler/resimler bloklarıdır diyebiliriz.

CSS

CSS, oluşturmuş olduğumuz web sayfamıza şekil verebileceğimiz, güçlü bir stil şablonlama aracıdır. WordPress temalarının olmazsa olmazlarındandır. Bununla birlikte CSS günümüzün en gözde ve vazgeçilmez kavramlarından biridir. Bu nedenle öğrenmek bir avantaj veya ihtiyaçtan ziyade bir zorunluluk olmuştur bu zamanda.

Tema yapımında diğer PHP dosyalarından ayrı olarak bir de CSS dosyası (style.css) oluşturulur. Bu dosyada öncelikle temanın temel bilgisi bulunur. Ardından dilerseniz yine bu dosyayı kullanarak, dilerseniz de kendi stil dosyalarınızla temanıza şekil verebilirsiniz.

PHP

PHP, günümüzde Web programcılığı alanında kullanılan en önemli dillerden biridir. WordPress’in temelini de oluşturan bu dil, doğal olarak temaların da kodlanmasında kullanılır. CSS ve HTML ile kodlamış olduğunuz tasarımın işlev kazanması ve WordPress ile bütünleşmesi için az veya çok PHP bilmek zorundasınız.

WordPress’de tema yapabilmek için üst düzey bir PHP bilgisine sahip olmanız gerekmez, belli başlı fonksiyonlar var. Bunlardan birkaçını örnek olması amacıyla açıklayacağım.

Yazdığımız yazıya ait etiketleri gösteren fonksiyon : <?php the_tags(__(‘Etiketler : ‘), ‘, ‘, ‘, ‘); ?>
Yazıyı yazan kullanıcının ismini getiren fonksiyon : <?php the_author() ?>
Eski yazıları listeleyen fonksiyon : <?php previous_posts_link(‘Eski Yazılar &raquo;’) ?>

Bunlar gibi birçok hazır WordPress fonksiyonu bulunmaktadır. Hepsini burada açıklayamayacağım için, internette “wordpress fonksiyonları” diye arayarak istediğiniz fonksiyonları bulabilirsiniz. Bunun dışında kendiniz de ihtiyacınıza göre PHP’den faydalanabilir, ihtiyacınız olan fonksiyonları yazabilir ve temanızı güçlendirebilirsiniz.

Programlar

PHOTOSHOP

Yaptığımız WordPress temasının görsel anlamda güzel ve özgün olması, birçok WordPress kullanıcısının ilk aradığı özelliktir. Temamızın arayüzü de ilk göze çarpan ve sitenin tüm havasını veren öğesidir. Arayüzümüzü tasarlamada bize yardımcı olacak programların başında da Photoshop gelir.

FIREWORKS

Photoshop yerine kullanılacak güzel bir alternatif olarak karşımıza çıkar. Eğer herhangi bir grafik tasarım programı kullanmayı bilmiyorsanız tavsiyem Fireworks’tür. Kullanımı Photoshop’a göre oldukça kolaydır.

DREAMWEAVER

Kod yazarken kullanacağınız programın kalitesi hem işinizi kolaylaştırır hem de size zaman kazandırır. Zamandan tasarruf etmek amacıyla kodları düzenleyen, renklendiren, kodun 1-2 harfini yazdığınızda tamamını getiren programlar kullanmak, birçok yazılımcının kullandığı bir yöntemdir. Bu konuda en çok kullanılan program da Dreamweaver‘dır. Burada dikkat etmeniz gereken birkaç önemli detay var. Bazı programlar gereğinden fazla kod ekleyebiliyor. Gereksiz kod hiçbir zaman size bir fayda sağlamaz. Bazı programlar ise XHTML’ye aykırı kodlar kullanabiliyorlar. Bunlara dikkat ediniz.

NOTEPAD++

Dreamweaver kullanmak istemeyenler için güzel bir alternatiftir. Yakuter’in de Notepad++ desteklediğini vurgulayarak, notepad kullanımı ile ilgili birkaç site içi bağlantı verelim.

Notepad Kullanarak Hata mı YapıyorumYakuter Kod Yazarken

Son Sözler

Bu yazımda kısaca WordPress teması yapımı için gerekli olan konulardan bahsettim. Unuttuklarım varsa yorumlarınızda belirtirseniz sevinirim. Ayrıca lütfen hatalarımı bildirmekten de çekinmeyiniz.

Son olarak Yakuter’e böylesine güzel bir platformda yazı yazma imkanı verdiği için çok teşekkür ederim. Sağlıcakla kalmanız dileğiyle…

Comments of this post

ismail

ismail
14 July 2010

yazılarını takip ediyorum hocam , en başta senin teman çok hoş :)

yakuter

yakuter
14 July 2010

Teşekkür ederim :)

Eray Alakese

Eray Alakese
14 July 2010

Bazen bir eklenti için, bazen de başka sebeplerle wordpress doosyalarında güncelleme yapmam gerekebiliyor. Notepad ile güncelliyordum. Çok sonra farkettim ki Notepad ile güncellediğim zaman dosyaya BOM kodu ekliyor ve bu bazı tarayıcılarda soorun çıkartıyor. Mesela IE ve Chrome'de RSS yayınım düzgün gözükmüyordu. Tek tek BOM karakteri içeren tüm dosyaları temizlemek zorunda kaldım. Ama Notepad yerine Notepad++ kullandığınızda böyle bir sorunla karşılaşmıyorsunuz.

Amaç Dizayn

Amaç Dizayn
15 July 2010

Bu çok doğru. Notpad++ bu konuda gayet iyi. Ayrıca karakteri bozulmuş dosyaları biçim menüsünden utf8 without bom diyerek düzeltmek de çok kolay.

yakuter

yakuter
14 July 2010

Öncelikle bu güzel ve temel bilgiler için teşekkür ederim Cem. Başlangıç seviyesindeki arkadaşlar için oldukça anlaşılır bir yazı olmuş. Yazının sonunda internette bulunan ve WordPress tema yapımını anlatan Türkçe makalelerin bağlantılarını da verseymişsin süper olurmuş ;)

Cem Demir

Cem Demir
15 July 2010

Sağol Erhan abi.

umut

umut
14 July 2010

wordpress bir çok işsize iş kapısı açmıştır :) koddan çok az anlayan bir kişi bile okuyacağı birkaç e-kitap ile başlangıç seviyesinde temalar hazırlayabilir.

Cem Demir

Cem Demir
15 July 2010

Aynen öyle, birkaç güzel kaynakla yapılmayacak şey yok.

Cem Demir

Cem Demir
15 July 2010

Temasına hastayım, turuncu-sarı karışımı başlıklar çok hoşuma gidiyor. :)

Mert Canatan

Mert Canatan
15 July 2010

ne zamandır böyle adam gibi bir yazı bekliyordum, saol :)

Cem Demir

Cem Demir
15 July 2010

Teşekkürler, her zaman. :)

latif

latif
15 July 2010

uzun zamandır öyle bir yazıyı bekliyordum.Bu yazı iyi değerlendirip kendime özgün bir tema yapmak istiyorum.Paylaşım için teşekkür ederim.

Cem Demir

Cem Demir
16 July 2010

Ben teşekkür ederim.

Arslan

Arslan
15 July 2010

Emeğine sağlık çok güzel bir yazı olmuş. WordPress Tema konusu açılmışken bir yazıyla da ben eşlik etmeyi planlıyorum. Bakalım Erhan abi buna ne diyecek :)

yakuter

yakuter
15 July 2010

Merak ettim ama bak şimdi :)

selami şahin

selami şahin
15 July 2010

güzel de bir örnek verseydin yada örnek yapan bi adres.

Yazar

Yazar
16 July 2010

Keşke bu kadar kolay olsa. Tasarım bile insanın aklına gelmiyor :D

Cengiz Akyazı

Cengiz Akyazı
16 July 2010

Güzel bir makale olmuş. Elinize sağlık.

Cem Demir

Cem Demir
16 July 2010

Teşekkürler

Kemal Gürler

Kemal Gürler
16 July 2010

Çok güzel yazı olmuş elinize sağlık. CSS bilgisine sahip kişilerin PHP'e -en azından başlangıç seviyesinde bir tema için- ihtiyacı yok aslında. Starkers WordPress temasına yerleştirebilirler tasarımlarını direk :)

Cem Demir

Cem Demir
16 July 2010

Tema yapmak için başlangıç seviyesinde ya da iyi derecede Php bilmek gerek, PHP'yi ne kadar iyi bilirseniz o kadar esnek temalar (fonksiyonel) yapabilirsiniz.

cgrmedia.tk

cgrmedia.tk
17 July 2010

Oldukça faydalı bir paylaşım olmuş. Teşekkürler.

Halil ibrahim

Halil ibrahim
19 July 2010

çok teşekkürler kardeşim . okurken birşeylerin değiştigini hissettiriyor.

orçun

orçun
20 July 2010

wordpress teması için gerekli olmasada sitenizin hoş görünmesi için ufak flash animasyonlar yapmakta fayda var. flashların siteye kazandırdıkları dinamizm son kullanıcıda ciddi karşılık buluyor.

cdmr1991

cdmr1991
22 July 2010

Kesinlikle katılıyorum, görsellik bazıları için çok önemli.

mybb

mybb
20 July 2010

teşekkürler

Tolga LEVENT

Tolga LEVENT
20 July 2010

Makaleniz için teşekkürler, sayenizde bilmediğim birçok şeyi öğreniyorum.

Emre Çolak

Emre Çolak
21 July 2010

Kesinlike NOTEPAD++ kullanış, basit, sade :) Makale içinde teşekkürler..

eynal kaplıcaları

eynal kaplıcaları
21 July 2010

bana wordpress teması yapmak için bir program tavsiye edebilirmisiniz cem bey

cdmr1991

cdmr1991
22 July 2010

WordPressde tema yapmak için geliştirilmiş bir program yok sanırım, fakat tasarım konusunda Dreamweaver işe yarayabiliyor.
Kendi temanızı kendiniz yapmak istiyorsanız, bence ufaktan CSS öğrenmelisiniz. CSS öğrenince yavaş yavaş tema editlemeye başlarsınız. Sonrası da gelir diye düşünüyorum.

Desmal Yeşilmen

Desmal Yeşilmen
22 July 2010

Artisteer programı var, fakat yaptıktan sonra baya bi editlemeniz gerekiyor. Ama temanın çatısını kurup geliştirmek için gayet güzel bir program diye düşünüyorum..

halil ibrahim

halil ibrahim
26 July 2010

aslında tema yapmak gibi bir amacım yok vede pekte anlamıyorum açıkçası ama yazınızın içerigi basit anlaşılır üslubla ele alınmış bu çok hoşuma gitti. ve bu işlerin nasıl yürüdügünüde temelden bilmek adına benim için bir kaç defa okunması lagzım gereken bir yazı olmuş. kardeşim eline saglık…

cdmr1991

cdmr1991
26 July 2010

Teşekkürler, amacımızı tam olarak açıklamışsın. : )

Hüseyin AKTAŞ

Hüseyin AKTAŞ
28 July 2010

Yakut hocam güzel anlatım olmuş, ellerine sağlık.

aşk sözleri

aşk sözleri
03 August 2010

süper anlatmışsın hocam birtaz daha araştırma yaparsam inanın tema yapmaya başlayacağım

cevher

cevher
10 August 2010

Çok önemli bilgiler çok çok tşk.ler

Beyaz

Beyaz
10 August 2010

notepad olsun yeterli erhan :)

Seo

Seo
11 August 2010

Başlangıç seviyesi için gayet iyi bir makale olmuş , elinize sağlık.

aziz eren faikoglu

aziz eren faikoglu
14 August 2010

wordpress fonksiyonlarının tümünü verebilirdin aslında.hepsinin aynı başlıkta toplanması yeni başlayanlar açısından yararlı olurdu.

Hayata Dair

Hayata Dair
15 August 2010

Bende yakında bir tema yapmayı düşünüyordum. Yazdıklarınızı uygulayacağım. Teşekkürler..

fikir

fikir
17 August 2010

genel anlamda güzel bir yazı

fatih

fatih
22 August 2010

güzel bir anlatım olmuş. başlangıç seviyesindeki arkadaşlar için faydalı olacaktır.

kafkasya

kafkasya
28 August 2010

bunlar başlangıç seviyesi ise ben hiç başlamamalıyım bu işe. çok zor ve zahmetli görünüyor.

oyun oyna

oyun oyna
29 August 2010

Çok güzel ve açıklayıcı makalelerinizin devamını beklioruz

partigiano

partigiano
08 September 2010

Merhaba, ben sizin temadaki gibi yorumlara cevapla button'u koymak istiyorum, bizimle bunu paylaşabilirseniz sevinirim

SEOLOG

SEOLOG
15 November 2010

Severek Takip ettiğim bloglar arasında yer almaktasınız. Başarılarınızın devamını dilerim.

Chat

Chat
08 December 2010

Seoyu Sayenizde Azda Olsa Gün Geçdikçe Öğreniyorum Teşekkürler

can dogan

can dogan
30 December 2010

Başlangıç seviyesi için iyi bir makale olmuş, bloğunuzun sıkı takipçilerindenim, elinize sağlık başarılı mutlu yıllar dilerim.

ufuk özdemir

ufuk özdemir
24 January 2011

Gerçekten güzel bir yazı olmuş.

atilla

atilla
20 March 2011

iyi güzelde resimli anlatımı yokmu

tercüme

tercüme
06 May 2011

Gayet güzel bir paylaşım olmuş. Ellerinize sağlık teşekkür ediyorum.

Levent

Levent
21 January 2012

resimli anlatım olsa güzel olurdu,

SacReD

SacReD
24 January 2012

Çok yararlı bilgiler vermişsiniz teşekkürler.Elinize sağlık

haber

haber
17 August 2012

süper bir haber olmuş teşekürler…

cemil

cemil
07 June 2016

merhabalar, wordpresste yeniyim, istediğim herhangi bir sayfada eklenti çalıştırmak istiyorum bunu nasıl yaparım, şimdiden teşekkürler