自定義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');