个性化阅读
专注于IT技术分析

无法在我的wp主题中包含自定义jQuery脚本

因此, 我尝试了一段时间, 将我的jQuery脚本(一个插件, 一个自行编写)包含到我的自定义wordpress主题中。尽管阅读了很多有关如何正确包含它们的信息, 但我还是无法设法使其正常工作。因此, 我有一个插件脚本(jQuery.fullPage.js)和一个自定义的书面形式(main.js), 两者都放在” 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中找不到变量:$。我认为这可能是因为WordPress在jQuery中的兼容模式, 所以将$替换为jQuery, 然后错误是找不到变量:jQuery。

$。的main.js代码:

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

带有jQueryinmain的main.js:

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

请帮助我, 这真的使我发疯!由于我是第一次为wp编写自定义主题, 因此欢迎以更好或更简洁的方式编码此功能的技巧!


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

#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__ ) );
}

#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(); ?>功能。

所以现在我的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/includes-jquery-in-wordpress-the-right-way/中的帖子对我解决这个问题有很大帮助!谢谢!

赞(0) 打赏
未经允许不得转载:srcmini » 无法在我的wp主题中包含自定义jQuery脚本
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏