WordPress后台如何添加自定义 CSS 或 JS 代码-WP新手学园

如果你想要改造后台的布局或者增加一些CSS，那么首先第一步就是需要在后台加载JS或者CSS文件，如果不想加载文件，直接输出CSS以及JS都是可以的。

那么这里提供几段代码，大家可以依葫芦画瓢，了解每个代码使用的钩子是什么作用，了解之后你就会明白到底是什么意思了

加载JS文件

function webroom_add_custom_js_file_to_admin( $hook ) {
  wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
}
add_action('admin_enqueue_scripts', 'webroom_add_custom_js_file_to_admin');

function webroom_add_custom_js_file_to_admin( $hook ) {

wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );

}

add_action('admin_enqueue_scripts', 'webroom_add_custom_js_file_to_admin');

加载CSS文件

function webroom_add_custom_css_file_to_admin( $hook ) {
  wp_enqueue_style(
  'your_custom_css_file',
  'https://yoursite.com/your_css_file.css');
}
add_action('admin_enqueue_scripts', 'webroom_add_custom_css_file_to_admin');

function webroom_add_custom_css_file_to_admin( $hook ) {

wp_enqueue_style(

'your_custom_css_file',

'https://yoursite.com/your_css_file.css');

}

add_action('admin_enqueue_scripts', 'webroom_add_custom_css_file_to_admin');

直接插入CSS

add_action('admin_head', 'webroom_add_css_js_to_admin');

function webroom_add_css_js_to_admin() {
  echo '<style>
    body, textarea, input {
      font-size: 12px;
    } 
  </style>';
  echo '<script>
  	/* Your js code here */
  </script>';
}

add_action('admin_head', 'webroom_add_css_js_to_admin');

function webroom_add_css_js_to_admin() {

echo '<style>

body, textarea, input {

font-size: 12px;

}

</style>';

echo '<script>

/* Your js code here */

</script>';

}

通过代码我们不难看出，加载JS文件和CSS文件都是同一个钩子，只不过加载不同类型的文件使用的函数不一样，一个是style，一个是script，正好对应的就是类型文件，这样记忆的话，我相信瞬间就明白了。

同样的，两个函数的使用方式都是相似的，除了最后一个参数不一样，针对CSS是针对不同类型的媒体自定义加载，而JS则是选择是否在底部加载。

具体的两种函数说明如下：

wp_enqueue_script() 函数介绍

函数用法

Enqueue a script.

功能介绍

暂无数据

参数介绍

暂无数据

返回值

暂无数据

wp_enqueue_style() 函数介绍

函数用法

Enqueue a CSS stylesheet.

功能介绍

暂无数据

参数介绍

暂无数据

返回值

暂无数据

如果你看不明白我说了，这里直接提供一个地址，可以很好或者说非常全面的说明这两个函数之间的差别，不过是英文，大家借助翻译工具了解一下：
https://developer.wordpress.org/themes/basics/including-css-javascript/