admin管理员组文章数量:1334202
I'm trying to migrate a theme to Wordpress. As usual, I imported all CSS, and now I'm moving on to the JS portion.
This is how my function.php looks:
<?php
function greennectar_files() {
// enqueue CSS
wp_enqueue_style('custom-google-fonts', '//fonts.googleapis/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('university_main_styles', get_stylesheet_uri());
wp_enqueue_style('bootstrapcss', get_theme_file_uri('/css/bootstrap.css'), null, array(), );
wp_enqueue_style('bootstrap8', get_theme_file_uri('/vendors/linericon/style.css'), null, array(), );
wp_enqueue_style('bootstrap4', get_theme_file_uri('/css/font-awesome.min.css'), null, array(), );
wp_enqueue_style('bootstrap2', get_theme_file_uri('/vendors/nice-select/css/nice-select.css'), null, array(), );
wp_enqueue_style('bootstrap3', get_theme_file_uri('/vendors/animate-css/animate.css'), null, array(), );
wp_enqueue_style('bootstrap5', get_theme_file_uri('/css/animate.min.css'), null, array(), );
wp_enqueue_style('bootstrap6', get_theme_file_uri('/vendors/flaticon/flaticon.css'), null, array(), );
// enqueue JAVASCRIPT
wp_enqueue_script('popper', get_theme_file_uri('/js/popper.js'), array('jquery') , array(), true);
wp_enqueue_script('bootstrap', get_theme_file_uri('/js/bootstrap.min.js'), array('popper'), array(), true);
wp_enqueue_script('main-university-js4', get_theme_file_uri('/js/stellar.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js5', get_theme_file_uri('/js/jquery.magnific-popup.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js6', get_theme_file_uri('/vendors/nice-select/js/jquery.nice-select.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js7', get_theme_file_uri('/vendors/isotope/imagesloaded.pkgd.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js8', get_theme_file_uri('/vendors/isotope/isotope-min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js9', get_theme_file_uri('/vendors/owl-carousel/owl.carousel.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js10', get_theme_file_uri('/js/jquery.ajaxchimp.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js11', get_theme_file_uri('/js/mail-script.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js12', '', NULL, false, true);
wp_enqueue_script('main-university-js13', get_theme_file_uri('/js/gmaps.min.js'), NULL, array(), true);
wp_enqueue_script('main-university-js14', get_theme_file_uri('/js/theme.js'), NULL, array(), true);
}
// THEME FUNCTIONS
add_action('wp_enqueue_scripts', 'greennectar_files');
function greennectar_features() {
add_theme_support('title-tag');
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action('after_setup_theme', 'greennectar_features');
And this is how the original HTML theme does it:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="icon" href="img/favicon.png" type="image/png" />
<title>Steve Portfolio</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="vendors/linericon/style.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css" />
<link rel="stylesheet" href="vendors/animate-css/animate.css" />
<link rel="stylesheet" href="vendors/flaticon/flaticon.css" />
<!-- main css -->
<link rel="stylesheet" href="css/style.css" />
</head>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/mail-script.js"></script>
<!--gmaps Js-->
<script src=";></script>
<script src="js/gmaps.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
The original version (second one) works fine with the HTML. Mine is very very twitchy. Half the scripts seem not to load.
What I tried:
I tried making sure I load the scripts based on what is recommended in the second one:
Tried deregistering WordPress jQuery and adding the new 3.2.1 version, did not help.
Tried moving the scripts proposed in step 1 to the top of the page.
Tried adding jquery as a dependency to all of the scripts.
Neither of these helped. Any help is appreciated!
I'm trying to migrate a theme to Wordpress. As usual, I imported all CSS, and now I'm moving on to the JS portion.
This is how my function.php looks:
<?php
function greennectar_files() {
// enqueue CSS
wp_enqueue_style('custom-google-fonts', '//fonts.googleapis/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('university_main_styles', get_stylesheet_uri());
wp_enqueue_style('bootstrapcss', get_theme_file_uri('/css/bootstrap.css'), null, array(), );
wp_enqueue_style('bootstrap8', get_theme_file_uri('/vendors/linericon/style.css'), null, array(), );
wp_enqueue_style('bootstrap4', get_theme_file_uri('/css/font-awesome.min.css'), null, array(), );
wp_enqueue_style('bootstrap2', get_theme_file_uri('/vendors/nice-select/css/nice-select.css'), null, array(), );
wp_enqueue_style('bootstrap3', get_theme_file_uri('/vendors/animate-css/animate.css'), null, array(), );
wp_enqueue_style('bootstrap5', get_theme_file_uri('/css/animate.min.css'), null, array(), );
wp_enqueue_style('bootstrap6', get_theme_file_uri('/vendors/flaticon/flaticon.css'), null, array(), );
// enqueue JAVASCRIPT
wp_enqueue_script('popper', get_theme_file_uri('/js/popper.js'), array('jquery') , array(), true);
wp_enqueue_script('bootstrap', get_theme_file_uri('/js/bootstrap.min.js'), array('popper'), array(), true);
wp_enqueue_script('main-university-js4', get_theme_file_uri('/js/stellar.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js5', get_theme_file_uri('/js/jquery.magnific-popup.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js6', get_theme_file_uri('/vendors/nice-select/js/jquery.nice-select.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js7', get_theme_file_uri('/vendors/isotope/imagesloaded.pkgd.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js8', get_theme_file_uri('/vendors/isotope/isotope-min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js9', get_theme_file_uri('/vendors/owl-carousel/owl.carousel.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js10', get_theme_file_uri('/js/jquery.ajaxchimp.min.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js11', get_theme_file_uri('/js/mail-script.js'), array('bootstrap'), array(), true);
wp_enqueue_script('main-university-js12', 'https://maps.googleapis/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE', NULL, false, true);
wp_enqueue_script('main-university-js13', get_theme_file_uri('/js/gmaps.min.js'), NULL, array(), true);
wp_enqueue_script('main-university-js14', get_theme_file_uri('/js/theme.js'), NULL, array(), true);
}
// THEME FUNCTIONS
add_action('wp_enqueue_scripts', 'greennectar_files');
function greennectar_features() {
add_theme_support('title-tag');
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action('after_setup_theme', 'greennectar_features');
And this is how the original HTML theme does it:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="icon" href="img/favicon.png" type="image/png" />
<title>Steve Portfolio</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="vendors/linericon/style.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css" />
<link rel="stylesheet" href="vendors/animate-css/animate.css" />
<link rel="stylesheet" href="vendors/flaticon/flaticon.css" />
<!-- main css -->
<link rel="stylesheet" href="css/style.css" />
</head>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/mail-script.js"></script>
<!--gmaps Js-->
<script src="https://maps.googleapis/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE"></script>
<script src="js/gmaps.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
The original version (second one) works fine with the HTML. Mine is very very twitchy. Half the scripts seem not to load.
What I tried:
I tried making sure I load the scripts based on what is recommended in the second one:
Tried deregistering WordPress jQuery and adding the new 3.2.1 version, did not help.
Tried moving the scripts proposed in step 1 to the top of the page.
Tried adding jquery as a dependency to all of the scripts.
Neither of these helped. Any help is appreciated!
Share Improve this question edited Jun 18, 2020 at 19:03 Pbalazs89 asked Jun 18, 2020 at 17:54 Pbalazs89Pbalazs89 1151 silver badge12 bronze badges1 Answer
Reset to default 0wp_enqueue_script() expects an array of strings, not a string, for the $deps parameter.
So, for example, your code should read:
wp_enqueue_script( 'popper', get_theme_file_uri('/js/popper.js'), array( 'jquery' ), array(), true );
本文标签： Wordpressenqueue js issuepage brokenno error
版权声明：本文标题：Wordpress - enqueue js issue - page broken, no error 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742336011a2455639.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论