Tema Yapımı index.php(2)
WordPress Tema Yapımımıza kaldığımız index.php’den devam ediyoruz. Bu yazı dizisini bir bütün halinde görmenizi ve yazıları sırayla okumanızı öneririm. Bu şekilde kavramların ve komutların arasında kaybolmadan takip edebilirsiniz.
Kontroller ve Hatırlatmalar
* XAMPP çalıştırın
* Oluşturacağımız tüm dosyaları aşağıdaki dizine kaydedin
C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema* Yaptığımız değişiklikleri kaydettikten sonra localhost
üzerinde sonucu görmek için adres barına aşağıdaki adresi yazın.
http://localhost/wordpress/*Yaptığımız her değişiklikten sonra kayıt edelim ve browserda refresh ederek izleyelim.
*İşlerimiz bittiğinde XAMPP kapatalım
WordPress temaları index.php içinde inşaa edilirler. Bir binaya benzetebiliriz; dış cephe, katlar, daireler ve odalar şeklinde bir yapı düşünelim. index.php binamızın dış cephesini ve iskeletini oluşturuyor. En üst katta header.php ve en alt kattada footer.php oturuyor. Üst kat ve alt katlar arasında ise site içeriği anlamına gelen “content” bölümü bulunmaktadır. content bölümü o anda çağrılan sayfaya göre değişmektedir. sidebar’da yine footer ve header katları arasındadır ve content’e komşudur. “div” adı verilen html komutları sayesinde bu inşaatı yapabiliriz. Gözünüzü sakın korkutmayın çok eğlenceli ve kolaydır. Bu kutuları <div> ile başlatır </div> ile sonlandırırız. Şimdi wordpress tema yapımı inşaatına dış cephemiz ile başlıyoruz. Bu ilk kutu ile sayfamızın ne kadarlık bir alanda gösterileceğine karar vereceğiz.
index.php dosyamızı açalım. İçindeki herşeyi silelim (Zaten 1 satır yazı yazmıştık) ve aşağıdaki satırları index.php içine yazıp ( ben her ne kadar yazalım desemde siz yapıştıracaksınız :) ) ya da yapıştırıp kaydedelim.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><title>WP_ilk_tema</title> </head> <body> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> //html tag açıldı.döküman tipi ve kodlamalarla ilgili genel bilgiler verildi. <head> //Bir sayfada 2 ana alan bulunur head ve body. Head bölümünün başladığını söyledik. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> // style.css dosyasının nerde olduğunu söyledik. Style dosyasına ihtiyaç duyulduğunda //bu yolu kullanarak ulaşacak. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> // Sayfa içeriğinin text olduğu ve HTML olarak yorumlanması gerektiğini ifade eder. // charset ise kullanılan karakter setini belirtir. Türkçe harf problemini çözer. <title>WP_ilk_tema</title> // Title ile browser sekmesi üzerine "WP_ilk_tema" yazdırdık. </head> //head bölümü bitti. <body> //body bölümü başladı </body> //body bölümü bitti. </html> //html sayfa tagını kapattık. |
Bu iki kod diziside aynıdır. Alttakinde kodlar ile ilgili genel açıklamaları yazdım. Temiz kodlar ise üsttekinde mevcut. WordPress temamız bittiğinde fazla kalabalık gözükmemesi için bu tür bir yol izliyorum. Bundan sonrada bu şekilde devam edeceğim. Üstteki kodları kullanarak devam edelim. Sonucunda hepimizin kodlarının aynı olması karşılaştırmayı kolaylaştırır.
localhost sayfamızı refresh edelim. Boş bir sayfa geldi. Sadece açtığımız sayfa sekmesinin üzerinde “WP_ilk_tema” yazısını görüyoruz. Şimdi sıra geldi dış cepheye kutuya (div). 960 piksellik bir sayfa genişliği bizim için yeterli olur sayfayıda ortaladığımızda güzel bir görüntü elde edebiliriz. “<body> </body>” arasında aşağıdaki kodları ekleyelim.
<body>
<div id=”wrapper”>
Dış Cephe
</div><!– #wrapper –>
</body>
Not: “<!– #wrapper –>” ifadesi hatırlatma notudur. Div’ler çoğaldıkça hangisi nerde başlıyor, nerde bitiyor belli olsun diye eklenmiştir. İleride kodlar arasında gezinirken kolaylık sağlaması için yazdım. Kullanılması zorunlu değildir.
Kaydet ve refresh işlemlerinden sonra ekranda sadece bir “Dış Cephe” yazısı görüyoruz. Eee ? kutu nerde? söylemeyi unuttum sanırım. div’ler görünmez kutulardır. varsayılan özellikleri görünmez yapar onları. Hemen style.css dosyası ile olaya müdahale edip onu görünür yapalım. Bir önceki yazıyı hatırlayın “index.php ile sayfamızın genel hatlarını çizer, neyin nerde gözükeceğine karar verir, style.css dosyası ile de nasıl gözükmesi gerektiğini belirleriz.” demiştik. style.css dosyamızı açıyoruz. Aşağıdaki komutları yazıyoruz ( kopyalıyoruz :) ). Yine ilk kutucuktaki kodları kullanacağız. Onun hemen altındakini açıklama için kullanıyorum.
|
1 2 3 4 5 6 7 |
#wrapper { width: 960px; margin: auto; border: thin; border-style:solid; border-color:#F00; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#wrapper { width: 960px; margin: auto; border: thin; border-style:solid; border-color:#F00; } wrapper div özelliklerini veriyoruz. width: 960px; 960 pixel genişlik margin: auto; kenarlardan otomatik boşluk, ortaladık border: thin; border ince olsun dedik border-style:solid; border tipi solid olacak border-color:#F00; border rengi kırmızı (hex kod) |
Evet artık kırmızı bir şekilde dış cephemizi görmeye başladık. WordPress tema yapımımıza diğer katlarla devam edelim. Header için en üstte bir kat ayıralım. Bu div denen kutucuklara herhangi bir uzunluk değeri vermezsek, içine ne eklersek onun boyutlarını alırlar. Biz sadece genişlik verdiğimiz için (960px) yükseklik konusunda endişe etmeyin. header için bir div ekleyelim. Bunu wraper divinin (dış cephenin) içine ekliyoruz. Bu arada “Dış Cephe “yazısınıda silelim. Ona gerek kalmadı. index.php dosyamızı açıyoruz ve aşağıdaki kırmızı yazılmış satırları ekliyoruz. (header div taglarının wrapper tagları arasında kaldığına dikkat edin.)
<body>
<div id=”wrapper”>
<div id=”header”>
Header bölümü
</div><!– #header –>
</div><!– #wrapper –>
</body>
Şimdi sytle.css dosyamızı açıyoruz ve aşağıdaki satırları wrapper’ın altına “}” işaretinden sonra ekliyoruz.
|
1 2 3 4 5 |
#header { border: thin; border-style:solid; border-color:##00F; } |
Kaydet ve refresh işlemlerinden sonra artık, aşağıdaki gibi bir ekran görüntüsü almamız gerekiyor.
Hemen hız kesmeden diğer katlarımızıda inşaa edelim. header’ın altında content ve sidebar kutucukları olacaktı. Onların altında, yani giriş katımızda da footer oturuyor. index.php içine aşağıdaki kırmızı renkli satırları ekleyelim
<body>
<div id=”wrapper”>
<div id=”header”>
Header bölümü
</div><!– #header –>
<div id=”container”>
Content içerik Bölümü
</div><!– #container –>
<div id=”sidebar”>sidebar bölümü
</div><!– #sidebar –><div id=”clearfloat”>
<!– Bu div bölümü ekranda gözükmeyecek. Düzenleme için kullanıldı.Açıklama style kodları içinde mevcut–>
</div><!– #clearfloat –>
<div id=”footer”>
footer bölümü
</div><!– #footer –>
</div><!– #wrapper –>
</body>
Bu haliyle kaydedip, browser da izleyelim. Hepsi alt alta duruyor. WordPress tema yapısına hiç benzemedi. Tamam o zaman style.css ile katlarımızı düzenleyelim. style.css dosyamıza aşağıdaki satırları ekliyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#header { border: thin; border-style:solid; border-color:#00F; } #container { float: left; border: thin; border-style: solid; border-color: #0F0; width:700px; } #sidebar { float: right; border: thin; border-style: solid; border-color: #FF0; width:250px; } #clearfloat { clear:both; } #footer{ width:960px; border: thin; border-style: solid; border-color:#000; } |
float komutu
Yukarıdaki kutucukta yeni tanıştığımız ifadelere bir göz atalım. Float komutu ekrandaki nesneleri sağa ya da sola yaslamak için kullanılır. Verdiğimiz komutla container kutusunu sola, sidebar kutusunuda sağa yasladık. Artık alt alta durmuyorlar.
Clear:both;
Yukarıda verilen float komutunu sonlandırmak için kullanılır. Eğer üstteki alanda sadece
float:right kullanılsaydı. clear:right ile bitirecektik.
float:left kullanılsaydı. clear:left; ile bitirecektik.
Left ve Right herikiside kullanıldığı için Clear:both kullandık.
Peki neden clearfloat kutucuğu (div) kullandık. wrapper dediğimiz dış cephenin tüm divleri kaplaması gerekiyor ancak kaplamıyordu.Yaptığımız bu temizlik :) (clear:both) işinden sonra istenen sonucu elde ettik.
WordPress Tema yapımında şu ana kadar yaptığımız işlerin ekran görüntüsü, index.php ve style.css dosyalarının son halini aşağıya ekliyorum. Herhangi bir yerde hata alıyorsanız, karşılaştırma yapabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <title>WP_ilk_tema</title> </head> <body> <div id="wrapper"> <div id="header"> Header bölümü </div> <!-- #header --> <div id="container"> Content içerik Bölümü </div><!-- #container --> <div id="sidebar"> sidebar bölümü </div><!-- #sidebar --> <div id="clearfloat"> <!-- Bu div bölümü ekranda gözükmeyecek. Düzenleme için kullanıldı. Açıklama style kodları içinde mevcut--> </div><!-- #clearfloat --> <div id="footer"> footer bölümü </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
@charset "utf-8"; /* Theme Name: WP_ilk_tema Theme URI: https://wpkurs.com Description: Bu kısım temamızın özelliklerini anlatacağımız bölüm olacak. Tema yapısı (kaç menü olduğu, kaç tane widget kullanılabileceği vb. gibi konularda bilgi verecek. Temamız WordPress temalar bölümünde izlenirken, kullanıcıya kısaca temamızı tanıtmış olacağız. Author: WP-Videolu-Kurs(Kendi isminizi yazabilirsiniz). Version: 1.1 Tags: Etiketlerle ilgili bilgilerin verildiği bölüm. */ #wrapper { width: 960px; margin: auto; border: thin; border-style:solid; border-color:#F00; } #header { border: thin; border-style:solid; border-color:#00F; } #container { float: left; border: thin; border-style: solid; border-color: #0F0; width:700px; } #sidebar { float: right; border: thin; border-style: solid; border-color: #FF0; width:250px; } #clearfloat { clear:both; } #footer{ width:960px; border: thin; border-style: solid; border-color:#000; } |
Benzer konular:
buldugum en mantıklı basit ve düzenli anlatım elinize saglık birde kodalrı kopyalalabılsek ıyı olacaktı :))
Yorumunuz için teşekkür ederim. WordPress Tema yapımı yazı dizisine yeni yazılarla devam edeceğiz.
Kodları artık kopyalayabilirsiniz :). Dün “wordpress kopyalama yasağı” ile ilgili yeni bir video oluşturduk. Kendi sitemiz üzerinde de denedik ve başarılı bir eklenti olduğunu gördük :). Videoyu çektikten sonra eklentiyi kaldırdık. Kodları kopyalamak serbest…
Merhaba Cenk Bey, derslerinizi adım adım uyguladım, Xampp kurulumunu tamamladım, local host üzerinden siteyi açtım. Ancak internetten indirdiğim ücretsiz temaları siteye yüklerken “Uyumsuz arşiv. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature” diye bir hata veriyor.
Yükleme işlemini C:/xampp/htdocs/wordpress/wp-content/themes/ altına dosyayı zip olarak ekledim. WordPress yönetim panelinden Görünüm>Tema>yükle işlemlerini uygulayarak yapıyorum ama hata veriyor. Sadece yönetim panelinde bulunan örnek temalardan birisini seçersem sorunsuz yüklüyor.
Bunun dışında teleport pro programını kullanarak beğendiğim bir wordpress sayfasını indirim tema olarak yükleme imkanım yok mu?
İlgilenirseniz sevinirim
İyi Çalışmalar
Temaya ait zip dosyasını çift tıklayarak açtığınızda içinde başka bir klasör daha var mı?
Ferit bey indirdiğiniz temayı zip dosyasından çıkarın ve klasör şeklinde C:/xampp/htdocs/wordpress/wp-content/themes/ buraya atın. Daha sonra wp-admine bağlanıp temalar menüsünden etkinleştirin.
PCLZIP_ERR_BAD_FORMAT (-10) bu hatayı aldığınızda muhtemelen sıkıştırılmış dosya rar olarak kayıt edilmiştir. Sıkıştırlmış şekilde sitenize yüklemek isterseniz rar dosyasını çıkarın tekrar zip formatında sıkıştırın ve bu şekilde yüklemeyi deneyin. Her iki yöntemle sorunsuz işlemesi gerekiyor…
Cenk Bey, Zipin içinde bir ana klasör; onunda içinde image, index.html gibi dosyalar var.
“Uyumsuz arşiv. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature” hatasının muhtemel 2 sebebi olabilir.
1- C:/xampp/htdocs/wordpress/wp-content/ altına attığınız zip dosyasının içinde 2 farklı klasör olabilir. – ki sizin zip dosyanızın altında tek bir klasör var
2- sıkıştırılmış dosya rar dosyası olabilir. Bu durumda Hakan arkadaşımın dediği gibi, dosyayı zip dosyası olarak tekrar sıkıştırmanız gerekir.
Çok teşekkürler sorun dediğiniz gibi .zip kaynaklı, yani benden kaynaklı. Temayı sitesinden hazır .zipli olarak indirip hosta yükleyince kabul ediyor. Sanırım ben .zip içine atarken hata yapmışım.
İlginiz için Teşekkürler.
Merhaba vermiş olduğunuz bilgilerden yararlandım çok teşekkür ederim. Benim size danışmak istediğim bir konu var bana yardımcı olabilir misiniz.
Merhaba Selim bey, buyurun konu nedir?
Merhaba…Sitenizi çok beğeniyorum yazdıklarınız okunur ve anlaşılır dilde yazılmış.Ben bu işte çok yeniyim biraz bilgim var ama amacım güzel bir site yapıp kendi yarattığım baştan aşağıya bana ait olan bir tema (sizin ddediğiniz gibi koyala yapıştır yapmadan anlayarak)yapmak istiyorum .Bana yardımcı olursanız çok sevinirim….
Merhaba Yasmin hanım, baştan aşağa kendi tasarımınızı yapmak istemeniz çok güzel lakin bu işi yapmak için tasarım konusunda da bilgi sahibi olmalısınız ayrıca css, html ve wordpress olduğu için php kodlama dillerinden anlamanız gerekmektedir. Tüm bunları öğrenmek başlangıç seviyede olan biri için biraz zaman alacaktır. Doğru eğitimlerle bu isteğinizi hızlandırabilirsiniz. WordPress konusunda seviyeniz ne durumda bilmiyorum fakat çok yeniyseniz ozaman size WP Kurs eğitim kursunu tavsiye ederim, eğitim seti ile birlikte wordpress konusuna hakim olacaksınız ve bu şekilde az da olsa bahsi geçen kodlama dillerine giriş yapmış olacaksınız. WP Kurs eğitiminden sonra şuan üzerinde çalışmalarımızın sürdüğü diğer eğitimlere katılarak tasarım konusunda ileri seviye bilgiye sahip olarak hayalinizi kolaylıkla gerçekleştirebilirsiniz. Ücretsiz üyeliğinizi başlatarak blogumuz ile ilgili yenliklerden en hızlı şekilde haberdar olabilirsiniz ve WP Kurs eğitim seti içeriğinde bulunan 5 adet video izleme şansına sahipsiniz… saygılar
merhaba siteme bir tema yüklemeye calısıyorum fakat temada index.php adlı dosyanın olmadıgını söylüyor napmalıyım?
Merhaba Kaan bey, muhtemelen indirmiş olduğunuz zip dosyasını olduğu gibi sitenize yüklemeye denediniz. Yükleme yapmadan önce indirdiğiniz dosyayı bilgisayarınıza çıkarın ve çıkan klasör içine göz atın, muhtemelen asıl kurulması gereken tema dosyasını bulacaksınız. Bulduğunuz dosyayı FTP programı ile servere bağlanarak wp-content/themes klasörün içine atın ve sonra admin panelinden etkinleştirin… saygılarımla