Wordpress inline JS - can not get working

Question

Я пытаюсь реализовать простую кнопку воспроизведения для youtube видео на странице WordPress.

<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

Я нашел это на: https://codex.wordpress.org/Using_Javascript
Под JavaScript в сообщениях раздел:

Чтобы включить Javascript внутри пост, вам нужно объединить вызов файл сценария с вызовом к самому JavaScript.

<script type="text/javascript" src="/scripts/updatepage.js"></script> 
<script type="text/javascript"> 
<!-- 
updatepage(); 
//--></script> 

мне нужно поместить скрипт в файл .js и призывают к этому файлу, а также самого сценария.

Большое спасибо за помощь!

Answer 2

Почти гарантированно вы не загружаете JQuery в этом проекте, и ваш код, который вы добавляете полагается на JQuery.

В файле functions.php (в папке темы), добавьте следующий код (убедитесь, что между PHP открыть/закрыть теги, а не до/после них. PHP с открытым теги взгляд, как <?php и закрывающий тег ?>):

add_action('wp_enqueue_scripts', 'enqueue_my_jquery'); 

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

Вы можете найти другие ресурсы, которые показывают вам, как добавить Jquery непосредственно в файл header.php - не делают этого. может (и будет) вызывать множество проблем.

Answer 3

<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.

Я бы порекомендовал всегда иметь ваши скрипты в отдельных файлах и использовать PHP-функцию Wordpress wp_enqueue_script, чтобы обеспечить порядок зависимости скриптов.