将代码添加到 Wordpress 网站页面答案

【问题标题】：Add code to Wordpress site page将代码添加到 Wordpress 网站页面
【发布时间】：2016-12-05 22:30:07
【问题描述】：

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

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

【问题讨论】：

什么（类型）页面？您可以轻松地将其插入到模板文件中。
是模板还是 wp 管理仪表板页面？

标签： javascript html css wordpress

【解决方案1】：

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

如果您打算添加单个 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 页面中查看更多详细信息。

【讨论】：

【解决方案2】：

要编辑页面，首先要弄清楚页面使用的模板。

您可以参考WordPress Template Hierarchy 了解更多详情。

或者您可以创建一个page template 用于特定用途，并将页面模板分配给 wp-admin 的页面。

如果还是找不到要编辑的模板，可以使用Show Current Template 和Display Template Name 等插件帮助您查找。

请记住，当您编辑模板文件时，请在子主题中进行。

【讨论】：

【解决方案3】：

步骤：1 为显示目的创建简码

function mycustomcode(){
    /*Place your code here*/
}
add_shortcode('mycustomcode','mycustomcode');

步骤：2 打开要显示的文件只需使用此短代码，

在php文件代码中，

do_shortcode('mycustomcode');

在 WYSWYG（Wordpress 编辑器）中，

['mycustomcode']

步骤：3

让你的样式和脚本排队

【讨论】：