在开发WordPress主题时，直接在标签内编写CSS或JS代码的做法已逐渐被淘汰。现在推荐使用function.php来组织和加载这些文件。以下是一个基本的结构，展示如何在WordPress主题中通过函数加载CSS和JS：
“`php
function wpdie_add_scripts() {
// 加载主题的主CSS文件
wp_enqueue_style(‘style’, get_template_directory_uri() . ‘/style.css’);
// 注册并加载jQuery（先取消默认注册，然后自定义路径）
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, get_template_directory_uri() . ‘/js/jquery.min.js’);
wp_enqueue_script(‘jquery’);
// 如果是单篇文章页面，加载Prism CSS
if (is_single()) {
wp_enqueue_style(‘prism’, get_template_directory_uri() . ‘/css/prism.css’);
}
// 在页面底部加载AOS.js，依赖jQuery，设置版本为空，并在footer中加载
wp_register_script(‘aosjs’, get_template_directory_uri() . ‘/js/aos.js’, array(‘jquery’), ”, true);
wp_enqueue_script(‘aosjs’);
// 加载Font Awesome CSS
wp_enqueue_style(‘fa’, get_template_directory_uri() . ‘/css/font-awesome/font-awesome.css’);
}
add_Action(‘wp_enqueue_scripts’, ‘wpdie_add_scripts’);
“`
WordPress提供了两个主要的`add_action`钩子来加载脚本和CSS：
1. `init`：确保无论何时，只要网站标题（如home.php、index.php或模板文件）以及前端的帖子、页面和模板需要样式，就会加载脚本和CSS。
2. `wp_enqueue_scripts`：这是更推荐的钩子，但其实际效果可能因WordPress配置而异。
然而，当使用上述方法加载CSS和JS时，WordPress会将版本号附加到文件URL后面，这可能对安全性产生影响。为了避免这种情况，你可以使用以下代码移除版本号：
“`php
function wpdie_rEMOve_cssjs_ver( $src ) {
if ( strpos( $src, ‘ver=’ ) ) {
$src = remove_query_arg(‘ver’, $src);
}
return $src;
}
add_filter(‘style_loader_src’, ‘wpdie_remove_cssjs_ver’, 999);
add_filter(‘script_loader_src’, ‘wpdie_remove_cssjs_ver’, 999);
“`
以上代码确保了CSS和JS文件的正确加载，同时隐藏了版本信息，提升了安全性。请注意，这种方法要求在标签中包含“和“标签，以确保功能正常运行。
相关文章
