0 (850) 441 1813 Hafta içi 11:00 - 17:00 info@wpkurs.com
Divi WordPress Theme

Tema Yapımı (index.php)

Nerden çıktı bu Tema Yapımı derseniz. XAMPP kurulumunu tamamladıktan ve WordPress yapısına çok kısa bir şekilde göz attıktan sonra; neden bir temayı adım adım oluşturmayalım diye düşündüm. Kendi WordPress temamızı kendimiz oluşturabiliriz. Uzun bir yazı dizisi olacak ama fırsat buldukça Tema Yapımı konusunda yazmaya çalışacağım.

WordPress temasına ait bütün dosyalar bir klasör içinde bulunur. PHP sayfalar yardımıyla ekrana davet edilirler. Bunu gerçekleştirebilmek için bir takım action(eylem)  ve hook (kanca) fonksiyonlarına sahiptir. PHP içine gömülen bu komutlar ile HTML dosyalar üzerinde arz-ı endam ederler. WordPress fonksiyonları şu an için derin bir konu olabilir. Biz en basitinden başlayarak adım adım  ilerlemeye çalışacağız.

Genel hatlarıyla bir Web sayfasına baktığınızda işin bir  kod kısmı bir de görsel kısmı vardır. Ben burda ağırlıklı olarak kod kısmını anlatmaya çalışacağım.  Bir tema en sade haliyle index.php ve style.css dosyalarından oluşur diyebiliriz. index.php ile sayfamızın genel hatlarını çizer neyin nerde gözükmesine karar verir, style.css dosyası ile de nasıl gözükmesi gerektiğini belirleriz. Şimdi hemen localhost üzerinde kendi ismimizi yaşıyan bir wordpres tema yapımına başlayalım. Yaptığımız işleri ekranda görmek çalışmayı daha da keyifli hale getirir 🙂

Kurulumunu tamamladığımız XAMPP server’ın açık olduğunu kontrol edelim (Apache ve MySQL running olmalı işleriniz bittiğinde kapatmayı unutmayın!!!). WordPress Tema yapımı ve kontrolü sırasında olmazsa olmazlardan biridir kendisi. http://localhost/wordpress yazdığımızda hata almıyor olmamız gerekiyor. Hata alıyorsak, XAMPP – localhost kurulum yazısına dönüp bu hatalarımızı giderelim.

Tema Yapımı index.php oluşturalım

Tema yapımının ilk aşaması, tema dosyalarımızı saklayacağımız bir klasör oluşturmaktır. Bilgisayarınız üzerinde  “C:\xampp\htdocs\wordpress\wp-content\themes\” dizini altına yeni bir klasör tanımlayın. Ben WP_ilk_tema adına bir klasör tanımladım “C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema“. Bundan sonra oluşturacağımız tüm dosyaları bu klasör altında depolayacağız.

Bir text editor açalım. Notepad++ vb. gibi programları kullanabilirsiniz. Yeni bir dosya oluşturalım, aşağıdaki satırı yazalım ve  index.php olarak az önce oluşturduğumuz klasörün (“C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema“) altına kaydedelim.

“WordPress Tema yapımına ilk adımımı attım, bu benim temam!!! ”

Şimdilik index.php içinde yapacaklarımız bu kadar. Bu hiç bir özelliği olmayan, düz bir giriş sayfası oluşturmamızda yeterli. Daha sonraki aşamalarda, index.php dosyamıza ilaveler yapacağız.

Tema Yapımı style.css oluşturalım

style.css dosyayı temamız üzerinde bulunan alanlara ilişkin görünüm kurallarını belirler. Örneğin; kendinize bir Div oluşturdunuz ve bu alanın yazı boyutu, rengi, konumu vb. gibi tanımlamalar yaptınız. Bu Div için tabiki bunu ayrı olarak verebilirsiniz. Ancak bu Div daha sonra başka bir yerde kullanıldığında bu özellikleri tekrar vermeniz gerekir. Bunun bir header olduğunu düşünürseniz, tüm sayfalarda aynı işlemi tekrar tekrar yapmak zorunda kalırsınız. İşin daha külfetli bölümüne gelelim… diyelim ki yayında olan web sayfanızın header bölümünde  değişiklik yapacaksınız, bu sefer tüm sayfalardaki header bölümlerini tek tek düzenlemek zorundasınız… düşünemiyorum bile. İşte style dosyaları burda devreye giriyor. Bir kere tanımlanırlar ve Div bölümlerine tek bir komutla atanıp, istenen görünümün verilmesini sağlarlar. Tema yapımında işimize çok yarayacak bir araçtır.

Localhost üzerindeki sitemize wp-admin olarak bağlandığımızda,  Görünüm->Temaları  yönet sekmesine gidelim. Normal olarak sadece bir tek default temayı görebiliyoruz. Tema yapımına karar verdik ama bu bölümde kendi temamızı nasıl göreceğiz? Cevap veriyorum: style.css.

style.css ile temamız hakkında genel bilgileride verebiliriz. O zaman ne duruyoruz, hemen başlayalım. Yine text editor ile yeni bir dosya açalım, aşağıdaki satırları ekleyelim ve style.css olarak tema yapımı için oluşturduğumuz klasörümüzün altına kaydedelim. Bu aşamada hemen kısa bir hatırlatma yapayım, bu dosyalar tüm temalarda vardır, gelişmiş bir örneği incelemek için default tema olarak gelen “twentyten” dosyalarına bakabilirsiniz.

/*
Theme Name: WP_ilk_tema
Theme URI: http://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.
*/

style.css dosyasında  “/* ve */ işaretleri arasında kalan bölüm, Tema yapımı sırasında tanıtımı yapacağımız alandır. Başlıkların ne anlama geldiğine bakacak olursak;

Theme Name: Tema ismi

Theme URI: Tema sayfası

Description: Açıklama ve özet bölümü

Author: Tema yazarı

Version: Versiyon

Tags: Etiketler

Evet index.php ve style.css dosyalarını oluşturduktan sonra; wp-admin–>Görünüm–>Temalar sekmesinde “Mevcut Temalar” alanında, artık kendi temamızı görüyor olmamız gerekiyor. Tanıtım resmi olmadığı için, image alanı boş olacaktır.

WordPress Tema Yapmı index.php

Etkinleştir linkini tıklığımızda artık kendi hazırladığımız tema, wordpress için atadığımız tema olacaktır. Şu anda http://localhost/wordpress sayfasını açtığımızda “WordPress Tema yapımına ilk adımımı attım, bu benim temam!!!” yazısından başka  hiçbirşey göremeyeceğiz, eğer onuda göremiyorsak biryerlerde bir hata yaptık demektir.

WordPress Tema Yapımı sayfa görünümü

Yukarıdaki görünüme ulaştıysanız, hayırlı olsun!!!   Tema yapımı aşamalarını kısaca özetleyelim;

  • XAMPP çalıştırıldık
  • Tema yapımı için kullanacağımız klasörü tanımladık
  • index.php ve style.css dosyalarını oluşturduk
  • wp-admin–>Görünüm–>Temalar sekmesinden temamızı aktif hale getirdik.

Şimdilik hepsi bu kadar WordPress Tema Yapımının ilerleyen konularında, hazırlamış olduğumuz bu dosyalara eklemeler yapıp, daha profesyonel bir görüntüye kavuşmasını sağlayacağız. Sizinde bu konularla ilgili ilave etmek istediğiniz hususlar varsa yorumlarınız ve yazılarınızla bize katılmanıza çok seviniriz.

Eğer bu ve bundan önceki bölümleri videolu olarak görmek isterseniz, lütfen bize bildirin en kısa sürede hazırlayıp, yayınlayabiliriz.

Benzer konular:

Parola Sıfırlama
E-posta adresinizi girin. E-posta ile yeni bir şifre alacaksınız.