jekcms Tema Geliştirme: HTML'den PHP'ye

Başlangıç: HTML Tasarımı

Bir temaya başlamanın kolay yolu önce düz HTML ve CSS ile çalışmak. Ana sayfayı, yazı sayfasını, arşivi ve 404 sayfasını statik olarak hazırlayıp görünümü oturttuktan sonra PHP'ye geçmek, veritabanı sorgularıyla uğraşmadan tasarımı istediğiniz kadar değiştirmenizi sağlıyor.

Bu HTML sayfaları doğrudan tema şablonlarına karşılık geliyor: index.html ana sayfa şablonuna, post.html yazı şablonuna, category.html arşiv şablonuna, 404.html da bulunamadı sayfasına dönüşüyor.

Klasör Yapısı

Hazır temaların hepsi aynı düzeni kullanıyor. En kısa yol bunlardan birini kopyalayıp başlamak:

themes/mytheme/
+-- theme.json         # ad, sürüm, renkler, yazı tipleri
+-- functions.php      # temaya özel yardımcılar
+-- screenshot.png
+-- templates/
|   +-- header.php, footer.php
|   +-- index.php      # ana sayfa
|   +-- single.php     # yazı
|   +-- page.php       # sayfa
|   +-- archive.php    # kategori ve etiket arşivi
|   +-- search.php, 404.php
+-- partials/
|   +-- post-card.php, pagination.php, sidebar.php, comments.php
+-- sections/          # düzen editöründe dizilen bölümler
+-- assets/css, assets/js

Kategori ve etiket sayfaları için ayrı dosyalar yok; ikisi de archive.php ile açılıyor. Tekrar eden parçalar partials/ klasöründe duruyor ve şablondan get_template_part('post-card') ile çağrılıyor.

Üst Bilgi Şablonu

HTML'deki <head> bölümü templates/header.php dosyasına taşınıyor. SEO etiketlerini, Open Graph'ı, yapılandırılmış veriyi ve analiz kodlarını elle yazmanıza gerek yok; çekirdeğin fonksiyonları bunları basıyor. Kısaltılmış bir örnek:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($pageTitle ?? get_setting('general', 'site_name')) ?></title>

    <?php output_og_tags($post ?? null); ?>
    <?php output_schema($post ?? null); ?>
    <?php output_robots_meta($post ?? null); ?>

    <link rel="stylesheet" href="<?= theme_url('assets/css/style.css') ?>">
    <?php output_theme_customization_css(); ?>
    <?php output_head_scripts(); ?>
    <?php output_favicon_tags(); ?>
</head>

output_theme_customization_css() tema özelleştiricide seçilen renkleri ve yazı tiplerini sayfaya ekliyor. output_head_scripts() ise panelden girilen analiz ve doğrulama kodlarını basıyor.

Şablon Fonksiyonları

HTML'deki sabit içeriğin yerini şu fonksiyonlar alıyor:

• get_setting('general', 'site_name'): site ayarlarını okur
• get_posts(['limit' => 6, 'category' => 'haberler']): yazıları filtreyle getirir
• get_categories(): kategorileri listeler
• get_featured_image($post, 'medium'): öne çıkan görselin adresini verir
• get_featured_picture(): AVIF ve WebP kaynaklı, srcset'li bir picture etiketi basar
• theme_url('assets/...'): temanın klasöründeki bir dosyanın adresini verir
• format_date($tarih): tarihi site diline göre biçimlendirir
• e($metin): metni HTML'e güvenli biçimde basar

get_posts() nesne değil düz PHP dizisi döndürüyor; şablonda $post['title'] diye okuyorsunuz.

Yazı Kartı

Yazı kartı ana sayfada, arşivde, aramada ve kenar çubuğunda kullanılıyor. Kartı bir parça olarak yazmak, değişiklik gerektiğinde tek bir dosyayı düzenlemek demek:

<?php // partials/post-card.php
$img = get_featured_image($post, 'medium'); ?>
<article class="post-card">
    <?php if ($img): ?>
    <a href="<?= SITE_URL ?>/<?= e($post['slug']) ?>" class="card-image">
        <img src="<?= e($img) ?>" alt="<?= e($post['title']) ?>"
             width="800" height="500" loading="lazy">
    </a>
    <?php endif; ?>
    <div class="card-content">
        <h2><a href="<?= SITE_URL ?>/<?= e($post['slug']) ?>"><?= e($post['title']) ?></a></h2>
        <p><?= e($post['excerpt'] ?? '') ?></p>
        <time datetime="<?= e($post['published_at']) ?>"><?= format_date($post['published_at']) ?></time>
    </div>
</article>

Yazıların adresi doğrudan site adresi ve yazının kısa adından oluşuyor (/yazinin-kisa-adi); araya /blog/ gibi bir ön ek girmiyor. Görsele genişlik ve yükseklik yazmak sayfa yüklenirken içeriğin kaymasını önlüyor.

Karanlık Mod

Bütün renkleri CSS değişkeni olarak tanımlayın. Açık modu varsayılan yapın, koyu modu [data-theme="dark"] seçicisinde tanımlayın. Seçimi localStorage'a kaydeden betik, tercihi sayfa çizilmeden önce uygulamalı; aksi halde açılışta bir anlığına yanlış renk görünür.

Yayına Almadan Önce

• Lighthouse ile ana sayfayı, bir yazıyı ve bir arşivi ölçün.
• Sayfada yalnızca klavyeyle gezinmeyi deneyin.
• 375, 768, 1024 ve 1440 piksel genişliklerde düzeni kontrol edin.
• Karanlık modun her sayfada doğru çalıştığına bakın.
• Geliştirme sırasında DEBUG_MODE açık olsun ki tanımsız değişken uyarılarını erkenden görün.