wordpress在插件中使用.js脚本
wordpress using .js script in plugin
首先,我提交这个问题真的很愚蠢,因为有太多的问题在无数的论坛上讨论,但。。。我已经经历了所有这些,但我仍然无法让它发挥作用。。。。或者我无法用正确的wordpress方法让它工作。。。。
我正在写一个带有提交表单的插件,在提交表单中添加一个日期选择器
function datepickertester() {
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style( 'datepicker', plugins_url( '/js/css/datepicker.css', __FILE__ ) );
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.inputtable_date').datepicker({
});
/* Danish initialisation for the jQuery UI date picker plugin. */
/* Written by Jan Christensen ( deletestuff@gmail.com). */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['da'] = {
closeText: 'Luk',
prevText: '<Forrige<---',
nextText: '--->Næste>',
currentText: 'Idag',
monthNames: ['Januar','Februar','Marts','April','Maj','Juni',
'Juli','August','September','Oktober','November','December'],
monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun',
'Jul','Aug','Sep','Okt','Nov','Dec'],
dayNames: ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'],
dayNamesShort: ['Søn','Man','Tir','Ons','Tor','Fre','Lør'],
dayNamesMin: ['Sø','Ma','Ti','On','To','Fr','Lø'],
weekHeader: 'Uge',
showWeek: 'Uge',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['da']);
return datepicker.regional['da'];
}));
});
</script>
<?php
}
上面的代码按预期工作。所以…它是有效的,我知道这不是处理脚本的合适的wordpress方法,所以我把脚本移到了插件文件夹中一个名为jscript-test.js的文件中
这就是问题所在,我已经从论坛讨论和网上教程中注册了50次脚本,但都不适用于我
很明显,我不会列出我尝试过的50种方法。这是我尝试过的一种方法。
add_action( 'wp_register_script', 'script_registration' );
function script_registration() {
wp_register_script('jscript-test', plugins_url( '/js/jscript-test.js', __FILE__ ) );
}
function my_scripts_method() {
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style( 'datepicker', plugins_url( '/js/css/datepicker.css', __FILE__ ) );
wp_enqueue_style( 'jscript-test');
}
我做错了什么?
编辑
我觉得我应该添加更多关于我的插件的信息。我在wordpress页面上用短代码调用下面的函数
当我在页面顶部使用第一个函数i时,在我的函数inputtablefunc()中,它就像一个符咒,当当我在试图注册.js脚本的页面顶部使用第二段代码时,它不起作用。。。我在下面的底部代码中给出了一个如何调用两个函数的例子
function inputtable_func() {
echo '
<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
<table><tr>
<td class="inputtable_label_day"><label for="day">Dag</label></td>
<td class="inputtable_text_dato"><label for="dato">Dato</label></td>
<td class="inputtable_text_start"><label for="start">Start</label></td>
<td class="inputtable_text_slut"><label for="slut">Slut</label></td>
<td class="inputtable_text_pause"><label for="Pause">Pause</label></td>
<td class="inputtable_text_egenb"><label for="egenb">Egen Betaling</label></td>
<td class="inputtable_text_tot"><label for="tot">Total kørt ind</label></td>
</tr><tr>
<td class="inputtable_label_day"><label for="day">Mandag</label></td>
<td class="inputtable_input_dateA"><input class="inputtable_date" type="text" name="dateA" value="' . (isset($_POST['dateA']) ? $dateA : null) . '"></td>
<td class="inputtable_input_startA"><input class="inputtable_start" type="text" name="startA" value="' . (isset($_POST['startA']) ? $startA : null) . '"></td>
<td class="inputtable_input_slutA"><input class="inputtable_slut" type="text" name="slutA" value="' . (isset($_POST['slutA']) ? $slutA : null) . '"></td>
<td class="inputtable_input_pauseA"><input class="inputtable_pause" type="text" name="pauseA" value="' . (isset($_POST['pauseA']) ? $pauseA : null) . '"></td>
<td class="inputtable_input_egenbA"><input class="inputtable_egenb" type="text" name="egenbA" value="' . (isset($_POST['egenbA']) ? $egenbA : null) . '"></td>
<td class="inputtable_input_totA"><input class="inputtable_tot" type="text" name="totA" value="' . (isset($_POST['totA']) ? $totA : null) . '"></td>
</tr><tr>
<td class="inputtable_label_day"><label for="day">Tirsdag</label></td>
<td class="inputtable_input_dateA"><input class="inputtable_date" type="text" name="dateB" value="' . (isset($_POST['dateB']) ? $dateB : null) . '"></td>
<td class="inputtable_input_startA"><input class="inputtable_start" type="text" name="startB" value="' . (isset($_POST['startA']) ? $startA : null) . '"></td>
<td class="inputtable_input_slutA"><input class="inputtable_slut" type="text" name="slutB" value="' . (isset($_POST['slutB']) ? $slutB : null) . '"></td>
<td class="inputtable_input_pauseA"><input class="inputtable_pause" type="text" name="pauseB" value="' . (isset($_POST['pauseB']) ? $pauseB : null) . '"></td>
<td class="inputtable_input_egenbA"><input class="inputtable_egenb" type="text" name="egenbB" value="' . (isset($_POST['egenbB']) ? $egenbB : null) . '"></td>
<td class="inputtable_input_totA"><input class="inputtable_tot" type="text" name="totB" value="' . (isset($_POST['totB']) ? $totB : null) . '"></td>
</tr><tr>
<td class="inputtable_label_day"><label for="day">Onsdag</label></td>
<td class="inputtable_input_dateA"><input class="inputtable_date" type="text" name="dateC" value="' . (isset($_POST['dateC']) ? $dateC : null) . '"></td>
<td class="inputtable_input_startA"><input class="inputtable_start" type="text" name="startC" value="' . (isset($_POST['startC']) ? $startC : null) . '"></td>
<td class="inputtable_input_slutA"><input class="inputtable_slut" type="text" name="slutC" value="' . (isset($_POST['slutC']) ? $slutC : null) . '"></td>
<td class="inputtable_input_pauseA"><input class="inputtable_pause" type="text" name="pauseC" value="' . (isset($_POST['pauseC']) ? $pauseC : null) . '"></td>
<td class="inputtable_input_egenbA"><input class="inputtable_egenb" type="text" name="egenbC" value="' . (isset($_POST['egenbC']) ? $egenbC : null) . '"></td>
<td class="inputtable_input_totA"><input class="inputtable_tot" type="text" name="totC" value="' . (isset($_POST['totC']) ? $totC : null) . '"></td>
</tr><tr>
<td class="inputtable_label_day"><label for="day">Torsdag</label></td>
<td class="inputtable_input_dateA"><input class="inputtable_date" type="text" name="dateD" value="' . (isset($_POST['dateD']) ? $dateD : null) . '"></td>
<td class="inputtable_input_startA"><input class="inputtable_start" type="text" name="startD" value="' . (isset($_POST['startD']) ? $startD : null) . '"></td>
<td class="inputtable_input_slutA"><input class="inputtable_slut" type="text" name="slutD" value="' . (isset($_POST['slutD']) ? $slutD : null) . '"></td>
<td class="inputtable_input_pauseA"><input class="inputtable_pause" type="text" name="pauseD" value="' . (isset($_POST['pauseD']) ? $pauseD : null) . '"></td>
<td class="inputtable_input_egenbA"><input class="inputtable_egenb" type="text" name="egenbD" value="' . (isset($_POST['egenbD']) ? $egenbD : null) . '"></td>
<td class="inputtable_input_totA"><input class="inputtable_tot" type="text" name="totD" value="' . (isset($_POST['totD']) ? $totD : null) . '"></td>
</tr><tr>
<td class="inputtable_label_day"><label for="day">Fredag</label></td>
<td class="inputtable_input_dateA"><input class="inputtable_date" type="text" name="dateE" value="' . (isset($_POST['dateE']) ? $dateE : null) . '"></td>
<td class="inputtable_input_startA"><input class="inputtable_start" type="text" name="startE" value="' . (isset($_POST['startE']) ? $startE : null) . '"></td>
<td class="inputtable_input_slutA"><input class="inputtable_slut" type="text" name="slutE" value="' . (isset($_POST['slutE']) ? $slutE : null) . '"></td>
<td class="inputtable_input_pauseA"><input class="inputtable_pause" type="text" name="pauseE" value="' . (isset($_POST['pauseE']) ? $pauseE : null) . '"></td>
<td class="inputtable_input_egenbA"><input class="inputtable_egenb" type="text" name="egenbE" value="' . (isset($_POST['egenbE']) ? $egenbE : null) . '"></td>
<td class="inputtable_input_totA"><input class="inputtable_tot" type="text" name="totE" value="' . (isset($_POST['totE']) ? $totE : null) . '"></td>
</tr><tr>
<td class="inputtable_label_day"><label for="day">Lørdag</label></td>
<td class="inputtable_input_dateA"><input class="inputtable_date" type="text" name="dateF" value="' . (isset($_POST['dateF']) ? $dateF : null) . '"></td>
<td class="inputtable_input_startA"><input class="inputtable_start" type="text" name="startF" value="' . (isset($_POST['startF']) ? $startF : null) . '"></td>
<td class="inputtable_input_slutA"><input class="inputtable_slut" type="text" name="slutF" value="' . (isset($_POST['slutF']) ? $slutF : null) . '"></td>
<td class="inputtable_input_pauseA"><input class="inputtable_pause" type="text" name="pauseF" value="' . (isset($_POST['pauseF']) ? $pauseF : null) . '"></td>
<td class="inputtable_input_egenbA"><input class="inputtable_egenb" type="text" name="egenbF" value="' . (isset($_POST['egenbF']) ? $egenbF : null) . '"></td>
<td class="inputtable_input_totA"><input class="inputtable_tot" type="text" name="totF" value="' . (isset($_POST['totF']) ? $totF : null) . '"></td>
<br></tr><tr>
<td class="inputtable_label_day"><label for="day">Søndag</label></td>
<td class="inputtable_input_dateA"><input class="inputtable_date" type="text" name="dateG" value="' . (isset($_POST['dateG']) ? $dateG : null) . '"></td>
<td class="inputtable_input_startA"><input class="inputtable_start" type="text" name="startG" value="' . (isset($_POST['startG']) ? $startG : null) . '"></td>
<td class="inputtable_input_slutA"><input class="inputtable_slut" type="text" name="slutG" value="' . (isset($_POST['slutG']) ? $slutG : null) . '"></td>
<td class="inputtable_input_pauseA"><input class="inputtable_pause" type="text" name="pauseG" value="' . (isset($_POST['pauseG']) ? $pauseG : null) . '"></td>
<td class="inputtable_input_egenbA"><input class="inputtable_egenb" type="text" name="egenbG" value="' . (isset($_POST['egenbG']) ? $egenbG : null) . '"></td>
<td class="inputtable_input_totA"><input class="inputtable_tot" type="text" name="totG" value="' . (isset($_POST['totG']) ? $totG : null) . '"></td></tr>
<tr><td class="inputtable_submit"><input type="submit" name="submit" value="send"></td></tr></table>
</form>';
//datepickertester ...This work.....
datepickertester();
// my_scripts_method .....this dossent work......
my_scripts_method();
}
=============================================
多亏了卡洛扬,你帮了我很大的忙:)
我在下面发布了最终结果,以防其他人需要它作为参考:)
function scripts_registration() {
include 'js/jscript-test.js';
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_style( 'datepicker', plugins_url( '/js/css/datepicker.css', __FILE__ ) );
wp_enqueue_script( 'jscript-test', plugins_url( '/js/jscript-test.js', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'scripts_registration' );
首先使用wp_register_script
钩子。这个钩子不好的地方是。。它不存在。:)您应该使用wp_enque_scripts。
第二件事,您正试图使用wp_enque_样式将脚本入队。您应该使用wp_enque_script。
您可以将上面的所有代码合并为以下代码:
function scripts_registration() {
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_style( 'datepicker', plugins_url( '/js/css/datepicker.css', __FILE__ ) );
wp_enqueue_script( 'jscript-test', plugins_url( '/js/jscript-test.js', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'scripts_registration' );
参考:
http://codex.wordpress.org/Function_Reference/wp_register_scripthttp://codex.wordpress.org/Function_Reference/wp_enqueue_scripthttp://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 如何在运行时在angular 2中加载外部js脚本
- 为什么我的控制器没有启动函数.js脚本
- 如何让JS脚本在导航后继续运行(谷歌chrome控制台)
- 如何使用Node.js脚本从Rally获取用户的修订历史
- 在Debian中运行包含load()和print()函数的JS脚本
- 更改路由后,运行一次js脚本
- Yii2从js脚本的页面上添加来自供应商文件夹的图像、css、js文件
- PHP和JS脚本的奇怪问题,在我刷新页面之前第一次失败
- js脚本未加载到jinja2模板中
- Disqus的计数.js脚本在索引中无法正常运行.html与react.js网站
- 按顺序异步加载JS脚本(等待上一个脚本完成)
- node.js脚本中出现Sqlite Sqlite_MISUSE错误
- ASP.NET MVC路由-动态加载.js脚本
- 在执行JS脚本后监视对DOM的更改
- 在 Node.Js 脚本中使用 Javascript 计时器在特定时间触发事件
- 合并 2 个 JS 脚本 - 老派
- 简单的拖放JS脚本不起作用
- 从外部 js 脚本创建元素并插入到 html 中
- 将参数传递到外部 JS 脚本的最佳方法