मैं कुछ / wp-admin पृष्ठों पर शैलियाँ / स्क्रिप्ट कैसे लिखूं?

Question

मेरे पास दो सरल कार्य हैं जो सामान का उपयोग करके लोड करते हैं wp_enqueue_style()और wp_enqueue_script(), कुछ इस प्रकार हैं:

function admin_custom_css()
{ wp_enqueue_style( 'stylesheet_name', 'stylesheet.css') }; 

function admin_custom_js 
{ wp_enqueue_script( 'javascript_file', 'script.js') };

... और कुछ व्यवस्थापक पृष्ठ, के साथ बनाए गए add_menu_page()औरadd_submenu_page()

function my_menu() {
   add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
   add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo'); 
}
add_action('admin_menu', 'my_menu'); 

मैं केवल इन पृष्ठों पर अपने दो कार्यों को कैसे लोड करूं?

अभी मैं उपयोग कर रहा हूं:

add_action('admin_init', 'admin_custom_css' ); 
add_action('admin_init', 'admin_custom_js' );  

लेकिन यह मेरी फाइलों को हर एडमिन पेज पर लोड करता है, जो बिल्कुल भी अच्छा नहीं है।

क्या मैं इसे एक सरल रेखा के माध्यम से कर सकता हूं functions.phpया उन्हें अपने पृष्ठों के भीतर अलग-अलग करना होगा (मैं पहले विकल्प को दृढ़ता से पसंद करता हूं, क्योंकि मुझे बहुत सारे व्यवस्थापक-पृष्ठ बनाने-कार्यों को संपादित करना होगा)।

धन्यवाद!

Comments

आधिकारिक दस्तावेज उदाहरण देखें। developer.wordpress.org/plugins/javascript/enqueuing/#enqueue codex.wordpress.org/Plugin_API/Action_Reference/…

— paul

Answer 1

add_menu_pageऔर add_submenu_pageदोनों पृष्ठ के "हुक प्रत्यय" को वापस करते हैं, जिसका उपयोग कुछ निश्चित हुक के साथ पृष्ठ को पहचानने के लिए किया जा सकता है। इस प्रकार, आप चर हुक के साथ संयोजन में admin_print_styles-{$hook_suffix}और admin_print_scripts-{$hook_suffix}विशेष रूप से इन पृष्ठों को लक्षित करने के लिए उस प्रत्यय का उपयोग कर सकते हैं ।

function my_menu() {
   $menu = add_menu_page( 'Page 1', 'bar', 'something', 'else', 'foo' );
   $submenu = add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo' );

   add_action( 'admin_print_styles-' . $menu, 'admin_custom_css' );
   add_action( 'admin_print_styles-' . $submenu, 'admin_custom_css' );

   add_action( 'admin_print_scripts-' . $menu, 'admin_custom_js' );
   add_action( 'admin_print_scripts-' . $submenu, 'admin_custom_js' );
}

मुझे यह सब जोड़ने के लिए एक साफ तरीका लगता है क्योंकि यह सभी एक फ़ंक्शन के भीतर है। यदि आप इस कार्यक्षमता को हटाने का निर्णय लेते हैं, तो बस एक फ़ंक्शन पर कॉल को हटा दें।

Comments

यह उत्तर तकनीकी रूप से सही नहीं है। के लिए कोडेक्सadmin_print_scripts() राज्यों " admin_print_scripts शैलियों या स्क्रिप्ट enqueue लिए नहीं किया जाना चाहिए ।" @TomAuger द्वारा उत्तर वास्तव में सही है, हालांकि इष्टतम नहीं है। यह फायदेमंद होगा अगर WP टीम ने एक admin_enqueue_scripts-(hookname)हुक जोड़ा, लेकिन ...

— डेविड गार्ड

इस उत्तर को खोजने में मुझे 3 दिन लगे जो वास्तव में मेरे लिए मददगार थे :) धन्यवाद :)

— असफंदर खान

— @ डेविडगार्ड

@hkchakladar मेरी टिप्पणी लगभग चार साल पुरानी है ... अगर यह अब प्रासंगिक नहीं है, तो हर तरह से एक और तारीख तक टिप्पणी जोड़ें, जिसमें बताया गया है कि क्यों।

— डेविड गार्ड

Answer 2

@Tollmanz उत्तर के साथ समस्या यह है कि चूंकि आप -प्रिंट-स्टाइल और प्रिंट-स्क्रिप्ट हुक से दूर जा रहे हैं, इसलिए आपको अपनी स्क्रिप्ट मैन्युअल रूप से लोड करने के लिए HTML उत्पन्न करना होगा। यह इष्टतम नहीं है, क्योंकि आपको अच्छी निर्भरता और संस्करण नहीं मिलते हैं जो कि wp_enqueue_script()और साथ आता है wp_enqueue_style()। यदि आप उनके लिए एक बेहतर जगह चाहते हैं तो यह आपको पाद लेख में चीजें डालने नहीं देता है।

तो, ओपी के सवाल पर वापस जाएं: यह सुनिश्चित करने का सबसे अच्छा तरीका क्या है कि मैं केवल विशिष्ट व्यवस्थापक पृष्ठों पर जेएस / सीएसएस को संलग्न कर सकता हूं?

1. "लोड - {$ my_admin_page}" कार्रवाई को केवल तब ही करें जब आपके विशिष्ट प्लगइन का पेज लोड हो, और फिर

2. अपने wp_enqueue_scriptकॉल को ठीक से जोड़ने के लिए "admin_enqueue_scripts" क्रिया को हुक करें ।

दर्द का एक सा लगता है, लेकिन यह वास्तव में लागू करने के लिए बहुत आसान है। ऊपर से:

    add_action( 'admin_menu', 'add_my_admin_menus' ); // hook so we can add menus to our admin left-hand menu

    /**
     * Create the administration menus in the left-hand nav and load the JavaScript conditionally only on that page
     */
    function add_my_admin_menus(){
        $my_page = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' );

        // Load the JS conditionally
        add_action( 'load-' . $my_page, 'load_admin_js' );
    }

    // This function is only called when our plugin's page loads!
    function load_admin_js(){
        // Unfortunately we can't just enqueue our scripts here - it's too early. So register against the proper action hook to do it
        add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
    }

    function enqueue_admin_js(){
        // Isn't it nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}

Comments

+1 - यह IMO जाने का तरीका है। अलग-अलग नामांकित (सोशन-$ हुक) हुक 1 या 2 कार्यों के लिए अच्छे हैं, लेकिन यदि आप एक प्लगइन संलेखन कर रहे हैं, तो आपको अपने विकल्प पृष्ठ (ओं) पर बहुत सारे अलग-अलग काम करने की आवश्यकता हो सकती है जो इस विधि को वास्तव में बनाती है। सुविधाजनक। मैं आमतौर पर load-$hookअपने option_page_actionsकार्य को जोड़ने वाले हुक में केवल 1 क्रिया जोड़ता हूं जिसमें मैं कई अन्य हुक / फिल्टर आदि जोड़ सकता हूं क्योंकि उन क्रियाओं को केवल पसंद के पृष्ठ पर बुलाया जाता है, उस बिंदु से परे हुक को नामांकित हुक का उपयोग करने की आवश्यकता नहीं है (जैसा आपने दिखाया है), जो बहुत अधिक कुशल और सहज है।

— इवान मैट्सन

नमस्ते, इस तरह से अभी भी समर्थित है? load_admin_js कभी भी कॉल नहीं कर रहा है

— IAmJulianAcosta

यकीन है कि यह अभी भी समर्थित है। एडमिन की लाइन 206.php। 2.6 के बाद से वहाँ गया, और जल्द ही (कभी भी) जल्द ही दूर जाने की संभावना नहीं है।

— टॉम ऑलर

मेरे उत्तर को देखते हुए, मेरा मानना ​​है कि स्पष्ट रूप से jquery-ui-core और jquery-ui-tabs को स्पष्ट रूप से लागू करना पूरी तरह से सतही है, क्योंकि वे स्क्रिप्ट पहले से पंजीकृत हैं। आपको बस उन्हें निर्भरता में कॉल करने की आवश्यकता है। मैं उसी हिसाब से अपना जवाब अपडेट करूंगा।

— टॉम ऑस्टर

वर्डप्रेस 4.9.6 के साथ पूरी तरह से काम करता है

— ethmz

Answer 3

यदि आप उपयोग करते हैं get_current_screen(), तो आप पता लगा सकते हैं कि आप किस पृष्ठ पर हैं। कोडेक्स लेख में एक उदाहरण है जो मैंने लिंक किया था जो दिखाता है कि कैसे उपयोग get_current_screen()करना है add_options_page(), यह विधि किसी भी व्यवस्थापक पृष्ठ के लिए काम करेगी।

Answer 4

आप उत्तर ले सकते हैं , और इस पर थोड़ा विस्तार कर सकते हैं, साथ ही सशर्त उपयोग की अनुमति दे सकते हैं ...@tollmanz

उदाहरण:

/* Add admin pages */   
function my_admin_pages(){
    $menu = array();
    $menu['main_page'] = add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
    $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo');
    foreach($menu as $key => $value){
        if($key == 'main_page'){
            /* Print styles on only the main page. */
            add_action('admin_print_styles-'.$value, 'print_styles');
        }
        /* Print scripts on all of our admin pages. */
        add_action('admin_print_scripts-'.$value, 'print_scripts');
    }
}
add_action('admin_menu', 'my_admin_pages');

Answer 5

जैसा कि @ mor7ifer ऊपर उल्लेख किया गया है, आप देशी वर्डप्रेस फ़ंक्शन get_current_screen () का उपयोग कर सकते हैं । यदि आप इस फ़ंक्शन के आउटपुट के माध्यम से लूप करते हैं, उदाहरण के लिए:

$current_screen = get_current_screen();
foreach($current_screen as $key => $value) {
    error_log(print_r($key,1));
}

... आपको आधार नामक एक कुंजी दिखाई देगी । मैं यह पता लगाने का उपयोग करता हूं कि मैं किस पेज पर हूं और enqueue, dequeue like so:

add_action('admin_enqueue_scripts', 'some_hook_function')* ):

public function some_hook_function(){

    // # only register and queue scripts & styles on POST edit screen of admin
    $current_page = get_current_screen()->base;
    if($current_page == 'post' || $current_page == 'page') {

        wp_enqueue_script('datetimepicker', plugins_url('assets/jquery-ui-timepicker-addon.min.js', __FILE__), array('jquery', 'jquery-ui-datepicker', 'jquery-ui-slider'), '1.9.1', true);

        wp_enqueue_style( 'jquery-ui-datepicker', plugins_url('assets/jquery-ui.min.css', __FILE__), array(), '1.11.2', 'all');


    } else { // # if not on post page, deregister and dequeue styles & scripts

        wp_dequeue_script('datetimepicker');
        wp_dequeue_style('jquery-ui-datepicker');

    }
}

Answer 6

मैं उसी चीज़ पर हैरान हो रहा था। एक आधुनिक संस्करण है जो उपयोग करता है admin_enqueue_scripts:

add_action('admin_menu', function () {
  $settingsPage = add_options_page('Settings', 'Mortgage Calculator', 'manage_options', 'mortgagecalculator', function () {
    echo "<div id='app'></div>";
  });
  /**
   * Include the ember admin scripts only on pages where it's needed.
   */
  add_action("admin_enqueue_scripts", function ($hook) use ($settingsPage){
    if($hook !== $settingsPage){
      return;
    }
    // Remove default jQuery since Ember provides its own.
    wp_dequeue_script('jquery');
    wp_enqueue_script('ember-vendor', plugins_url("admin/assets/vendor.js", __FILE__));
    wp_enqueue_script('ember-project', plugins_url("admin/assets/mortgage-plugin-ember-admin.js", __FILE__), ['ember-vendor']);
    wp_enqueue_script('ember-live-reload', "http://localhost:4200/ember-cli-live-reload.js");
  });
});

Answer 7

से प्रलेखन :

admin_print_scriptsमुख्य रूप से इनलाइन जावास्क्रिप्ट को इको किया जाता था। admin_print_scriptsव्यवस्थापक पृष्ठों पर शैलियों या लिपियों को समझने के लिए उपयोग नहीं किया जाना चाहिए। admin_enqueue_scriptsइसके बजाय उपयोग करें । "

उसी के साथ admin_print_styles।

Comments

इन को देखो developer.wordpress.org/reference/hooks/... , developer.wordpress.org/reference/hooks/...

— hkchakladar

Answer 8

add_action( 'admin_menu', 'add_my_admin_menus' ); 

function add_my_admin_menus() {
    $GLOBALS['my_page'] = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content');
    add_action( 'admin_enqueue_scripts', 'enqueue_admin_js');
}

function enqueue_admin_js($hook) {
    if($GLOBALS['my_page'] === $hook) {
        wp_enqueue_script( 'jquery-ui-core' );
        wp_enqueue_script( 'jquery-ui-tabs' );
        // Isn't it nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}

Answer 9

इसे बनाने के लिए, आपको पहले व्यवस्थापक पृष्ठ नाम ढूंढना होगा। के admin_enqueue_scriptsसाथ जोड़ें wp_die($hook)और अपने विशिष्ट प्लगइन पेज पर जाएं, आपको पेज नाम दिखाई देगा।

function my_plugin_scripts($hook) {
    wp_die($hook);
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );

settings_page_plugging_info

अब पृष्ठ का नाम कॉपी करें और इसे विशिष्ट पेज पर स्क्रिप्ट को लोड करने के लिए स्थिति में उपयोग करें।

function my_plugin_scripts($hook) {
    if ( 'settings_page_plugging_info' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', plugins_url('js/file.js', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );