【问题标题】：Can't include custom jQuery scripts into my wp theme无法在我的 wp 主题中包含自定义 jQuery 脚本
【发布时间】：2018-05-31 11:50:42
【问题描述】：

所以我尝试了一段时间将我的 jQuery 脚本（一个插件，一个自己编写）包含到我的自定义 wordpress 主题中。尽管阅读了很多关于如何正确包含它们的信息，但我还是无法让它发挥作用。所以我有一个插件脚本（jQuery.fullPage.js）和一个自定义编写的（main.js），它们（both！）放置在“assets/scripts/”目录中。

如说明中所述，我在 functions.php 中注册它们：

   function load_theme_scripts() {
          wp_register_style('fullPageStyle', get_template_directory_uri() . '/custom-css/jquery.fullPage.css');
          wp_enqueue_style( 'fullPageStyle');
          wp_register_script( 'theFullPage', get_template_directory_uri() . '/assets/scripts/jquery.fullPage.js', array('jquery'), false, true );
          wp_enqueue_script( 'theFullPage');
          wp_register_script( 'mainScript', get_template_directory_uri() . '/assets/scripts/main.js', array( 'jquery' ), '1.0.0', true );
          wp_enqueue_script( 'mainScript');
   }
   add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );`

只有这段代码什么都没有发生。经过一番阅读，我发现（不知道这是否是正确的方法）我也必须在 html 代码的<head> 中调用脚本。所以在我的 home.html 的<head>中，我现在有以下代码：

<head>
<title><?php wp_title()?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/jquery.fullPage.js'></script>
    <script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/main.js'></script>
    <?php wp_head(); ?>
</head>

现在调用脚本（如果某事不符合最佳实践，请纠正我！）但我在 main.js 中收到错误：Can't find variable: $。我想这可能是因为 jQuery 在 wordpress 中的兼容模式，所以用jQuery替换$，但错误是Can't find variable: jQuery。

带有$的main.js代码：

   $(document).ready(function() {
      alert("Main script is workin!");
      $('#fullpage').fullpage({
          scrollingSpeed: 1000
      });
      alert("Main script is workin!");
   });

main.js 用jQuery代替：

jQuery(document).ready(function($) {
    alert("Main script is workin!");
    $('#fullpage').fullpage({
        scrollingSpeed: 1000
    });
    alert("Main script is workin!");
});

请帮帮我，这真的让我发疯了！由于我刚开始为 wp 编写自定义主题，因此非常欢迎以更好或更简洁的方式编写此功能的提示！

【问题讨论】：

get_template_directory_uri() 从模板文件夹中获取。和 plugins_url( '/js/custom-script.js', FILE ) 来自插件文件夹

标签： jquery wordpress wordpress-theming

【解决方案1】：

只是举例

如何从模板和插件中添加脚本。

function wptuts_scripts_important()
{
    // Register the script like this for a plugin:
    wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
    // or
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
 
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_important', 5 );

【讨论】：

感谢您的提示！我应该将 jQuery.fullPage.js 插件移到一个单独的文件夹中！

【解决方案2】：

如果该 js 位于插件文件夹中，那么您需要使用 plugin_url() 路径而不是 get_template_directory_uri()。因为模板目录函数用于激活主题的定位路径。我希望它对你有帮助。例如：

add_action( 'wp_enqueue_scripts', 'load_plugin_scripts');
function load_plugin_scripts(){ 
    wp_enqueue_script( 'plugin_custom_lm_js', plugins_url( 'assets/scripts/jquery.fullPage.js', __FILE__ ) );
}

【讨论】：

正如我在开头的描述中提到的。这两个脚本都在 /assets/scripts/ 的主题目录中！

【解决方案3】：

找到解决方案！

所以我想出了问题所在！其实……真的很蠢。要加载 jQuery，<?php wp_enqueue_script("jquery"); ?> 必须在 <?php wp_head(); ?> 之前调用。所有自定义脚本，例如main.js 必须像这样调用： <script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/main.js"></script> 在 <?php wp_head(); ?>函数之后。

所以现在我的总<head>html 看起来像这样：

<head>
<title><?php wp_title()?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/jquery.fullPage.js"></script>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/main.js"></script>

Chris Coyier 来自https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/ 的帖子极大地帮助了我解决这个问题！谢谢！

【讨论】：