有没有办法使用wp_enqueue_script直接添加JavaScript？

Posted 2021-04-07

有没有办法直接将javascript添加到页面，但让Wordpress等待jQuery加载？就像使用wp_enqueue_script一样？

在自定义页面模板中，我有以下代码：

<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') : ?>
    <script>
        $(function() {
            App.dialogs.afterPetitionCreate();
        });
    </script>
<?php endif; ?>

Wordpress咆哮$未定义。现在我不想加载整个.js文件只是为了调用该函数。所以在这个意义上，wp_enqueue_script不是一个选择。我只想直接在页面上激活一些JavaScript，但我确实想等待jQuery加载。

这也是我也尝试过的，使用Wordpress将JavaScript添加到页脚：

<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') :
    add_action('wp_footer', 'my_footer_scripts');
    function my_footer_scripts() { ?>
        <script>
            $(function () {
                App.dialogs.afterPetitionCreate();
            });
        </script>
    <?php } ?>
<?php endif; ?>

但不幸的是，同样的错误出现$ is undefined。那么在自定义Wordpress页面模板上快速加载一些Javascript并等待jQuery加载的正确方法是什么？

答案

我认为这不是一个好习惯。

最好将逻辑更改为以下内容：

<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') : ?>
    <input type='hidden' id='status' name='status' value='newly_created'>
<?php endif; ?>

的script.js：

$(function() {
    if ( $('#status').val() === 'newly_created' ) {
        App.dialogs.afterPetitionCreate()
    }
});

和

wp_enqueue_script( 'afterPetitionCreate', '/path/to/script.js', array( 'jquery' ), '', true );

附：你可以将wp_enqueue_script()包装成is_page_template( 'my-cool-page-teplate.php' )。

另一答案

您是否尝试在文档就绪事件中运行脚本，如下面的代码？

<script>
jQuery(document).ready(function($){
   $(function () {
      App.dialogs.afterPetitionCreate();
   });
});
</script>

.ready事件发生在加载文档或DOM的对象时，这使得完美地放置所有jquery事件和其他函数。

另一答案

这是我最终编写的代码，完全符合我的要求。就像提交Parkash提到的那样，需要使用jQuery而不是$。

/*
 * Adds a single bit of Javascript to the page.
 */
function theme_embed_script($script) {
    add_action('wp_footer', function ($script) {
        echo '<script type="text/javascript">' . $script . '</script>';
    }, 10);
    do_action('wp_footer', $script);
}

用法：

<?php theme_embed_script('jQuery(function () { alert("Hello"); });'); ?>

或者像大卫提到的那样使用Wordpress的wp_add_inline_script()脚本。