de-vraag
  • Pertanyaan
  • Tag
  • Pengguna
Notifikasi
Imbalan
Registrasi
Setelah Anda mendaftar, Anda akan diberitahu tentang balasan dan komentar untuk pertanyaan Anda.
Gabung
Jika Anda sudah memiliki akun, masuk untuk memeriksa pemberitahuan baru.
Akan ada hadiah untuk pertanyaan, jawaban, dan komentar tambahan.
Lebih
Sumber
Sunting
 Wordpressor
Wordpressor
Question

Bagaimana cara Enqueue gaya/script Tertentu /wp-admin Halaman?

Saya memiliki dua fungsi sederhana yang memuat hal-hal yang menggunakan wp_enqueue_style() dan wp_enqueue_script(), sesuatu seperti ini:

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

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

... dan beberapa halaman admin, dibuat dengan add_menu_page() dan 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'); 

Bagaimana cara saya memuat dua fungsi hanya pada halaman ini?

Sekarang saya'm menggunakan:

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

Tetapi banyak file saya di setiap halaman admin, yang tidak bagus sama sekali.

Saya dapat melakukan hal ini melalui salah satu garis sederhana dalam functions.php atau harus enqueue mereka dalam halaman terpisah (saya lebih suka opsi pertama sangat, karena saya'd harus mengedit banyak admin-halaman-membuat-fungsi).

Terima kasih!!!

53 2012-02-04T19:56:16+00:00 9
Michael Ecklund
Michael Ecklund
Pertanyaan edit 23 Maret 2018 в 4:23
WordPress
wp-admin
wp-enqueue-script
admin-menu
wp-enqueue-style
admin-init
Tom Auger
Tom Auger
17 Desember 2012 в 8:43
2012-12-17T20:43:04+00:00
Lebih
Sumber
Sunting
#14461359

Masalah dengan @tollmanz jawabannya adalah bahwa karena anda're mengaitkan off -print-gaya-dan -cetak-script kait, anda harus menghasilkan kode HTML untuk memuat script anda secara manual. Hal ini tidak optimal, karena anda don't mendapatkan hasil bagus ketergantungan dan versi yang dilengkapi dengan wp_enqueue_script() dan wp_enqueue_style(). Hal ini juga doesn't membiarkan anda menempatkan hal-hal di footer jika itu's sebuah tempat yang lebih baik untuk mereka.

Jadi, kembali ke OP's pertanyaan: apa's cara terbaik untuk memastikan bahwa saya dapat enqueue JS / CSS tertentu pada halaman admin saja?

  1. Hook "beban-{$my_admin_page" tindakan untuk hanya melakukan hal-hal ketika itu's anda plugin tertentu's halaman admin yang's dimuat, dan kemudian

  2. Hook "admin_enqueue_scripts" tindakan untuk benar menambahkan wp_enqueue_script panggilan.

Sepertinya sedikit rasa sakit, tapi itu's benar-benar sangat mudah untuk menerapkan. Dari atas:

    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' ) );
    }
}
Tom Auger
Tom Auger
Jawaban edit 26 April 2015 в 1:19
62
0
Solution / Answer
 tollmanz
tollmanz
4 Februari 2012 в 10:51
2012-02-04T22:51:28+00:00
Lebih
Sumber
Sunting
#14461357

add_menu_page dan add_submenu_page keduanya kembali halaman's "hook akhiran", yang dapat digunakan untuk mengidentifikasi halaman tertentu dengan kait. Dengan demikian, anda dapat menggunakan akhiran dalam kombinasi dengan variabel kait admin_print_styles-{$hook_suffix} dan admin_print_scripts-{$hook_suffix} untuk secara khusus menargetkan halaman ini.

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

Saya menemukan ini menjadi bersih metode untuk menambahkan semua ini karena itu's semua ditangani dalam satu fungsi. Jika anda memutuskan untuk menghapus fungsi ini, hanya memindahkan panggilan ke salah satu fungsi.

33
0
 mor7ifer
mor7ifer
4 Februari 2012 в 8:15
2012-02-04T20:15:23+00:00
Lebih
Sumber
Sunting
#14461356

Jika anda menggunakan get_current_screen(), anda dapat mendeteksi apa halaman anda're on. Ada contoh dalam codex artikel yang saya terkait yang menunjukkan bagaimana untuk menggunakan get_current_screen() dengan add_options_page(), metode ini akan bekerja untuk setiap halaman admin.

13
0
Kit Sunde
Kit Sunde
8 Juli 2015 в 8:58
2015-07-08T08:58:43+00:00
Lebih
Sumber
Sunting
#14461362

Aku bertanya-tanya hal yang sama. Ada's versi modern yang menggunakan 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");
  });
});
3
0
 recurse
recurse
14 November 2016 в 9:24
2016-11-14T21:24:02+00:00
Lebih
Sumber
Sunting
#14461363

Seperti @mor7ifer disebutkan di atas, anda dapat menggunakan fungsi asli WordPress get_current_screen(). Jika anda loop melalui output dari fungsi ini, misalnya:

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

... anda'll melihat kunci yang disebut dasar. Saya menggunakan ini mendeteksi apa halaman I'm dan enqueue, dequeue seperti:

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

    }
}
3
0
Michael Ecklund
Michael Ecklund
20 September 2012 в 9:17
2012-09-20T21:17:32+00:00
Lebih
Sumber
Sunting
#14461358

Anda bisa mengambil @tollmanz jawaban, dan memperluas di atasnya sedikit, yang memungkinkan untuk penggunaan bersyarat serta...

Contoh:

/* 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');
 Community
Community
Jawaban edit 13 April 2017 в 12:37
3
0
 IqbalBary
IqbalBary
18 Februari 2019 в 5:42
2019-02-18T05:42:17+00:00
Lebih
Sumber
Sunting
#14461364

Untuk membuatnya, anda harus menemukan halaman admin nama pertama. Tambahkan admin_enqueue_scripts dengan wp_die($hook) dan pergi ke halaman plugin, Anda akan melihat nama halaman.

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

settings_page_plugging_info

Sekarang salin halaman nama dan menggunakannya dalam kondisi beban script pada halaman tertentu.

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' );
0
0
Tolea Bivol
Tolea Bivol
5 Juli 2013 в 11:31
2013-07-05T11:31:03+00:00
Lebih
Sumber
Sunting
#14461360

Dari dokumentasi:

admin_print_scripts terutama digunakan untuk echo inline javascript. admin_print_scripts tidak boleh digunakan untuk enqueue gaya atau script pada halaman admin. Gunakan admin_enqueue_scripts sebaliknya."

Sama dengan admin_print_styles.

 brasofilo
brasofilo
Jawaban edit 12 Juli 2013 в 4:11
0
0
 Jashwant
Jashwant
11 Januari 2015 в 7:48
2015-01-11T07:48:40+00:00
Lebih
Sumber
Sunting
#14461361
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' ) );
    }
}
0
0
Related communities 7
WordPress
WordPress
4 632 pengguna
Group penggemar WordPress, @idwordpress_channel
Buka telegram
WordPress Indonesia
WordPress Indonesia
4 607 pengguna
❌ Menjual apapun di grup sini,melanggar kick.
Buka telegram
WordPress Indonesia
WordPress Indonesia
1 529 pengguna
Buka telegram
Wordpress & Oxygen Builder Indonesia (WOBI)
Wordpress & Oxygen Builder Indonesia (WOBI)
360 pengguna
For now, this grub only for member from indonesia
Buka telegram
Wordpress Indonesia
Wordpress Indonesia
239 pengguna
Buka telegram
Wordpress Indonesia
Wordpress Indonesia
4 pengguna
Diskusi tentang wordpress
Buka telegram
Tambahkan pertanyaan
Kategori
Semua
Teknologi
Budaya / Rekreasi
Kehidupan / Seni
Ilmu Pengetahuan
Profesional
Bisnis
Pengguna
Semua
Baru
Populer
1
Asilbek Qadamboyev
Terdaftar 7 jam yang lalu
2
Akshit Mehta
Terdaftar 2 hari yang lalu
3
me you
Terdaftar 6 hari yang lalu
4
Никита иванов
Terdaftar 1 minggu yang lalu
5
Alex1976G_06
Terdaftar 1 minggu yang lalu
ID
KO
RU
© de-vraag 2022
Sumber
wordpress.stackexchange.com
di bawah lisensi cc by-sa 3.0 dengan atribusi