如何將 js 文件添加到頁面模板 wordpress

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

主題所需的任何其他 JavaScript 文件都應使用 wp_enqueue_script 加載。 這確保了正確的加載和緩存，並允許使用條件標簽來定位特定頁面。 這些是可選的。

像這樣將您的腳本排入隊列：

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

$handle 是腳本的名稱。

$src 定義腳本所在的位置。

$deps 是一個數組，可以處理新腳本所依賴的任何腳本，例如 jQuery。

$ver 讓你列出一個版本號。

$in_footer 是一個 boolean 參數（真/假），它允許您將腳本放置在 HTML 文檔的頁腳中，而不是放在 header 中，因此它不會延遲加載 DOM 樹。

您的隊列 function 應該如下所示：

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' );

function 應放在您的子主題中的 functions.php 中。

請注意條件邏輯以確保 function 正在您的 test.php 頁面模板中執行。