如何将js文件添加到页面模板

Question

我使用Bootstrap框架为Hello elementor模板创建了一个页面模板...但无论我做什么，我都不能将.js文件作为模板引入...谢谢你的帮助

​

<?php
        /**
        * Template name: test
         */
?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/account-page/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/account-page/css/woocommerce-style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="<?php echo get_bloginfo('template_directory');?>/account-page/js/jquery.min.js" type="text/javascript"></script>
 <script src="<?php echo get_bloginfo('template_directory');?>/account-page/js/popper.js" type="text/javascript"></script>
 <script src="<?php echo get_bloginfo('template_directory');?>/account-page/js/bootstrap.min.js" type="text/javascript"></script>
 <script src="<?php echo get_bloginfo('template_directory');?>/account-page/js/main.js" type="text/javascript"></script>

​

Answer 1

应该使用wp_enqueue_script加载主题所需的任何其他JavaScript文件。这确保了正确的加载和缓存，并允许使用条件标记来定位特定页面。这些是可选的。

将脚本排入队列，如下所示：

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

$handle是脚本的名称。

$src定义脚本所在的位置。

$deps是一个可以处理新脚本所依赖的任何脚本的数组，比如jQuery。

$ver允许您列出版本号。

$in_footer是一个布尔参数(true/false)，它允许您将脚本放在文档的页脚而不是页眉中，这样就不会延迟DOM树的加载。

您的入队函数应如下所示：

function my_theme_name_scripts() {
if ( is_page_template( 'test.php' ) ) {
    wp_enqueue_script( 'main', get_template_directory_uri() . '/account-page/js/main.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'popper', get_template_directory_uri() . '/account-page/js/popper.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/account-page/js/bootstrap.min.js', array('jquery'), '1.0.0', true );

}
}
add_action( 'wp_enqueue_scripts', 'my_theme_name_scripts' );

这个函数应该放在你的子主题的functions.php中。

请注意条件逻辑，以确保函数仅在您的test.php页面模板中执行。