在wordpress自定義主題中集成javascript文件

Question

我知道這個問題已經有幾個話題了，但是似乎沒有一個可以解決我的問題。

我想鏈接一個正在創建多個JavaScript文件的自定義WordPress主題。 我嘗試了很多可能的方法，但似乎沒有一種對我有用。

要跳過我已經嘗試添加文件的所有方法，請舉例說明我如何添加文件“ prettyPhoto.js”以便在自定義主題中工作。

謝謝你安迪

Answer 1

正確的方法是使用wp_register_script和wp_enqueue_script 。 使用這些將指示WordPress在任何相關腳本之后加載您的腳本。

假設您的prettyPhoto.js文件位於mytheme/js 。 在functions.php ，添加類似以下內容：

<?php
add_action('wp_enqueue_scripts', 'mytheme_load_scripts');
function mytheme_load_scripts() {
  // this only registers the script with WordPress
  wp_register_script('prettyPhoto', get_stylesheet_directory_uri().'/js/prettyPhoto.js');
  // this actually loads the script in `wp_head`
  wp_enqueue_script('prettyPhoto');
}
?>

如果prettyPhoto.js依賴於jQuery之類的東西，那么您可以在wp_register_script指定它。 執行以下操作將告訴WordPress確保在加載腳本之前已加載jQuery。

<?php
wp_register_script('prettyPhoto', get_stylesheet_directory_uri().'/js/prettyPhoto.js', array('jquery'));
?>

有關更多信息，請參見法典中的wp_register_script和wp_enqueue_script 。

本文可能也會有所幫助。

Answer 2

我想這對您不起作用，因為您可能忘記了放置wp_head（）

在主題模板中標記之前（例如header.php，index.php）

或關於放置wp_footer（）

在主題模板中標記之前（例如footer.php，index.php）。

花一些時間讓自己熟悉主題開發清單 。

很難看到模板而不知道您已經嘗試過的內容，但是您需要的是wp_enqueue_script函數（在functions.php ）以及wp_head（）和|或wp_footer（）（在模板中）。

1. 確保模板中</head>之前有wp_head() 。
2. 確保模板中的</body>前面有wp_footer() 。

3. 將以下代碼放在functions.php ：

    function my_theme_add_javascript() { wp_enqueue_script( 'pretty-photo', get_template_directory_uri() . '/js/prettyPhoto.js', array('jquery') ); } add_action('wp_enqueue_scripts', 'my_theme_add_javascript');