javascript - 将代码添加到 Wordpress 站点页面

Question

我有这段代码，附加在 JsFiddle 中，我想知道如何将它添加到单个 wordpress 页面？我尝试了一些插件，但它们似乎只是弄乱了格式并阻止了 javascript 的工作。任何帮助将不胜感激。代码很多，所以我只在这里添加了一小段代码。

<div id="top">  
    <div class= "toptext">  
        <span>Bet Type</span>
        <select id = "typeoption"> 
            <option value="0">Qualifying Bet</option> 
        </select>
    </div>

https://jsfiddle.net/yLqwthyr/1/

Answer 1

您需要修改您的 jquery 代码以在无冲突模式下运行您的脚本。

如果您打算添加单个 js 文件，则需要使用 wp_enqueue_script() 将其入队。

一种可能的方法，假设您想将表单结构添加到页面(带有 ID 和永久链接)

 add_action('wp_enqueue_scripts', 'se_40975160');

 function se_40975160(){
      if(is_page('your-page')){
           wp_enqueue_script('jquery');
           wp_register_script('form-js', PATHTOJS . '/js/your-js.js', array('jquery'));

      }
 }

对于 jQuery 脚本:当您对依赖于 jQuery 的脚本进行排队时，请注意 WordPress 中的 jQuery 以 noConflict 模式运行，这意味着您不能使用通用的 $ 别名。您必须改用完整的 jQuery。或者，使用 $ 快捷方式将代码放在 noConflict 包装器中。

jQuery( document ).ready( function( $ ) {
// $() will work as an alias for jQuery() inside of this function
[ your code goes here ]
} );

要插入您的表单结构，您可以使用 add_shortcode() 或简单地使用可视化编辑器。我将使用简码来处理 php 的表单响应。您可以在 shortcode api 中查看更多详细信息页面。