如何在WordPress中正确添加css样式和js脚本

如何在WordPress中正确添加css样式和js脚本

　　对于 WordPress，正确排队脚本和样式对于性能、兼容性和安全性至关重要。当谈到 WordPress 中的样式和脚本时，许多开发人员经常忽视排队的重要性或使用不当方法，导致各种网站问题。本文晓得博客为你介绍如何在WordPress中正确添加css样式和js脚本的最佳实践。

　　推荐：[最新版]Code Snippets Pro插件下载WordPress代码片段管理器插件

理解 WordPress 中的排队

　　排队是 WordPress 主题或插件中添加任何脚本或样式表的推荐方式。通过使用 WordPress 排队系统，开发人员可以确保脚本和样式以正确的顺序加载、防止冲突并管理依赖关系。

　　WordPress Core 本身使用此系统来管理其脚本和样式。这种标准化使每个人都能很好地协作，并确保最终用户的流畅体验。不正确或硬编码的脚本可能会导致多个问题：

1. 性能问题：不必要地加载多个脚本或样式可能会降低网站速度。
2. 冲突：脚本可能会互相干扰，导致功能中断。
3. 安全风险：正确排队的脚本和样式更安全，减少了漏洞。

　　通过遵循入队方法，您不仅可以提高网站的稳定性和速度，还可以确保用户获得更安全的网络体验。

　　推荐：如何给WordPress文章页面添加代码高亮显示功能

注册与排队脚本和样式

　　在深入了解实际入队之前，必须了解注册和入队之间的区别。

• 注册：此步骤允许您将脚本或样式告知 WordPress，但不会在页面上加载它。这对于以后有条件加入队列的脚本或样式很有用。
• 排队：这会在页面或帖子上加载脚本或样式。

// Registerwp_register_script('eds_handle', 'path_to_file.js', array('dependency1', 'dependency2'), 'version', true);// Enqueuewp_enqueue_script('eds_handle');

排队样式表

　　要排队样式，请使用该wp_enqueue_style函数。

function eds_enqueue_styles() {
    wp_enqueue_style('eds-style', get_template_directory_uri() . '/eds-styles.css');
}
add_action('wp_enqueue_scripts', 'eds_enqueue_styles');

将 JavaScript 文件加入队列

　　对于 JavaScript 文件，您可以使用该函数。如果 jQuery 是依赖项，wp_enqueue_script请始终确保它使用最新的函数。

function eds_enqueue_scripts() {
    wp_enqueue_script('eds-script', get_template_directory_uri() . '/eds-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'eds_enqueue_scripts');

脚本和样式的条件加载

　　有条件地加载脚本或样式以提高性能。

function eds_conditional_enqueue() {
    if (is_front_page()) {
        wp_enqueue_style('eds-frontpage-style', get_template_directory_uri() . '/eds-frontpage.css');
    }
}
add_action('wp_enqueue_scripts', 'eds_conditional_enqueue');

　　推荐：如何不使用插件将视频添加到WooCommerce产品页面图库

将脚本添加到页脚

　　要在页脚中加载脚本，请将最后一个参数设置为true。

	
wp_enqueue_script('eds-footer-script', get_template_directory_uri() . '/eds-footer.js', array(), '1.0.0', true);

注销脚本和样式

　　要阻止脚本或样式加载：

function eds_deregister_styles() {
    wp_deregister_style('unwanted-style');
}
add_action('wp_enqueue_scripts', 'eds_deregister_styles', 20);

处理脚本依赖关系

　　注册或入队时在数组中列出依赖项：

wp_enqueue_script('eds-script', get_template_directory_uri() . '/eds-script.js', array('jquery', 'another-dependency'));

本地化脚本

　　将数据从 PHP 发送到 JavaScript：

wp_enqueue_script('eds-localized-script', get_template_directory_uri() . '/eds-localized.js');
wp_localize_script('eds-localized-script', 'eds_vars', array(
    'ajax_url' => admin_url('admin-ajax.php'),
));

使用内联脚本和样式

　　尽管很少见，但您可以添加内联脚本或样式：

function eds_inline_script() {
    echo '<script type="text/javascript">console.log("EDS inline script loaded.");</script>';
}
add_action('wp_footer', 'eds_inline_script');

优化性能

　　尽可能地缩小和连接脚本和样式，并考虑使用内容分发网络 (CDN) 来获取流行的库。

• 不使用wp_enqueue_scripts钩子。
• 多次排队脚本或样式。
• 没有指定正确的依赖关系。

　　推荐：WordPress数据库优化以提高性能

总结

　　以上是晓得博客为你介绍的如何在WordPress中正确添加css样式和js脚本的全部内容，通过掌握 WordPress 中的入队技巧，您可以确保更好的网站性能、减少冲突并为用户提供更安全的环境。正确的入队不仅是最佳实践，更是负责任的 Web 开发。

• 始终排队，永远不要硬编码脚本或样式。
• 使用wp_enqueue_scripts动作挂钩。
• 正确指定依赖关系。
• 最小化并优化性能。

　　推荐：隐藏WooCommerce缺货产品的3种方法

　　推荐：WordPress网站推送通知插件OneSignal插件教程