'jQuery not defined'适用于Google Maps / Advanced Custom Fields / JointsWP

Question

使用高级自定义字段在WordPress中工作并使用JointsWP（Foundation 5）主题。构建一个地图，显示自定义帖子类型中的多个图钉，并使用高级自定义字段中的Google地图字段。我之前在Bootstrap3上完成了这项精确的工作，它很容易就能完成。代码来自ACF forum here上的教程。

我的地图不会显示。在控制台中，我得到ReferenceError: jQuery is not defined。 JointsWP主题最有可能，因为我使用的确切代码在BS3中完美运行。我在我的functions.php中使用wp_enqueue_script调用Google Maps API。

非常感谢任何帮助！

js -

<?php get_header(); ?>

<script type="text/javascript">
	(function($) {

	/* render_map */

	function render_map( $el ) {

		// var
		var $markers = $el.find('.marker');

		// vars
		var args = {
			zoom		: 16,
			center		: new google.maps.LatLng(0, 0),
			mapTypeId	: google.maps.MapTypeId.ROADMAP
	};
		
		// create map	        	
		var map = new google.maps.Map( $el[0], args);

		// add a markers reference
		map.markers = [];	
			
		// add markers
		$markers.each(function(){

			add_marker( $(this), map );

		});

		// center map
		center_map( map );	
		}

		// create info window outside of each - then tell that singular infowindow to swap content based on click
		var infowindow = new google.maps.InfoWindow({
		content		: '' 
	});

	/* add_marker */

	function add_marker( $marker, map ) {

	// var
	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map
	});

	// add to array
	map.markers.push( marker );

	// if marker contains HTML, add it to an infoWindow
	if( $marker.html() )
	{
		// show info window when marker is clicked & close other markers
		google.maps.event.addListener(marker, 'click', function() {
			//swap content of that singular infowindow
					infowindow.setContent($marker.html());
			        infowindow.open(map, marker);
		});
		
		// close info window when map is clicked
		     google.maps.event.addListener(map, 'click', function(event) {
		        if (infowindow) {
		            infowindow.close(); }
				}); 	
	}

	}

	/* center_map */

		function center_map( map ) {

			// vars
			var bounds = new google.maps.LatLngBounds();

			// loop through all markers and create bounds
			$.each( map.markers, function( i, marker ){

				var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

				bounds.extend( latlng );

		});

			// only 1 marker?
			if( map.markers.length == 1 )
			{
				// set center of map
			    map.setCenter( bounds.getCenter() );
			    map.setZoom( 16 );
			}
			else
			{
				// fit to bounds
				map.fitBounds( bounds );
			}

		}

		/* document ready*/

		(document).ready(function(){
			$('.acf-map').each(function(){
				render_map( $(this) );
			});
		});

	})(jQuery);
</script>

PHP模板 -

<div class="acf-map">

                    <?php while ( $mapposts->have_posts() ) : $mapposts->the_post(); ?>
                    <?php
                    $location = get_field('map_address_condo_project');
                    $gtemp = explode (',',  implode($location));
                    $coord = explode (',', implode($gtemp));
                    ?>

                    <div class="marker" data-lat="<?php echo $location[lat]; ?>" data-lng="<?php echo $location[lng]; ?>">
                        <p class="address"><?php  echo $gtemp[0]; ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>       
                    </div>

                    <?php endwhile; ?>

                </div><!-- .acf-map -->

                <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>

Answer 1

您需要确保在jQuery之后将脚本排入队列。 JointsWP在页脚中加载jQuery，但这可以很容易地移动到标题中。在assets / functions / enqueue-scripts.php中：

在页脚中加载jQuery：

wp_enqueue_script（'jquery'，get_template_directory_uri（）。'/ bower_components/foundation/js/vendor/jquery.js'，array（），'2.1.3'，true）;

在标题中加载jQuery：

wp_enqueue_script（'jquery'，get_template_directory_uri（）。'/ bower_components/foundation/js/vendor/jquery.js'，array（），'2.1.3'，false）;