自定义插件--CSS起作用,JS不行

时间:2015-04-16 作者:Mike

在我正在制作的插件中,我使用单独的js和css文件(\\\\uuuuuu0.js、\\\\uuuuuu0.css)。这是我第一次包含外部。js文件。

我以以下方式在插件的主目录中注册和排队。php文件:

function CA_register_plugin_styles() {
wp_register_style( \'CA_2014_bookpage_css\', plugins_url( \'/CA_2014-bookpage-plugin/CA_2014_bookpage-css.css\' ) );
wp_enqueue_style( \'CA_2014_bookpage_css\' );
}
add_action( \'wp_enqueue_scripts\', \'CA_register_plugin_styles\' );

function CA_register_plugin_script() {
wp_register_script( \'CA_2014_bookpage_js\', plugins_url( \'/CA_2014-bookpage-plugin/CA_2014-bookpage-plugin.js\', __FILE__) );
wp_enqueue_script( \'CA_2014_bookpage_js\' );
}
add_action( \'wp_enqueue_scripts\', \'CA_register_plugin_script\' );
我试过了everything 让它为JS工作。但事实并非如此。(不过,CSS样式加载正确。)所以我说见鬼去吧,并在标题的head标记中的适当位置添加了对脚本的直接引用。php,如下所示:

<script src="<?php plugins_url(\'/CA_2014-bookpage-plugin/CA_2014-bookpage-plugin.js\', __FILE__); ?>" type="text/javascript"></script>
那也没用。我仔细检查了它是否包含在页面中(这在我尝试将其正确排队时从未发生过),并且带有src的script标记也在那里,但没有定义我调用的任何函数(浏览器中可爱的JavaScript控制台很高兴告诉我这一点)

我只能得出结论,我的JavaScript文件中存在一些致命错误,但JSLint找不到它。

所以我想我会把它扔给StackOverflow社区!我的JS文件、注册/排队等可能有什么问题。?(我的插件处于活动状态[但在我编辑它时不是这样。]我不使用JQuery。中没有脚本标记。js文件。还有什么其他的吗?)

下面是整个JavaScript文件(不省略任何内容)。

如果你发现什么,请告诉我!提前谢谢你。

<小时>

    var ActiveTimeout = NaN;
    var FromPage = NaN;

    function Handle_Book() {
        document.getElementsByClassName("ca_book")[0].style.display = "block";
        document.getElementsByClassName("ca_book")[0].style.left = "0";
        FromPage = 0;
        //window.alert("Book Handled");
        Handle_Book_Height();
        document.getElementById("Book_Bar_Bottom").innerHTML = "1 of " + document.getElementsByClassName("ca_book").length.toString();
    }


    function Handle_Book_Height() {
        var h = 0;
        var col = document.getElementsByClassName("ca_book");
        for (var i = 0; i < col.length; i++) {
            if (parseFloat(col[i].clientHeight) > h) {
                h = parseFloat(col[i].clientHeight);
            }
        }
        document.getElementById("Book").style.height = h.toString() + "px";

        window.setTimeout(Handle_Book_Height, 250);
    }


    function Book_Button(direction) {

        var col = document.getElementsByClassName("ca_book");

        //var from = -1;
        //var t = 0;
        //for (t = 0; t < col.length; t++) {
        //  if (parseFloat(col[t].style.left) == 0) {
        //      from = t;
        //  }
        //}

        var from = FromPage;
        if (from == NaN) { return; }

        //alert(col.length);

        var to = from + direction;

        if (to < 0) {
            to = col.length - 1;
        } else if (to >= col.length) {
            to = 0;
        }

        //if (direction < 0) { alert("To: " + to.toString() + "; From: " + from.toString()); }

        /*if (ActiveTimeout != null) {
            clearTimeout(ActiveTimeout);
            ActiveTimeout = null;
        }*/

        //if ((!(to == 0 && direction == 1)) && (!(to == col.length - 1 && direction == -1))) {
        if ((!(to == 0 && from == col.length - 1)) && (!(to == col.length - 1 && from == 0))) {
            // Non-looping case
            Lerp_Page(from, to, direction * 5);

        } else {
            // Looping case
            for (var c = 0; c < col.length - 1; c++) {
                Lerp_Page(from-(direction*c), from-(direction*(c+1)), -direction * 10);

                //alert((c*250).toString());
                /*window.setTimeout(
                    function() {
                        Lerp_Page(from-(direction*c), from-(direction*(c+1)), -direction * 10);
                    }, c+10 );*/
                //alert("Looping");
            }
        }
    }


    function Lerp_Page(from, to, speed) {
        // from and to are indices; sign of speed indicates which side to is coming from
        var pgs = document.getElementsByClassName("ca_book");

        if (pgs[to] == null || pgs[from] == null || FromPage != from) {
            //alert("PROBLEM - To: " + to.toString() + "; From: " + from.toString());
            setTimeout(function () { Lerp_Page(from, to, speed); }, 20 );
            return;
        }

        if (parseFloat(pgs[from].style.left) == 0) {
            if (speed > 0) {
                pgs[to].style.left = "100%";
            } else {
                pgs[to].style.left = "-100%";
            }
            pgs[to].style.display = \'block\';
            document.getElementById("Book_Bar_Bottom").innerHTML = (to+1).toString() + " of " + document.getElementsByClassName("ca_book").length.toString();
        }

        var dsign = 1;
        if (speed < 0) { dsign = -1; }

        if (parseFloat(pgs[to].style.left) * dsign > 0) {
            pgs[to].style.left = (parseFloat(pgs[to].style.left) - speed).toString() + \'%\';
            pgs[from].style.left = (parseFloat(pgs[from].style.left) - speed).toString() + \'%\';
        }

        if (parseFloat(pgs[to].style.left) * dsign <= 0) {
            pgs[to].style.left = \'0\';
            pgs[from].style.display = \'none\';
            ActiveTimeout = null;
            FromPage = to;
            return true;
        }

        ActiveTimeout = setTimeout(function () { Lerp_Page(from, to, speed); }, 20 );

    }

1 个回复
最合适的回答,由SO网友:Dking 整理而成

请尝试以下代码到您的插件页面。如果脚本文件是插件根目录。

function plugin_adding_scripts() {
 wp_register_script(\'my_test_script\', plugins_url(\'testscript.js\', __FILE__), array(\'jquery\'),\'1.1\', true);
 wp_enqueue_script(\'my_test_script\');
}

 add_action( \'wp_enqueue_scripts\', \'plugin_adding_scripts\' ); 
此外:http://blog.aztora.com/add-css-js-into-wordpress-plugin/

结束

相关推荐

使用插件中的CSS覆盖主题CSS

我见过很多关于用主题覆盖插件CSS的问题(Example 1, Example 2, 等等),但我正在寻找相反的结果。我安装了一个带有一些自定义CSS的工作板插件,但是我的主题覆盖了该插件的CSS。这并不是一个破坏交易的游戏,但我不喜欢我的主题在CSS上的表现。我当然可以获取我想要的CSS并将其放入我的孩子主题的样式表中,但我认为有一个更优雅、更简单的解决方案。我正在使用插件WP作业管理器和来自优雅主题的主题Divi。该插件总体上运行良好,没有问题,但我更喜欢在默认主题中使用时表单字段的外观(例如,二十一