◆ פיתוח 23.05.2026

בניית אתר וורדפרס (WordPress) עם Claude Code ו-Antigravity

23 במאי 2026  ·  vadim

בניית אתר וורדפרס (WordPress) עם Claude Code ו-Antigravity

בניתי את האתר הזה - vadim.co.il - עם שלושה כלי AI שמשנים את הדרך שבה אני מפתח: Antigravity IDE (הגרסה הבאה של VS Code עם agents), Claude Design (פרוטוטייפ UI שקורא את הקוד שלך), ו-Stitch (text-to-UI של Google). הפרויקט כולל תבנית וורדפרס (WordPress) מותאמת אישית, מערכת ניהול תפריט, Contact Form 7, עמודי שירותים ובלוג. מתחילים.

הכלים

שלושת הכלים שבניתי איתם


ANTIGRAVITY IDE
IDE חדש של Google מבוסס VS Code, מופעל על ידי Gemini 3 ותומך ב-Claude Sonnet 4.5 ו-GPT. מריץ כמה AI agents במקביל - agent אחד כותב קוד, שני בודק, שלישי מחפש תיעוד.
חינמי · Public Preview

CLAUDE DESIGN
כלי פרוטוטייפ של Anthropic המבוסס Claude Opus 4.7. קורא את ה-codebase שלך, מבין את ה-design tokens, ומייצר UI תואם. מייצא HTML, PDF, Canva.
Claude Pro/Max נדרש

STITCH BY GOOGLE
Canvas עיצוב AI של Google (Gemini 3). מתאר ממשק במשפט → מקבל design system מלא + קוד מוכן לייצוא. Voice interaction לעריכה בזמן אמת.
חינמי · stitch.withgoogle.com

CLAUDE CODE CLI
כלי שורת הפקודה של Anthropic לפיתוח עם Claude. קורא קבצים, עורך, מריץ פקודות, ומנהל git. הכלי שבו בניתי את כל הקוד בפועל.
npm install -g

תהליך העבודה

ה-Workflow מרעיון לקוד עובד

STITCHעיצוב ראשונימתאר את הדף במשפטים → מקבל UI + design tokens
CLAUDE DESIGNפרוטוטייפ + קודמעלה screenshots → Claude מייצר HTML/CSS תואם codebase
ANTIGRAVITYפיתוח multi-agentagents במקביל - PHP, CSS, JavaScript בו-זמנית
CLAUDE CODE CLIWP-CLI + Deploymentתפריטים, תוספים, DB - הכל דרך terminal

התקנה

שלב 1 - התקנת Antigravity IDE

Antigravity הוא IDE מבוסס VS Code - אם אתם משתמשים ב-VS Code, ההגדרות והתוספים שלכם עוברים אוטומטית.

הורדה

היכנסו ל-antigravity-ide.com והורידו לפי המערכת - macOS, Windows או Linux. הקובץ הוא installer סטנדרטי.

💡

חינמי לגמרי Antigravity נמצאת ב-public preview ומוצעת ללא עלות. אין צורך בכרטיס אשראי.

ייבוא הגדרות מ-VS Code

בהפעלה הראשונה Antigravity שואל אם לייבא מ-VS Code. לחצו Yes - התוספים, ה-keybindings וה-settings שלכם עוברים מיידית.

חיבור Claude ל-Antigravity

ב-Agent Manager (Ctrl+Shift+A) בחרו Claude Sonnet 4.5 כ-LLM. הזינו את ה-Anthropic API key שלכם:

Antigravity → Settings → AI Models
Model Provider: Anthropic
Model: claude-sonnet-4-5
API Key: sk-ant-api03-...
Max Agents: 4

פתיחת הפרויקט ב-Antigravity

פתחו את תיקיית הפרויקט - במקרה שלי /Applications/MAMP/htdocs/vadim.co.il. Antigravity קורא את CLAUDE.md אוטומטית כהקשר לכל agent.

שלב 2 - התקנת Claude Code CLI

Claude Code הוא כלי שורת הפקודה של Anthropic - הוא מה שמריץ Claude ישירות מה-terminal ויכול לעבוד על קבצים, לבצע פקודות ולנהל את הפרויקט.

📦 Terminal - התקנה
# דרישה מוקדמת: Node.js 18+
node --version

# התקנה גלובלית
npm install -g @anthropic-ai/claude-code

# אימות
claude auth login
# → פותח דפדפן לאישור Anthropic account

# בדיקה
claude --version
💡

Claude Code + Antigravity יחד Claude Code CLI עובד מה-terminal בתוך Antigravity. כל agent ב-Antigravity יכול לפנות ל-Claude Code לפעולות שדורשות שורת פקודה - git, npm, wp-cli.

שלב 3 - התקנת WP-CLI

WP-CLI מאפשר לנהל WordPress מה-terminal. עם Claude Code + WP-CLI אפשר לבצע כל פעולת WordPress - יצירת תפריטים, עדכון תוכן, התקנת תוספים - ללא כניסה לממשק האדמין.

📦 Terminal - WP-CLI על macOS
# הורדה
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

# בדיקה
php wp-cli.phar --info

# הפיכה לפקודה גלובלית
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

# בדיקה
wp --version
⚠️

בעיית MAMP - MySQL Socket WP-CLI על macOS עם MAMP לא מוצא את MySQL כי הוא מחפש את ה-socket במקום הלא נכון. הפתרון:
🔧 Terminal - פתרון MAMP socket
# מציאת ה-socket של MAMP
ls /Applications/MAMP/tmp/mysql/
# → mysql.sock  mysqlx.sock

# שימוש ב-MAMP PHP + socket בכל פקודת WP-CLI
MAMP_PHP=/Applications/MAMP/bin/php/php8.3.28/bin/php

$MAMP_PHP 
  -d mysqli.default_socket=/Applications/MAMP/tmp/mysql/mysql.sock 
  /usr/local/bin/wp 
  --path=/Applications/MAMP/htdocs/vadim.co.il 
  option get siteurl

# → https://vadim.co.il

שלב 4 - קובץ CLAUDE.md לפרויקט

זהו אחד הדברים החשובים ביותר. CLAUDE.md הוא קובץ שמסביר ל-Claude (ו-Antigravity) מה הפרויקט, מה ה-stack, ומה החוקים. כל agent שמתחיל עבודה קורא אותו ראשון.

📄 CLAUDE.md - מבנה בסיסי
# CLAUDE.md

## Environment
- Stack: WordPress 6.x on MAMP, PHP 8.x, MySQL
- Local URL: http://localhost:8888/myproject/
- DB: MySQL, database: mydb, user: root

## Active Theme
- Theme: my-theme (custom)
- Entry: front-page.php
- Styles: assets/css/theme.css
- JS: assets/js/main.js

## Architecture
- All text via get_theme_mod() - never hardcoded
- Nav menus: registered + managed via WP-CLI

## SEO Rules
- Every page/post needs post_excerpt (meta description)
- JSON-LD schema required on all service pages
- H1→H2→H3 hierarchy - never skip levels
💡

CLAUDE.md = הוראות לכל agent כל agent ב-Antigravity קורא את הקובץ הזה אוטומטית. אל תדלגו על שלב זה - הוא חוסך שעות של הסברים חוזרים.

עיצוב

שלב 5 - עיצוב עם Stitch ו-Claude Design

Stitch - מרעיון ויזואלי ראשוני

Stitch של Google הוא נקודת הפתיחה לעיצוב. פותחים stitch.withgoogle.com, מתארים את הדף, ומקבלים design system + קוד.

💬 Stitch - prompt לדף הבית של vadim.co.il
Create a professional portfolio site for a senior software engineer.
Style: editorial, warm cream palette, serif typography.
RTL Hebrew layout. Dark/light mode toggle.
Sections: hero with typing animation, services grid,
projects portfolio, testimonials, contact form.
Design system: Frank Ruhl Libre serif, JetBrains Mono,
accent color #c75d3d terracotta.

Stitch מייצר design tokens, component library ו-HTML/CSS. מייצאים → שומרים כ-reference screenshots בתיקיית _check/ בפרויקט.

Claude Design - יישום על ה-Codebase

עם ה-screenshots מ-Stitch, נכנסים ל-claude.ai/design:

Upload הקוד הקיים

Claude Design מאפשר להעלות קבצי CSS - מעלים את theme.css עם ה-design tokens הקיימים. Claude מבין את הצבעים, הפונטים, והרכיבים.

Upload Screenshot מ-Stitch

מעלים את ה-reference screenshot ואומרים: "implement this section using our existing CSS variables". Claude Design מייצר HTML תואם לחלוטין לעיצוב.

Export ל-HTML ואינטגרציה

מייצאים את הקוד → מעבירים ל-Antigravity → agent מתרגם ל-PHP template WordPress.

💬 Antigravity Agent - תרגום HTML ל-PHP
Take this HTML from Claude Design export and
convert it to a WordPress PHP template section.
Use get_theme_mod() for all text content.
Follow the patterns in front-page.php.
RTL Hebrew, use existing CSS classes.

דוגמאות אמיתיות

שלב 6 - פיתוח בפועל: מה Claude Code עשה

אלה הדוגמאות הספציפיות מהפרויקט הזה שבהן הכלים חסכו שעות:

תפריט ניווט דינמי

במקום לכתוב ידנית ב-header.php - Claude Code יצר Walker class מותאם ושלח WP-CLI commands ליצירת התפריט עם כל הפריטים:

💬 Prompt ל-Claude Code
Register a nav menu in functions.php, create a custom
Walker class that renders:
<li><a><span>Hebrew title</span>
    <span class="slug">/english</span></a></li>
Use item description for the slug text.
Then use WP-CLI to create the menu and add all items.

Contact Form 7 אינטגרציה

Contact Form 7 לא עיבד תגים עם autocomplete: attribute - Claude Code זיהה את הבעיה, הסיר את ה-attributes הבעייתיים, ועדכן את הטופס ב-DB דרך wp eval-file:

🔧 WP-CLI - יצירת CF7 form מ-script
wp eval-file setup-cf7.php 
  --path=/Applications/MAMP/htdocs/vadim.co.il

# → CF7 form created. ID: 24
# → Shortcode: 







    שדות המסומנים ב־* הם חובה. תשובה תוך 24 שעות.

    עמודי שירותים עם SEO

    כל עמוד שירות נבנה עם: cards grid, JSON-LD schema, post_excerpt כ-meta description, FAQ accordion - הכל בפקודה אחת ל-Claude Code.

    אבטחה

    שלב 7 - אבטחת אתר וורדפרס (WordPress): 10 כללים שלא לדלג עליהם

    WordPress היא מטרה מספר 1 לתוקפים ברשת. הנה הצעדים שאני נוקט בכל פרויקט לפני העלייה לאוויר:

    ✓ HARDENING
    wp-config.php מחוץ ל-web root
    העבירו את wp-config.php תיקייה אחת מעל public_html. WordPress מוצא אותו אוטומטית.
    ✓ HARDENING
    Disable XML-RPC
    XML-RPC משמש לברוט-פורס ו-DDoS amplification. השביתו ב-.htaccess אם לא צריכים אותו.
    ✓ PERMISSIONS
    הרשאות קבצים נכונות
    wp-config.php → 400. תיקיות → 755. קבצים → 644. uploads/ → 755 בלבד, ללא PHP execution.
    ✓ USERS
    שנו את ה-username מ-"admin"
    99% מניסיונות הברוט-פורס מנסים username "admin". צרו משתמש חדש עם שם אחר ומחקו את admin.
    ✗ COMMON MISTAKE
    פלאגינים לא מעודכנים
    70% מהפריצות ל-WordPress הן דרך פלאגינים עם CVE ידועים. עדכנו שבועית, מחקו פלאגינים שלא בשימוש.
    ✗ COMMON MISTAKE
    debug mode ב-production
    WP_DEBUG = true ב-production חושף paths, database names ו-credentials ב-error messages לכל גולש.
    🔒 wp-config.php - Security hardening
    // Disable file editing from admin panel
    define( 'DISALLOW_FILE_EDIT', true );
    
    // Limit login attempts (or use plugin)
    define( 'WP_AUTO_UPDATE_CORE', true );
    
    // Force HTTPS
    define( 'FORCE_SSL_ADMIN', true );
    
    // Disable debug in production
    define( 'WP_DEBUG', false );
    define( 'WP_DEBUG_LOG', false );
    define( 'WP_DEBUG_DISPLAY', false );
    🔒 .htaccess - Security rules
    # Disable XML-RPC
    <Files xmlrpc.php>
      Order Deny,Allow
      Deny from all
    </Files>
    
    # Block wp-config.php access
    <Files wp-config.php>
      Order Allow,Deny
      Deny from All
    </Files>
    
    # Prevent PHP execution in uploads
    <Directory /wp-content/uploads>
      <Files *.php>
        Deny from All
      </Files>
    </Directory>
    
    # Hide WordPress version
    <IfModule mod_headers.c>
      Header unset X-Powered-By
    </IfModule>
    🤖

    קוד AI ≠ קוד מאובטח כל קוד שנוצר על ידי AI - Antigravity, Claude Code, Copilot - חייב לעבור ביקורת אבטחה. AI לא בודק XSS, SQL Injection, או חשיפת מפתחות. השתמשו ב-שירות ליווי פרויקטי AI לפני שעולים לאוויר.

    תוצאות

    מה השגנו

    ⏱️
    חיסכון בזמן
    פרויקט שהיה לוקח 3-4 שבועות של כתיבה ידנית - הושלם ב-ימים ספורים עם AI agents.
    🎯
    פוקוס על ארכיטקטורה
    במקום לכתוב boilerplate - ביליתי את הזמן בהחלטות ארכיטקטוניות שחשובות לטווח הארוך.
    🔄
    Iteration מהיר
    שינוי עיצוב שהיה לוקח שעה - עם Claude Design + Antigravity נעשה בדקות.

    שאלות נפוצות

    מה זה Antigravity IDE?

    סביבת פיתוח (IDE) של Google מבוססת AI, שמשלבת סוכני קוד אוטונומיים ישירות בעורך. היא מאפשרת לתאר משימה בשפה טבעית והסוכן מתכנן, כותב ומריץ את הקוד - מתאימה במיוחד לפיתוח מהיר של אתרים ומערכות.

    האם אפשר באמת לבנות אתר וורדפרס (WordPress) שלם עם AI?

    כן - אבל עם הסתייגות. כלי AI כמו Claude Code בונים את רוב הקוד מהר מאוד, אך נדרשת מומחיות אנושית כדי לוודא שהתוצאה מאובטחת, מהירה ו-production-ready. AI מאיץ את העבודה, לא מחליף את שיקול הדעת.

    מה ההבדל בין Claude Code ל-GitHub Copilot?

    Copilot משלים שורות קוד תוך כדי הקלדה. Claude Code הוא סוכן CLI שמבצע משימות שלמות מקצה לקצה - קורא קבצים, מריץ פקודות WP-CLI, יוצר ועורך קבצים ומתקן באגים - לא רק השלמה אלא ביצוע.

    האם אתר שנבנה עם AI מאובטח?

    לא אוטומטית. AI יכול לייצר קוד עם פרצות אם לא מנחים אותו נכון. לכן המדריך כולל 10 כללי אבטחת WordPress - הקשחה, הרשאות, ועדכונים - שמיישמים מעל הקוד שה-AI יצר.

    האם צריך לדעת לתכנת כדי להשתמש בכלים האלה?

    כדי להתנסות - לא. כדי לבנות אתר עסקי שמחזיק בעומס ומאובטח - כן. הכלים מורידים את רף הכניסה, אבל ההבדל בין אתר חובבני לאתר מקצועי הוא עדיין הניסיון של מי שמפעיל אותם.

    ודים בנה לנו אתר WordPress בעזרת כלי ה-AI האלה - מהיר להפליא, ובעיקר מאובטח ויציב. הוא ידע בדיוק איפה ה-AI טועה ומה צריך לתקן ידנית. התוצאה מקצועית לגמרי.

    עידן, מייסד סטארטאפ, תל אביב

    מאמרים קשורים: בניית אתר וורדפרס, מתכנת PHP וייעוץ טכנולוגי.

    ◆ רוצים לנסות?

    יש לכם פרויקט?
    בואו נבנה אותו נכון.

    בניית אתרים עם AI צריכה ניסיון כדי שהתוצאה תהיה production-ready.

    שוחחו עם ודים ↗