Bir süredir yeni bir blog teması arıyordum. Piyasada gerçekten güzel temalar var ama çoğu için bir seferlik bile olsa bir ton para vermek istemedim. Elimde zaten Claude Code varken “bunu biraz çalıştırayım” dedim. Daha önce Vaktinde Ye‘nin temasını da baştan yenilemiştim, oradan aldığım tecrübeyle bu bloga da el atayım istedim. Sade, temiz, tam istediğim gibi bir tema çıktı ortaya. İki kere yapınca bir de alışkanlık oldu, sanırım bundan sonra elimdeki her projeye böyle bol bol el atacağım.
Süreç boyunca neler yaptığımı, nasıl ilerlediğimi madde madde anlatayım, belki birinin işine yarar.
1. İlk denemeyi çöpe attım
İlk isteğimde “temiz, şık, yazılımcıya uygun bir tema” dedim ve örnek bir anasayfa istedim. İlk çıkan tasarım koyu temalı, “seyir defteri” temalı bir konsept oldu; kategori isimlerini bile “kayıt” diye adlandırmıştı. Bense denizci değilim, koyu tema da istememiştim. Doğrudan geri çevirdim ve baştan başlattım.
Ders: İlk çıktı beklediğin gibi olmayabilir, hiç çekinmeden “bu olmadı, sıfırdan” demek gerekiyor.
2. Önce statik HTML ile tasarımı netleştirdim
WordPress’e hiç dokunmadan, önce sade bir HTML/CSS önizlemesiyle başladım. Açık zeminli, editöryal ağırlıklı ama girişte hafif teknik bir his olsun istedim. Başlıklarda Source Serif, gövde metninde Inter, meta bilgilerde (tarih, kategori etiketi gibi) Source Code Pro kullanıldı; bu üçü zaten teknik dokümanlar için birlikte tasarlanmış bir yazı tipi ailesi.
3. Referans görsel üzerinden hero’yu yeniden kurdum
Beğendiğim bir tasarımın ekran görüntüsünü attım, ona göre hero bölümünü güncellettim: yuvarlak köşeli kart, madde işaretli 3 satır, pill şeklinde CV butonu, sağda ikonlu bir bağlantılar paneli (LinkedIn, Medium, projelerim, Gündüz Medya).
4. Son projeler bölümünü ekledim
Hero’nun hemen altına, kategori listesinden önce 3 kartlık bir “Son Projeler” alanı ekledim. Üzerine gelince görsel koyulaşıp ortada logo beliriyor.
5. Diğer sayfaları da HTML olarak tasarladım
Anasayfa netleşince kategori sayfası, tekil yazı sayfası, arama sonuçları ve 404 sayfasını da aynı dile göre HTML önizleme olarak hazırlattım, hepsi tek bir ortak CSS dosyasından besleniyordu.
6. Sidebar’lı versiyonu ayrı olarak denedim
Sidebar olmadığını fark edip “sidebarlı halini de göreyim” dedim. Son yazılar, kategoriler, etiketler, hakkımda ve iki farklı boyutta reklam alanı widget’ı olan bir versiyon çıkarttım, sidebar’sız haliyle yan yana karşılaştırdım.
7. SEO ve kod kalitesini sıkılaştırdım
Tasarım netleşince işin görünmeyen tarafına geçtim: her sayfaya meta description, Open Graph, Twitter Card, JSON-LD (BlogPosting, BreadcrumbList) etiketleri eklettim, tüm görsellere alt/title yazdırdım, her bölüme benzersiz ve İngilizce id/class isimleri verdirdim, metinlerdeki em dash işaretlerini temizlettim.
8. Gerçek bir WordPress temasına çevirdim
Tasarım onaylanınca sıra koda geldi. functions.php, header.php, footer.php, front-page.php, single.php, category.php, search.php, 404.php gibi standart şablon dosyalarının yanında:
- Özelleştirici (Customizer) paneli: hero metinleri, hero’daki 4 bağlantı, 3 projenin ismi/görseli/logosu, anasayfada hangi kategorilerin gösterileceği, sidebar açık/kapalı, arama ikonu görünür/gizli, hepsi admin panelinden yönetilebiliyor.
- 5 özel widget: Son Yazılar, Kategoriler, Hakkımda, Bülten Kutusu, Reklam Alanı (3 farklı boyutta).
- Yazar profiline sosyal hesap alanları eklettim, yazı içindeki “yazar hakkında” kutusunda otomatik ikon olarak çıkıyor.
9. Ortaya çıkan hataları tek tek avladım
Canlıya alınca birkaç şey bozuk çıktı, onları da sırayla düzelttim:
- Menüdeki tuhaf noktalar, WordPress’in menüyü
<ul><li>olarak bastığını, benim CSS’imin ise düz metin beklediğini fark edince çözüldü. - Arama ikonuna tıklayınca açılan karartılmış ekran yarım görünüyordu; sebebi header’daki bulanıklaştırma efektinin, tam ekran kutuyu kendi sınırları içine hapsetmesiydi.
- Hero ve “Son Projeler” bölümü Özelleştirici’de dolu görünüp sitede boş çıkıyordu; kodun varsayılan değerleri iki farklı yerde tanımlıydı ve birbiriyle eşleşmiyordu, onu senkronize ettim.
- Görsellerin bazıları üstten alttan kesik duruyordu, tüm görsel boyutlarını tam 16:9 oranına sabitledim.
- Kategori etiketi büyük harfe çevrilirken Türkçe İ/ı kuralı yerine standart İngilizce kural uygulanıyordu (“İçerik Üretimi” yerine “İÇERIK ÜRETIMI” gibi bozuk çıkıyordu), Türkçeye özel bir büyütme fonksiyonu yazdırdım.
- Sayfalama linkleri yan yana değil, dağınık duruyordu; numaralandırılmış ve ortalanmış hale getirdim.
- Son olarak tema ismini, açıklamasını, geliştirici bilgilerimi güncelleyip tema listesinde görünecek bir ekran görüntüsü ekledim.
Sonuç
Baştan sona kod yazmadım, adım adım “bunu böyle yap”, “bu olmadı, düzelt” diyerek ilerledim. En büyük fark, önce tasarımı statik HTML üzerinde netleştirip WordPress’e ondan sonra geçmek oldu; ikisini aynı anda yapmaya çalışsaydım muhtemelen çok daha fazla tur atardım. Vaktinde Ye‘den sonra bu ikinci temam oldu, üçüncüsü de gelir herhalde.
