Tema Oluşturma

jekcms teması yapmak için build script'i, framework, boilerplate üreticisi yok. Sadece birkaç PHP ve CSS dosyasını doğru yere koymanız gerekiyor. Bu sayfa, çalışan bir temanın en sade halini adım adım gösteriyor.

En az hangi dosyalara ihtiyacınız var?

Temanızı bir klasöre şöyle yerleştirin:

themes/my-theme/
  theme.json
  templates/
    header.php
    footer.php
    index.php
    single.php
  assets/
    css/style.css

Bu klasörü /themes/ altına atarsınız. jekcms bir sonraki admin sayfa yüklenmesinde keşfeder. Nasıl keşfedip listelediğini Tema kurulumu sayfasında anlatıyoruz.

Adım 1 — theme.json

En küçük hali ile başlayın:

{
    "name": "My Theme",
    "slug": "my-theme",
    "version": "0.1.0",
    "author": "Your Name",
    "license": "free"
}

slug alanı klasör adıyla aynı olmak zorunda. İleride özelleştirici sekmeleri (customizer.tabs) eklemek isterseniz theme.json şeması tam listeyi gösteriyor.

Adım 2 — header.php ve footer.php

Bunlar her sayfanın üstünü ve altını sarıyor. Sade başlayalım.

templates/header.php:

<!doctype html>
<html lang="<?= htmlspecialchars(site_option('language', 'en')) ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= htmlspecialchars(render_page_title()) ?></title>
    <?php output_robots_meta(); ?>
    <?php output_theme_customization_css(); ?>
    <link rel="stylesheet" href="<?= theme_asset('css/style.css') ?>">
    <?php do_action('wp_head'); ?>
</head>
<body>
    <header class="site-header">
        <a href="/"><?= htmlspecialchars(site_option('site_name')) ?></a>
    </header>
    <main class="site-main">

templates/footer.php:

    </main>
    <footer class="site-footer">
        <p>&copy; <?= date('Y') ?> <?= htmlspecialchars(site_option('site_name')) ?></p>
    </footer>
    <?php do_action('wp_footer'); ?>
</body>
</html>

Kaçırılmaması gereken hook'lar

Her temaya şunları mutlaka eklemelisiniz:

do_action('wp_head') — eklentiler, SEO modülleri, analitik kodları buraya bağlanır. Atarsanız entegrasyonlar çalışmaz.
do_action('wp_footer') — geç yüklenen script'ler ve çerez bannerları buraya bağlanır.
output_robots_meta() — site ayarlarına göre <meta name="robots"> çıktısını verir. SEO için lazım.
output_theme_customization_css() — özelleştiriciden gelen :root değişkenlerini yayınlar. Renkler bununla çalışır.

Adım 3 — index.php (liste sayfası)

Ana sayfa, kategori, etiket, arama sonuçları için kullanılır:

<?php include __DIR__ . '/header.php'; ?>

<h1><?= htmlspecialchars(render_archive_title()) ?></h1>

<div class="post-list">
    <?php foreach ($GLOBALS['posts'] as $post): ?>
        <?php include __DIR__ . '/partials/post-card.php'; ?>
    <?php endforeach; ?>
</div>

<?php render_pagination(); ?>

<?php include __DIR__ . '/footer.php'; ?>

$GLOBALS['posts'], o anki sorguya göre yazı listesi dizisidir — jekcms sizin şablonunuzu dahil etmeden önce doldurur.

Adım 4 — single.php (yazı detay sayfası)

<?php include __DIR__ . '/header.php'; ?>

<article class="post">
    <h1><?= htmlspecialchars($GLOBALS['post']['title']) ?></h1>
    <p class="post-meta">
        By <?= htmlspecialchars($GLOBALS['post']['author_name']) ?>
        on <?= date('M j, Y', strtotime($GLOBALS['post']['published_at'])) ?>
    </p>
    <div class="post-content">
        <?php render_content(); ?>
    </div>
</article>

<?php include __DIR__ . '/footer.php'; ?>

`render_content()` mı yoksa doğrudan `$post['content']` mi?

Her zaman render_content() kullanın. Bu fonksiyon şunları sizin için hallediyor: shortcode'ları çözüyor, eklentilerin bağlandığı the_content filtre zincirini çalıştırıyor, tembel yüklenen medyayı işliyor, okuma süresi ve ilgili yazı enjeksiyonlarını yapıyor. $post['content']'i doğrudan yazdırırsanız bunların hepsini atlarsınız.

Adım 5 — partial'lar

Birden fazla yerde kullandığınız parçalar için (yazı kartı, gezinti menüsü, yorum bloğu) partials/ altında ayrı dosyalar tutun:

templates/
  partials/
    post-card.php
    nav-primary.php
    comments.php

Dahil ederken:

<?php include __DIR__ . '/partials/post-card.php'; ?>

Partial, onu çağıran dosyanın değişkenlerini miras alır. Yani foreach döngüsü içinde $post değişkenini açıkça iletmeseniz bile post-card.php onu görebilir.

Şablonda hangi değişkenler hazır?

| Değişken | Nerede çalışır | İçinde ne var | |---|---|---| | $GLOBALS['post'] | single.php ve partial'lar | Aktif yazının tüm alanları: id, title, slug, content, excerpt, author_id, author_name, published_at, featured_image | | $GLOBALS['posts'] | index.php ve arşiv şablonları | Mevcut sayfanın yazılarından oluşan dizi | | $GLOBALS['pagination'] | Arşiv şablonları | current_page, total_pages, per_page | | $GLOBALS['query_type'] | Tüm şablonlar | single / archive / category / tag / search / 404 |

Bundan sonrası

Temanız bir şey render etmeye başladıktan sonra site yöneticilerine dosya düzenlemeden renk ve font değiştirebilecekleri seçenekler sunmak isteyebilirsiniz. Onun için Tema özelleştirme ve theme.json şeması sayfalarına bakın.