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

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

加载JS文件

加载CSS文件

直接插入CSS

通过代码我们不难看出,加载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/