如果你想要改造后台的布局或者增加一些CSS,那么首先第一步就是需要在后台加载JS或者CSS文件,如果不想加载文件,直接输出CSS以及JS都是可以的。
那么这里提供几段代码,大家可以依葫芦画瓢,了解每个代码使用的钩子是什么作用,了解之后你就会明白到底是什么意思了
加载JS文件
1 2 3 4 |
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文件
1 2 3 4 5 6 |
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
1 2 3 4 5 6 7 8 9 10 11 12 |
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则是选择是否在底部加载。
具体的两种函数说明如下:
如果你看不明白我说了,这里直接提供一个地址,可以很好或者说非常全面的说明这两个函数之间的差别,不过是英文,大家借助翻译工具了解一下:
https://developer.wordpress.org/themes/basics/including-css-javascript/