Question

我对jQuery和Wordpress（以及Bootstrap等）应该做些什么感到困惑。我读了this article为什么我不应该加载我自己的jQuery，因为Wordpress已经拥有它并加载另一个可能导致一堆问题。但这是一个真实的例子。我已经加载jQuery版本2.1.0以便使用下面的函数（它没有工作;它实际上只有一半工作，因为它应该是一个文件输入，您可以单击以选择文件或拖放要上载的文件，但单击以添加文件不会显示图像预览）。我不得不使用这个版本，因为Wordpress附带的版本没有完成这项工作。这足以说明理由吗？或者有没有办法让我的功能工作而不必参考v.2.1.0？现在加载另一个版本的jQuery有什么害处吗？这篇文章写于2013年。

此外，我正在使用Bootstrap制作一个子主题，并且也将制作一个插件。使用Bootstrap制作子主题和插件是否有任何冲突？我的菜鸟意见是让所有内容都与Wordpress中已经提供的内容一致，但我希望听到一些更有经验的人。

的functions.php

<?php

function my_scripts() {
wp_register_script('jquery1', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js', false, null);
wp_enqueue_script('jquery1');
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '3.3.5', true );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js');
}
add_action('wp_enqueue_scripts', 'my_scripts');

function my_styles() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_styles');



?>

JS

$(window).load(function(){
    $('#drop').click(function(){
        console.log('click');
        $('#fileBox').trigger('click');
    });
    //Remove item
    $('.fileCont span').click(function(){
        $(this).remove();
    });
});
if (window.FileReader) {
    var drop;
    addEventHandler(window, 'load', function () {
        var status = document.getElementById('status');
        drop = document.getElementById('drop');
        var list = document.getElementById('list');

        function cancel(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }

        // Tells the browser that we *can* drop on this target
        addEventHandler(drop, 'dragover', cancel);
        addEventHandler(drop, 'dragenter', cancel);

        addEventHandler(drop, 'drop', function (e) {
            e = e || window.event; // get window.event if e argument missing (in IE)   
            if (e.preventDefault) {
                e.preventDefault();
            } // stops the browser from redirecting off to the image.

            var dt = e.dataTransfer;
            var files = dt.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                //attach event handlers here...

                reader.readAsDataURL(file);
                addEventHandler(reader, 'loadend', function (e, file) {
                    var bin = this.result;
                    var fileCont = document.createElement('div');
                    fileCont.className = "fileCont";
                    list.appendChild(fileCont);

                    var fileNumber = list.getElementsByTagName('img').length + 1;
                    status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

                    var img = document.createElement("img");
                    img.file = file;
                    img.src = bin;
                    img.className = "thumb";
                    fileCont.appendChild(img);

                    var newFile = document.createElement('div');
                    newFile.innerHTML = file.name;
                    newFile.className = "fileName";
                    fileCont.appendChild(newFile);

                    var fileSize = document.createElement('div');
                    fileSize.className = "fileSize";
                    fileSize.innerHTML = Math.round(file.size/1024) + ' KB';
                    fileCont.appendChild(fileSize);

                    var progress = document.createElement('div');
                    progress.className = "progress";
                    progress.innerHTML = '<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar progress-bar-success" role="progressbar" style="width: 100%"></div>';
                    fileCont.appendChild(progress);

                    var remove = document.createElement('div');
                    remove.className = "remove";
                    remove.innerHTML = '<span class="glyphicon glyphicon-remove"></div>';
                    list.appendChild(remove);


                }.bindToEventHandler(file));
            }
            return false;
        });
        Function.prototype.bindToEventHandler = function bindToEventHandler() {
            var handler = this;
            var boundParameters = Array.prototype.slice.call(arguments);
            //create closure
            return function (e) {
                e = e || window.event; // get window.event if e argument missing (in IE)   
                boundParameters.unshift(e);
                handler.apply(this, boundParameters);
            }
        };
    });
} else {
    document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}


function addEventHandler(obj, evt, handler) {
    if (obj.addEventListener) {
        // W3C method
        obj.addEventListener(evt, handler, false);
    } else if (obj.attachEvent) {
        // IE method.
        obj.attachEvent('on' + evt, handler);
    } else {
        // Old school method.
        obj['on' + evt] = handler;
    }
}


//Not plugged yet
var bar = $('.progress-bar');
$(function(){
  $(bar).each(function(){
    bar_width = $(this).attr('aria-valuenow');
    $(this).width(bar_width + '%');
  });
});

Answer 1

您可能不得不添加自己的版本，因为根据Wordpress最佳做法，现有版本正在使用noConflict()删除$别名。

由于您使用的是$，因此您会收到错误$ is undefined。

添加新版本会对分配给初始版本的任何插件产生严重影响，您只需要加载一次jQuery.js.

要在noConflict()环境中使用，只需将所有代码包装在：

中

(function($){
   // your code here can use `$`

})(jQuery);

我应该使用外部jQuery而不是Wordpress中提供的jQuery吗？

1 个答案: