📝 Basit Anlatım (Herkes İçin)
Bir tema tasarımını (HTML/CSS) gerçek bir çalışan siteye dönüştürmek için birçok adım gerekiyor. Bu rehber, VARPLAS teması örneğinde tüm adımları detaylandırıyor.
Özet: Ne Yapılacak?
📚 İçindekiler
1️⃣ Tema Dosyaları
📝 Basit Anlatım
Her tenant (site) kendi temasını kullanabilir. Tema dosyaları resources/views/themes/[tema-adi]/
klasöründe bulunur. Bulamazsa simple temasına fallback yapar.
resources/views/themes/varplas/
├── layouts/
│ └── app.blade.php # Ana layout (head, body, scripts)
│
├── partials/
│ ├── header.blade.php # Üst menü, logo, iletişim bilgisi
│ ├── footer.blade.php # Alt bilgi, sosyal medya, linkler
│ ├── mega-menu.blade.php # Ürün kategorileri mega menü
│ └── mobile-menu.blade.php # Mobil hamburger menü
│
├── pages/
│ ├── home.blade.php # Ana sayfa (widget'ları çağırır)
│ ├── about.blade.php # Hakkımızda sayfası
│ ├── contact.blade.php # İletişim sayfası
│ ├── certificates.blade.php # Sertifikalar sayfası
│ └── products/
│ ├── index.blade.php # Ürün listesi
│ └── show.blade.php # Ürün detay
│
├── components/
│ ├── product-card.blade.php # Ürün kartı component
│ ├── feature-card.blade.php # Özellik kartı
│ ├── timeline-item.blade.php # Zaman çizelgesi item
│ └── certificate-card.blade.php # Sertifika kartı
│
└── assets/ # Tema'ya özel CSS/JS (opsiyonel)
├── css/
│ └── varplas.css
└── js/
└── varplas.js
📄 layouts/app.blade.php
Ana şablon, tüm sayfalar bunu extend eder:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
@include('themes.varplas.partials.head')
</head>
<body>
@include('themes.varplas.partials.header')
@yield('content')
@include('themes.varplas.partials.footer')
{!! WidgetService::getStylesOutput() !!}
{!! WidgetService::getScriptsOutput() !!}
</body>
</html>
📄 pages/home.blade.php
Ana sayfa widget'ları çağırır:
@extends('themes.varplas.layouts.app')
@section('content')
@widget($heroWidgetId)
@widget($productsWidgetId)
@widget($whyUsWidgetId)
@widget($aboutWidgetId)
@widget($certificatesWidgetId)
@widget($quoteFormWidgetId)
@widget($contactWidgetId)
@endsection
⚠️ Tenant-Aware Tema Seçimi
Tenant'ın hangi temayı kullanacağı settings_values tablosunda
active_theme = 'varplas' olarak belirlenir.
Sistem otomatik olarak o tema klasörüne bakar.
2️⃣ Widget Şablonları (Central DB)
📝 Basit Anlatım
VARPLAS teması için 8 adet widget şablonu gerekiyor. Bunlar Central DB'deki
widgets tablosuna eklenir. Tüm tenant'lar bu şablonları kullanabilir.
| # | Widget Adı | Slug | has_items | Açıklama |
|---|---|---|---|---|
| 1 | Hero Slider | varplas-hero-slider | true | 3 slayt, istatistikler, CTA butonları |
| 2 | Ürün Kataloğu | varplas-product-catalog | true | Ürün kartları grid |
| 3 | Neden Biz | varplas-why-us | true | 4 özellik kartı (ikon, başlık, açıklama) |
| 4 | Hakkımızda Timeline | varplas-about-timeline | true | Şirket geçmişi zaman çizelgesi |
| 5 | Sertifikalar | varplas-certificates | true | ISO, UN belgeleri grid |
| 6 | Teklif Formu | varplas-quote-form | false | İletişim formu (ContactForm modülüne bağlı) |
| 7 | İletişim Bilgileri | varplas-contact-info | false | Telefon, email, adres kartları |
| 8 | İstatistikler | varplas-stats | true | Sayaç animasyonlu istatistikler |
📦 Örnek: Hero Slider Widget (Central DB)
{
"id": 20,
"name": "VARPLAS Hero Slider",
"slug": "varplas-hero-slider",
"type": "standard",
"has_items": true,
"settings_schema": [
{ "name": "section_title", "label": "Bölüm Başlığı", "type": "text" },
{ "name": "section_subtitle", "label": "Alt Başlık", "type": "text" },
{ "name": "primary_btn_text", "label": "Birincil Buton", "type": "text" },
{ "name": "primary_btn_url", "label": "Birincil Buton URL", "type": "url" },
{ "name": "secondary_btn_text", "label": "İkincil Buton", "type": "text" },
{ "name": "secondary_btn_url", "label": "İkincil Buton URL", "type": "url" },
{ "name": "autoplay", "label": "Otomatik Oynat", "type": "switch" },
{ "name": "interval", "label": "Geçiş Süresi (ms)", "type": "number" }
],
"item_schema": [
{ "name": "title", "label": "Slayt Başlığı", "type": "text", "required": true },
{ "name": "image", "label": "Slayt Görseli", "type": "image", "required": true },
{ "name": "is_active", "label": "Durum", "type": "switch" }
],
"content_html": "<section class=\"hero-slider\">...{{#each items}}...{{/each}}</section>",
"content_css": ".hero-slider { ... }",
"js_files": ["/js/swiper.min.js"],
"css_files": ["/css/swiper.min.css"]
}3️⃣ TenantWidget Kayıtları (Tenant DB)
📝 Basit Anlatım
Her tenant kendi widget örneklerini oluşturur. VARPLAS sitesi için Tenant DB'deki
tenant_widgets ve widget_items
tablolarına kayıtlar eklenir.
| tenant_widgets.id | widget_id | display_title | widget_items sayısı |
|---|---|---|---|
| 1 | 20 (Hero) | Ana Sayfa Hero Slider | 3 slayt |
| 2 | 21 (Ürünler) | Ürün Kataloğu | 3 ürün kartı |
| 3 | 22 (Neden Biz) | Neden VARPLAS | 4 özellik |
| 4 | 23 (Timeline) | Şirket Tarihçesi | 3 dönem |
| 5 | 24 (Sertifika) | Sertifikalarımız | 4 belge |
| 6 | 25 (Form) | Teklif Formu | - |
| 7 | 26 (İletişim) | İletişim Bilgileri | - |
💡 Toplam Kayıt Sayısı
5️⃣ Sayfalar (Page Modülü)
📝 Basit Anlatım
Sayfalar Page modülü ile yönetilir. Her sayfa
pages tablosunda bir kayıt olarak tutulur.
Sayfa içeriği widget'lardan veya doğrudan HTML'den oluşabilir.
| Sayfa | Slug | Template | Widget Kullanımı |
|---|---|---|---|
| Ana Sayfa | / | home | ✓ 7 widget |
| Hakkımızda | hakkimizda | about | ✓ Timeline + Content |
| Ürünler | urunler | products/index | Module data |
| Ürün Detay | urunler/{slug} | products/show | Module data |
| Lisanslar | lisanslar | certificates | ✓ Sertifikalar widget |
| İletişim | iletisim | contact | ✓ Form + Map |
| Teklif Al | teklif-al | quote | ✓ Quote form widget |
📊 pages tablosu kaydı örneği
{
"id": 1,
"title": { "tr": "Ana Sayfa", "en": "Home" },
"slug": { "tr": "", "en": "" },
"template": "home",
"content": null, // Widget'lar kullanılacak
"widget_ids": [1, 2, 3, 4, 5, 6, 7], // tenant_widgets ID'leri
"seo_title": { "tr": "VARPLAS - Endüstriyel Depolama Çözümleri" },
"seo_description": { "tr": "IBC Tank, Metal Varil, Plastik Varil..." },
"is_active": true
}6️⃣ Gerekli Modüller
✅ Mevcut Modüller (Kullanılacak)
- ✓ Page - Sayfa yönetimi
- ✓ WidgetManagement - Widget sistemi
- ✓ MenuManagement - Menü sistemi
- ✓ SettingsManagement - Site ayarları
- ✓ SeoManagement - SEO ayarları
- ✓ MediaManagement - Medya yönetimi
- ✓ ContactForm - İletişim formları
🆕 Oluşturulacak/Düzenlenecek
- → Services/Products Modülü - Ürün/Hizmet yönetimi
VARPLAS için Shop modülü veya yeni bir Products modülü gerekebilir. Ürün kategorileri, ürün detayları, özellikler gibi alanlar için.
7️⃣ Settings Değerleri (settings_values tablosu)
📝 Basit Anlatım
Site genelinde kullanılan ayarlar settings_values tablosunda saklanır.
setting('key') helper'ı ile çağrılır.
🏢 Temel Site Bilgileri
site_name
"VARPLAS"
site_slogan
"Endüstriyel Depolama Çözümleri"
site_logo
"/storage/logo.png"
site_favicon
"/storage/favicon.ico"
active_theme
"varplas"
📞 İletişim Bilgileri
site_phone
"+90 262 658 28 18"
site_email
"info@varplas.com"
site_address
"Kocaeli, Türkiye"
site_whatsapp
"+90 532 XXX XX XX"
google_maps_embed
"<iframe...>"
🌐 Sosyal Medya
social_facebook
"https://facebook.com/varplas"
social_instagram
"https://instagram.com/varplas"
social_linkedin
"https://linkedin.com/company/varplas"
social_twitter
"https://twitter.com/varplas"
🎨 Renk & Tasarım
primary_color
"#10b981"
secondary_color
"#0ea5e9"
font_heading
"Outfit"
font_body
"Inter"
📊 Toplam Settings Sayısı
VARPLAS teması için yaklaşık 20-25 adet setting değeri gerekiyor.
Bunlar settings_values tablosuna eklenir.
8️⃣ SEO Ayarları (seo_settings tablosu)
🔍 Genel SEO
default_title: "VARPLAS - Endüstriyel Depolama"title_separator: " | "meta_description: "IBC Tank, Metal Varil..."meta_keywords: "ibc tank, varil, depolama"robots: "index, follow"canonical_url: "https://varplas.com"📱 Social Meta (OG)
og_title: "VARPLAS"og_description: "Endüstriyel depolama..."og_image: "/storage/og-image.jpg"twitter_card: "summary_large_image"google_analytics: "G-XXXXXXXX"google_tag_manager: "GTM-XXXXXX"9️⃣ Uygulama Checklist
📝 Claude'un Yapması Gerekenler (Sırasıyla)
Tenant Oluştur
- • Yeni tenant kaydı (tenants tablosu)
- • Domain kaydı (domains tablosu)
- • Tenant database oluştur
- • Migration'ları çalıştır
Tema Dosyalarını Oluştur
- • resources/views/themes/varplas/ klasör yapısı
- • layouts/app.blade.php
- • partials/ (header, footer, mega-menu)
- • pages/ (home, about, contact, products)
- • components/ (kartlar, timeline)
Widget Şablonlarını Oluştur (Central)
- • 8 widget şablonu → widgets tablosu
- • Her widget için settings_schema tanımla
- • has_items=true olanlar için item_schema tanımla
- • content_html, content_css, js_files/css_files
TenantWidget Instance'ları Oluştur
- • 7 tenant_widgets kaydı
- • Her widget için settings JSON doldur
- • has_items=true olanlar için widget_items ekle
Settings Değerlerini Gir
- • ~20-25 setting değeri → settings_values
- • site_name, site_logo, iletişim bilgileri
- • Sosyal medya linkleri
- • active_theme = 'varplas'
Menüleri Oluştur
- • Header menü (mega menu dahil)
- • Footer hızlı erişim menüsü
- • Footer ürünler menüsü
Sayfaları Oluştur
- • 6-7 sayfa → pages tablosu
- • Her sayfa için widget_ids belirle
- • SEO meta bilgilerini doldur
Test & Cache Temizle
- • npm run prod (CSS build)
- • php artisan cache:clear
- • php artisan view:clear
- • Site testi