Wordpress

WordPress ile Tema Yapımı: Başlangıç

11 Eylül 2018

Merhabalar,

Büyük bir serinin başlangıcını yapmak istiyorum artık. Uzun süredir kafamda olup da bir türlü hazırlamak için vakit bulamadığım bir seriyi elimden geldiğince basit ama aynı zamanda ayrıntılarıyla anlatmaya çalışacağım.

Uzun zamandır WordPress ile site geliştirmesi ve tasarımı yapıyorum. Kimi zaman hazır temalar üzerinde çalıştım, kimi zamansa kendim tema tasarımı ve geliştirmesi yapmaya çalıştım. Bu yazı serisinde WordPress ile sıfırdan bir tema tasarlayıp, önemli (core) konseptler üzerinde durmaya çalışacağım.

Ön Gereklilikler

Tabii ki, çok ileri seviye olmasa da HTML, CSS, JavaScript dillerine aşina olmanız gerekiyor. Bunun yanında çokça PHP de kullanacağız. Bu nedenle anlamadığınız noktalarda Google’da aratmayı ve ayrıntılı bilgi bulmayı kendinize görev bilin. Ben de olabildiğince ayrıntılı göstermeye çalışacağım zaten. Yani,

  • PHP
  • HTML
  • CSS
  • JavaScript

Yardımcı Programlar

İlk olarak bir yazı editörüne ihtiyacımız olacak. Ben, Sublime Text 3 kullanacağım. Ama siz aynı şeyleri VisualStudio Code, Atom vb. yazı editörleriyle de yapabilirsiniz. Bilgisayarınız iyiyse VS Code kullanmanızı tavsiye ederim. Google’a yazdığınızda zaten bulacaksınız. İsterseniz buradaki yazıyı da inceleyebilirsiniz.

Yazı editörünü seçtikten sonra herkeste hosting vb. sunucular bulunmadığı için ve aynı zamanda tema geliştirmeleri genelde offline ortamlarda yapıldığı için bize sunucu desteğini sağlayacak bir programa ihtiyacımız var. Benim tavsiyem Xampp kullanmanız. Ancak her platformda çalışacak bir program istiyorsanız Ampps kullanmanız daha iyi olacaktır. İsterseniz buradaki adrese girerek gerekli programı indirebilirsiniz.

Bunları sağladıktan sonra artık tema geliştirmeye başlayabiliriz.

WordPress dosya yapısını anlamak

Tema geliştirmeye başlamadan önce WordPress’in dosya yapısına bir göz atmak istiyorum. Böylelikle ne zaman, hangi dosyada düzenleme yapmamız gerektiğini anlayacağız. İlk WordPress’i kurduğumuzda şu dosyalar karşımıza çıkıyor:

Baktığımız zaman bir sürü dosya görüyoruz. Merak etmeyin, tema geliştirmesi için baştan sonra hepsini bilmemize gerek yok. Bazı dosyalar bizim için, bizden habersiz, ihtiyacımız olan özellikleri bize sağlamak için var. Nasıl çalıştığını bilmemiz gerekmiyor. Ama yine de bilirsek iyi olur tabii. 🙂

Bizim için şimdilik önemli olanlar:

  • wp-admin
  • wp-content
  • .htaccess
  • wp-config.php

Aynı zamanda “wp-content” içindeki dosyalara da ihtiyacımız olacak. Peki, bunlar ne işe yarıyor?

Öncelikle tema geliştirmesi sırasında en çok kullanacağımız klasör “wp-content/themes” klasörü olacak. Başlangıçta iki dosyaya ihtiyacımız olacak: index.php, style.css.

Bu iki dosya olmadan tema geliştiremezsiniz. Daha sonrasında functions.php dosyasına da ihtiyacımız olacak. Normalde bu dosyalarla basit bir tema geliştirebilirsiniz, fakat biz bir kaç dosya daha kullanacağız.

index.php

Burada yazdığınız kodlar, sitenizin ana sayfasında görünür. Yani sitenizin ana sayfasını bu dosya temsil ediyor başlangıçta.

style.css

Sitemizin görüşünde düzenlemeler yapmamızı sağlayacak CSS dosyamız.

functions.php

Sitemizin fonksiyonel olmasını sağlayacak, bazı özellikleri aktif/deaktif etmemizi sağlayacak dosyamız.

Tema oluşturma

Tema oluşturmadan önce tabii ki WordPress kurulumu yapmamız gerekiyor. Buradaki yazıya bakarak WordPress kurulumu gerçekleştirebilirsiniz. Yazıda farklı yapmanız gereken tek şey, ücretli sunucuları kullanmak yerine, indirmiş olduğumuz Ampps programını sunucu olarak kullanmak. WordPress’i kurduktan sonra “wp-content/themes” klasörünün içinde temamızın ismiyle bir klasör oluşturmamız gerekiyor. Ben, temamızın ismini “rawsly” yapacağım, doğal olarak klasör adı da “rawsly” olacak. Zorunlu değil, ama ileride karışıklık olmaması için, başlangıçta tema ismiyle klasör ismini aynı yapmaya özen gösterin.

Şimdi, bu klasör içinde iki adet dosya oluşturacağız: index.php ve style.css.

Temamızın klasörünü yazı editörüyle açın ve CSS dosyamıza şu kodları kendinize göre düzenleyerek ekleyin:

Theme Name: Temanın ismi

Theme URI: Temanın sitesi.

Author: Yazar ismi

Author URI: Yazarın sitesi.

Description: Tema ile alakalı kısa bir açıklama.

Version: Temanın versiyonu.

Text Domain: Temanın kısa bağlantısı. Eğer temanız birden fazla sözcükten oluşuyorsa sözcükleri “-” işareti ile ayırın. Örneğin, “Ahmet’in Teması” için “ahmet-in-temasi” veya “ahmetin-temasi” yazabilirsiniz.


Bunları yaptıktan sonra artık temamızı oluşturduk. Şimdi, WordPress’in yönetim paneline giriyoruz. Bunun için http://sitenizinadresi/wp-login.php adresine gitmeniz gerekiyor. Örneğin, ben WordPress’i de “rawsly” isimli klasörden açtığım için sitemin adresi “http://localhost/rawsly/wp-login.php” oldu.

Yönetici bilgilerini girdikten sonra “Görünüm -> Temalar” yolunu izliyoruz. Burada “rawsly” adında bir tema olduğunu göreceksiniz. Temayı aktif edebiliriz. Ancak ana sayfada bir düzenleme yapmadığımız için boş bir ekranımız olacak.

Eğer temanın üzerine tıklarsanız, doldurmuş olduğunuz bilgilerin orada olduğunu göreceksiniz.

Hemen ana sayfaya bir şeyler yazalım. Bunun için “index.php” dosyasını açalım ve aşağıdaki kodu ekleyelim:

Site böyle görünecek:

Ancak yukarıdaki kod, bildiğimiz hard-coded HTML. Yani, hiçbir şekilde PHP kullanmadan yazılmış statik bir site. Örneğin, sitenizde 3 adet blog yazısı varsa, sayfayı yenileseniz de bu yazılar görünmeyecek. Çünkü, daha kodumuzu dinamik bir hale getirmedik. Bunun için öncelikle sitemizde tekrar tekrar karşımıza çıkacak yerleri belirleyelim.

  • Header – Yani sitenin üst kısmı. Özellikle menünün, logonun vb. parçaların olduğu kısım.
  • Body – Genel olarak sitenin gövdesi. Blog yazıları, eğer var ise sitenizdeki diğer önemli parçaların olduğu kısım. Daha sonra örneklerle göreceksiniz zaten.
  • Sidebar – Sitenin genelde sağ veya sol tarafında bulunan ve içerisinde çeşitli bileşenlerin olduğu kısım.
  • Footer – Sitenin alt kısmı. Özellikle abone olma, harita, menü, siteniz hakkında kısa bilgilerin olduğu, aynı zamanda “Tüm hakları saklıdır.” gibi ibarelerin bulunduğu kısım.

Tabii ki yukarıdakiler dışında farklı kısımlar da karşımıza tekrar tekrar çıkabilir. İşte bu tekrarlanan parçalara biz “template” yani şablon diyeceğiz. Şimdi, öncelikle bu şablonları oluşturmamız gerekiyor. Bu sayede sitenin ana sayfasında oluşturduğumuz bu şablonları tek bir satırda çağırarak sitemizin çok daha temiz kodlanmış olmasını sağlayacağız.

O zaman yukarıdan aşağı doğru kodlamaya başlayalım. Ama başlamadan önce WordPress’in bize sağladı muhteşem metodlardan faydalanalım. Yukarıdaki kodu değiştirip şöyle yazacağız:

Artık biraz daha değişik görünüme sahip bir sitemiz olacak. Ancak dikkat ederseniz, aslında yukarıda yazmadığımız bazı yazıların olduğunu göreceksiniz. İşte bu yazıların hepsi get_header(), get_footer(), get_sidebar() gibi metodlardan geliyor aslında. Bu metodlar WordPress tarafından önceden tanımlanmıştır ve sizin işinizi kolaylaştırmak için varlar. İsimlerinden, sitenin hangi kısımlarını temsil ettiğini anlamışsınızdır zaten.

Ancak yukarıdaki kodda da eksiklikler var tabii ki. Örneğin, yukarıdaki kodda article adında bir div var, fakat bu sadece tek bir yazı için bunu yapıyor. Eğer sitemizde birden fazla yazı olsaydı, diğerlerini dinamik olarak çekemeyecektir. İşte bu noktada da kodumuzu döngüye yani “loop”a sokmamız gerekiyor. Öyle ki, bu döngü, bizim blog yazılarımızın bilgisini tek tek çekecek. Bu sayede tüm yazıları çekmiş olacağız. Buna geçmeden önce son bir bilgi daha verip yazıyı bitirmek istiyorum.

Başka hangi sayfalar var?

Tabii ki yukarıda anlattıklarım sadece sitemizin ana sayfası veya blog sayfası için kullanılabilir. Ancak kullanıcı, aslında sitede olmayan bir sayfayı açmaya çalışırsa 404 vb. hataları verdirmemiz gerekiyor. Bunlar için de sayfalar yazacağız. Aynı şekilde arşivler, yani eski yazılar ve aynı zamanda arama sonuçlarının gösterildiği bir sayfa da kodlayacağız. Son olarak bunlar dışında herhangi bir şekilde tek sayfa eklemek istersek, onun için de bir şablon oluşturmamız gerekiyor. Bunları yaptıktan sonra sitemiz tamamlanacak. Gerisi sizin programlama bilginize, çalışmanıza göre gelecektir zaten.

Bir sonraki yazıda kaldığımız yerden devam ederek ana sayfamızı kodlamaya başlayacağız.

    Bir Cevap Yazın

    This site uses Akismet to reduce spam. Learn how your comment data is processed.