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

Question

所以我试着将我的jQuery脚本（一个插件，一个自编写）包含到我的自定义wordpress主题中。尽管已经阅读了很多关于如何正确包含它们的内容，但我还是设法让它无法正常工作。所以我有一个插件脚本（ jQuery.fullPage.js ）和一个自定义编写（ main.js ），它们是（两个！）放置在＆＃34; assets / scripts / ＆＃34; 。目录

如说明书中所述，我在 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>中，我现在拥有以下代码：

＆＃13;

<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>

＆＃13;

现在调用脚本（如果不是最佳做法，请纠正我！）但我在 main.js 中收到错误：Can't find variable: $。我认为可能是因为wordpress中jQuery的兼容模式，所以用$替换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技巧编写自定义主题以便以更好或更清晰的方式编写此功能，所以非常欢迎！

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

Answer 2

如果js位于plugin文件夹中，那么你需要使用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__ ) );
}

Answer 3

找到解决方案！

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

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

<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/帖子帮助我解决了这个问题！谢谢！

不能在我的wp主题中包含自定义jQuery脚本

3 个答案:

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