Question

我正在尝试在wordpress中运行一些用于财务计算器的JavaScript库。我可以独立运行这个计算器没问题，就像一个html文件。请参阅此处的链接http://78.129.155.241/~ryedalel/calculate/

这样可以正常工作，但是一旦我尝试在wordpress中创建一个页面来显示这个计算器就不行了。请参阅此链接http://78.129.155.241/~ryedalel/calculate-wordpress/

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

这是我第一次尝试向wordpress添加自定义javascript，所以我可能会遗漏一些基本的东西，但我不知道是什么。

有人能指出我正确的方向吗？

计算器代码如下：

<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中为font-end和back-end添加不同的外部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解决缓存问题，如果你的js依赖于j查询，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');

自定义js文件未在wordpress

1 个答案: