בניית WordPress Theme עם Claude Code — Case Study

בשיעור הזה אנחנו עוצרים את התיאוריה ועושים דבר אמיתי. נבנה feature מלא ב-WordPress Theme — Sticky Header עם scroll effect — עם Claude Code, צעד אחר צעד.

Setup: הכנת הפרויקט

מניחים שיש לכם WordPress theme קיים. הדבר הראשון — CLAUDE.md מוכן (ראו שיעור 4).

cd wp-content/themes/my-theme
claude

נפתח session. נבדוק שClaud Code מכיר את הפרויקט:

> describe the structure of this theme briefly

Claude Code יקרא CLAUDE.md ויסרוק את המבנה. הוא אמור להחזיר תיאור מדויק.

שלב 1: הגדרת הדרישות

> I want to add a sticky header with these behaviors:
  - Initially transparent (rgba(0,0,0,0)) with logo and nav visible
  - On scroll past 80px: background becomes solid dark (#04050e),
    adds box-shadow, logo shrinks slightly
  - Smooth CSS transition (0.3s ease)
  - Must work on mobile too
  - Header element is in header.php, CSS in src/css/main.css (Vite build)

Claude Code יקרא את header.php ו-src/css/main.css לפני שיכתוב כלום.

שלב 2: סקירת ה-Plan

Claude Code יציג תוכנית:

I will:
1. Add `data-header` attribute to the header element in header.php
2. Add CSS classes `.header-scrolled` in main.css
3. Add scroll event listener in main.js
4. Run npm build to compile

Let me first read the current header.php...

זה הרגע לשאול שאלות אם משהו לא ברור. אחרי האישור — Claude Code יבצע.

שלב 3: הביצוע

Claude Code כותב לקבצים בזה אחר זה. כל שינוי מוצג לפני ביצועו:

Modifying src/css/main.css — adding scroll header styles:

  .site-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    transition: background .3s ease, box-shadow .3s ease;
    z-index: 1000;
  }
  .site-header.scrolled {
    background: #04050e;
    box-shadow: 0 2px 20px rgba(0,0,0,.4);
  }

Apply this change? (y/n)

בדקו שהקוד הגיוני → y.

שלב 4: איטרציה

עכשיו הכיף מתחיל. כשהfeature עלה — רוצים לדייק:

> looks good! Two changes:
  1. The logo should also resize from 120px to 90px width on scroll
  2. Add padding-top to body equal to header height so content isn't hidden

Claude Code קורא את הקוד שכתב, מבין את הsContext, ומעדכן בלי להרוס את מה שכבר עבד.

שלב 5: Build ו-Commit

> run npm build and then create a git commit with a meaningful message

Claude Code ירוץ:

Running: npm run build
✓ Built in 1.4s

Running: git add -A
Running: git commit -m "feat: add sticky header with scroll animation

- Header becomes solid on scroll past 80px
- Logo resizes from 120px to 90px
- Smooth 0.3s transitions
- Mobile responsive"

שיטת העבודה — הלקח המרכזי

הצלחה עם Claude Code על פרויקטים אמיתיים תלויה בלופ הזה:

1. הגדר תוצאה — מה אתה רוצה שיקרה (לא איך)
2. אשר plan — קרא לפני שמאשר
3. בצע בשלבים — לא הכל בבת אחת
4. בדוק בדפדפן — עם עיניים אנושיות
5. איטרציה — "נראה טוב אבל שנה…"
6. Commit — שמור כל milestone שעובד

טעויות נפוצות בעבודה על WP עם Claude Code

• לשכוח להריץ npm build אחרי שינויי CSS/JS
• לתת task גדול מדי בלי לפרק — "תבנה לי אתר שלם"
• לא לגבות לפני שינויים גדולים (git stash חברך)
• לא לבדוק בדפדפן — Claude Code לא רואה את הוויזואל

✅ סיכום השיעור

• תאר תוצאה מדויקת עם הקשרים טכניים (קבצים, מידות, התנהגות)
• אשר plan לפני ביצוע
• עבד בשלבים קטנים + commit אחרי כל milestone
• Claude Code לא רואה ויזואל — הבדיקה האנושית חיונית

בשיעור הבא — Debugging: איך לנצל את Claude Code כדי לפתור bugs מסובכים שגרמו לך כאב ראש.