wordpress 在插件中使用 .js 脚本

Question

首先我提交这个问题真的很愚蠢，因为在无数论坛上讨论了很多，但是......我已经通过了所有这些，但我仍然无法让它工作......或者我无法使用正确的 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 次，但是 none 对我有用

很明显，我不会列出我尝试过的所有 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' );

Answer 1

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

第二件事，您正在尝试使用 wp_enqueue_style 使您的 script 入队。你应该使用 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

wordpress 在插件中使用 .js 脚本

wordpress using .js script in plugin

javascript

php

wordpress