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!!!
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?
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
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' ) );
}
}
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.
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.
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");
});
});
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');
}
}
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');
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' );
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. Gunakanadmin_enqueue_scripts
sebaliknya."
Sama dengan admin_print_styles
.
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' ) );
}
}