wordpress在插件中使用.js脚本

时间:2015-02-06 16:52:14

标签: javascript php wordpress

首先我真的很愚蠢提交这个问题,因为有太多的人在无数的论坛上讨论过但是......我一直都是通过他们所有人,我仍然无法让它工作....或者我无法使用正确的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页面上用短代码调用下面的函数

当我在页面顶部使用第一个函数时,在我的函数inputtable_func()中,它就像魅力一样 当我在页面上使用第二个代码,我试图注册.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();

}

=============================================== ==============

有点感谢kaloyan,你得到了很大帮助:)

我已经发布了下面的最终结果,如果其他人应该需要这个作为参考,它应该像它一样工作:)

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' );

1 个答案:

答案 0 :(得分:1)

首先,您使用wp_register_script 挂钩。这个钩子的坏处是......它不存在。 :)你应该使用wp_enqueue_scripts

其次,您正尝试使用wp_enqueue_ 样式将您的脚本排入队列。您应该使用wp_enqueue_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_script http://codex.wordpress.org/Function_Reference/wp_enqueue_script http://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts