Question

我试图在WordPress页面上为youtube视频实现一个简单的播放按钮。

<a id="play-video" href="#">Play Video</a><br />

<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>


<script type="text/javascript">
    jQuery('#play-video').on('click', function(ev) {
    jQuery("#video")[0].src += "&autoplay=1";
  ev.preventDefault();
 });
</script>

我发现原始码笔：here

它在Codepen和js小提琴上工作正常，但对WP页面没有影响。

我错过了一些基本的东西吗？

非常感谢任何帮助

Answer 1

几乎可以保证你不会在这个项目中加载jQuery，而你添加的代码依赖于jQuery。

在你的functions.php文件中（在你的主题文件夹中），添加下面的代码（确保在 php开/关标签之间，而不是在它们之前/之后.php open tag看起来像<?php和结束标记?>）：

add_action('wp_enqueue_scripts', 'enqueue_my_jquery');

function enqueue_my_jquery() {
    wp_enqueue_script('jquery');
}

您可以找到其他资源，向您展示如何将jQuery直接添加到header.php文件中 - 不要这样做。它可以（并且会）导致各种各样的问题。

Answer 2

<script type="text/javascript">     

    document.body.addEventListener('load', function() {

        //jQuery should almost definitely be accessible in this scope

        var $ = jQuery;

        $('#play-video').on('click', function(ev) {
            $('#video')[0].src += "&autoplay=1";
            ev.preventDefault();
        });

    });

</script>

这就是我认为将一个javascript添加到Wordpress的hacky方法。

我建议您始终将脚本放在单独的文件中，并使用Wordpress的PHP函数wp_enqueue_script以确保脚本依赖顺序。

Answer 3

我在https://codex.wordpress.org/Using_Javascript发现了这个问题在帖子中的JavaScript 部分下：

要在帖子中加入Javascript ，您需要将调用合并到调用JavaScript本身的脚本文件。

transition

我需要将脚本放入.js文件中并调用该文件以及脚本本身。

非常感谢你的帮助！

Wordpress内联JS - 无法正常工作

3 个答案: