আমি কীভাবে নির্দিষ্ট / ডাব্লুপি-অ্যাডমিন পৃষ্ঠাতে শৈলী / স্ক্রিপ্টগুলি সারিবদ্ধ করব?

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বা আমার পৃষ্ঠাগুলির মধ্যে সেগুলি আলাদাভাবে সজ্জিত করতে পারি (আমি প্রথম বিকল্পটি দৃ strongly়ভাবে পছন্দ করি, যেহেতু আমাকে অনেকগুলি অ্যাডমিন-পৃষ্ঠা-তৈরি-ফাংশন সম্পাদনা করতে হবে)।

ধন্যবাদ!

Comments

অফিসিয়াল ডকুমেন্টেশনের উদাহরণগুলি বিকাশকারী.ওয়ার্ডপ্রেস.আর. / প্লাগইনস

— পল

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 শৈলী অথবা স্ক্রিপ্টের সারিবদ্ধ ব্যবহার করা উচিত নয় ।" @ টমএউজারের উত্তরটি আসলে সঠিক, যদিও এটি অনুকূল নয়। admin_enqueue_scripts-(hookname)যদিও ডাব্লুপি দলটি একটি হুক যুক্ত করেছে তবে এটি উপকারী হবে ...

— ডেভিড গার্ড

এই উত্তরটি খুঁজে পেতে আমার 3 দিন সময় লেগেছে যা আমার পক্ষে সত্যিই সহায়ক ছিল :) ধন্যবাদ :)

— আসফান্দিয়ার খান

@DavidGard, আপনি সম্ভবত এই তাকান উচিত developer.wordpress.org/reference/hooks/... , developer.wordpress.org/reference/hooks/...

— hkchakladar

@hkchakladar আমার মন্তব্যটি প্রায় চার বছরের পুরনো ... যদি এটি আর প্রাসঙ্গিক না হয় তবে তা কেন তা ব্যাখ্যা করে এক্ষেত্রে আরও বেশি আপ টু ডেট মন্তব্য যুক্ত করুন।

— ডেভিড গার্ড

Answer 2

@ টোলম্যানজ উত্তরের সমস্যাটি হ'ল যেহেতু আপনি প্রিন্ট-শৈলী এবং -প্রিন্ট-স্ক্রিপ্ট হুকগুলি বন্ধ করছেন তাই আপনার স্ক্রিপ্টগুলি ম্যানুয়ালি লোড করার জন্য আপনাকে অবশ্যই HTML তৈরি করতে হবে। এই যেহেতু আপনি চমৎকার নির্ভরতা এবং ভারশনিং যে দিয়ে আসে পাবেন না, অনুকূল নয় wp_enqueue_script()এবং wp_enqueue_style()। এটি পাদলেখগুলিতে জিনিস রাখার অনুমতি দেয় না যদি এটির জন্য এটি আরও ভাল জায়গা।

সুতরাং, ওপি-র প্রশ্নের কাছে ফিরে যান: কেবলমাত্র নির্দিষ্ট অ্যাডমিন পৃষ্ঠাগুলিতে আমি জেএস / সিএসএস তৈরি করতে পারি তা নিশ্চিত করার সর্বোত্তম উপায় কী?

1. আপনার লোড হওয়া নির্দিষ্ট প্লাগইনের অ্যাডমিন পৃষ্ঠাটি তখনই কাজগুলি করতে "লোড - {$ my_admin_page}" ক্রিয়াটি বন্ধ করুন এবং তারপরে

2. আপনার wp_enqueue_scriptকলগুলি যথাযথভাবে যুক্ত করতে "অ্যাডমিন_নেকিউ_স্ক্রিপ্টস" ক্রিয়াটি বন্ধ করুন ।

কিছুটা ব্যথার মতো মনে হচ্ছে তবে এটি বাস্তবায়ন করা খুব সহজ। উপর থেকে:

    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 টি ক্রিয়া যুক্ত করি যার সাথে আমি আরও অনেকগুলি হুক / ফিল্টার ইত্যাদি যুক্ত করতে পারি those কারণ এই ক্রিয়াগুলি কেবলমাত্র পছন্দের পৃষ্ঠায় বলা হয়, সেই বিন্দুটি ছাড়িয়ে হুকগুলিকে নেমস্পিড হুক ব্যবহার করার দরকার নেই Because (যেমন আপনি দেখিয়েছেন), যা অনেক বেশি দক্ষ এবং স্বজ্ঞাত।

— ইভান ম্যাটসন

হাই, এই উপায় এখনও সমর্থিত? লোড_এডমিন_জেএস কখনও কল করছে না

— আইএএমজুলিয়ানআকোস্টা

নিশ্চিত যে এটি এখনও সমর্থিত। প্রশাসন.এফপি এর 206 লাইন। ২.6 থেকে সেখানে এসেছিলেন এবং শীঘ্রই (কখনও) কোনও সময় চলে যাওয়ার সম্ভাবনা নেই।

— টম অ্যাগার

আমার উত্তরটি এখনই দেখছি, আমি বিশ্বাস করি যে স্পষ্টভাবে jquery-ui-core এবং jquery-ui-tabগুলি সন্ধান করা সম্পূর্ণরূপে দুর্দান্ত, কারণ এই স্ক্রিপ্টগুলি ইতিমধ্যে নিবন্ধীকৃত রয়েছে। আপনাকে কেবল তাদের নির্ভরতার মধ্যে কল করতে হবে। আমি আমার উত্তর অনুসারে আপডেট করব।

— টম অ্যাগার

ওয়ার্ডপ্রেস 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

উপরে উল্লিখিত @ মোরিফায়ার হিসাবে, আপনি নেটিভ ওয়ার্ডপ্রেস ফাংশন get_current_screen () ব্যবহার করতে পারেন । যদি আপনি এই ফাংশনটির আউটপুটটি লুপ করেন তবে:

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

... আপনি বেস নামে একটি কী দেখতে পাবেন । আমি কোন পৃষ্ঠায় রয়েছি তা সনাক্ত করতে এবং এটির মতো প্রাত্যহিক প্রকরণটি সনাক্ত করতে ব্যবহার করি:

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' );