A huge collection of 3400+ free website templates JAR theme com WP themes and more at the biggest community-driven free web design site
Ana Sayfa / WordPress / WordPress Temaları / Sıfırdan WordPress Tema Yapımı

Sıfırdan WordPress Tema Yapımı

Arkadaşlar bu yazımda Sıfırdan  WordPress tema yapımının nasıl olduğunu merak ederek , araştırma yaptım ve basit çaplı,kullanışlı bir tema yaptım.Bunu yaparken youtube’den İsmail Bayram arkadaşımızın 4-5 yıl önce Sıfırdan WordPress Tema yapımı ile ilgili yapmış olduğu Tema Yapımı Videoları  (Mantığı anlayabilmek adına öncelikle bu yazıyı okuyup,sonra videolu anlatımlara geçmenizde fayda var.)   takip ederek yaptım.Yalnız arkadaşımızın birçok kod’da kaynak belirttiği sitesi şuanda aktif olmadığı için birçok siteden de araştırmalar yaparak ve sunduğu mevcut temanın eksiklerini de ben elimden geldiğince geliştirmeye çalıştım.

Bu yazımda size Sıfırdan  WordPress tema yapımını anlatmam mümkün değil, gerçekten kapsamlı bir konu ancak yaptığım temanın dosyalarınıda sizle paylaşıp elinizde bu kod arşivinin bir örneğinin olmasını sağlayarak,  Sıfırdan wordpress teması yapmak isteyen arkadaşlara da rehber ve takıldığı yerlerde elimden geldiğince yardım etmek isterim.Yalnız ilk olarak  kabataslak adımlarımızı sayalım. Html/Css ‘e oluşturulmuş tasarımdan tema yapacağız.

Sıfırdan WordPress Tema Yapımında Kabataslak Adımlar

1-HTML5 kodlarıyla index.html dosyası oluşturuyoruz.( Sadece tek sayfalık index görünümü elde ediyoruz.)

2-İndex.html oluşturulurken bu sayfanın görünümünü ise style.css dosyamızdan CSS3 kodlarımızla oluşturuyoruz.( Mesela index.html dosyasında header kısmında logo kısmını oluşturan kodları yazarken style.css dosyasında bu kısmın görünümünü; yüksekliği,genişliği,yazı font veya renki,arka plan resmi vs gibi özelliklerini kod ile belirtiyosunuz.)

Kısaca temelimiz bir index.html dosyası ve bir style.css dosyası oluşturarak.Bir WordPress teması elde ediyoruz.

3-Bu iki dosyanın birlikte çalışması yani style.css dosyamızda verdiğimiz özelliğin index.html dosyamızda gözükmesi için style.css dosyamızı index.html içinde çağırma işlemiz bir satırlık kod’dan oluşuyor.
ÖR:

4-Bu index.html dosyamızın içinde Header,footer,sidebar,içerik kısımlarımız oluyor.

İndex.html'de oluşturacağımız alanlar
İndex.html’de oluşturacağımız alanlar

5-İndex.html dosyamızı oluşturduktan sonra bunu parçalar haline getirerek WordPress tema sistemine uyumlu hale getiriyoruz.( Yani bir WordPress temasında bizden istenen; İndex.php Header.php , footer.php , sidebar.php ,page.php , category.php , archive.php , author.php , 404.php , functions.php , single.php , tag.php , search.php , comments.php )

6-Sonra tek tek bu dosyalarımızın içlerini index.html dosyamızdan kodları parçalar halinde alarak dolduruyoruz.

7-Bu dosyalarımızın içini doldururken artık WordPress’in kendine ait kodlarını dosyalarımıza entegre ederek yapıyoruz.

WORDPRESS TEMA ENTEGRESİNDE GEREKLİ KOD ARŞİVİ

Ör:
İndex.Html dosyamızda sadece görünüm oluşturduğumuz için  bir konunun başlığını biz kendimiz yazıyoruz. Ama bunu wordpress sistemine entegre ederken. O başlığımızı silip yerine WordPress sisteminin başlık çağırmada ki özel kodunu ” <?php the_title(); ?> ” yazacağız. Bunun gibi birçok WordPress Tema kodumuzu bu parçaladığımız dosyaları doldururken kullanacağız.

Bu genel başlıkları yapmamızla birlikte Sıfırdan WordPress Temamızın Yapımı bitmiş olacaktır.

Şimdi size kendi oluşturduğum temanın tüm dosyalarını vereceğim.İndex.html ve style.css dosyalarının kodlarını “Notepad” programıyla incelemenizi ve index.html dosyasını çalıştırınca nasıl bir görünüm oluştuğunu sadece bu görünümden bir tema yaptığımızı görmenizi istiyorum.

Tema Görünüm
Tema Görünüm
İndex.html ve Style.css Dosyaları

Bu yazı sonucunda Sıfırdan WordPress Tema yapımı ile ilgili yapılması gereken adımları öğrendik ve bir eğitim seti linkini sizle paylaştık.Bu eğitimin sonunda oluşturulmuş bir WordPress temasını da sizlere sunduk.

İzlediğiniz eğitim setinde veya bu yazıda kafanıza takılan soruları sorabilirsiniz.

Kalın Sağlıcakla 🙂


BÜLTENİMİZE ABONE OLABİLİRSİNİZ

Yeni,Kaliteli ve Özgün İçerikler Hakkında İlk Siz Haberdar Olup Bilgilendirme Mail-i Alabilirsiniz.

Hakkımda ACK

ACK
23 yaşında, internetin her alanına küçük yaşlardan gelen bir ilgisi söz konusu, konu fark etmeksizin araştırmayı, güncel bilgileri takip etmeyi ,bilgi paylaşımını seven , iktisat 4. sınıf öğrencisi.

Okumalısın !

WORPDRESS KURUMSAL TEMALARI

WordPress Kurumsal Temaları

Birbirinden kaliteli wordpress kurumsal temalar ‘ı görmeye hazır olun.Bunlar tam anlamıyla profesyonellerin ellerinde çıkmadır.Sizde incelemenizle …

4 Yorumlar

  1. Videolu bir anlatımıda paylaşmanız güzel olmuş.

  2. Bu eğitim sayesinde html sayfası oluşturdum saolun

  3. WordPress tema yapımı meraklıları için güzel bir başlangıç yazısı olmuş teşekkürler.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


BÜLTENİMİZE ABONE OLABİLİRSİNİZ !

Yeni,Kaliteli ve Özgün İçerikler Hakkında İlk Siz Haberdar Olup Bilgilendirme Mail-i Alabilirsiniz.