פיתוח ערכת נושא של WordPress עם עריכת אתר מלאה (FSE)

הלקוח רוצה לשנות את כותרת האתר והצבעים ללא מפתח. ערכת נושא קלאסית לא מאפשרת זאת—כל שינוי דורש עריכת PHP ו-CSS. Full Site Editing (FSE) משנה את כללי המשחק. אנו יוצרים ערכות נושא FSE שבהן כל האתר—כותרת, כותרת תחתונה, תבניות—מורכב מבלוקים בעורך החזותי, לא דרך קבצי PHP. גישת פיתוח ערכות נושא FSE זו דורשת הגדרה קפדנית של theme.json כדי להבטיח עקביות עיצובית. עם ניסיון של 5+ שנים, פיתחנו למעלה מ-50 ערכות נושא כאלה, תוך הבטחת יציבות וביצועים. FSE מועיל במיוחד כאשר צריך לעדכן במהירות את המבנה או הסגנונות ללא מעורבות מפתח—כל העריכות נעשות דרך עורך האתר. בינתיים, Core Web Vitals נשארים תחת שליטה: LCP ו-CLS לא נפגעים עם הגדרת theme.json נכונה. דוגמה אופיינית: לקוח רצה להוסיף באנר מתחת לכותרת ולשנות את הצבע הראשי בכל הדפים. בערכת נושא קלאסית, זה היה לוקח יום עבודה של מפתח. ב-FSE—15 דקות דרך עורך האתר. לפי התיעוד הרשמי, ארכיטקטורת FSE יכולה להאיץ עריכות פי 5 בהשוואה לערכות נושא מסורתיות. מעבר ל-FSE יכול להפחית עלויות תחזוקה חודשיות ב-$200–$500 עבור אתר עסקי טיפוסי. מחקרים מראים ש-FSE מפחית עלויות תחזוקה בעד 60%.

בעת פיתוח ערכת נושא Full Site Editing (FSE), יש להגדיר theme.json, ליצור תבניות בלוקים, ולהשתמש בעורך האתר של WordPress לעריכה חזותית. הגדרה זו מבטיחה יעילות ועקביות. ערכות נושא FSE יכולות להיטען עד 20% מהר יותר מערכות נושא קלאסיות בזכות סימון בלוקים מותאם. השקעה אופיינית בערכת נושא FSE של $2,500 מחזירה את עצמה תוך 6 חודשים בזכות הפחתת זמן המפתח.

מקור: תיעוד רשמי של WordPress Full Site Editing

השוואה בין FSE לערכת נושא קלאסית

מבנה ערכת נושא FSE

ערכת נושא FSE אינה מכילה header.php, footer.php, sidebar.php. במקום זאת, יש לה קבצי HTML בתיקיות templates/ ו-parts/ עם סימון בלוקים של WordPress. הנה מבנה מינימלי:

wp-content/themes/my-fse-theme/
├── style.css # Заголовок темы
├── functions.php # Минимальный (theme supports, enqueue)
├── theme.json # Дизайн-токены и глобальные стили
├── templates/
│   ├── index.html # Дефолтный шаблон
│   ├── single.html # Одиночная запись
│   ├── single-project.html # CPT project
│   ├── archive.html # Архив
│   ├── page.html # Страница
│   ├── page-no-title.html # Кастомный шаблон страницы
│   └── 404.html # Страница 404
└── parts/
    ├── header.html # Шапка
    ├── footer.html # Футер
    └── sidebar.html # Сайдбар

במקום wp-content/themes/my-fse-theme/ ├── style.css # Заголовок темы ├── functions.php # Минимальный (theme supports, enqueue) ├── theme.json # Дизайн-токены и глобальные стили ├── templates/ │ ├── index.html # Дефолтный шаблон │ ├── single.html # Одиночная запись │ ├── single-project.html # CPT project │ ├── archive.html # Архив │ ├── page.html # Страница │ ├── page-no-title.html # Кастомный шаблон страницы │ └── 404.html # Страница 404 └── parts/ ├── header.html # Шапка ├── footer.html # Футер └── sidebar.html # Сайдбар בתבנית, משתמשים כעת בבלוק get_header():

<!-- wp:template-part {"slug":"header","theme":"my-fse-theme","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"my-fse-theme","tagName":"footer"} /-->

למה לעבור ל-FSE?

היתרון המרכזי הוא עריכה חזותית של כל האתר ללא PHP. מערכת עיצוב אחידה דרך theme.json: כל הצבעים, הגופנים, המרווחים מוגדרים פעם אחת ומשמשים בכל הבלוקים. פיתוח מהיר יותר—אין צורך לכתוב תבניות לכל סוג פוסט, רק להגדיר תבנית HTML. תחזוקה פשוטה: הלקוח משנה תוכן ומבנה בעצמו מבלי לשבור את העיצוב אם קיימות הגבלות מתאימות. לדוגמה, ניתן לסדר מחדש בלוקים בכותרת או להוסיף באנר ללא התערבות מפתח—בקשה אופיינית שנפתרת תוך דקות. בערכת נושא קלאסית, עריכות כאלה דורשות כניסה ל-PHP וסיכון לשבירת התבנית. חיסכון בזמן עריכה יכול להגיע ל-60%, ונפח הקוד יורד ב-40%. FSE מחזיר את ההשקעה עם שינוי העיצוב הראשון—חוסכים על שינויים מתמידים.

theme.json—הלב של ערכת נושא FSE

core/template-part מגדיר אסימוני עיצוב: פלטת צבעים, גופנים, גדלים, מרווחים. כל הערכים הופכים למאפייני CSS מותאמים אישית כמו <!-- wp:template-part {"slug":"header","theme":"my-fse-theme","tagName":"header"} /--> <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} --> <main class="wp-block-group"> <!-- wp:post-content /--> </main> <!-- /wp:group --> <!-- wp:template-part {"slug":"footer","theme":"my-fse-theme","tagName":"footer"} /--> . דוגמת הגדרה:

{
  "$schema": "https://schemas.wp.org/wp/6.5/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#1a1a2e",
          "name": "Primary"
        },
        {
          "slug": "secondary",
          "color": "#e94560",
          "name": "Secondary"
        },
        {
          "slug": "neutral",
          "color": "#f5f5f5",
          "name": "Neutral"
        }
      ],
      "custom": true,
      "customDuotone": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "inter",
          "name": "Inter",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontWeight": "400 700",
              "fontStyle": "normal",
              "src": ["file:./assets/fonts/Inter-Variable.woff2"]
            }
          ]
        }
      ],
      "fontSizes": [
        {
          "slug": "sm",
          "size": "0.875rem",
          "name": "Small"
        },
        {
          "slug": "md",
          "size": "1rem",
          "name": "Base"
        },
        {
          "slug": "lg",
          "size": "1.25rem",
          "name": "Large"
        },
        {
          "slug": "xl",
          "size": "1.5rem",
          "name": "XL"
        },
        {
          "slug": "2xl",
          "size": "2rem",
          "name": "2XL"
        },
        {
          "slug": "3xl",
          "size": "3rem",
          "name": "3XL"
        }
      ],
      "fluid": true
    },
    "spacing": {
      "spacingSizes": [
        {
          "slug": "sm",
          "size": "1rem",
          "name": "Small"
        },
        {
          "slug": "md",
          "size": "2rem",
          "name": "Medium"
        },
        {
          "slug": "lg",
          "size": "4rem",
          "name": "Large"
        },
        {
          "slug": "xl",
          "size": "8rem",
          "name": "XL"
        }
      ],
      "customSpacingSize": true
    },
    "layout": {
      "contentSize": "768px",
      "wideSize": "1280px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--neutral)",
      "text": "var(--wp--preset--color--primary)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--inter)",
      "fontSize": "var(--wp--preset--font-size--md)",
      "lineHeight": "1.6"
    },
    "elements": {
      "h1": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--3xl)",
          "fontWeight": "700"
        }
      },
      "h2": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--2xl)",
          "fontWeight": "600"
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--secondary)"
        },
        ":hover": {
          "color": {
            "text": "var(--wp--preset--color--primary)"
          }
        }
      }
    }
  }
}

איך ליצור ערכת נושא FSE: שלב אחר שלב

1. הגדרת סביבה — התקנת WordPress 6.0+ וערכת נושא התחלתית (למשל, theme.json).
2. יצירת תיקיית ערכת נושא עם theme.json, --wp--preset--color--primary, ו-{ "$schema": "https://schemas.wp.org/wp/6.5/theme.json", "version": 3, "settings": { "color": { "palette": [ { "slug": "primary", "color": "#1a1a2e", "name": "Primary" }, { "slug": "secondary", "color": "#e94560", "name": "Secondary" }, { "slug": "neutral", "color": "#f5f5f5", "name": "Neutral" } ], "custom": true, "customDuotone": false }, "typography": { "fontFamilies": [ { "fontFamily": "Inter, sans-serif", "slug": "inter", "name": "Inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "400 700", "fontStyle": "normal", "src": ["file:./assets/fonts/Inter-Variable.woff2"] } ] } ], "fontSizes": [ { "slug": "sm", "size": "0.875rem", "name": "Small" }, { "slug": "md", "size": "1rem", "name": "Base" }, { "slug": "lg", "size": "1.25rem", "name": "Large" }, { "slug": "xl", "size": "1.5rem", "name": "XL" }, { "slug": "2xl", "size": "2rem", "name": "2XL" }, { "slug": "3xl", "size": "3rem", "name": "3XL" } ], "fluid": true }, "spacing": { "spacingSizes": [ { "slug": "sm", "size": "1rem", "name": "Small" }, { "slug": "md", "size": "2rem", "name": "Medium" }, { "slug": "lg", "size": "4rem", "name": "Large" }, { "slug": "xl", "size": "8rem", "name": "XL" } ], "customSpacingSize": true }, "layout": { "contentSize": "768px", "wideSize": "1280px" } }, "styles": { "color": { "background": "var(--wp--preset--color--neutral)", "text": "var(--wp--preset--color--primary)" }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontSize": "var(--wp--preset--font-size--md)", "lineHeight": "1.6" }, "elements": { "h1": { "typography": { "fontSize": "var(--wp--preset--font-size--3xl)", "fontWeight": "700" } }, "h2": { "typography": { "fontSize": "var(--wp--preset--font-size--2xl)", "fontWeight": "600" } }, "link": { "color": { "text": "var(--wp--preset--color--secondary)" }, ":hover": { "color": { "text": "var(--wp--preset--color--primary)" } } } } } } .
3. הגדרת מערכת עיצוב ב-emptytheme: צבעים, גופנים, מרווחים, גדלי תוכן.
4. יצירת תבניות HTML בתיקיית style.css עבור כל סוג פוסט (index, single, page, archive, 404).
5. הוספת חלקים (כותרת, כותרת תחתונה) לתיקיית functions.php ושילובם דרך בלוק theme.json.
6. רישום תבניות בלוקים מותאמות אישית (hero, gallery, testimonials) דרך PHP.
7. הגבלת העורך דרך theme.json ו-templates/ כדי להגן על העיצוב.
8. בדיקת Core Web Vitals: LCP <2.5s, CLS <0.1, INP <200ms.
9. אופטימיזציה של TTFB דרך מטמון, CDN ודחיסה בצד השרת.

הגדרת הגבלות עורך

FSE נותן לעורך הרבה חופש, אבל לפעמים זה יכול לשבור את העיצוב. לכן, אנו מגבילים הגדרות דרך parts/:

"settings": {
  "color": {
    "custom": false,
    "customGradient": false
  },
  "typography": {
    "customFontSize": false,
    "dropCap": false
  }
}

ודרך PHP—מאפשרים רק את הבלוקים הנחוצים:

add_filter('allowed_block_types_all', function (array|bool $allowed, WP_Block_Editor_Context $context): array {
    return [
        'core/paragraph',
        'core/heading',
        'core/image',
        'core/list',
        'core/quote',
        'core/table',
        'core/buttons',
        'core/button',
        'core/group',
        'core/columns',
        'core/column',
        'core/spacer',
        'my-plugin/project-card',
        'my-plugin/cta-section',
    ];
}, 10, 2);
"}

תהליך פיתוח ערכת נושא FSE

מה כלול בעבודה (תוצרים)

כאשר מזמינים ערכת נושא FSE סוהר, מקבלים:

• מערכת עיצוב ב-theme.json (צבעים, טיפוגרפיה, מרווחים)
• תבניות HTML לדפים, פוסטים, ארכיונים, 404 וסוגי פוסטים מותאמים אישית
• תבניות בלוקים מותאמות אישית (hero, gallery, testimonials וכו')
• הגבלות עורך להגנה על שלמות העיצוב
• תיעוד עורך האתר וגישה לאסימוני עיצוב
• הדרכה מקוונת לצוות (שעה)
• 30 ימי תמיכה לאחר השקה

התוצרים כוללים תיעוד מקיף, פרטי גישה, הדרכה מקוונת ותמיכה לאחר השקה.

הכל בלוחות זמנים של 3 עד 15 ימים בהתאם למורכבות. LCP מובטח להישאר מתחת ל-2.5 שניות. המחירים מתחילים ב-$1,500 לערכות נושא בסיסיות, עם פתרונות מותאמים אישית הנעים בין $3,000 ל-$8,000.

התמחור מותאם אישית—תלוי במספר התבניות, מורכבות העיצוב וצרכי ההעברה. קבלו ייעוץ והערכה מדויקת: צרו קשר. אנו מבטיחים שערכת נושא FSE תעמוד בסטנדרטים מודרניים של ביצועים ואבטחה. הזמינו ערכת נושא FSE כדי לקבל שליטה מלאה על האתר שלכם מבלי להיות תלויים במפתח.