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() 函数介绍

函数用法

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Enqueue a script.

功能介绍

Registers the script if $src provided (does NOT overwrite), and enqueues it.

Top ↑

WP_Dependencies::add() WP_Dependencies::add_data() WP_Dependencies::enqueue()

参数介绍

$handle

(string) (Required) Name of the script. Should be unique.

$src

(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory. Default value: ''

$deps

(string[]) (Optional) An array of registered script handles this script depends on. Default value: array()

$ver

(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. Default value: false

$in_footer

(bool) (Optional) Whether to enqueue the script before instead of in the . Default 'false'. Default value: false

返回值

暂无数据

wp_enqueue_style() 函数介绍

函数用法

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

Enqueue a CSS stylesheet.

功能介绍

Registers the style if source provided (does NOT overwrite) and enqueues.

Top ↑

WP_Dependencies::add() WP_Dependencies::enqueue()

参数介绍

$handle

(string) (Required) Name of the stylesheet. Should be unique.

$src

(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory. Default value: ''

$deps

(string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on. Default value: array()

$ver

(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. Default value: false

$media

(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'. Default value: 'all'

返回值

暂无数据

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