将Java脚本/HTML添加到WordPress中

我做了这个javascript，以便在视频结束时获得电子邮件选择加入表单。我现在正在寻找的是将此代码带到wordpress，我对整个WP codex结构并不十分熟悉。有人能帮我解决这个问题吗。

   <!DOCTYPE html>
   <html>

  <head>      
 <style>

#overlayContactForm {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%;
 text-align:center;
 z-index: 1000;
  } 
    #overlayContactForm div {
     width: 428px;
    margin: 65px;
    background-color: #fff;
    border: 1px solid #000;
    padding: 15px;
    text-align: center;
    height: 200px;


   }

  </style>


  </head>
  <body>


 <div id="player"></div>
 <script src="http://www.youtube.com/player_api"></script>

 <div align="center">

 <script>

// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player(\'player\', {
      height: \'390\',
      width: \'640\',
      videoId: \'VhvUEhxL1DQ\',
      playerVars: {rel: 0},
      events: {
        \'onReady\': onPlayerReady,
        \'onStateChange\': onPlayerStateChange
      }
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {        
    if(event.data === 0) {            


// $(\'#lightbox-panel\').lightBox();


el = document.getElementById("overlayContactForm");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";


    }
}

 </script>
 </div>

 <div id="overlayContactForm">

  <div>
  <h1> Text Header Info </h1>
  <form class="form-inline">
 <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email 
   Address">
 <button type="submit" class="btn btn-default">Sign in</button>
 </form>
 <p> Testing email opt-in - Video/Form </p>
 </div>
 </div>


</body>
</html>

/* overlay-contact-form.css */ #overlayContactForm { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; } #overlayContactForm div { width: 428px; margin: 65px; background-color: #fff; border: 1px solid #000; padding: 15px; text-align: center; height: 200px; } /* my-youtube.js */ // create youtube player var player; function onYouTubePlayerAPIReady() { player = new YT.Player(\'player\', { height: \'390\', width: \'640\', videoId: \'VhvUEhxL1DQ\', playerVars: { rel: 0 }, events: { \'onReady\': onPlayerReady, \'onStateChange\': onPlayerStateChange } }); } // autoplay video function onPlayerReady(event) { event.target.playVideo(); } // when video ends function onPlayerStateChange(event) { if (event.data === 0) { // $(\'#lightbox-panel\').lightBox(); el = document.getElementById("overlayContactForm"); el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; } } /* functions.php */ /** * Proper way to enqueue scripts and styles */ function theme_name_scripts() { wp_enqueue_style(\'style-name\', get_stylesheet_uri(). \'/css/overlay-contact-form.css\'); wp_enquue_script(\'youtube_api\', \'http://www.youtube.com/player_api\'); wp_enqueue_script(\'custom-script\', get_stylesheet_directory_uri().\'/js/my-youtube.js\', array(\'jquery\', \'youtube_api\', \'0.1.1\', true) ); } add_action(\'wp_enqueue_scripts\', \'theme_name_scripts\');

小码农CODE

相关推荐

如何在没有Java脚本的情况下将HTML5‘Required’属性添加到wp_Dropdown_Categories()？