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: 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.
*/
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.
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.
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:
İtiraf etmem gerekirse şu sayfayı iki kez okuduktan sonra uygulamayı yaptım, sebebini açıklıyayım…
Çünkü ilk okuyuşumda pratiğe dökmeden sadece önbilgi mahiyetinde okuyup anlamaya çalıştım daha önce PHP ilgili hiçbir bilgim olmadan. Tabi ki çok zorluk çektim algıda ve tereddüt ettim. Ancak bu sefer yazarında belirttiği gibi uygulamalı denedim ikinci okuyuşumda. Ve sonuç bu sefer neydi dersiniz?
İlk okuyuşumda çekmiş olduğum algı sorununu uygulamalı deneyince bu sefer hiç yaşamadım. Yaptığım tüm uygulamalar bir bir sonuç vermeye başladığında özgüvenim de yerine geldi ve daha da merak arttı bundan sonrası için.
Burada benim aldığım en büyük ders bir şeye niyetlenirken kendine karşı önyargılı olmamak gerektiğidir. İnsan ne kadar yapamam edemem, bu işler bana göre değil aklım almaz dese de, kendisinde olan özgüveni ve deneme cesareti yerine gelince hiçbir şey aslında sandığımız kadar zor gelmiyor.
Tabi bunda en büyük etken yazarındır. Resimle uygulamalı anlatımla boğucu terimlerden uzak anlatımı bende okuma merakımı daha kolay uyandırdı ve en azından denememi sağladı sonuçta başarılıda oldu.
Yeni yazıları sabırsızlıkla bekliyorum
Yorumunuz için teşekkür ederim. Tema yapımı konusu, sizinde değindiğiniz gibi herkesin öngörüyle yaklaştığı bir konu. Amacım, programcılığı sevdirmek ve herkesin kendine ait bir tema yapmasını sağlamak. Umarım WordPress Tema Yapımı ile birlikte PHP kullanımı hakkında da faydam dokunur. Tabiki sizin yorumlarınız çok değerli. Benide sonraki yazıları yazmak için harekete geçirdi.