JavaScript无法加载
我在线上发现了这个非常棒的静态html / css模板，想将其转换为wordpress主题，但是在转换之后，我注意到html / css正在从inspect元素视图加载，尽管（在视觉上）仅菜单，部分背景屏幕上显示了页脚和页脚，而其余的身体内容似乎正在隐藏。
检查我的functions.php是否有任何使javascript排队的错误。警报有效，但其他脚本似乎未加载。我确定我犯了一个菜鸟错误，并且编码错误。
我正在xampp上开发
下载项目文件：https://drive.google.com/open?id=1ty9-LsirC6cPA2y-TuirC2IDpEYPOOug
function theme_scripts()
{
wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'alert', get_template_directory_uri() . '/js/alert.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'bootstrap-datepicker', get_template_directory_uri() . '/js/bootstrap-datepicker.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'google-map', get_template_directory_uri() . '/js/google-map.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.animateNumber.min', get_template_directory_uri() . '/js/jquery.animateNumber.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.easing.1.3', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.magnific-popup.min', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.min', get_template_directory_uri() . '/js/jquery.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.stellar.min', get_template_directory_uri() . '/js/jquery.stellar.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.waypoints.min', get_template_directory_uri() . '/js/jquery.waypoints.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery-3.2.1.min', get_template_directory_uri() . '/js/jquery-3.2.1.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery-migrate-3.0.1.min', get_template_directory_uri() . '/js/jquery-migrate-3.0.1.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'owl.carousel.min', get_template_directory_uri() . '/js/owl.carousel.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'popper.min', get_template_directory_uri() . '/js/popper.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'scrollax.min', get_template_directory_uri() . '/js/scrollax.min.js', array ( 'jquery' ), 1.1, false);
}
add_action( 'wp_enqueue_scripts', 'theme_scripts', 50, 0 );
致谢
答案 0 :(得分：0)
要加载JS文件，您需要：
footer.php <script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
然后添加此内容：
<?php wp_footer(); ?>
这是Wordpress页脚，它调用您的wp_enqueue()用于注入脚本标签的钩子（仅类似于wp_head()的页脚）。建议您在functions.php中也包含Google Maps脚本-将所有外部脚本都放在一个位置。
似乎问题在于您将HTML模板复制为Wordpress主题。它们有差异，虽然不是太大-这是其中之一。 ：）
这与丢失的图像相同：HTML模板的目录结构与Wordpress安装的目录结构不同。您只需要纠正它，一切都会好起来的。
答案 1 :(得分：0)
代替
wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);
使用此
wp_register_script( 'aos', get_template_directory_uri() . '/js/aos.js', array () , 1, 1, 1);
wp_enqueue_script ('aos');
答案 2 :(得分：0)
在2019年6月20日更新的 wordpress主题中使用主题：
更改：将"/images/更改为"<?php echo get_template_directory_uri(); ?>/images/
更改：将url(/images/更改为url(<?php echo get_template_directory_uri(); ?>/images/
更改：将url('/images/更改为url('<?php echo get_template_directory_uri(); ?>/images/
建议：使用url('...')代替url(...)（这样就可以确保将其视为字符串），但是至少在一个主题中仅使用一种语法。如果您为模板创建约定并遵守约定，则管理起来会更容易。
未找到：wp-content/themes/eLeadWorks/js/jquery.timepicker.min.js（该文件不在该库中，因此我注释了注册并退出）
未找到：wp-content/themes/eLeadWorks/js/example.js（该文件不在该库中，因此我注释了注册并退出）
注销脚本：wp_deregister_script('jquery-migrate');（将其放在wp_register_('jquery-migrate-3.0.1.min', ...)之前
重命名脚本句柄（建议）：不要在脚本注册句柄中使用版本号。这样，您将无法根据需要自由更新版本。 （因此jquery-migrate-3.0.1.min不好，jquery-migrate很好）
更改：从wp_register_style( 'fonts', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' );到wp_register_style( 'fonts', 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' );（不需要 get_template_directory_uri（））
更改：从wp_register_script( 'google-api', get_template_directory_uri() . 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1);到wp_register_script( 'google-api', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1);（不需要 get_template_directory_uri（））
这些更改之后，我在加载页面Uncaught TypeError: Cannot read property 'firstChild' of null时仅看到一（1）个错误。您的Google Maps代码引发了此错误。
此错误是由于您没有id="map"的DOM元素引起的。
因此，或者在id="map"中添加元素（Google Maps可以放置地图），或者修改代码以检查mapElement的值（在Google中-map.js）：
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// check if mapElement exists (not null)
if (mapElement) {
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var addresses = ['New York'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
icon: 'images/loc.png'
});
});
}
}
所有这些修改之后，我在控制台中看不到任何错误。