Ders 4 / 4

Claude ve WordPress ile Site Yapımı Part 4: Boş WordPress’e Tek Onayla Tüm Site

Beginner · TR · 8 adım

Birlikte ilerleyin

Eklentiyi yükle ve sunucu kontrolünü çalıştır

Eklentiler → Yeni Ekle → Eklenti Yükle ile zip dosyasını yükle. Claude Connection → Kurulum → “Sunucu kontrolünü çalıştır”. “Önce bağlantılarınızı düzeltin” kartı çıkarsa “Yazı adı bağlantılarını kullan”a tıkla.

İzin seviyesini Site maintainer yap

Genel Bakış’ta seviyeyi Site maintainer seç. Claude ancak bu seviyede tema ve eklenti kurabilir; her kurulum yine senin onayına bağlı.

Claude’a connector’ı ekle

Claude → Ayarlar → Connectors → Add custom connector. Adres sitenin ana sayfası değil, Kurulum sayfasındaki tam connector adresi olmalı. Bağlan, sitede “Allow Claude”a tıkla.

https://siteniz.com/wp-json/fbsa/v1/mcp

Eski siteyi incelet, mockup yaptır

Claude’a eski sitenin adresini ver: sayfaları, metinleri ve görselleri inceler, modern bir mockup hazırlar. Değişiklikleri sohbette istersin, onaylayana kadar hiçbir şey kurulmaz.

Build kit ve prompt’u hazırla

Onaylanan mockup’tan sayfalar, blog yazıları, tema ayarları, CSS, form, menü ve footer tek bir build kit dosyasında toplanır. Örneği aşağıdan indirebilirsin.

Yeni sohbette prompt’u çalıştır, planı tek tıkla onayla

Yeni bir sohbet aç, kit dosyasını ekle, prompt’u yapıştır. Claude tek bir build plan gönderir; Claude Connection → Onaylar’dan bir kez onayla.

Watch Me Live ile izle

Claude yedek alır, Kadence’i ve eklentileri kurar, görselleri taşır, sayfaları ve yazıları kurar. Sesli brifleri açabilir, paneli büyütüp küçültebilir, karanlık temaya geçebilirsin.

Site kontrolü ve son dokunuşlar

Claude site kontrolünü çalıştırıp bulduğu sorunları düzeltir. Sana kalan: telefon, e-posta, çalışma saatleri ve harita gibi gerçek bilgileri girmek.

Bu ders hakkında

Bu derste boş bir WordPress kurulumuna yalnızca FB AI Engine – Claude Connector eklentisini yüklüyoruz ve gerisini Claude’a bırakıyoruz. Eski bir güzellik kliniği sitesini (Nova Güzellik) önce sohbette modern bir mockup’a dönüştürüyoruz, sonra tek bir build plan onayıyla sıfırdan kurduruyoruz.

Claude önce WPvivid ile yedek alıyor, Kadence temasını ve gereken eklentileri kuruyor, varsayılan “Hello world!” yazısını temizliyor, görselleri eski siteden taşıyor; 8 sayfayı, 6 blog yazısını, menüyü, footer’ı ve iletişim formunu kuruyor. Her adımı Watch Me Live ekranından sesli brifler, çalışma göstergesi ve turuncu ışıkla canlı izliyoruz.

Yol boyunca connector adresini doğru girmeyi, alt klasördeki bir WordPress’i bağlamayı, kalıcı bağlantıları ve izin seviyelerini de öğreniyoruz.

Bu ders yakında yayında. Tarih değişirse bu sayfada güncellenecek.

Başlamadan önce

Boş bir WordPress kurulumu (alt klasör de olur, ör. siteniz.com/test)
Özel connector destekleyen bir Claude planı
FB AI Engine – Claude Connector 1.2.2 (ücretsiz, aşağıdan indir)
Kod bilgisi gerekmez; eklenti yüklemeyi bilmek yeterli

Nova Güzellik — mockup'ı gez

Claude'un tasarladığı 8 sayfalık site. Sayfalar arasında gezin, linklere tıklayın, mobil görünüme geçin.

nova-guzellik.com/ Yeni sekmede aç ↗

Mockup, promptlar ve build kit (GitHub) ↗ Claude Connector'ı indir ↗

Bu projeden

Bu ders, FB AI Engine – Claude Connector geliştirilirken ortaya çıktı.

Projeyi görüntüle

Bu kursa 10 dosya eşlik ediyor. Ücretsiz bir hesap onları açar.

Ücretsiz hesap oluştur

Bu ders

Mockup prompt — eski siteyi incelet ve modern tasarım yaptır (Claude)

Şu adresteki eski web sitemi incele: [ESKİ SİTE ADRESİ]

Tüm sayfaları, metinleri ve görselleri gözden geçir. Sonra bu siteyi modern bir görünümle yeniden tasarla ve bana sayfa sayfa bir mockup hazırla. Eski sitedeki görselleri kullanabilirsin; lorem ipsum gibi doldurma metinleri gerçek, düzgün Türkçe metinlerle değiştir. Gereksiz veya tekrar eden sayfaları çıkar ve neyi neden çıkardığını söyle. Telefon, adres gibi bilmediğin bilgileri uydurma; köşeli parantezle yer tutucu bırak.

Mockup’u ben onaylayana kadar siteye hiçbir şey kurma. Onayladığımda, sayfaları, blog yazılarını, tema ayarlarını ve build planını FB AI Engine – Claude Connector ile kurulacak şekilde tek bir build kit dosyası ve bir prompt olarak hazırla.

Build prompt — yeni sohbette siteyi tek onayla kur (Nova örneği, İngilizce)

Build the Nova Güzellik website on my WordPress test site through the "Nova" connector (FB AI Engine – Claude Connector). The attached file **Nova-build-kit.md** has everything: the build plan, images, theme settings, CSS, form, footer, menu, every page and every blog post as ready block markup. I already approved the mockups in chat.

The site is fresh: only the connector is installed. Work in this order and keep me posted live:

0. **task_status** at the start with all steps below (and a short spoken "brief"), at every step, and with done=true at the end. I watch on Watch Me Live with voice on.
1. **build_plan_submit** with kit section 1 exactly. Tell me it is waiting, wait until I approve it, then check **build_plan_status**.
2. **plugins_install** `wpvivid-backuprestore` → **backup_create** → wait until **backup_status** shows a fresh backup.
3. **theme_install** `kadence`.
4. **plugins_install** `contact-form-7`.
5. **content_trash** id 1 ("Hello world!").
6. **media_upload** every image in kit section 2 (url + alt). Keep a list of key → id + url.
7. **custom_css_set** with kit section 4 (mode replace). Then **theme_settings_get**, and set the Kadence palette, fonts, page layout, logo, header and header button with **theme_settings_set** (kit section 3), keeping Kadence's exact structures. If a header part cannot be set through theme settings, link your browser first (the connector tells you how) and use the Customizer.
8. **form_create** with kit section 5 and keep the shortcode.
9. Pages: for each page in kit section 8, **content_create_draft** (post_type page, title exactly as given, content exactly as given, with `{{img:KEY}}` replaced by the uploaded url and `{{form_shortcode}}` by the shortcode), then **content_publish**.
10. Blog posts: for each post in kit section 9, **content_create_draft** (post_type post, with the excerpt), **post_settings_set** (category + featured image id), then **content_publish**. Never publish a post without its featured image.
11. **menu_set** (kit section 7, primary + mobile). **site_settings**: front page = Anasayfa, title "Nova Güzellik", tagline "Estetik, kozmetoloji ve dermatoloji kliniği". **widgets_set** footer1–footer4 (kit section 6, replace `{{img:logo}}`).
12. **site_check**. Fix every problem it finds, then run it again.
13. Finish with task_status done=true and a brief: what was built, the page links, and anything left for me (the placeholders: phone, email, opening hours, map).

Rules: follow the kit's markup and texts exactly. Don't add  tags to pages. Ask me before anything outside the plan. If a step fails, tell me the exact error and the step number before trying something else.

Bu kursun diğer bölümlerinde

Claude için ilk promptClaude ve WordPress ile Site Yapımı Part 1

Merhaba Claude,
Bir su arıtma sistemleri firması için modern, profesyonel ve güven veren bir web sitesi tasarlamak istiyorum.
Web sitesinde aşağıdaki sayfalar yer alacak:
•	Anasayfa
•	Blog
•	Hakkımızda
•	Galeri
•	İletişim
Tasarımda sana göndermiş olduğum renk paletini referans almanı istiyorum. Renkleri sitenin genel tasarım diliyle uyumlu, modern ve temiz bir şekilde kullan.
Su arıtma sektörüne uygun olarak tasarımın:
•	Temiz ve ferah
•	Profesyonel
•	Güven veren
•	Modern
•	Mobil uyumlu (responsive)
•	Kullanıcı dostu
olmasına dikkat et.
Özellikle Anasayfa üzerinde güçlü bir hero alanı, hizmet veya ürün tanıtım bölümleri, firmanın avantajları, güven unsurları, müşteri yönlendirme alanları ve belirgin CTA (Call to Action) butonları kullan.
Ayrıca sayfalar arasında tutarlı bir header, navigasyon menüsü ve footer tasarımı oluştur.
Şimdilik WordPress geliştirmesine geçmeden önce tasarımı görmek istiyorum.
Bana bütün sayfaları kapsayan, tarayıcıda açıp inceleyebileceğim HTML/CSS/JavaScript tabanlı çalışan bir web sitesi mockup'ı oluştur.
Mockup gerçek bir müşteri projesi sunumu gibi profesyonel görünsün ve daha sonra WordPress üzerinde geliştirmeye uygun bir tasarım yapısına sahip olsun.

Claude için Otomasyon PromptClaude ve WordPress ile Site Yapımı Part 3

WordPress Web Sitesini Mevcut HTML Mockup'a Göre Tamamlama
Merhaba Claude,
Sana daha önce hazırlattığım HTML mockup tasarımını şimdi mevcut WordPress web siteme uygulamanı istiyorum.
WordPress kurulumu, tema kurulumu ve gerekli sayfaların oluşturulması tarafımdan tamamlandı.
ÇOK ÖNEMLİ KURAL
Header ve Footer oluşturma, düzenleme veya değiştirme.
Web sitesinin Header ve Footer alanları WordPress/tema üzerinden ayrıca yönetilecek.
Bu nedenle sana verdiğim HTML mockup içerisinde Header veya Footer kodları bulunuyorsa bunları sayfalara ekleme.
Sadece sayfaların ana içerik bölümlerini kullan.
________________________________________
Mevcut WordPress Yapısı
Aşağıdaki sayfalar WordPress üzerinde zaten oluşturuldu:
•	Anasayfa
•	Hakkımızda
•	Galeri
•	Blog
•	İletişim
Yeni sayfa oluşturma.
Mevcut sayfaları kullan.
________________________________________
Elementor Yapısı
Her sayfayı Elementor ile önceden hazırladım.
Her sayfanın içerisinde HTML kodu eklemek için kullanabileceğin bir Elementor HTML Widget / HTML alanı bulunmaktadır.
Senin yapman gereken:
1.	WordPress yönetim paneline gir.
2.	İlgili sayfayı aç.
3.	Elementor ile Düzenle seçeneğini kullan.
4.	Sayfada bulunan mevcut HTML Widget alanını bul.
5.	Sana verdiğim mockup içerisinden sadece o sayfaya ait HTML içeriğini al.
6.	HTML kodunu mevcut HTML Widget içerisine ekle.
7.	Sayfayı güncelle.
8.	Sonuçları frontend üzerinden kontrol et.
9.	Daha sonra sıradaki sayfaya geç.
________________________________________
Header ve Footer Kuralı
Mockup içerisinde aşağıdaki yapılar bulunuyorsa:

...

veya

...

bunları KESİNLİKLE Elementor sayfalarına ekleme.
Aynı şekilde:
•	Navbar
•	Ana navigasyon
•	Site logosunun bulunduğu header
•	Global menü
•	Footer menüsü
•	Copyright alanı
•	Global footer iletişim bilgileri
sayfa HTML içerisine eklenmemelidir.
Bunlar WordPress tarafından ayrıca yönetilecektir.
________________________________________
Sayfalara Uygulanacak Yapı
Mockup içerisindeki tasarımı aşağıdaki şekilde ayır:
Anasayfa
Sadece Anasayfa'nın  / içerik bölümünü kullan.
Hakkımızda
Sadece Hakkımızda sayfasına ait içerikleri kullan.
Galeri
Sadece Galeri sayfasına ait içerikleri kullan.
Blog
Sadece Blog sayfasına ait içerikleri kullan.
İletişim
Sadece İletişim sayfasına ait içerikleri kullan.
Her sayfanın tasarımı mockuptaki tasarıma mümkün olduğunca sadık kalmalıdır.
________________________________________
Tasarım
Mockup içerisinde kullanılan:
•	renkler
•	kart tasarımları
•	butonlar
•	başlıklar
•	spacing
•	section yapıları
•	border radius
•	görsel alanları
•	hover efektleri
•	responsive yapı
•	typography
•	arka planlar
korunmalıdır.
CSS gerekiyorsa HTML Widget içerisinde çalışabilecek şekilde ilgili sayfanın koduna dahil edebilirsin.
Ancak WordPress'in veya temanın global CSS dosyalarını gereksiz yere değiştirme.
________________________________________
WordPress Sistemine Dokunma
Aşağıdaki alanlarda değişiklik yapma:
•	WordPress kurulumu
•	Tema
•	Pluginler
•	Header
•	Footer
•	WordPress kullanıcıları
•	WordPress ayarları
•	Permalink ayarları
•	Hosting ayarları
•	PHP dosyaları
•	functions.php
•	Tema dosyaları
Senin görevin sadece mevcut Elementor sayfalarındaki HTML alanlarını doldurmak ve sayfaları tamamlamak.
________________________________________
Önemli: Mevcut Yapıyı Koru
Bir sayfaya girdiğinde mevcut Elementor yapısını silip yeniden oluşturma.
Ben HTML Widget alanlarını senin için hazırladım.
Sadece ilgili HTML Widget'ın içeriğini düzenle.
Gereksiz Elementor Container, Section veya Widget oluşturma.
________________________________________
Çalışma Sırası
Aşağıdaki sırayla ilerle:
1.	Anasayfa
2.	Hakkımızda
3.	Galeri
4.	Blog
5.	İletişim
Her sayfayı tamamladıktan sonra frontend üzerinden kontrol et.
Kontrol etmen gerekenler:
•	Sayfa düzgün yükleniyor mu?
•	Header sadece WordPress'in mevcut header'ı olarak mı görünüyor?
•	İkinci bir header oluşmuş mu?
•	Footer sadece WordPress'in mevcut footer'ı olarak mı görünüyor?
•	İkinci bir footer oluşmuş mu?
•	Tasarım mockupa uyuyor mu?
•	Mobil görünüm bozuluyor mu?
•	Tablet görünümü düzgün mü?
•	Masaüstü görünümü düzgün mü?
•	Butonlar ve linkler çalışıyor mu?
•	Görseller düzgün görüntüleniyor mu?
•	HTML/CSS çakışması var mı?
________________________________________
En Önemli Kural
Bu projede sayfanın tüm HTML belgesini WordPress'e yapıştırmıyoruz.
Yani:





gibi tüm web sitesi yapısını Elementor'a ekleme.
Elementor'a sadece sayfanın içerik tasarımını ekle.
Örneğin mantık şu olmalı:




    
        ...
    

    
        ...
    


Header ve Footer WordPress tarafından yönetilmeye devam edecek.
________________________________________
Sonuç
Ben sana HTML mockup dosyasını vereceğim.
Mockup'ı analiz et, her sayfanın içeriğini ayır ve mevcut WordPress sayfalarının içerisindeki Elementor HTML Widget alanlarına doğru kodları yerleştir.
Yeni tasarım üretme.
Yeni sayfa oluşturma.
Header ve Footer yapma.
Mevcut Header ve Footer'a dokunma.
Sadece verdiğim mockup tasarımını mevcut Elementor HTML alanlarına uygula ve bütün sayfaları tamamla.
Tüm işlemleri tamamladıktan sonra hangi sayfalara hangi işlemleri yaptığını kısa bir özet halinde bildir.

Bu kursun diğer bölümlerinde

Ansayfa HTML

index.html