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

סיכום

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

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

הבנת טווח theme.json

לפני שצוללים, חיוני להבין ש-theme.json הוא מושג של ערכת עיצוב בלוקים. הוא מגדיר סגנונות גלובליים, הגדרות (כמו פלטות צבעים וגדלי גופן), וסגנונות ספציפיים לבלוקים עבור עורך הבלוקים והחזית. עם זאת, טווח ההגעה שלו מוגבל: הוא שולט רק בבלוקים שמצהירים במפורש על תמיכה במאפייני theme.json דרך register_block_type או add_theme_support הישן. סוגי פוסטים מותאמים אישית שנוצרו עם register_post_type אינם יורשים אוטומטית סגנונות אלה אלא אם הם בנויים עם בלוקים או מעוצבים במפורש.

שלב 1: רישום סוגי פוסטים מותאמים אישית עם תמיכה בעורך הבלוקים

הצעד הראשון הוא להבטיח שסוג הפוסט המותאם אישית שלך משתמש בעורך הבלוקים. בעת קריאה ל-register_post_type, הגדר 'show_in_rest' => true וכלול 'editor' במערך supports. זה מאפשר את עורך הבלוקים עבור סוג פוסט זה, ומאפשר למחברים להשתמש בסגנונות ברמת הבלוק מ-theme.json. לדוגמה, הנה סוג פוסט 'חבר צוות':

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'Team Members',
            'singular_name' => 'Team Member',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

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

שלב 2: הוספת סגנונות בלוקים מותאמים אישית דרך theme.json

לפעמים אתה רוצה להחיל סגנונות ספציפיים על כל המופעים של תוכן סוג הפוסט המותאם אישית שלך—לדוגמה, לתת לכל הפוסט צבע רקע או ריפוד מיוחד. אתה יכול למקד את core/post-content או לעטוף את התוכן שלך בבלוק קבוצה מותאם אישית ולעצב אותו דרך theme.json. הוסף את הקוד הבא לקובץ theme.json שלך תחת אובייקט styles:

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

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

שלב 3: שימוש במאפיינים מותאמים אישית של theme.json לתפוקת תוספים

תוספים לעתים קרובות מוציאים תוכן דרך קודים קצרים, ווידג'טים או בלוקים מותאמים אישית. כדי לעצב אותם באופן עקבי, נצל מאפייני CSS מותאמים אישית ש-theme.json מייצר. לדוגמה, אם הערכה שלך מגדירה צבע ראשי בתור --wp--preset--color--primary, תוכל להשתמש בו ב-CSS של התוסף שלך:

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

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

שלב 4: טיפול בבלוקים דינמיים

עבור בלוקים מותאמים אישית שמוציאים תוכן דינמי (למשל, מחוון המלצות), עליך לרשום את הבלוק עם תמיכה בעורך הבלוקים ולקשר אותו במפורש ל-theme.json. ב-PHP, השתמש ב-register_block_type עם $args שכוללים 'render_callback' וודא שקובץ block.json של הבלוק שלך מגדיר 'supports' => array( 'color' => true, 'typography' => true ). לאחר מכן, בפונקציית העיבוד שלך, תוכל לגשת לסגנונות הגלובליים דרך wp_get_global_styles() ולהחיל אותם. לדוגמה:

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

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

אזהרות

בעוד שהרחבת theme.json היא עוצמתית, היזהר מהמלכודות הבאות:

1. ביצועים: הוספת סגנונות מותאמים אישית רבים מדי ב-theme.json עלולה לנפח את הקובץ ולהגדיל את זמן ניתוח ה-CSS. היצמד להגדרות גלובליות והשתמש בסגנונות ספציפיים לבלוקים במשורה.
2. התנגשויות תוספים: תוספים מסוימים מאפסים או עוקפים הגדרות theme.json. תמיד בדוק עם מינימום תוספים ושקול להתחבר ל-after_setup_theme כדי להחיל מחדש את ההתאמות האישיות שלך.
3. ערכות עיצוב קלאסיות: אם הערכה שלך אינה משתמשת בעורך הבלוקים (כלומר, זוהי ערכת עיצוב קלאסית), ל-theme.json יש השפעה מוגבלת. שקול לעבור לערכת עיצוב בלוקים או להשתמש בפונקציה wp_enqueue_global_styles כדי לטעון את הסגנונות.
4. מטמון דפדפן: שינויים ב-theme.json עשויים שלא להופיע מיד עקב מטמון. נקה מטמון דפדפן והשתמש בגירסה עבור גיליון הסגנונות שלך.

סיכום

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