wordpress在插件中使用.js脚本

wordpress using .js script in plugin

本文关键字:js 脚本 插件 wordpress      更新时间:2023-09-26

首先,我提交这个问题真的很愚蠢,因为有太多的问题在无数的论坛上讨论,但。。。我已经经历了所有这些,但我仍然无法让它发挥作用。。。。或者我无法用正确的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: '&#x3C;Forrige<---',
    nextText: '--->Næste&#x3E;',
    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