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

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

理解 WordPress 中的排队

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

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

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

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

　　推荐：如何给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');