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

כדי לטעון סקריפט רק בעמוד ניהול ספציפי בוורדפרס, השתמשו בהוק admin_enqueue_scripts ובדקו את הפרמטר $hook_suffix לפני הקריאה ל-wp_enqueue_script(). בלי הבדיקה הזו, הקבצים שלכם ייטענו בכל מסך ב-wp-admin.

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

טעינת סקריפטים רק במסך עריכת פוסט

הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם או לתוסף. הוא טוען קובץ CSS וסקריפט רק בעת הוספה או עריכה של פוסט.

add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
    // Only load on the post edit screens.
    if ( 'post.php' !== $hook_suffix && 'post-new.php' !== $hook_suffix ) {
        return;
    }

    wp_enqueue_style(
        'savvy-admin-custom',
        get_stylesheet_directory_uri() . '/css/admin-custom.css',
        array(),
        '1.0.0'
    );

    wp_enqueue_script(
        'savvy-admin-custom',
        get_stylesheet_directory_uri() . '/js/admin-custom.js',
        array( 'jquery' ),
        '1.0.0',
        true
    );
} );

הקוד משתמש ב-get_stylesheet_directory_uri(), שמחזירה את ה-URI של תבנית הבת כשאחת כזו פעילה. בתוסף, השתמשו במקום זאת ב-plugins_url( 'js/admin-custom.js', __FILE__ ).

איך עובד הפרמטר $hook_suffix

וורדפרס מפעילה את admin_enqueue_scripts ב-header של ממשק הניהול ומעבירה ארגומנט אחד, $hook_suffix, שמזהה את עמוד הניהול הנוכחי. סיימו את הפונקציה מוקדם כשהערך אינו תואם (כלומר, כשזה לא העמוד שלכם), ושום דבר לא ייטען.

במסכי הליבה הערך הוא שם קובץ ה-PHP:

• index.php ללוח הבקרה
• edit.php לרשימות הפוסטים, post.php ו-post-new.php לעורך
• upload.php לספריית המדיה
• options-general.php להגדרות > כללי

עמודים שנוספו עם add_menu_page() או add_submenu_page() מקבלים ערך שנבנה מתפריט האב ומה-slug של העמוד, למשל toplevel_page_my-plugin, settings_page_my-plugin או tools_page_my-plugin.

איך למצוא את ה-Hook Suffix של כל עמוד ניהול

אין צורך לנחש את הערך. השתמשו באחת השיטות הבאות.

1. בדקו את ה-class של ה-body. וורדפרס מוסיפה עותק מנוקה (sanitized) של ה-hook suffix ל-class של תגית ה-<body> בממשק הניהול. בדקו את העמוד וחפשו classes כמו post-php או settings_page_my-plugin.
2. כתבו אותו ללוג. הוסיפו זמנית את error_log( $hook_suffix ); בתוך ה-callback ובדקו את הקובץ debug.log.
3. שמרו את הערך המוחזר. הפונקציות add_*_page() מחזירות את ה-hook suffix של העמוד שהן רושמות.

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

add_action( 'admin_menu', function () {
    $hook_suffix = add_options_page(
        'Savvy Settings',
        'Savvy Settings',
        'manage_options',
        'savvy-settings',
        'savvy_render_settings_page'
    );

    add_action( 'admin_enqueue_scripts', function ( $current ) use ( $hook_suffix ) {
        if ( $current !== $hook_suffix ) {
            return;
        }
        wp_enqueue_script( 'savvy-settings', plugins_url( 'js/settings.js', __FILE__ ), array(), '1.0.0', true );
    } );
} );

הגבלה לסוג תוכן אחד

post.php תואם לעורך של כל סוגי התוכן, כולל עמודים ומוצרים. הוסיפו בדיקה על המסך הנוכחי (ועל סוג התוכן שלו) כדי לצמצם זאת:

add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
    $screen = get_current_screen();

    if ( ! in_array( $hook_suffix, array( 'post.php', 'post-new.php' ), true )
        || ! $screen || 'product' !== $screen->post_type ) {
        return;
    }

    // Enqueue your product-only files here.
} );

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

שאלות נפוצות

לפניכם כמה שאלות נפוצות על טעינת קבצים בעמודי ניהול ספציפיים: