Kendi WordPress Temamı Yazdım: HHC WordPress Blog Teması

Her Şey Bir Tema Arayışıyla Başladı

WordPress tarafında tema seçmek dışarıdan bakınca çok kolay görünüyor.
Depoda binlerce tema var, ücretli tema sitelerinde daha fazlası var, ekran görüntülerinde hepsi gayet güzel duruyor.
Ama iş kendi sitene gelince durum değişiyor.

Birini kuruyorsun, menü güzel durmuyor. Bir başkasını deniyorsun, yazı alanı içime sinmiyor.
Öbüründe footer güzel ama ana sayfa fazla kalabalık. Birinde renkler hoş ama sidebar sanki başka siteden gelmiş gibi.
Sonra anlıyorsun ki problem temanın kötü olması değil; problem o temanın senin kafandaki site olmaması.

Benim istediğim şey çok karmaşık değildi: Site güzel görünsün, yazılar düzgün dursun, sayfalar temiz açılsın,
menü, arka plan, kartlar, yorum alanı ve footer aynı dünyanın parçası gibi hissettirsin.

Fakat bunu hazır temalarda tam olarak yakalayamayınca iş yavaş yavaş “şunu biraz düzelteyim” noktasından
“galiba ben bunu baştan yazacağım” noktasına geldi.

Başta Kolay Sandım

İlk düşüncem çok basitti: Hazır bir temayı kurarım, biraz renk değiştiririm, birkaç CSS dokunuşu yaparım, biter.
Ama WordPress teması öyle sadece renk değiştirmekten ibaret değilmiş.
Header ayrı dert, menü ayrı dert, mobil görünüm ayrı dert, yazı sayfası ayrı dert, arşiv sayfası ayrı dert.

Bir yerde rengi düzeltiyorsun, başka yerde kutu patlıyor.
Sidebar’ı toparlıyorsun, yorum alanı başka bir renkte kalıyor.
Gündüz görünümünde güzel duran şey gece görünümünde sırıtmaya başlıyor.
Bir de işin içine yazı kartları, etiketler, arama kutusu, footer ve mobil davranış girince olay büyüyor.

Belki Amerika’yı yeniden keşfettim.
Belki bu işi bilen biri çok daha kısa sürede yapardı.
Ama sonuçta kendi sitem için, kendi gözüme hoş gelen, kendi kullanım alışkanlığıma uyan bir tema ortaya çıktı.
Benim için önemli olan da buydu.

HHC Temasının Temel Fikri

HHC WordPress teması, önce benim kendi sitem güzel görünsün diye ortaya çıktı.
Yani çıkış noktası büyük bir tema pazarı hedefi, ticari ürün planı veya “herkese uygun tema” iddiası değildi.
Ben sadece siteme girdiğimde içime sinsin istedim.

Bu yüzden temanın mantığını da buna göre kurdum.
Sayfa arka planı, içerik kartları, menü, footer, yazı düzeni, sidebar, yorumlar ve küçük bileşenler birbirinden kopuk durmasın istedim.
Bütün sayfa aynı tasarım dilini konuşsun, ziyaretçi sitede gezerken “burası başka yerden eklenmiş” hissi olmasın diye uğraştım.

Temanın içinde klasik WordPress yapısını korudum.
Ana sayfa, yazı listesi, tekil yazı, sayfa, arşiv, arama, 404, sidebar ve footer gibi alanları ayrı ayrı ele aldım.
Böylece tema sadece ana sayfada güzel görünsün diye değil, sitenin farklı köşelerinde de aynı düzeni sürdürebilsin diye şekillendi.

Yapıyı Nasıl Kurdum?

Tema klasörünün içinde klasik WordPress mantığını takip eden bir yapı var.
Ana tema dosyaları kökte duruyor, tasarım dosyaları assets altında toplanıyor, küçük tekrar eden parçalar ise template-parts içine ayrılıyor.
Böylece her şey tek dosyanın içine yığılmadı.

hhc/
├─ style.css
├─ functions.php
├─ header.php
├─ footer.php
├─ front-page.php
├─ home.php
├─ single.php
├─ page.php
├─ archive.php
├─ search.php
├─ comments.php
├─ sidebar.php
├─ sidebar-single.php
├─ assets/
│  ├─ css/
│  │  ├─ main.css
│  │  └─ editor.css
│  └─ js/
│     └─ main.js
├─ inc/
│  ├─ customizer.php
│  ├─ shortcodes.php
│  └─ template-tags.php
├─ template-parts/
│  ├─ content.php
│  ├─ content-single.php
│  ├─ content-page.php
│  └─ content-none.php
├─ page-templates/
├─ post-templates/
├─ docs/
└─ theme.json

Bu yapı bana şunu sağladı:
Header ile uğraşırken yazı kartını bozmadım, sidebar düzenlerken footer’a dokunmadım,
renk ayarlarını toparlarken şablon dosyalarını gereksiz yere kurcalamadım.
Kısacası tema büyüdükçe nerede ne olduğunu bilmek kolaylaştı.

Önce İskelet, Sonra Görünüm

Temayı yazarken önce sayfanın iskeletini kurdum.
Üstte header, ortada içerik, sağda isteğe bağlı sidebar, altta footer.
Basit gibi görünüyor ama bu iskelet düzgün oturmadığında ne renk kurtarıyor, ne gölge, ne de güzel font.

Ana sayfada yazıların kart düzeninde görünmesini istedim.
Tekil yazı sayfasında ise yazı alanı daha sakin, daha okunabilir ve daha derli toplu olsun istedim.
Arşiv ve kategori sayfalarında da aynı mantık devam etsin diye listeleme yapısını ayrı tuttum.

Sonra görsel tarafa geçtim.
Arka plan ne kadar açık olacak, kartlar ne kadar belirgin duracak, menü ne kadar koyu olacak,
link rengi gözü yoracak mı, butonlar sitede yabancı duracak mı, footer fazla ağır mı kalacak gibi detaylarla uğraştım.

Renk Meselesi Sandığımdan Daha Önemliymiş

Bir temada renk sadece “menü lacivert olsun, arka plan gri olsun” meselesi değilmiş.
Renkleri yanlış kurunca site dağınık görünüyor.
Header bir yerde, içerik başka yerde, sidebar başka yerde, yorum alanı başka bir dünyada duruyor.

Bu yüzden HHC içinde renkleri tek tek parça parça düşünmek yerine bir bütün olarak ele almaya çalıştım.
Sayfa arka planı, kart yüzeyi, yazı rengi, başlık rengi, vurgu rengi, border, gölge, footer ve menü aynı ailenin parçaları gibi çalışsın istedim.

Gece ve Gündüz Görünümü

Bir noktadan sonra sadece tek renk düzeniyle yetinmek istemedim.
Çünkü siteyi bazen koyu görünümde kullanmak güzel oluyor, bazen de gündüz açık arka plan daha rahat geliyor.
Bu yüzden temaya gece ve gündüz görünümü ekledim.

Buradaki amaç sadece sayfanın rengini tersine çevirmek değildi.
Açık temada kutular, yazılar, sidebar, tablo ve formlar düzgün görünmeli;
koyu temada ise aynı alanlar kendi havasını korumalıydı.
Bir yeri düzeltince başka bir yerin patlamaması için renkleri değişken mantığıyla toparladım.

Özelleştirici Ayarları

Temayı sadece dosyadan değiştirilen bir yapı olarak bırakmak istemedim.
WordPress Özelleştirici içine bazı ayarlar ekledim.
Çünkü her defasında CSS dosyası açıp küçük değişiklik yapmak pratik değil.

• Ana sayfa ve arşivlerde sidebar gösterme veya gizleme.
• Tekil yazılarda sidebar kullanma veya yazıyı daha sade bırakma.
• Sayfalarda sağ alan davranışını belirleme.
• Mobilde sidebar alanlarını kontrol etme.
• Kategori ve arşiv üst başlığını gösterme veya gizleme.
• Sayfa başı ve sayfa sonu butonlarını açma veya kapatma.
• Yazı genişliği, kart yoğunluğu ve özet uzunluğu gibi alanları ayarlama.
• Font, yazı boyutu ve başlık kalınlığı gibi görünüm detaylarını değiştirme.
• Gece ve gündüz renk profillerini ayrı ayrı düzenleme.

Böylece tema benim kullandığım haliyle sabit kalmadı.
Kullanmak isteyen biri kendi sitesine göre bazı şeyleri panelden değiştirebilecek hale geldi.

Bileşenleri Ayrı Bir Sayfada Topladım

Tema geliştikçe içinde kullandığım küçük bileşenler de arttı.
Rozetler, bilgi kutuları, tablolar, not alanları, kartlar, kod görünümleri, terminal alanları, dosya ağacı gibi parçaları tek tek kontrol etmek gerekiyordu.
Her değişiklikten sonra “acaba bu kutu bozuldu mu, tablo taşacak mı, mobilde düzgün mü” diye bakmak zorunda kalıyordum.

Bu yüzden tema içindeki bileşenleri canlı olarak görmek için ayrı bir sayfa hazırladım.
O sayfada temanın farklı parçalarını tek yerde test edebiliyorum.
HHC Tema Kabiliyetleri sayfası burada yayında:
https://zvtr.com/yazi/tema-kabiliyetleri/

Kod, Terminal ve Dosya Ağacı Alanları

Tema genel bir WordPress teması olsa da sitede bazen kod, komut veya dosya yapısı göstermek gerekebiliyor.
O yüzden bunları da ayrı ayrı düşündüm.
Normal kod bloğu başka, terminal çıktısı başka, dosya ağacı başka görünmeli.

Bu alanlar temanın ana amacı değil ama site içinde gerektiğinde düzgün görünmeleri önemli.
Çünkü bir sayfa güzel görünürken başka bir sayfada kod bloğu veya tablo yüzünden düzenin bozulmasını istemedim.

Mobil Görünüm Ayrı Bir Sınavdı

Masaüstünde güzel duran bir tema mobilde hemen kendini ele veriyor.
Menü sıkışıyor, kartlar daralıyor, sidebar aşağı kayınca koca bir blok gibi duruyor, uzun satırlar taşıyor.
Ben de HHC tarafında mobil görünümü ayrıca ele aldım.

Yazı kartlarının tek sütuna düşmesi, butonların ekrana binmemesi, içerik genişliğinin taşmaması,
sidebar’ın isteğe göre kapatılabilmesi ve yorum alanının mobilde düzgün kalması için ayrı ayrı düzenleme yaptım.
Çünkü artık siteye sadece bilgisayardan bakılmıyor.
Telefonda kötü görünen bir tema, masaüstünde ne kadar güzel olursa olsun eksik kalıyor.

Paylaşmaya Karar Vermem

Tema aslında tamamen kendi ihtiyacımdan çıktı.
Ama bir noktadan sonra düşündüm: Ben hazır temalarla uğraşırken bu kadar vakit kaybettim,
belki aynı kafada olan başka biri de vardır.
O da kendi sitesinin sade, derli toplu ve hoş görünmesini istiyordur.

Bu yüzden HHC WordPress temasını paylaşmaya karar verdim.
Kullanmak isteyen, incelemek isteyen veya kendi temasını yaparken fikir almak isteyenler GitHub üzerinden ulaşabilir:
https://github.com/huseyincig/HHC-Wordpress-Theme

Sonuç: İçime Sinen Bir Tema Oldu

Hazır tema arayışıyla başlayan süreç, sonunda kendi WordPress temamı yazmaya dönüştü.
Başta sadece birkaç renk değiştiririm sanıyordum ama iş büyüdü.
Menü, arka plan, kartlar, sidebar, footer, yorum alanı, mobil görünüm, renk profilleri ve bileşenler derken ortaya HHC çıktı.

Belki bazı yerleri daha da gelişecek, belki zamanla yeni ayarlar eklenecek, belki bazı şeyleri baştan düzenleyeceğim.
Ama şu an siteye baktığımda “evet, bu benim istediğim görüntüye yakın” diyebiliyorum.
Zaten bu işe başlamamın sebebi de tam olarak buydu.