English

Hello guys my name is Sinan Karayaman. I have been working on wordpress and other web services for few years now.

- How to create wordpress theme (lesson 1) ?
---
---
---
Türkçe

Merhaba arkadaşlar ben Sinan KARAYAMAN.Sizlerle 'sıfırdan wordpress teması nasıl yazılır?' konusunu adım adım uygulamalı ders şeklinde anlatacağım.Bu dersimizde gerekli dosya ve klasörleri oluşturmayı göstereceğim.Dersler bittiğinde kendiniz çok rahat wordpress temanızı yazıp kullanabilecek duruma geleceksiniz.

1- Localhost'ta temamızın yer alacağı klasörü oluşturuyoruz.

![1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514934329/myezcqqlztqmjwvlodn3.png)

2- Tasarımımızı yapmak için gereken bootstrap frameworkü, http://getbootstrap.com/docs/3.3/getting-started/#download sayfasına gidip aşağıda kırmızı ile gösterilen yerden indiriyoruz.

![2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514940418/zyacsq2ykjcpmnfa8wkt.png)


3- Sitemizde kullanacağımız iconlar için http://fontawesome.io sitesinde aşağıda kırmızı ile gösterilen yerden indiriyoruz.

![3.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514936590/s1uvmqlxkravkjis0tqp.png)

4- Jquery'i https://jquery.com/download/ sayfasında aşağıda kırmızı ile gösterilen yerden indiriyoruz.

![4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514936738/ut8jwvejklupuk1iycsc.png)

5- İndirmiş olduğumuz bootstrap ve fontawesome dosyalarını zipten çıkartıyoruz.

![5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514940868/tuuo464u8afpxfwlwx4z.png)

6- bootstrap-3.3.7-dist klasörünün içerisinde bulunan css,font ve js dosyalarını tema oluşturmak için açtığımız klasörün içerisine atıyoruz.Ardından jquery için indirdiğimiz dosyayı js klasörüne atıyoruz.

![6.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514941182/jgcupzjkjqwb5s3nhqmv.png)

![6.5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514941300/ixj2zxjxpgki0ur7p3uu.png)

7- Çıkarmış olduğumuz font-awesome-4.7.0 klasörünün içerisinden fonts ve css klasörünü tema oluşturmak için açtığımız klasöre atacağız fakat klasöre daha önce fonts ve css klasörlerini attığımız için font-awesome-4.7.0 klasörünün içindeki fontsu açıp içerisindeki dosyaları localimizde bulunan fonts klasörüne atacağız.Aynı şekilde fonts klasörünü açıp font-awesome.min.css dosyasını localimizde bulunan css klasörüne atıyoruz.

![7.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514941585/jjbo6dxr7j5c64arde3g.png)
![7.5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514941701/rooctr49hxcjaadyzqix.png)

8- Localimizde bulunan css klasörünün içerisinden bootstrap.css.map, bootstrap.min.css, bootstrap.min.css.map, bootstrap-theme.css, bootstrap-theme.css.map, bootstrap-theme.min.css ve bootstrap-theme.min.css.map dosyalarını siliyoruz.

![8.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514941879/ijqn1uwnne0oop5kncxy.png)
![8.5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514941905/uojtsgog8xbos33xcnsi.png)

9- Localimizde bulunan css klasörünün içerisindeki font-awesome.min.css dosyasının adını değiştirip font-awesome.css yapıyoruz.

![9.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514941990/yfv5xepwlf8gulytr3pe.png)

10- Localimiz bulunan js klasörünün içerisinden bootstrap.js dosyasını siliyoruz.Klasörün içerisindeki bootstrap.min.js ve jquery-3.2.1.min.js dosyalarının isimlerini değiştirip .min bölümünü isimlerden siliyoruz.

- silinecek dosyamız;
![10.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514942145/gtibas06k69hm3o3lpkp.png)

- dosya silinip isimler değiştirildikten sonra klasörümüzün son hali;

![10.5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514942284/ebb3cxjvjtfu3zogv24j.png)

11- Tema klasörüne ana sayfamız için bir adet index.php dosyası oluşturuyoruz.

![11.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514942664/dgdfohy5awzdzu37h0ny.png)

- Tema için index.php yi oluşturduğumuzda wordpress temalar sayfasında aşağıdaki gibi görüntüyle karşılaşacaksınız;

![11.5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514942912/y3nfx3qv5bkoyrufbeb0.png)

12- Wordpresste stil sayfamızın kayıp olduğu yazıyor.Bunun için tema klasörüne bir adet style.css dosyası oluşturuyoruz.

![12.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514943040/w6acz8rk6sfyjclkc1vj.png)

- Style.css dosyasını oluşturduğumuzda wordpress temalar sayfasında aşağıdaki gibi görüntüyle karşılaşacaksınız;

![12.5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514943182/bedadvaonsm0kqh4ilju.png)

13- Şimdi sıra geldi temamıza önizleme resmini oluşturmaya.Kendimiz png formatında 1200x900 boyutunda resim hazırlayıp screenshot.png olarak tema klasörümüze atıyoruz.

![13.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514943629/mgunjl9zuwbnweeddc1b.png)

- Ön izleme resmimizi klasöre attığımız zaman wordpress temalar sayfasında aşağıdaki gibi görüntüyle karşılaşacaksınız;

![13.5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514943705/cfzw0pzqsg58cr8ksi9u.png)

14- Temamızı etkinleştirip siteyi ön izlediğimizde sekme ismi olarak localhost görünüyor.Sekmemizin ismini düzenlemek için index.php'ye gereken kodları yazıyoruz.

```
<!DOCTYPE html>
<html>
<head>
	<title> sinan karayaman tema yapımı</title>
</head>
<body>

</body>
</html>
```

![14.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514944307/zrlprtrubo5rj2dcg4e1.png)

- index.php düzenlenmeden önce;

![14.1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514944295/vvwnirfuank9e5rrmlp5.png)

- index.php düzenlendikten sonra;

![14.2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514944324/xa0w8aeulxw6ev0dp9ez.png)

Github link : https://github.com/twbs/bootstrap

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sinankarayaman/wordpress-tema-yapimi-ders-1-turkish-tutorial">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>