如何在 wordpress 中包含 jqplot？

Question

我正在开发插件，我在其中使用 jqplot 绘制条形图，我按照他们在文档中所说的相同方式完成，但在 wordpress 中它不起作用，但它正常工作 php，下面是我的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jquery.jqplot.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.pieRenderer.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.pointLabels.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo WP_PLUGIN_URL; ?>/css/jquery.jqplot.css" />
<script>
$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];
         
        plot1 = $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            },
            highlighter: { show: false }
        });
     
        $('#chart1').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
    });
    </script>

<div id="chart1" style="height:400px;width:300px; "></div>

Answer 1

您应该阅读如何正确 enqueue scripts 以确保满足依赖关系。在您的情况下，这是我将第一个脚本排入队列的方式，jquery 应该已经由 WordPress 加载，除非您已将其删除。另外，将所有脚本移动到子主题目录下，就像我在下面所做的那样。或者创建一个合适的插件并将它们嵌套在它下面，而不是像你所做的那样嵌套在根插件目录中。

function wpb_adding_scripts() {
     wp_register_script('jqplot', get_template_directory_uri() . '/js/jquery.jqplot.js', array('jquery'),'1.1', true);
     wp_enqueue_script('jqplot');
}


add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

如何在 wordpress 中包含 jqplot？

how to include jqplot in wordpress?

javascript

jquery

wordpress

jqplot