我需要在我的WordPress博客中创建一个交互式地图，并希望使用jQuery maphilight。
我在一个HTML文件中测试了maphilight，效果很好，但我想在WordPress中使用它，所以需要调用JS文件并编写一些类似于我在HTML文件中使用的代码。我该怎么做？
这里是我的代码：
<!DOCTYPE html>
<html>
<head>
<script src="jq/jquery-2.1.4.min.js"></script>
<script src="jq/jquery.maphilight.js"></script>
</head>
<body>
<script>
jQuery(function(){
jQuery(\'#ImageMap1\').maphilight();
});
</script>
<img id="ImageMap1" src="jq/cc.jpg" border="0" width="1212" height="812" orgWidth="1212" orgHeight="812" usemap="#image-maps-2015-12-08-070211" alt="" />
<map name="image-maps-2015-12-08-070211" id="ImageMapsCom-image-maps-2015-12-08-070211">
<area shape="rect" coords="1210,810,1212,812" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area alt="as" title="as" href="http://www.image-maps.com/as" shape="poly" coords="50,312,369,318,368,494,37,487" style="outline:none;" target="_self" />
<area alt="ad" title="ad" href="http://www.image-maps.com/ad" shape="poly" coords="358,512,38,507,47,578,351,572" style="outline:none;" target="_self" />
<area alt="aa" title="aa" href="http://www.image-maps.com/aa" shape="poly" coords="971,67,393,48,376,809,965,806" style="outline:none;" target="_self" />
</map>
</body>
</html>
SO网友:jgraup
你可以用这个作为shortcode. 将此内容放入您的内容中。
[maphilight]
Register 短代码。
// Add Shortcode
function maphilight_shortcode() { ?>
<img id="ImageMap1" src="<?php echo get_stylesheet_directory_uri() . \'/jq/cc.jpg\'; ?>" border="0" width="1212" height="812" orgWidth="1212" orgHeight="812" usemap="#image-maps-2015-12-08-070211" alt="" />
<map name="image-maps-2015-12-08-070211" id="ImageMapsCom-image-maps-2015-12-08-070211">
<area shape="rect" coords="1210,810,1212,812" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area alt="as" title="as" href="http://www.image-maps.com/as" shape="poly" coords="50,312,369,318,368,494,37,487" style="outline:none;" target="_self" />
<area alt="ad" title="ad" href="http://www.image-maps.com/ad" shape="poly" coords="358,512,38,507,47,578,351,572" style="outline:none;" target="_self" />
<area alt="aa" title="aa" href="http://www.image-maps.com/aa" shape="poly" coords="971,67,393,48,376,809,965,806" style="outline:none;" target="_self" />
</map>
<script src="<?php echo get_stylesheet_directory_uri() . \'/jq/jquery-2.1.4.min.js\'; ?>"></script>
<script src="<?php echo get_stylesheet_directory_uri() . \'/jq/jquery.maphilight.js\'; ?>"></script>
<script>
jQuery(function(){
jQuery(\'#ImageMap1\').maphilight();
});
</script>
<?php
}
add_shortcode( \'maphilight\', \'maphilight_shortcode\' );
注意：此代码未经测试，生成时使用
GenerateWP.
如果不使用短代码，则始终可以使用wp_enqueue_script 并构建一个custom page template 显示代码的步骤
