דילוג לתוכן
תבניות

עיצובי תבנית הבת בוורדפרס לא נטענים

קובץ ה-style.css של תבנית הבת שלך לא נטען כי וורדפרס לא עושה לו enqueue בשבילך. גיליון הסגנונות של תבנית הבת חייב להירשם ידנית ב-

פורסם

קובץ ה-style.css של תבנית הבת שלך לא נטען כי וורדפרס לא עושה לו enqueue בשבילך. את גיליון הסגנונות של תבנית הבת צריך לרשום ידנית בקובץ ה-functions.php של תבנית הבת, וכמעט תמיד יש ב-enqueue הזה אחת משתי תקלות: או שהוא פשוט לא קיים, או שהוא נטען בלי להצהיר על גיליון הסגנונות של תבנית האב כתלות, וכך הכללים שלך נופלים במקום הלא נכון ב-cascade ונדרסים. תקן את ה-enqueue והעיצובים חוזרים. הטריק הישן של @import שכנראה העתקת ממדריך משנת 2013 הוא הפתרון הלא נכון.

למה זה קורה

תבנית בת קלאסית מורכבת משני קבצים חובה: קובץ style.css עם בלוק כותרת שמציין את תבנית האב, וקובץ functions.php. השורה Template: בכותרת אומרת לוורדפרס מאיזו תבנית אב לרשת את קובצי התבנית. זה הדבר היחיד שוורדפרס עושה אוטומטית. הוא קורא את הכותרת, מחבר את מנגנון הנפילה לתבניות (fallback), ועוצר. הוא לעולם לא עושה enqueue לקובץ ה-style.css של תבנית הבת בצד הלקוח.

תבנית האב, בינתיים, עושה enqueue לגיליון הסגנונות שלה מתוך ה-functions.php שלה, כשהוא מחובר ל-wp_enqueue_scripts. ה-functions.php של תבנית הבת שלך רץ קודם, אחר כך זה של תבנית האב, ואז כל מה שרשום על ה-hook הזה מופעל. אם תבנית הבת שלך אף פעם לא קוראת ל-wp_enqueue_style עבור הקובץ שלה, הדפדפן אף פעם לא מבקש אותו. הדף נראה כמו תבנית האב הגולמית כי זה בדיוק מה שהוא.

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

עוד דבר שאנשים טועים בו: get_template_directory_uri() מצביע על תיקיית תבנית האב, ו-get_stylesheet_directory_uri() מצביע על תיקיית התבנית הפעילה (תבנית הבת). תחליף ביניהם ותעשה enqueue ל-style.css של תבנית האב פעם שנייה ולעולם לא תיגע בזה של תבנית הבת.

הפתרון, לפי הסדר

קודם כול, ודא מה באמת נטען. פתח את הדף התקול, הצג את קוד המקור, וחפש את שם תיקיית תבנית הבת שלך. וורדפרס מציג סגנונות שעברו enqueue כ-<link id="handle-css" href="..."> — ה-id הוא ה-handle שלך פלוס -css. אם ה-style.css של תבנית הבת שלך בכלל לא נמצא ב-<head>, ה-enqueue לא רץ. אם הוא נמצא שם אבל הסגנונות לא חלים, זו בעיה של תלות/סדר. הבדיקה האחת הזו אומרת לך איזו משתי התקלות יש לך.

שנית, מצא את ה-handle האמיתי של תבנית האב. רוב התבניות המודרניות (Astra, GeneratePress, תבניות ה-Twenty-*) כבר עושות enqueue לגיליון הסגנונות שלהן תחת handle מסוים — astra-theme-css, generate-style-css, twenty-twenty-four-style, וכן הלאה. אתה צריך את המחרוזת המדויקת הזו. הרץ grep על תבנית האב, או קרא אותה מתוך ה-<link id="...-css"> בקוד המקור (הסר את ה--css שבסוף).

שלישית, כתוב את ה-enqueue. במקרה הנפוץ שבו תבנית האב כבר טוענת את גיליון הסגנונות שלה, אתה לא עושה enqueue מחדש לתבנית האב. אתה עושה enqueue רק לתבנית הבת, ומציין את ה-handle של תבנית האב כתלות כדי שלך ייטען אחריו:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );

function child_enqueue_styles() {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'astra-theme-css' ), // <-- the parent's REAL handle
        wp_get_theme()->get( 'Version' )
    );
}

אם תבנית האב לא עושה enqueue לגיליון הסגנונות שלה (חלק מהתבניות הישנות או המינימליסטיות מסתמכות על @import), אז עשה enqueue לשניהם, וגרום לתבנית הבת להיות תלויה בתבנית האב:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );

function child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

הארגומנט wp_get_theme()->get('Version') הוא ה-cache-buster שלך. העלה את השורה Version: בכותרת ה-style.css של תבנית הבת והדפדפנים ימשכו מחדש. דלג עליו ותערוך CSS ותישבע שכלום לא משתנה כשזה פשוט מ-cache.

אם ל-functions.php יש שגיאת תחביר, כל הקובץ מת בשקט ואף אחד מה-enqueue-ים שלך לא רץ — וזה נראה בדיוק כמו “העיצובים לא נטענים”. הפעל את WP_DEBUG, או הדבק את ה-debug.log שלך במפענח יומן השגיאות של וורדפרס כדי לאתר את השגיאה הקטלנית מהר.

מה לא לעשות

אל תשתמש ב-@import. העצה מתקופת ה-Codex הייתה לשים @import url("../parenttheme/style.css"); בראש ה-style.css של תבנית הבת. זה עובד, אבל זה איטי — הדפדפן לא יכול להתחיל להוריד את ה-CSS של תבנית האב עד שהוא ניתח את ה-CSS של תבנית הבת, כך ששתי הבקשות רצות בטור במקום במקביל. המדריך הרשמי של וורדפרס ממליץ נגד זה כבר שנים. אם המדריך שלך אמר לך לעשות את זה, המדריך הזה הוא הסיבה שהעיצובים שלך מקרטעים.

אל תקבע ידנית (hardcode) את ה-handle 'parent-style' ותעשה enqueue לקובץ תבנית האב בעיוורון. קטע הקוד המפורסם של Codex עושה בדיוק את זה, וזה שגוי לכל תבנית שכבר רושמת את גיליון הסגנונות שלה תחת handle אחר. אתה בסוף טוען את ה-CSS של תבנית האב פעמיים והתלות שלך מצביעה על handle שאולי לא קיים.

אל תקרא ל-wp_enqueue_style ברמה העליונה של functions.php. הוא חייב לרוץ בתוך פונקציה שמחוברת ל-wp_enqueue_scripts. אם קוראים לו מוקדם מדי, הוא לא עושה כלום.

אל תעתיק את כל ה-functions.php של תבנית האב לתוך תבנית הבת. שניהם נטענים; זה של תבנית הבת רץ קודם. העתקה שלו גורמת להצהרות כפולות של פונקציות ולשגיאה קטלנית.

הסתייגות אחת: כל זה מדבר על תבניות קלאסיות (מבוססות תבנית PHP). אם תבנית האב שלך היא תבנית בלוקים (block theme), העיצוב זורם ברובו דרך theme.json ועורך האתר (Site Editor), והעקיפות של style.css מתנהגות אחרת — הייתי סומך על זה פחות ובודק את זה ישירות במקום להניח שה-enqueue הזה הוא הפתרון.

עדיין תקוע?

ודא שהשורה Template: בכותרת ה-style.css של תבנית הבת תואמת בדיוק את שם התיקייה של תבנית האב, עם הבחנה בין אותיות גדולות לקטנות — לא את שם התצוגה של תבנית האב. אחר כך בדוק שוב בקוד המקור: ה-handle קיים, נטען אחרי תבנית האב, ומחרוזת השאילתה של הגרסה עודכנה. אם ה-<link> נמצא שם, נטען אחרון, וה-CSS עדיין לא חל, זו כבר לא בעיה של enqueue — זו בעיה של specificity, והפתרון עובר אל תוך הכללים עצמם.