1

我正在使用 JQVMaps 在 WordPress 站点中呈现地图。在 WordPress 之外测试代码，一切运行良好。当我将它添加到 WordPress 时，我得到了这个控制台错误：

[错误] TypeError: 'undefined' is not a function (evalating 'jQuery('#vmap').vectorMap')

这是代码：

header.php：

    if (is_page(2)){ ?>
        <link href="jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.world.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.un_regions.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/Chart.js" type="text/javascript"></script>


    <?php }?>

    <?php wp_head(); ?>

页脚.php：

if (is_page(2)){ ?>
        <script type="text/javascript">
            // pie chart options
            var pieOptions = {
                segmentShowStroke : true,
                animateScale : false
            }

            // get pie chart canvas
            var pie= document.getElementById("pie").getContext("2d");

            jQuery(document).ready(function() { //this is where the error is
                jQuery('#vmap').vectorMap({
                    map: 'world_en',
                    backgroundColor: '#fff',
                    borderColor: '#bbb',
                    borderOpacity: 1,
                    borderWidth: .2,
                    color: '#bbb',
                    colors: colored_regions,
                    hoverOpacity: 0.8,
                    selectedColor: '#666666',
                    enableZoom: false,
                    showTooltip: false,
                    onRegionOver : function (element, code, region)
                    {
                        highlightRegionOfCountry(code);
                    },
                    onRegionOut : function (element, code, region)
                    {
                        unhighlightRegionOfCountry(code);
                    },
                    onRegionClick: function(element, code, region)
                    {
                        highlightRegionOfCountry(code);
                        $.ajax('/get_chart_data.php', {
                            data: {region: region},
                            dataType: 'json',
                            success: function(response) {
                                new Chart(pie).Doughnut(response.pieData, pieOptions);
                            }
                        });
                    }   
                });
            });
        </script>

    <?php }?>

我在 content-page.php 文件中有#vmap 和#pie。我已经尝试了几个 jQuery.noConflict(); 解决方案，包括在 ready(function($) 中添加 $ 并在我的 script 标签之后添加 noConflict 函数。它仍然是 WordPress 如何加载 jQuery 的问题还是还有其他问题？您可以在此处找到该站点。谢谢。

4

3 回答 3

1

搜索您的代码 wp_head(); 并将您的代码放在以下位置：

<?php wp_head(); ?>
<link href="<?php bloginfo('stylesheet_directory'); ?>/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.world.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.un_regions.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/Chart.js"></script>
于 2014-09-08T22:34:18.760 回答
1

最好将其添加为插件，因此在更改主题时，所需的更改很少甚至为零。

而正确的做法是将样式/脚本排入队列，以免与其他插件发生冲突。此外，不应从外部源加载 jQuery，始终使用 WordPress 附带的捆绑版本，这也避免了冲突（很多）。

这是您的代码的简化版本。我删除了不可用的文件，以及引用但未包含在您的示例代码中的变量/函数。

<?php
/**
 * Plugin Name: (SO) JQVMap
 * Plugin URI:  https://stackoverflow.com/a/25780694/1287812
 * Author:      brasofilo
 */
add_action( 'wp_enqueue_scripts', 'so_25725356_enqueue' );

function so_25725356_enqueue()
{
    # Run only on given page
    if( !is_page(2) )
        return;

    # Enqueue styles
    wp_enqueue_style( 'jmap-css', plugins_url( '/css/jqvmap.css', __FILE__ ) );

    # Register dependencies files
    wp_register_script( 'jmap-js', plugins_url( '/js/jquery.vmap.js', __FILE__ ) );
    wp_register_script( 'world-js', plugins_url( '/js/maps/jquery.vmap.world.js', __FILE__ ) );

    # Enqueue custom JS file along with dependencies
    wp_enqueue_script( 
        'start-js', 
        plugins_url( '/js/start.js', __FILE__ ), 
        array( 'jquery', 'jmap-js', 'world-js' ), // dependencies
        false, // version
        true   // will load start-js on footer, the rest goes on header
    );
}

和文件start.js：

jQuery(document).ready(function($) {
    $('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        borderColor: '#bbb',
        borderOpacity: 1,
        borderWidth: .2,
        color: '#bbb',
        //colors: colored_regions,
        hoverOpacity: 0.8,
        selectedColor: '#666666',
        enableZoom: false,
        showTooltip: true,
        onRegionOver : function (element, code, region){},
        onRegionOut : function (element, code, region) {},
        onRegionClick: function(element, code, region)
        {
            console.log(region);
        }   
    }); 
});

ID #2 的页面包含：

<div id="vmap" style="width: 600px; height: 400px;"></div>

有关的：

于 2014-09-11T06:37:34.757 回答
0

我认为问题在于你的 javascripts 的路径

    <link href="<?php bloginfo('stylesheet_directory'); ?>/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.world.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.un_regions.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/Chart.js"></script>

请记住将这些文件上传到您当前的主题..

    wp-content/theme/TU_THEME
于 2014-09-08T17:31:58.280 回答