在开发wordpress主题或是插件时，引用JavaScript和CSS的问题经常困扰开发者，因此从现在开始，我现在可以为您提供本教程。 老实说，我没有找到关于此问题的任何新颖的好教程。
在继续阅读本指南之前，我想让您知道，您绝对不要将外部CSS和JS直接添加到WordPress模板文件（例如header.php，footer.php等）中。在某些情况下，可以使用< style>和<script>标记，但也不建议使用。
内部CSS和JavaScript文件
在这里需要详细说明-内部CSS是直接使用在HTML中<style>标记之间，内部JS是使用在<script>标记之间。WordPress有4个action hook，可用于内部CSS和JavaScript：
- wp_head –使用此hook，您可以在</head>结束标记之前添加内部CSS/JS或所需的任何内容，
- admin_head –同上，但仅适用于WordPress管理仪表盘，
- wp_footer –使用此hook，您可以在</body>标记之前添加内部CSS/JS或所需的任何内容，
- admin_footer –同上，但仅适用于WordPress管理仪表盘；
1.使用admin_head动作hook将自定义CSS添加到管理仪表盘
让我给你看一个简单的例子：
add_action( 'admin_head', 'ietheme_custom_internal_css' );
function ietheme_custom_internal_css(){
echo '<style>
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
background: #a73fe0;
}
</style>';
}把上面的代码放在您主题的functions.php里面保存。刷新后可以得到下面的效果：
2.使用admin_footer将JavaScript添加到管理仪表盘
这段代码与前面的示例非常相似，唯一的变化是我们使用JavaScript而不是CSS：
add_action( 'admin_footer', 'ietheme_custom_internal_javascript' );
function ietheme_custom_internal_javascript(){
echo '<script>
jQuery( function( $ ) {
alert( \'hello\' );
} );
</script>';
}需要说明的是，这种内部加入css或是js的方法已经过时了。如果你非要用。当然也可以。
外部CSS和JavaScript文件
外部CSS/JS是当文件.js或.css且不一定在您的域上时，它可以在您的域上，也可以是其它cdn上。
当必须引用一些外部CSS或JavaScript文件时，必须始终使用以下操作hook：
- wp_enqueue_scripts
- admin_enqueue_scripts–用于WordPress管理仪表盘
但这并不是全部！ 您不仅可以在这些hook中打印<script>或<link>标记，还必须使用特殊功能，这是大多数开发者经常使用的列表：
wp_register_script()/wp_register_style()wp_deregister_script()/wp_deregister_style()wp_enqueue_script()/wp_enqueue_style()wp_localize_script()wp_add_inline_script()
还有更多功能。 但是使用这些功能通常绰绰有余！ 我将在以下示例中向您展示如何处理它们：
但是如何将文件添加到主题的HTML模板中？ 当然，它将通过wp_head()和()函数自动完成，它们必须在模板文件中，然后相应地关闭</head>和</body>标记。
1.引用主要主题style.css
add_action( 'wp_enqueue_scripts', 'ietheme_main_theme_css' );
function ietheme_main_theme_css() {
wp_enqueue_script( 'ietheme-css', get_stylesheet_uri() );
}实际上，您可以通过3种方式获取主题的style.css网址：
get_stylesheet_uri(),get_stylesheet_directory_uri() . 'https://cdn.ietheme.com/style.css',get_template_directory_uri() . 'https://cdn.ietheme.com/style.css'
2.使用预注册的脚本
请打开wp-includes/js目录。 您看到那里有很多文件吗？ 您可以在此处找到jQuery和一些常用的JS插件。 那是什么意思？这意味着大多数脚本已被注册，如果要使用它们，可以通过以下方式进行操作：
add_action( 'wp_enqueue_scripts', 'ietheme_include_jquery' );
function ietheme_include_jquery() {
wp_enqueue_script( 'jquery' ); // you just have to know a script handle
}您还可以预先注册自己的脚本和样式，例如在某些主题或插件中，您可以找到此方法来实现：
add_action( 'wp_enqueue_scripts', 'ietheme_register_and_enqueue' );
function ietheme_register_and_enqueue() {
wp_register_script( 'some-script', $url );
wp_enqueue_script( 'some-script' );
}3.依存关系
您知道样式，尤其是脚本的顺序很重要吗？因此，如果您使用的是jQuery库，则必须在其后包含.js文件。 有时CSS文件的顺序也很重要。
如果仅使用hook wp_enqueue_scripts并且所有脚本均在此处列出，则可以跳过依赖关系参数。 但是，如果您创建一个自定义插件，并且此插件需要jQuery库，则必须这样做。
add_action( 'wp_enqueue_scripts', 'ietheme_custom_js_with_dependency' );
function ietheme_custom_js_with_dependency() {
wp_enqueue_script(
'script-2',
plugin_dir_url( __FILE__ ) . 'assets/script.js',
array( 'jquery', 'script-1' )
);
}因此，hook优先级是什么，在插件或主题文件中使用此代码都没有关系–在所有情况下，只有在jquery和script-1之后，script-2才会添加到HTML文档中。
4.防止缓存CSS和JavaScript文件
add_action( 'wp_enqueue_scripts', 'ietheme_main_theme_css_cache_refresh' );
function ietheme_main_theme_css_cache_refresh() {
wp_enqueue_style(
'ietheme-css',
get_stylesheet_uri(),
array(),
filemtime( dirname( __FILE__ ) . 'https://cdn.ietheme.com/style.css' )
);
}add_action( 'wp_enqueue_scripts', 'ietheme_plugin_javascript_cache_refresh' );
function ietheme_plugin_javascript_cache_refresh() {
wp_enqueue_script(
'ietheme-plugin-js',
plugin_dir_url( __FILE__ ) . 'assets/script.js', // no slashes
array( 'jquery' ),
filemtime( dirname( __FILE__ ) . 'https://cdn.ietheme.com/assets/script.js )
);
}我们有两种方法可以防止永远永久地缓存包含的CSS和JavaScript文件：
- time()–返回自1970年以来的当前时间（以秒为单位）。因此，每一秒都有一个不同的值，
- filemtime()–返回上次修改该文件的时间（以秒为单位）。
我们可以将此参数设置为null以完全删除查询字符串，因为默认情况下它将显示WordPress安装的当前版本！
5.将jQuery从页眉移动到页脚
如果您曾经使用Google PageSpeed扫描过您的网站，您就会知道，它始终建议您在关闭</body>标记之前将所有JavaScript甚至CSS文件移动到网站页脚。 以我的经验，我可以说，这对网站性能而言并不重要。 但是有时将jQuery和您自定义的.js文件移动到网站页脚可能是个好办法，只是你可以获得高分的谷歌测速。
add_action( 'wp_enqueue_scripts', 'ietheme_jquery_in_footer' );
function ietheme_jquery_in_footer() {
wp_deregister_script( 'jquery' );
wp_register_script(
'jquery',
includes_url( 'https://cdn.ietheme.com/js/jquery/jquery.js' ),
false, // no dependencies
NULL, // no version to show
true // in footer? yes
);
wp_enqueue_script( 'jquery' );
}具体使用方法请看上面代码片段的注释。
6.如何仅在特定页面上添加脚本
使用条件标签为ON。 您可以在此处找到官方WordPress文档中的标签列表。
add_action( 'wp_enqueue_scripts', 'ietheme_js_for_homepage_only' );
function ietheme_js_for_homepage_only() {
if( is_front_page() ) { // if on a website homepage
wp_enqueue_script( 'homepage-js', $url, 'jquery', null, true );
}
}这就是基本教程的全部内容，如有任何疑问，欢迎在下面发表评论。
本文已在Ie主题由99839发布
文章来源：https://ietheme.com/include-css-and-javascript.html
