自定义js文件不加载在wordpress

Question

我想在wordpress中运行一些JavaScript库为财务计算器。我可以运行这个计算器没有问题，就像一个html文件一样。看到这里的链接http://78.129.155.241/~ryedalel/calculate/

这工作正常，但只要我尝试在wordpress中使页面显示此计算器它不起作用。看到这个链接http://78.129.155.241/~ryedalel/calculate-wordpress/

我已禁用所有插件并更改为默认主题，但错误仍然存​​在。我也遵循各种教程，按照wordpress的要求正确排列脚本，但错误仍然存​​在。

这是我第一次尝试将自定义JavaScript添加到WordPress，所以我可能在这里失去了一些基本的东西，但我不知道是什么。

任何人都可以指向正确的方向吗？

计算器代码如下：

<div ng-controller="financeCalcController"><![if gte IE 9]><div ng-controller="financeCalcController"><link rel="stylesheet" href="http://78.129.155.241/~ryedalel/calculate/js/jquery.nouislider.css" /><link href='http://78.129.155.241/~ryedalel/calculate/js/app.min.css' rel='stylesheet' type='text/css'><div class="finance-calc"><div id="finance-popup-inner"><h2>Finance options with Black Horse</h2><section class="finance-form"><p>How much are you looking to finance, and for how long?</p><div class="cost finance-slider"><div class="cost">£<input style='width: 80%' ng-model="cost"/><span class='finance-caption'>Cost</span></div><div ng-click="calcchange = true" class="slideui" slider ng-model="cost" start=2500 end=40000 step=100></div></div><div class="cost finance-slider"><div class="cost">£<input style='width: 80%' ng-model="deposit"/><span class='finance-caption'>Deposit</span></div><div ng-click="calcchange = true" class="slideui" slider ng-model="deposit" start=0 end=40000 step=10></div></div><div class="months finance-slider"><div class="cost"><h4 class="value" ng-bind="(months) + ' months'"></h4><span class='finance-caption'>Duration</span></div><div ng-click="calcchange = true" class="slideui" slider ng-model="months" start=12 end=84 step=12></div></div><button ng-click="calculatePayments()" ng-bind="(calcchange && nocalc == false| switch : 'Recalculate finance' : 'Calculate finance' )"></button></section><section id="finance-results" ng-class="{changed: calcchange}"><img src="images/blackhorse-finance-calculator.jpg" style="width: 60%;"><h3>Repayment plan</h3><p>We can offer you the following repayment plan:</p><dl><div class="finance-prop"><dt ng-bind="(months) + ' monthly payments'"></dt><dd ng-bind="(payment.term | currency: '£')"></dd></div><div class="finance-prop total"><dt>Total</dt><dd ng-bind="(payment.total | currency: '£' )"></dd></div><p>At <span ng-bind='(apr * 100)'></span>% APR Representative, you'd pay that off by <span ng-bind="(payment.enddate | date : 'MMM yyyy')"></span><br><small><small>* Finance is subject to status and is only available to UK residents aged 18 and over. Finance provided by Black Horse Limited, St William House, Tresillian Terrace, Cardiff CF10 5BH.</small></small></p><p><small>Ryedale Caravans is authorised by the FCA with Limited Permission to conduct certain credit related activity</small><br /><small>We are a credit broker/intermediary and can introduce you to a limited number of lenders who provide funding. We may receive commission or other benefits for introducing you to such lenders.</small></p></dl><div class="clearfix"></div></section></div></div></div><script src='http://78.129.155.241/~ryedalel/calculate/js/libs.min.js'></script><script src='http://78.129.155.241/~ryedalel/calculate/js/app.min.js'>/script><![endif]></div>' 

Answer 1

jQuery中添加外部CSS在不同的字体端和后端 这是可以解决你的问题

add_action('admin_enqueue_scripts', 'add_custom_scripts_and_styles_report'); 
function add_custom_scripts_and_styles_report() { 
    wp_enqueue_script('uniquename_custom_js', plugins_url('js/custom.js?'.rand(), __FILE__), array('jquery'), '1.0', true); 

} 

这里的小功能rand（）会和版本给你js来解决缓存问题，j查询是用于你的js依赖j查询。

OR

function my_load_scripts($hook) { 

    // create my own version codes 
    $my_js_ver = date("ymd-Gis", filemtime(plugin_dir_path(__FILE__) . 'js/custom.js')); 
    $my_css_ver = date("ymd-Gis", filemtime(plugin_dir_path(__FILE__) . 'style.css')); 

    // 
    wp_enqueue_script('custom_js', plugins_url('js/custom.js', __FILE__), array(), $my_js_ver); 
    wp_register_style('my_css', plugins_url('style.css', __FILE__), false, $my_css_ver); 
    wp_enqueue_style ('my_css'); 

} 
add_action('wp_enqueue_scripts', 'my_load_scripts');