首页 >CMS教程 >WordPress >WordPress中的脚本和样式

WordPress中的脚本和样式

Lisa Kudrow原创: 2025-02-15 13:18:131011浏览

WordPress中的脚本和样式

钥匙要点

启用脚本和样式对于保持性能和防止不同脚本和样式之间的冲突至关重要。添加脚本的推荐方法是使用admin_enqueue_script钩子，将处理程序前缀以避免冲突并确保脚本始终加载。
>
。

>入围脚本和样式

>如果您需要一些CSS或JavaScript代码要注入网站的某些页面，我们倾向于将它们添加到同一标记文件中，或者使用直接URL添加它们。

但是，这不是添加脚本的推荐方法，并且缓存插件不会优化和缓存您的资产以提高网站性能。我们需要使用Admin_enqueue_scripts钩。

> wp_enqueue_script方法的第一个参数是脚本处理程序名称，我们应该始终前缀处理程序以避免任何冲突，并确保我们的脚本始终加载。

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

当前的解决方案不是完美的，我们的脚本都包含在每个后端页面中。我们可以使用传递给回调函数的$挂接变量来测试特定页面。>

>现在，我们的脚本仅包含在设置和新的帖子页面中。我们只能在用户创建一个新页面时才能使用我们的样式。>

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

>删除不必要的脚本

>大多数开发人员不在乎在需要时起脚本的启动，这就是为什么我们总是会遇到意外的错误和奇怪的造型问题的原因。当注意到脚本引发错误或引起冲突时，您可以在添加自己的脚本之前将其删除，这通常在调试模式中很有用。

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

使用快速代码

大多数插件和主题都提供了一组与网站交互的快捷代码，有时它们需要将脚本注入页面。可悲的是，我们无法像以前在后端那样测试前页面。

实现此目的的一种简单方法是在the_content过滤器上注册回调，并测试它是否包含您的短码。如果它返回是，您可以加入您的脚本，否则什么都不做。

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

上面的代码效果很好，并且只会为包含快捷代码的帖子中提起我们的脚本。但是，该解决方案在高负载网站上存在一些严重的性能问题。我们将为此问题创建一个更复杂的解决方案。

如果您还没有使用作曲家来加载课程，我建议您开始这样做。我们的插件composer.json文件看起来如下：

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

src/shertcodes/helloshortcode.php类保存我们的短码定义。

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

运行方法将返回我们的快捷代码的HTML标记，并在使用快捷代码时将加载的静态属性设置为true。 >>

>当然，我们可以避免将此代码放入主插件文件中，但是我们将保持简单且可读的内容。

$短代码变量包含可用的快捷代码列表。第一个循环将注册我们的短代码，并将运行方法成为处理程序。接下来，我们将使用WP_FOOTER钩在关闭身体标签之前将我们的快捷代码脚本勾勒出来。

add_action( 'admin_enqueue_scripts', function($hook) {
    $unautorized_styles = [
        'script1',
        'another-script'
    ];

    foreach ( $unautorized_styles as $handle )
    {
        wp_deregister_style( $handle );
    }

    // enqueue my scripts
} );

>您现在可以创建一个包含我们的短码的新页面，并检查我们的脚本是否正确加载。

结论

这篇简短的文章是有关如何提起插件和主题脚本的摘要，也是避免将它们加载到网站上的每个页面中的最佳方法。如果您有任何疑问或评论，请在下面发布它们，我会尽力回答它们！

经常询问有关在WordPress中起义脚本和样式的问题（常见问题解答）

>在WordPress中启动脚本和样式的目的是什么？它有助于防止主题或插件可能使用的不同脚本和样式之间的冲突。通过入学，您是在告诉WordPress何时加载脚本/样式，加载脚本/样式以及它依赖的其他脚本/样式。

>如何在WordPress中加入脚本？

>在WordPress中加入脚本，您需要使用wp_enqueue_script（）函数。此功能至少需要两个参数：句柄（脚本的唯一名称）和SRC（脚本的URL）。您还可以指定其他参数，例如依赖项，版本以及是否将脚本加载到页脚中。

>

> wp_enqueue_script（）和wp_register_script（）？在WordPress上注册脚本，但是有一个关键区别。 wp_register_script（）仅注册脚本，并且不加入它。这意味着脚本将不会打印，除非以后使用wp_enqueue_script（）拼写。另一方面，WP_ENQUEUE_SCRIPT（）寄存器并升级脚本，这意味着它将在HTML中打印。

我可以在WordPress中加入样式吗？

是的，是的，您可以在WordPress Styles中使用WordPress Styles On WordPress Styles使用wp_enqueue_style（）函数。此功能与WP_ENQUEUE_SCRIPT（）相似，但是它用于样式表，而不是脚本。

什么是什么'wp_enque_scripts的动作钩？您的脚本和样式。当WordPress即将在HTML中打印脚本和样式时，此钩被称为。通过挂接，您可以确保在适当的时间出现脚本和样式。

>为什么在启动脚本或样式时指定依赖项很重要？

指定依赖项确保您的脚本确保您的脚本或样式以正确的顺序加载。如果您的脚本取决于另一个脚本（例如jQuery），则WordPress将确保在您的脚本之前加载jQuery。使用WP_DEQUEUE_SCRIPT（）或WP_DEQUEUE_STYLE（）函数的WordPress中的脚本或样式。如果您想停止加载脚本或样式，这很有用。使用“ admin_enqueue_scripts”动作钩的区域。这与“ wp_enqueue_scripts'挂钩相似，但它用于管理区域而不是前端。

>什么是'wp_print_scripts的动作钩？ Hook是一种较旧的钩子，用于加入脚本。但是，不建议再使用此钩子，因为它可能导致脚本加载顺序的问题。您应该使用“ wp_enqueue_scripts”挂钩。

>我可以有条件地辅助脚本和样式吗？例如，如果要查看某个页面，则可以使用is_page（）函数仅在脚本或样式中使用脚本。这对于性能很有用，因为它可以防止不必要的脚本和样式被加载。

以上是WordPress中的脚本和样式的详细内容。更多信息请关注PHP中文网其他相关文章！

php JavaScript composer json jquery css html print Static if for while include Error Filter register using class Attribute function this WordPress Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：The Definitive Guide to WordPress Custom Post Types下一篇：10 Minutes to a Better WordPress Sidebar

查看更多