在开发WordPress主题的时候,可以直接在head标签中写下需要的js或者css,但是这种加载方式已经不提倡了。现在 WordPress 主题通过 function.php 加载 js 和 css 文件。
基本架构
//加载css和js
函数 wpdie_add_scripts() {
wp_enqueue_style(‘style’, get_template_directory_uri() . ‘/style.css’);
$jq = get_template_directory_uri() 。 ‘/js/jquery.min.js’;
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, $jq);
wp_enqueue_script(‘jquery’);
//在文章页面加载prism.css
如果(is_single()){
wp_enqueue_style(‘prism’, get_template_directory_uri() . ‘/css/prism.css’);
}
//在底部加载js,注意true。在标题中留空
wp_register_script(‘aosjs’, get_template_directory_uri() . ‘/js/aos.js’, array(‘jquery’), ”);
wp_enqueue_script(‘aosjs’,false,array(),”,true);
wp_enqueue_style(‘fa’, get_template_directory_uri() . ‘/css/font-awesome/font-awesome.css’);
}
add_action(‘wp_enqueue_scripts’, ‘wpdie_add_scripts’);
有两个常用的 add_action 钩子可以将脚本和 CSS 加载到 WordPress 中:
init:确保始终为您的网站标题(如果使用 home.php、index.php 或模板文件)以及其他“前端”帖子、页面和模板样式加载脚本和 CSS。
wp_enqueue_scripts:“正确”的钩子方法,可能并不总是有效,具体取决于您的 WordPress 设置。
注意事项
这样加载css和js的时候,你会发现你使用的wordpress程序的版本号暴露在每个文件后面。平心而论,为了安全起见,这东西需要被屏蔽。怎么看:
函数 wpdie_remove_cssjs_ver( $src ) {
if( strpos( $src, ‘ver=’ ) )
$src = remove_query_arg(‘ver’, $src);
返回 $src;
}
add_filter(‘style_loader_src’, ‘wpdie_remove_cssjs_ver’, 999);
add_filter(‘script_loader_src’, ‘wpdie_remove_cssjs_ver’, 999);
通过上面的代码,不仅css和js都被正确加载了。
另外,你还需要注意,这个方法需要你在head标签中包含和 这种功能还可以。