[英]How to add custom javascript to WordPress Admin?
I want to add some custom jquery code to the Edit Post page, something really simple like showing a div when someone presses Publish.我想向编辑帖子页面添加一些自定义 jquery 代码,这非常简单,例如当有人按下发布时显示一个 div。
The only restriction is that I want to achieve this through the use of a plugin, not hacking the admin template files.唯一的限制是我想通过使用插件来实现这一点,而不是破解管理模板文件。
I've tried echoing some script tags using some actions but it doesn't seem to be the way.我尝试过使用一些操作来回显一些脚本标签,但似乎不是这样。
Use the admin_enqueue_scripts
action and thewp_enqueue_script
method to add custom scripts to the admin interface.使用admin_enqueue_scripts
操作和wp_enqueue_script
方法将自定义脚本添加到管理界面。
This assumes that you have myscript.js
in your plugin folder.这假设您的插件文件夹中有myscript.js
。 Change accordingly.相应地改变。 The my_custom_script
handle should be unique for your module and script. my_custom_script
句柄对于您的模块和脚本应该是唯一的。
function my_enqueue($hook) {
// Only add to the edit.php admin page.
// See WP docs.
if ('edit.php' !== $hook) {
return;
}
wp_enqueue_script('my_custom_script', plugin_dir_url(__FILE__) . '/myscript.js');
}
add_action('admin_enqueue_scripts', 'my_enqueue');
There is a snippet for Your functions.php file :你的functions.php文件有一个片段:
function custom_admin_js() {
$url = get_bloginfo('template_directory') . '/js/wp-admin.js';
echo '"<script type="text/javascript" src="'. $url . '"></script>"';
}
add_action('admin_footer', 'custom_admin_js');
Works fine on Wordpress 3.2.1.在 Wordpress 3.2.1 上运行良好。
<?php
function add_jquery_data() {
global $parent_file;
if ( isset( $_GET['action'] ) && $_GET['action'] == 'edit' && isset( $_GET['post'] ) && $parent_file == 'edit.php') {
// Do some stuff.
}
}
add_filter('admin_head', 'add_jquery_data');
?>
admin_enqueue_scripts
and wp_enqueue_script
are the preferred way to add javascript files to the dashboard. admin_enqueue_scripts
和wp_enqueue_script
是将 javascript 文件添加到仪表板的首选方式。
// I'm using an anonymous function for brevity.
add_action( 'admin_enqueue_scripts', function() {
wp_enqueue_script( 'handle', plugin_dir_url( __FILE__ ) . '/script.js' );
} );
If you want to output the javascript using your PHP function however, wp_add_inline_script
doesn't seem to work.但是,如果您想使用 PHP 函数输出 javascript,则wp_add_inline_script
似乎不起作用。 Instead, you can use admin_print_scripts
to directly echo out the script, including the script tags themselves.相反,您可以使用admin_print_scripts
直接回显脚本,包括脚本标签本身。 Just ensure to set the priority high so that it loads after any required libraries, such as jQuery
.只需确保将优先级设置为高,以便在任何必需的库(例如jQuery
之后加载。
add_action( 'admin_print_scripts', function() {
// I'm using NOWDOC notation to allow line breaks and unescaped quotation marks.
echo <<<'EOT'
<script type="text/javascript">
jQuery(function($){
// Do stuff here.
});
</script>
EOT;
}, PHP_INT_MAX );
If you want to get fancy and filter where you want to load the file or not, best to use get_current_screen
.如果您想花哨并过滤要加载文件的位置,最好使用get_current_screen
。
function myproject_admin_enqueue() {
$screen = get_current_screen();
// load on the NEW and EDIT screens of all post types
if ( 'post' === $screen->base ) {
wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'all-admin.js');
}
// load on the NEW and EDIT screens of one post type
if ( 'post' === $screen->base && 'myposttype' === $screen->post_type ) {
wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'mypostype-admin.js');
}
// load only when adding a NEW post, not when editing an existing one.
if ( 'post' === $screen->base && 'add' === $screen->action ) {
wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'new-admin.js');
}
}
add_action('admin_enqueue_scripts', 'myproject_admin_enqueue');
Directly adding wp_enqueue_script to your code doesn't include the script in new versions of Wordpress (5.0 above).直接将wp_enqueue_script添加到您的代码中不会在新版本的 Wordpress(5.0 以上)中包含该脚本。 The better way is to register the script with wp_register_script first to create a handle and then enqueue that handle.更好的方法是首先使用wp_register_script注册脚本以创建一个句柄,然后将该句柄入队。
function custom_script_in_admin($hook) {
if ('edit.php' !== $hook) {
return;
}
wp_register_script( 'custom_handle_name',plugin_dir_url( __FILE__ ) . '/script.js', '',true );
wp_enqueue_script('custom_handle_name');
}
add_action('admin_enqueue_scripts', 'custom_script_in_admin');
Somehow the accepted answer didn't work for me.不知何故,接受的答案对我不起作用。 Here is another solution I didn't found in the answers and this is what did it for me, WP 5.x, adding some css and js for my backend...这是我在答案中没有找到的另一个解决方案,这就是为我所做的,WP 5.x,为我的后端添加了一些 css 和 js...
function suedsicht_theme_add_editor_assets() {
wp_enqueue_style( 'custom-gutenberg-stylesheet', get_template_directory_uri() . '/css/custom-editor-style.css', array(), wp_get_theme()->get( 'Version' ), 'all' );
wp_enqueue_script('suedsicht-admin-js', get_template_directory_uri() . '/js/admin.js');
}
add_action( 'enqueue_block_editor_assets', 'suedsicht_theme_add_editor_assets' );
By using the admin enqueue script hook you can easily add the script file for the admin panel.通过使用admin enqueue 脚本挂钩,您可以轻松地为管理面板添加脚本文件。
function custom_admin_js() {
wp_enqueue_script( 'custom_wp_admin_js', get_template_directory_uri() . '/new-assets/js/admin_section.js', false, '1.0.0' );
wp_enqueue_script( 'custom_wp_admin_js' );
}
add_action('admin_enqueue_scripts', 'custom_admin_js');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.