我正在尝试将主题迁移到Wordpress。像往常一样,我导入了所有CSS,现在我转到JS部分。
这就是我的功能。php外观:
<?php
function greennectar_files() {
// enqueue CSS
wp_enqueue_style(\'custom-google-fonts\', \'//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i\');
wp_enqueue_style(\'font-awesome\', \'//maxcdn.bootstrapcdn.com/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.com/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\');
原始HTML主题就是这样做的:
<!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.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE"></script>
<script src="js/gmaps.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
原始版本(第二个)可以很好地使用HTML。我的很紧张。一半的脚本似乎没有加载。
我尝试的内容:
我试着确保根据第二个建议加载脚本:
试图注销WordPress jQuery并添加新的3.2.1版本,但没有帮助。
尝试将步骤1中建议的脚本移动到页面顶部。试图将jquery作为依赖项添加到所有脚本中。
这些都没有帮助。感谢您的帮助!