1

WordPress サイトでマップをレンダリングするために JQVMaps を使用しています。WordPress の外でコードをテストすると、すべてが完璧に動作します。WordPress に追加すると、次のコンソール エラーが発生しました。

[エラー] TypeError: 'undefined' は関数ではありません ('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($) に追加すること、スクリプト タグの直後に noConflict 関数を追加することが含まれます。WordPress が jQuery をロードする方法にまだ問題があるのでしょうか、それとも別の問題がありますか?サイトはこちらにあります。ありがとうございます。

4

3 に答える 3

1

これをプラグインとして追加することをお勧めします。そのため、テーマを変更する場合、必要な変更は最小限またはゼロです。

正しい方法は、他のプラグインとの競合を避けるために、スタイル/スクリプトをキューに入れることです。また、jQuery は外部ソースからロードするべきではありません。常に WordPress に同梱されているバージョンを使用してください。これにより、競合も回避されます (多くの競合が発生します)。

これは、コードの簡略化されたバージョンです。使用できないファイルと、参照されているがサンプル コードに含まれていない vars/functions を削除しました。

<?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 に答える