Ders 2 / 4

Claude ve WordPress ile Site Yapımı Part 2

18:30 · Beginner · TR

Bu ders hakkında

Bu video serisinde, bir *Su Arıtma Sistemleri web sitesini sıfırdan nasıl oluşturduğumu* adım adım gösteriyorum.

Serinin *2. bölümünde**, Part 1’de Claude AI ile hazırladığımız HTML mockup tasarımını gerçek bir **WordPress projesine dönüştürmeye başlıyoruz.*

Bu bölümde:

✅ WordPress üzerinde projemizi hazırlıyoruz

✅ Web sitesinde kullanacağımız sayfaları oluşturuyoruz

✅ Elementor ile sayfa yapılarını hazırlıyoruz

✅ Claude ile oluşturduğumuz HTML tasarımını referans olarak kullanıyoruz

✅ Anasayfa, Hakkımızda, Galeri, Blog ve İletişim sayfalarını WordPress tarafında hazırlıyoruz

✅ HTML mockup tasarımını gerçek bir WordPress web sitesine dönüştürmek için gerekli altyapıyı oluşturuyoruz

Serinin sonraki bölümünde *Claude ile oluşturduğumuz tasarımları WordPress ve Elementor içerisine aktarmaya ve web sitesini tamamlamaya devam edeceğiz.*

Başlamadan önce

Claude Ai
WordPress
Elementor (Ücretsiz)
Kadence (Ücretsiz Tema)

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

Ücretsiz hesap oluştur

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.

Mockup prompt — eski siteyi incelet ve modern tasarım yaptır (Claude)Claude ve WordPress ile Site Yapımı Part 4: Boş WordPress’e Tek Onayla Tüm Site

Ş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)Claude ve WordPress ile Site Yapımı Part 4: Boş WordPress’e Tek Onayla Tüm Site

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

Ansayfa HTML

index.html