jekcms ile Restoran Sitesi Kurulumu

Restoran Siteleri Neden Bir Şablondan Fazlasına İhtiyaç Duyar

Küçük restoran sitelerinde örüntü hep aynıdır: sahibi bir WordPress teması satın alır, menüler, rezervasyonlar ve galeriler için bir düzine eklenti kurar ve sonunda yavaş yüklenen, eklentilerden biri güncellendiğinde her seferinde bozulan kırılgan bir site ile baş başa kalır. Basit bir "menü göster, rezervasyon al" sitesini kırılgan ve barındırması pahalı bir yapıya dönüştürmek için genelde birkaç eklenti yeter.

JekCMS'te restorana özel tablolar ya da bir sayfa oluşturucu eklenti ekosistemi yoktur — ve bu bilinçli bir tercihtir. Buradaki bir restoran sitesi, içerik ağırlıklı her site gibi kurulur: standart gönderiler, kategoriler ve gönderi meta verisi, bir tema ile biçimlendirilir. Güncellenmesi gereken eklenti yok, çekirdek güncellemesinde bozulan üçüncü taraf bağımlılığı yok. Bu rehber, ürünün gerçekte sahip olduğu araçlarla sıfırdan bir restoran sitesi kurmayı anlatıyor.

Adım 1: Tema Seçimi ve İlk Kurulum

JekCMS, bir restoran sitesine uyarlayabileceğiniz birkaç genel amaçlı temayla birlikte gelir; sade, görsel ağırlıklı bir işletme teması en doğal başlangıç noktasıdır, çünkü bir restoran sitesi büyük ölçüde yemek fotoğrafçılığına ve sade, taranabilir bir düzene dayanır.

JekCMS'i kurduktan sonra Admin > Ayarlar > Genel bölümüne gidin ve temel bilgileri doldurun:

• Site Adı: Restoran adınız
• Slogan: Kısa bir açıklama (örneğin, "1998'den Beri Taze Ege Deniz Ürünleri")
• Logo: Her boyutta net görünüm için SVG formatında yükleyin
• Favicon: 32x32 PNG veya SVG

Rezervasyon tarih ve saatlerinin doğru çalışması için sitenizin saat dilimini ayarlayın ve URL yapınıza erkenden karar verin — düz, okunabilir slug'lar telefon ekranında derin iç içe geçmiş yollardan daha kolay okunur.

Adım 2: Menüyü Yeni Tablolar Yerine Gönderilerle Modellemek

JekCMS'te ayrı bir "menü ögesi" tablosu yoktur ve buna gerek de yoktur — şemada zaten bulunan standart posts/post_meta/categories tabloları bunu gayet iyi karşılar. Bir Menü kategorisi oluşturun (Başlangıçlar, Ana Yemekler, Tatlılar, İçecekler için alt kategorilerle) ve her yemeği ilgili alt kategoride bir gönderi olarak ele alın:

• Gönderi başlığı = yemek adı
• Gönderi içeriği veya özeti = yemek açıklaması
• Öne çıkan görsel = yemek fotoğrafı
• Özel gönderi meta verisi = fiyat ve diyet etiketleri (örneğin price, dietary_tags gönderi meta değerleri olarak)

Bu, her yemeği zaten blog yazılarınız için kullandığınız aynı admin ekranları, revizyonlar ve medya yönetimiyle normal içerik akışının içinde tutar — bakımı gereken hiçbir özel yapı olmadan.

Adım 3: Menü Görünümünü Oluşturma

Menü sayfası, çoğu restoran sitesinin bozulduğu yerdir — statik bir PDF SEO ve mobil için berbattır, yüklenmesi sonsuza kadar süren ağır bir JavaScript tablosu da öyle. Basit yaklaşım: get_posts() ile Menü kategorisinden gönderileri çeken ve sunucu tarafında oluşturulan HTML olarak gösteren bir tema şablonu.

<?php
$categories = get_categories(['parent' => 'menu']);

foreach ($categories as $cat):
    $items = get_posts([
        'category' => $cat['slug'],
        'status'   => 'published',
        'orderby'  => 'menu_order',
    ]);
    if (empty($items)) continue;
?>
<section class="menu-category" id="category-<?= $cat['slug'] ?>">
    <h2><?= htmlspecialchars($cat['name']) ?></h2>
    <div class="menu-grid">
        <?php foreach ($items as $item): ?>
        <div class="menu-item">
            <picture>
                <?= get_featured_image($item, 'medium') ?>
            </picture>
            <div class="menu-item-info">
                <h3><?= htmlspecialchars($item['title']) ?></h3>
                <p><?= htmlspecialchars($item['excerpt']) ?></p>
            </div>
            <span class="menu-item-price">&#8378;<?= htmlspecialchars(get_post_meta($item['id'], 'price')) ?></span>
        </div>
        <?php endforeach; ?>
    </div>
</section>
<?php endforeach; ?>

Bu grid için CSS basittir: .menu-item masaüstünde iki sütunlu CSS Grid kullanır, mobilde tek sütuna iner. JavaScript framework gerekmez.

Adım 4: Yeni Bir Tablo Gerektirmeyen Rezervasyon Formu

Online rezervasyonlar, restoran sahiplerinden en çok istenen özelliktir. Bunu sunmak için bir rezervasyon veritabanına ihtiyacınız yok — girdiyi sunucu tarafında doğrulayan ve size detayları e-postayla ileten basit bir form, JekCMS'in zaten csrf_token() ile sağladığı CSRF korumasıyla birlikte, çoğu küçük restoranın ihtiyacını karşılar:

<form method="POST" action="" id="reservation-form">
    <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">

    <div class="form-row">
        <div class="form-group">
            <label for="guest_name">Ad Soyad</label>
            <input type="text" id="guest_name" name="guest_name" required>
        </div>
        <div class="form-group">
            <label for="phone">Telefon</label>
            <input type="tel" id="phone" name="phone" required>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="date">Tarih</label>
            <input type="date" id="date" name="date"
                   min="<?= date('Y-m-d') ?>" required>
        </div>
        <div class="form-group">
            <label for="guests">Kisi Sayisi</label>
            <select id="guests" name="guests" required>
                <?php for ($i = 1; $i <= 20; $i++): ?>
                <option value="<?= $i ?>"><?= $i ?> Kisi</option>
                <?php endfor; ?>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="notes">Ozel Notlar</label>
        <textarea id="notes" name="notes" rows="3"></textarea>
    </div>

    <button type="submit">Rezervasyon Yap</button>
</form>

Gönderimde her alanı sunucu tarafında doğrulayın — isim uzunluğu, makul bir telefon biçimi, geçmişte olmayan bir tarih — ve doğrulama geçerse detayları restoranın iletişim adresine e-postayla gönderin. Yalnızca e-postaya güvenmek yerine admin panelinde de bir kayıt isterseniz, isteği dahili bir "Rezervasyonlar" kategorisinde özel bir taslak gönderi olarak kaydedin; bu, özel bir tablo olmadan, zaten sahip olduğunuz araçlarla aranabilir bir geçmiş verir.

Hatırlanmaya değer bir detay: redirect() çağrısı herhangi bir HTML çıktısından önce yapılmalıdır. POST işleyicisinin şablon dosyasının başında, header parçası dahil edilmeden önce durmasının nedeni budur — HTML oluşturulmaya başladıktan sonra koyarsanız klasik "headers already sent" hatasını alırsınız.

Adım 5: Ayrı Bir Galeri Sistemi Olmadan Fotoğraflar

Restoran sahipleri yemeklerini, salonlarını ve mutfaklarını sergilemek ister. JekCMS'te bunun için ayrı bir galeri modülüne gerek yoktur — fotoğrafları normal medya kütüphanesi üzerinden yükleyin, gönderilere veya sayfalara ekleyin ve gerisini platformun yerleşik görsel hattına bırakın: her yükleme, yükleme anında otomatik olarak AVIF→WebP→orijinal yedeklemesinden ve önceden oluşturulmuş boyut varyantlarından geçer. Çalışma zamanında yeniden boyutlandırma yok, ayrı bir eklenti yok.

<div class="gallery-grid">
    <?php foreach ($gallery_items as $item): ?>
    <figure class="gallery-item">
        <picture>
            <?= get_featured_image($item, 'medium') ?>
        </picture>
        <figcaption><?= htmlspecialchars($item['title']) ?></figcaption>
    </figure>
    <?php endforeach; ?>
</div>

Tıklamada bir lightbox efekti için küçük bir vanilla JavaScript uygulaması yeterlidir — jQuery tabanlı bir eklentiye gerek yoktur.

Adım 6: Sayfa Hızını Öldürmeden Google Maps

Google Maps'i standart yöntemle (iframe) gömmek, sayfa ağırlığınıza yüzlerce kilobayt ekler ve oluşturmayı engeller. Bir restoran sitesinde harita, yalnızca konumunuzu göstermek için vardır — başlangıç sayfasıyla birlikte yüklenmesine gerek yoktur.

Daha hafif yaklaşım: tembel yüklenen statik bir harita görseli gösterin ve yalnızca ziyaretçi tıkladığında interaktif gömmeye geçin:

<div class="map-container" id="map-placeholder">
    <img src="/uploads/general/map-static.avif"
         alt="Restoran Konum" width="1200" height="400" loading="lazy">
    <button class="map-activate" aria-label="Haritayi Ac">
        Interaktif Haritayi Goster
    </button>
</div>

<script>
document.getElementById('map-placeholder').addEventListener('click', function() {
    this.innerHTML = '<iframe src="https://www.google.com/maps/embed?pb=YOUR_EMBED_URL" ' +
        'width="100%" height="400" style="border:0" allowfullscreen loading="lazy" ' +
        'referrerpolicy="no-referrer-when-downgrade"></iframe>';
});
</script>

Statik bir AVIF yer tutucu, canlı iframe'in ve onun JavaScript paketinin ağırlığının bir kesridir. Haritayı ziyaretçi gerçekten isteyene kadar ertelemek, bir restoran ana sayfasındaki en basit kazançlardan biridir.

Adım 7: Yerel İşletme Schema Markup

Arama motorları, zengin sonuçlar göstermek için yapısal veriye dayanır — yıldız değerlendirmeleri, çalışma saatleri, fiyat aralığı, mutfak türü. JekCMS'in output_schema() fonksiyonu siteniz için otomatik olarak Organization ve Article düzeyinde yapısal veri üretir, ama restorana özgü alanları (servesCuisine, priceRange, openingHoursSpecification, acceptsReservations) platform sizin için üretmez — bunları tema sayfa şablonunuza elle bir Restaurant JSON-LD bloğu olarak eklersiniz:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Restaurant",
    "name": "<?= get_setting('site_name') ?>",
    "url": "<?= SITE_URL ?>",
    "telephone": "<?= get_setting('contact', 'phone') ?>",
    "priceRange": "$$",
    "servesCuisine": "Seafood",
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "<?= get_setting('contact', 'address') ?>",
        "addressLocality": "Izmir",
        "addressCountry": "TR"
    },
    "openingHoursSpecification": [
        {
            "@type": "OpeningHoursSpecification",
            "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
            "opens": "11:00",
            "closes": "23:00"
        },
        {
            "@type": "OpeningHoursSpecification",
            "dayOfWeek": ["Saturday","Sunday"],
            "opens": "10:00",
            "closes": "00:00"
        }
    ],
    "menu": "<?= SITE_URL ?>/menu",
    "acceptsReservations": true
}
</script>

Google'ın restoran zengin sonuçları için baktığı alanlar servesCuisine, priceRange, openingHoursSpecification ve acceptsReservations'dır. Bunlardan herhangi birinin eksik olması, geliştirilmiş arama kartına hak kazanamayacağınız anlamına gelir.

Adım 8: Mobil Optimizasyon

Restoran sitesi ziyaretçilerinin büyük çoğunluğu mobil cihazlardan gelir — menüler, çalışma saatleri ve rezervasyon butonları küçük ekranlarda yakınlaştırma ya da yatay kaydırma olmadan hemen ulaşılabilir olmalıdır.

Değer katan temel mobil kararlar:

• Yapışkan kategori navigasyonu: Menü sayfasının üstünde, kaydırırken mevcut kategoriyi vurgulayan yatay kaydırma çubuğu. IntersectionObserver bunu scroll olay dinleyicileri olmadan halleder.
• Dokunarak arama telefon numarası: Başlıktaki telefon numarası her zaman bir tel: linki olmalı, böylece mobilde doğrudan arama uygulamasını tetikler.
• Alt CTA çubuğu: Yalnızca küçük ekranlarda görünen, "Ara" ve "Rezervasyon" butonlu sabit bir çubuk.
• Yakınlaştırmadan okunabilir yazı: Rahat okunabilir boyutlarda menü ögesi adları, açıklamalar ve fiyatlar.

Gerçek Performans Kazançları Nereden Gelir

Bu rehberin başında bahsedilen eklenti ağırlıklı WordPress kurulumuyla karşılaştırıldığında, böyle bir sitede en büyük ve en güvenilir kazançlar üç şeyden gelir: bir eklenti yığınının genelde beraberinde getirdiği JavaScript ağırlığından kurtulmak, görselleri sonradan eklenen bir optimize ediciye değil JekCMS'in yerleşik AVIF hattına bırakmak ve Google Maps gömmesini biri gerçekten tıklayana kadar ertelemek. Bunların hiçbiri yukarıda anlatılanın ötesinde bir şey gerektirmez — ekstra eklenti yok, ekstra tablo yok.

Sırada Ne Var

Bu, temel kurulumu kapsar: menü, rezervasyon, galeri, harita ve schema. Bunun üzerine özellik eklemek isterseniz — örneğin bir mesajlaşma uygulaması üzerinden online sipariş akışı — aynı yapı taşları geçerlidir: gönderi tabanlı bir içerik modeli, basit doğrulanmış bir form ve harici bir servise bağlanmanız gerekirse bir webhook ya da API entegrasyonu. Site yayına girdikten sonra takibi nasıl kuracağınız için analitik entegrasyonu rehberimize bakın.

Bir restoran sitesi kuruyorsanız ve bu adımlardan herhangi biri hakkında sorularınız varsa, iletişim formumuz aracılığıyla bize ulaşın.