איך לבנות ערכת נושא בלוקים מותאמת אישית לוורדפרס עם theme.json: מדריך שלב אחר שלב

סיכום

בניית ערכת נושא בלוקים מותאמת אישית לוורדפרס עם Full Site Editing (FSE) עשויה להיות מרתיעה, אך theme.json מפשט את התהליך. מדריך זה מנחה אותך בהקמת ערכת נושא בלוקים מינימלית, הגדרת סגנונות גלובליים כמו צבעים וטיפוגרפיה ב-theme.json, ויצירת תבניות מותאמות אישית באמצעות סימון בלוקים. תלמד להוסיף תבניות בלוקים ווריאציות סגנון, המאפשרות אתר הניתן לעיצוב מלא ללא קבצי תבנית PHP. נסקור טעויות נפוצות, כגון ערבוב תכונות של ערכת נושא קלאסית וערכת נושא בלוקים, ונראה כיצד לבדוק את ערכת הנושא שלך. בסיום, תהיה לך ערכת נושא בלוקים מודרנית וניתנת להרחבה המוכנה לייצור. גישה זו מנצלת את היכולות העדכניות ביותר של וורדפרס לפיתוח מהיר ויזואלי יותר.

מבוא

Full Site Editing (FSE) חולל מהפכה בפיתוח ערכות נושא לוורדפרס, ומאפשר לך לעצב כל חלק באתר שלך באופן חזותי. אך מפתחים רבים עדיין מסתמכים על ערכות נושא קלאסיות או מתקשים ליצור ערכות נושא בלוקים מאפס. המפתח לפתיחת הכוח של FSE הוא theme.json – קובץ תצורה השולט בסגנונות גלובליים, הגדרות ותבניות. מאמר זה מספק מדריך מעשי שלב אחר שלב לבניית ערכת נושא בלוקים מותאמת אישית באמצעות theme.json. תלמד להגדיר את מבנה התיקיות, להגדיר פלטות צבעים והגדרות טיפוגרפיה, ליצור תבניות מותאמות אישית עם סימון בלוקים, ולהוסיף וריאציות סגנון. בסיום, תהיה לך ערכת נושא בלוקים מוכנה לייצור שקל לתחזק ולהרחיב. בואו נצלול ונבהיר את פיתוח FSE.

למבט רחב יותר על האופן שבו FSE מעצב את עתיד העיצוב בוורדפרס, עיין בGutenberg FSE: עתיד עיצוב וורדפרס בשנת 2026.

1. הקמת ערכת נושא בלוקים מינימלית

ערכת נושא בלוקים דורשת מינימום של שני קבצים: style.css ו-index.html. בואו ניצור אותם.

מבנה תיקיות

צור תיקייה בשם my-block-theme בתוך wp-content/themes/. בתוכה, מקם:

• style.css
• index.html
• (אופציונלי) theme.json

style.css

למרות שערכות נושא בלוקים מסתמכות פחות על CSS, style.css עדיין נדרש לזיהוי ערכת הנושא:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom block theme built with theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

השורה Requires at least: 5.9 מבטיחה שערכת הנושא עובדת עם תכונת FSE.

index.html

זוהי תבנית ברירת המחדל שלך. היא חייבת להתחיל בסימון בלוקים. צור פריסה פשוטה:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

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

אזהרה: ערכות נושא בלוקים לא חייבות להכיל קבצי תבנית PHP כמו header.php או footer.php. ערבוב תבניות קלאסיות ותבניות בלוקים ישבור את FSE.

הפעלת ערכת הנושא

העלה את התיקייה באמצעות FTP או התקנת zip, והפעל אותה. אתה אמור לראות אתר ריק עם המבנה המינימלי שלך. בשלב הבא, נעצב אותו עם theme.json.

2. שליטה ב-theme.json: סגנונות והגדרות גלובליים

theme.json מרכז את כל בקרות העיצוב. הוא ממוקם בשורש תיקיית ערכת הנושא שלך. בואו ניצור אחד עם הגדרות צבע וטיפוגרפיה.

מבנה בסיסי

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

זה מגדיר פלטת צבעים, משפחות גופנים, גדלי גופנים וסגנונות גלובליים. הפונקציות var() מתייחסות למאפייני CSS מותאמים אישית שנוצרו אוטומטית על ידי וורדפרס. משתמשים יכולים לשנות אותם בעורך האתר.

טיפ: השתמש במאפייני CSS מותאמים אישית לעקביות. הימנע מקידוד ערכים בקבצי CSS; תן ל-theme.json להיות מקור האמת היחיד.

3. יצירת תבניות מותאמות אישית

תבניות בלוקים הן קבצי HTML עם סימון בלוקים. הן עוקבות אחר היררכיה דומה לקבצי תבנית קלאסיים. לדוגמה, צור single.html לפוסטים בודדים:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

באופן דומה, צור page.html, archive.html וכו'. אתה יכול גם ליצור תבניות מותאמות אישית על ידי הוספת בלוק wp:post-template בתוך לולאת שאילתה.

להתאמה אישית מתקדמת, שקול לבנות בלוקים מותאמים אישית. למד כיצד ב-מעבר לבלוקים בסיסיים: יצירת בלוקי Gutenberg מותאמים אישית לפונקציונליות וורדפרס משופרת.

חלקי תבנית

צור תיקיית parts/ לחלקים לשימוש חוזר. לדוגמה, header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

ו-footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. הוספת תבניות בלוקים ווריאציות סגנון

תבניות בלוקים הן פריסות מעוצבות מראש. הגדר אותן בתיקיית patterns/. צור patterns/hero.php:

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">Welcome</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">This is a custom hero section</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

וריאציות סגנון מאפשרות למשתמשים להחליף מראה שלם. צור styles/default.json ו-styles/dark.json שמחליפים הגדרות ערכת נושא.

5. אזהרות ושיטות עבודה מומלצות

• ביצועים: theme.json נשמר במטמון. נקה את המטמון לאחר שינויים. השתמש ב-hook wp_register_theme_json במידת הצורך.
• תאימות לאחור: ערכות נושא בלוקים עובדות רק מגרסת וורדפרס 5.9. אם האתר שלך חייב לתמוך בגרסאות ישנות יותר, שקול גישה היברידית אך הימנע מערבוב קבצי תבנית.
• ערכות נושא ילד: ערכות נושא בלוקים יכולות לשמש כערכות נושא אב לערכות נושא ילד קלאסיות, אך לא להפך. השתמש ב-template ב-style.css כדי להצהיר על ערכת נושא בלוקים אב.
• בין-לאומיות: השתמש בפונקציה __() בתוך חלקי תבנית PHP למחרוזות הניתנות לתרגום. בסימון בלוקים, ציין תחום טקסט באמצעות התכונה textDomain.

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

סיכום

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

אם ברצונך להאיץ עוד יותר את יצירת ערכת הנושא, שקול להשתמש בכלי שיוצר אתר שלם מתיאור. לדוגמה, אתה יכול לתאר את הפריסה הרצויה ולקבל ערכת נושא בלוקים מוכנה לשימוש תוך דקות.

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