lostyazilim
tr.link

Sıfırdan WordPress Tema Nasıl Yapılır? Tüm Fonksiyonlar

13 Mesajlar 42.961 Okunma
acebozum
tr.link

umutr umutr Project Development E-Mail Onaysız
  • Üyelik 05.05.2012
  • Yaş/Cinsiyet 39 / E
  • Meslek Digital Marketing
  • Konum Tekirdağ
  • Ad Soyad U** T**
  • Mesajlar 455
  • Beğeniler 113 / 146
  • Ticaret 78, (%100)
Sıfırdan WordPress Tema Nasıl Yapılır? Tüm Fonksiyonlar



WordPress günümüzde internet sitelerinin büyük bir çogunlugunda kullanılıyor ve her geçen günde bu kullanım artmaya devam ediyor. Nedeni ise WordPress yazılımının sürekli güncellenen bir yazılım olmasıdır, kolay kullanımını da atlamamak gerekiyor tabiki. Birçok ücretsiz eklentisinin bulunması ve internet ortamında binlerce wordpress teması bulunması en önemli etken. WordPress bu kadar çok kullanılıyor ve artık insanların kafasında bende siteme tema yapmak istiyorum, WordPress teması yapabilmek için ne bilmem gerekiyor, nereden başlamam gerekiyor? bu gibi sorular oluşmaya başladı. Malesef bu konuda türkçe bir makale bulmak zor gibi gözükse de biz sizler için WordPress tema yapımını anlatıcaz. Öncelikle belirteyim css hakkında hiçbir bilginiz yoksa Css hakkında biraz bilgi toplamanız gerekiyor. Şimdi azçok bir css bilginiz bulundugunu varsayıyorum ve anlatımıma başlıyorum. Ögrenme aşamasında basit bir tema yapıcaz kaba taslak gibi diyebiliriz daha sonra siz edindiginiz bilgiler ile bu temayı görsellik açısından geliştirebilirsiniz. Öncelikle aşagıda bulunan resmi bir incelemenizi istiyorum şöyle detaylıca bir bakın, bu resimde bir wordpress temasının anotomisini görüceksiniz.


Evet yukarıda incelediginiz resim bir wordpress temasını oluşturan anotomidir. Şimdide aşagıda bulunan resimi bir incelemenizi istiyorum aşagıda bulunan resimde tema yapımındaki ilk adımımız olan css yani tema şablonumuz ile ilgili bilgi verecektir.


Yukarıda gördügünüz resim yapacagınız WordPress temasının stil şablonu, her biri ayrı ayrı olacak yani css dosyamızı kodlarken header şeçicilerini, footer seçicilerini, sidebar seçicilerini düzenleyecegiz hepsini teker teker uygulayacagız yapacagız ki karışıklık olmasın örnegin header bölümünde resim ekleyebilirsiniz yada tema görünümüne başka bir özellik katmak isterseniz bunların hepsini css dosyamızdan yapıcagız. Css bu yüzden önemlidir. Artık CSS dosyamızı oluşturmaya ve düzenlemeye başlayalım. CSS dosyasında yapacagımız degişiklikler sayfa yapısını ayarlama link baglantı özelliklerini düzenleme menuleri düzenleme gibi tüm tasarım ve şablon ile ilgili degişikliklerin yapılacagı bölüm CSS dir. Şimdi bir CSS dosyası nasıl oluşturulur ve nasıl düzenlenir onu görecegiz. Öncelikle altta verdigim kodları css dosyanızın en başına ekleyin, bu kodlar fazla önem taşımaz sadece tanıtım amaçlıdır.

/*

Theme Name: Dolap Adam

Theme URI: http://www.dolapadam.com

Description: Teknoloji ve aradığın herşey

Author: admin

Author URI:www.dolapadam.com

Version: 1.0

*/


Şimdiki aşamamızda body kısmında bir düzenleme yapıcaz. Temada içerigimiz body kısmına gelir burada yapıcagımız işlemler yazı boyutu fontları gibi şeyleri düzenlemek amaçlıdır. Örnegin

ile yazılan yazıların boyutu vs. gibi şeyler.

body {

font: 62.5%/1.6em “Lucida Grande”, “Lucida Sans Unicode”, verdana, geneva, sans-serif;

color:#666;

margin:0;

border-top:2px solid #FF3366;

}

* {

margin:0;

padding:0;

}

h1 {

font-family:”Times New Roman”, Times, serif;

font-size:3.8em;

font-weight:normal;

color:#333;

letter-spacing:-1px;

margin:20px 0;

}

h1 a {

text-decoration:none;

color:#333;

}


Gördügünüz gibi CSS kodlaması oldukça basit ve ögrenildigince oldukça eglencelidir. Devam edelim şimdide footer ve header kısmında düzenleme yapıcam, arka plan olarak herangi bir resim kullanmayacagım şimdi footer için tek bir seçici oluşturacagım ama header için 3 adet seçici kullanacagım bir tanesi sayfalama, link ve arka plan için, digeri üst kısmın boyutu ve dizaynı için , digeri ise genel boyut ve dizayn için. Aşagıdaki koda da bir bakalım, kendimize göre düzenleyerek yukarıdaki kodun devamı olarak CSS dosyamıza ekliyoruz.

#footer {

padding:20px;

text-align:right;

border-top:1px solid #eee;

margin:0;

color:#fff;

}

#header {

border-top:20px solid #FF3366;

}

#header .description {

float:right;

margin:45px 0 0 0;

color:#FF3366;

}

#header h1 {

margin:15px 0 0 0;

padding:25px 25px 40px 0;

border-bottom:20px solid #fff;

}


Yukarıdaki kodlardada görüldügü gibi headerimizin sırası ile pozisyonunu arka plan rengini yazılarını vs. belirledik. Şimdiden temamızın navigasyon menulerini yani sidebar üzerindeki kategoriler, sayfalar, baglantılar gibi menu tarzında olan herşeyi düzenleyecek css kodumuzu css dosyamıza ekliyoruz. Gene yukarıdaki kodlamalar tarzında olacak, buradaki görevimiz linklerin renkleri, tarzı veya istediginiz ek özellikler varsa bunları ayarlamanız gerekiyor.

#wrapper {

width:760px;

margin:0 auto;

}

#nav {

border-bottom:1px solid #eee;

padding:7px 0;

margin:0;

border-top:1px solid #fff;

height:28px;

}

#nav li {

float:left;

list-style:none;

}

#nav li a {

color:#999;

padding:5px 5px 7px 5px;

background:#fff;

font:1.6em Trebuchet MS;

margin:1px 2px 0 0;

font-weight:bold;

text-decoration:none;

display:block;

}

#nav li a:hover {

background-color:#eee;

color:#444;

text-decoration:none;

}

#nav li a.active {

background-color:#fff;

color:#FFFFFF;

text-decoration:none;

}

.clear {

clear:both;

}

#content {

margin:0 275px 0 0 !important;

margin:0 277px 0 0;

border-right:1px solid #eee;

border-left:1px solid #eee;

padding:10px 25px 30px 25px;

}

#content p {

line-height:25px;

margin:25px 0;

font-size:110%;

word-spacing:2px;

}

#content a {

text-decoration:none;

color:#333;

border-bottom:1px solid #eee;

}

#content a:hover {

color:#000;

}

#content h2 {

font-family:”Times New Roman”, Times, serif;

font-size:2.8em;

font-weight:normal;

margin:15px 0;

border-bottom:1px solid #f6f6f6;

padding:5px 0;

line-height: 30px;

}

#content h2 a {

color:#444;

text-decoration:none;

border:none;

}


Css kodlarını incelediginiz zaman fark edeceksiniz her bir özellik belirtiliyor örnegin

yazı boyutunun rengini tonunu fontunu falan ayarlıyor. Şimdi sıra sidebarımızı yani yan menümüzü ayarlamaya geldi.

#sidebar {

width:250px;

float:right;

padding:10px 10px 30px 10px;

border-left:1px solid #eee;

border-right:1px solid #eee;

border-bottom:1px solid #eee;

}

#sidebar h2 {

letter-spacing:2px;

font-size:1.4em;

color:#333;

border-bottom:1px solid #CC0066;

padding:0 0 3px 0;

}

#sidebar ul {

list-style:none;

margin:0 0 20px 0;

}

#sidebar li {

padding:3px;

border-bottom:1px solid #f6f6f6;

}

#sidebar li a {

color:#333;

text-decoration:none;

}

#sidebar input {

width:240px;

padding:5px;

background:#fdfdfd;

color:#444;

border:1px solid #f6f6f6;

font:11px Verdana;

}

#sidebar input:focus {

background:#fff;

border:1px solid #CC0066;

}

#sidebar li a:hover {

color:#CC0066;

}

p.news {

padding:10px;

background:#D7F0B2;

margin:10px 0;

color:#537B17;

border-bottom:2px solid #BCE67D;

border-top:2px solid #BCE67D;

}

blockquote {

padding:5px 15px;

background:#f6f6f6;

margin:10px 0;

border:1px solid #eee;

}

#content ul, ol {

margin:10px 10px 10px 25px;

border-top:1px solid #eee;

}

#content li {

padding:10px;

border-bottom:1px solid #eee;

}

img {

background:#ccc;

padding:1px;

border:5px solid #eee;

}

#content h3 {

margin:10px 0;

font:160% Trebuchet MS;

color:#222;

}

a.more {

display:block;

text-align:right;

color:#2F460D;

text-decoration:none;

margin:10px 0 0 0 ;

}

a.more:hover {

text-decoration:underline;

}

textarea#comment { width: 400px; padding: 5px; }

.commentmetadata { font-size: 10px; }


Evet yukarıda gördügünüz gibi sidebarımızın yerini, genişligini, baglantıların boyutunu, rengini, arka plan rengini vs. ayarladık. Evet Css dosyamızın düzenlemesini yaptık ve oluşturduk, şimdi PHP kodlama kısmına geçicez. CSS dosyamız hazır şimdi temamızı oluşturmak için PHP dosyalarını ayarlıcaz. Öncelikle yazımızın en başında gösterdigimiz WordPress temasının hangi dosyalardan olustugunu gosteren grafigi tekrar bir gostermek istiyorum.

Evet arkadaşlar tekrar gördügümüz gibi WordPress in sayfaları bu şekildedir. İndex.php bizim ana sayfamızdır ve diger sayfalarımız buraya include edilir. Header.php sitemizin üst kısmını oluşturur. CSS ile yaptıgımız şablonu birde görsel olarak gösterelim.

Evet şekildeki gibi bir şablon oluşturmak için tek ihtiyacımız folat ve margin degerlerini belirlemek daha sonra css de seçiciler ile ek özellikler belirleyebilirsiniz. Örnegin Header kısmını ele alalım

*yüksekliği 300 genişliği 930 olarak header kısmın kodlarını yazıyoruz*/
#header {
border: 1px solid #00ff00;
width: 930px;
height: 300px;
}


Şimdide konumunu belirlemek için float uygulamasına bir örnek olarak sidebar kısmımızı gösterelim.

/*Float etiketi ile sağ ve sol siderbarı diğer kolondan ayırıyoruz.*/
#sidebarLT {
margin:0;
width:200px;
border: 1px solid #ff9900;
float:right;
}


Evet arkadaşlar verdigimiz birkaç örnekten sonra konumuza dönelim. Css dosyamızda işlemlerde hatırlarsanız herbir conteiner ayrı seçiciler kullandık, şimdi ilk seçicilerimiz olan header.php ile devam edelim. Daha öncede bahsettigim gibi header.php bizim neredeyse bütün baglantılarımızın ve css dosyaları gibi birçok baglantılarımızın oldugu kısımdır. Evet yukarıdaki yazılarımızda da bahsettigimiz gibi yapacagımız bütün sayfalar index.php ye gelecek. Header.php yi hazırlarken bir bakıma şu şekildede düşünebiliriz, index.php yi düzenliyormuş gibi.

1. Adım Header.php




-







Yukarıda gördügünüz gibi klasik bir html şablonu var. Şimdi ise WordPress içerik yönetimi sistemi ile baglantı kuran kodlarımızı ekleyecegiz. Linkler buraya kısmı özel olarak eklendi php kodlarının büyük bir çogunlugu buraya gelecek.



>



<?php bloginfo(‘name’); ?> <?php wp_title(); ?>

; charset=” />

” type=”text/css” media=”screen,projection” />











Evet arkadaşlar yukardaki kodlar ile gördügünüz gibi WordPress in gerekli baglantı ayarlarını uyguladık, php bilenler çok rahat anlayacaklardır. Evet header.php mizin düzenlemesi bu kadar. Şimdi sıra Footer.php mizi düzenlemeye geldi. Footer.php dosyamızı da düzenledikten sonra sıra 2 php dosyamızı index.php ye baglayacagız.

2. Adım Footer.php





wordpress tema tasarım Sorbize




©


”>feed adresi







< ?php wp_footer(); ?>





Evet klasik bir footer.php dosyası bu biçimdedir. Evet sıra geldi header ve footeri index.php dosyamıza eklemeye, gayet basit ve sade bir kod ile bu işlemi yapacagız




Yukarıda gördügünüz php kodları ile footer ile header i indexin içine get fonksiyonu ile getiriyoruz. Sidebar ıda index.php ye nasıl ekleyeceginizi göstermek istiyorum.






”>



at | ‘); ?> |




maalesef


Aradiginiz dosya burada bulunmuyor.







evet arkadaşlar yukarıdaki kodumuz ile beraber de 3 sayfayı index.php ye ekledik, bu sayfaların şablonlarının nasıl olacagını css dosyamızda belirtiyoruz. Unutmayın php bir programlama dilidir tasarım dili degil. Aşagıya bakarsanız index.php yi daha iyi anlayabilirsiniz.


Evet yukarıdaki resimdede gördügünüz gibi index.php ye oluşturdugumuz sayfaları get fonksiyonu ile getiriyoruz, özellikle sidebar a dikkat etmeniz gerekiyor, çünkü oraya kategorileri ve onun gibi yan menude bulunması gereken bileşenleri degişkenlerimiz ile sidebar dosyamız ile yönlendirdik. Şimdi sidebar kısmını biraz daha açıyorum.

Sidebar.php

Bazı özellikleri index.php ye ekledigimiz için çok basit bir sidebar oluşturacagız. Aşagıdaki kodu inceleyebilirsiniz.




|| !dynamic_sidebar() ) : ?>

Kimim ben



Buraya kendiniz hakkinda biraz bilgi verebilirsiniz.







Evet dynamic_sidebar foncsiyonunu aynen görüldügü gibi oluşturunuz. Sidebarımızı widgetler eklemek istedigimizde gerekli özellikleri alabilmesini saglamamız gerekiyor. Tabi bunun için ayrı bir fonksiyon dosyası hazırlamamız şart. Fonksiyon dosyasındaki bazı özelliklerin degiştirilebilir olması için kayıtlı giriş özelligi olması gerekiyor, kodlarımız aşagıda.


if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => ”,

‘after_widget’ => ”,

‘before_title’ => ‘

’,

‘after_title’ => ‘

’,

));

?>


ve sidebar ın index.php ye nasıl yönlenecegini tekrar yazalım.



Sıra şimdi son 2 kısma geldi. Comments yani yorumlar ve arşiv dosyasına.

Comments.php

Birçok içerik yönetim sisteminde yorum kısmı oldukça karışıktır ancak WordPress için aynı şey geçerli degildir.



Simdide css dosyamızda yorumlar kısmının şeklini belirleyelim.

textarea#comment { width: 400px; padding: 5px; } .commentmetadata { font-size: 10px; }

evet arkadaşlar yorumlar kısmının boyutunu ve yazı şeklini basit bir css kodlaması ile degiştirdikten sonra nasıl göründügünün bir görüntüsünü verelim.


Şimdi sıra geldi arşiv dosyamızı oluşturmaya.

Archive.php

Arşiv dosyasıda yorumlar dosyasında oldugu gibi WordPress de standart bir dosya olarak görülür. Burada index.php yi aratmayacak şekilde bir arşiv dosyası oluşturmanız gerekiyor buda şu şekilde olabilir get fonksiyonu ile header.php , sidebar ve footer i yönlendiriyorsunuz.

<?php get_header(); ?>

<?php get_sidebar(); ?>






  • Kategori arsivi







  • Genel arsiv











Evet gördügünüz gibi çok basit bir yapısı var.

Evet arkadaşlar sizlere sıfırdan bir wordpress teması yapmayı olabildigince sade bir biçimde anlatmaya calıstık. Daha farklı temalar yapmak isterseniz CSS dosyasından ayarlamalar ile oluşturabilirsiniz.
Emege Saygı Okuyan Arkadaşlarım En Azından 1 Yorum Atmalarını İstiyorum. Teşekkurler.


KAYNAK: http://www.dolapadam.com/sifirdan-wordpress-tema-nasil-yapilir-tum-fonksiyonlar.html
MuratCENGEL Yerlitek Gucluyazar

kişi bu mesajı beğendi.

elektronikssl
webimgo

Genc Genc Computer Engineer Kullanıcı
  • Üyelik 30.10.2011
  • Yaş/Cinsiyet 28 / E
  • Meslek Bilgisayar Mühendisi
  • Konum İstanbul Anadolu
  • Ad Soyad Ö** G**
  • Mesajlar 1606
  • Beğeniler 760 / 441
  • Ticaret 49, (%98)
eline emeğine sağlık abi , hemen okuyorum ve ilk tasarımımı bu yoruma ekliyorum :D
 

 

umutr umutr Project Development E-Mail Onaysız
  • Üyelik 05.05.2012
  • Yaş/Cinsiyet 39 / E
  • Meslek Digital Marketing
  • Konum Tekirdağ
  • Ad Soyad U** T**
  • Mesajlar 455
  • Beğeniler 113 / 146
  • Ticaret 78, (%100)

Genç adlı üyeden alıntı

eline emeğine sağlık abi , hemen okuyorum ve ilk tasarımımı bu yoruma ekliyorum :D


Teşekkur ederim kardeşim yararlı olduysa ne mutlu :)
 

 

EftalBulut EftalBulut WM Aracı Kullanıcı
  • Üyelik 26.08.2011
  • Yaş/Cinsiyet 28 / E
  • Meslek Webmaster
  • Konum İstanbul Avrupa
  • Ad Soyad E** B**
  • Mesajlar 836
  • Beğeniler 106 / 217
  • Ticaret 180, (%100)
Paint terk :D

Güzel makale ;)
 

 

wmaraci
wmaraci

umutr umutr Project Development E-Mail Onaysız
  • Üyelik 05.05.2012
  • Yaş/Cinsiyet 39 / E
  • Meslek Digital Marketing
  • Konum Tekirdağ
  • Ad Soyad U** T**
  • Mesajlar 455
  • Beğeniler 113 / 146
  • Ticaret 78, (%100)

ProTech adlı üyeden alıntı

Paint terk :D

Güzel makale ;)


Saolasın Eftal Elimden geldigince işte, Göstermek amaçlı photoshop da yapıcak halim yok ya :D
 

 

Utopya Utopya WM Aracı Kullanıcı
  • Üyelik 09.12.2012
  • Yaş/Cinsiyet 49 / E
  • Meslek bilgi işlem VHKİ
  • Konum Elazığ
  • Ad Soyad ** **
  • Mesajlar 41
  • Beğeniler 11 / 8
  • Ticaret 0, (%0)
Bu güzel paylaşım için teşekkürler umutr,çok sağol..
 

 

toprakdus toprakdus Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 30.01.2013
  • Yaş/Cinsiyet 42 / E
  • Meslek Webmaster
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 142
  • Beğeniler 29 / 27
  • Ticaret 1, (%100)
teşekkürler :) çok yararlı bir paylaşım.
 

 

weaster11 weaster11 WM Aracı Kullanıcı
  • Üyelik 21.08.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Elektrik &amp; Elektronik
  • Konum Bursa
  • Ad Soyad S** P**
  • Mesajlar 61
  • Beğeniler 13 / 12
  • Ticaret 0, (%0)
Teşekkürler güzel paylaşım olmuş.
umutr

kişi bu mesajı beğendi.

www.otoarizalari.info

wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
Bu kadar uğeaşana kadar underscores.me adresine girin kendi kemik yapıdaki temanızı oluşturun :) ondan sonrası tasarım ve ekstra kodlamaya kalıyor.
umutr analogfikir mrtrclb

kişi bu mesajı beğendi.

27207 27207 WM Aracı Anonim Üyelik
  • Üyelik 02.01.2014
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 1852
  • Beğeniler 346 / 707
  • Ticaret 5, (%100)
bilimokur 6 sene önce yazmış kardeşim, arkadaşın yaşayıp yaşamadığı bile belli değil :) :)
umutr Kotil wpuzman

kişi bu mesajı beğendi.

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)