-1

我已经使用 WordPress 多年了，通过我大量的阅读，我从来没有能够让任何自定义 jQuery 脚本正常工作。

今天是 jScrollPane：http: //jscrollpane.kelvinluck.com/。为像素完美的网页设计师制作的最好的脚本之一，他们必须让一切看起来都恰到好处。

我正在使用最新版本的 WordPress (3.4.1) 和 Whiteboard Framework（主题）。我没有要链接的站点，因为我正在使用 XAMPP 离线构建站点。

这是我所知道的：

在我的 header.php 中，在我的标签内和 wp_head() 下方，我有以下内容：

<script type="text/javascript" src="/js/jquery.jscrollpane.min"></script>
<script type="text/javascript" src="/js/jquery.mousewheel"></script>
<link rel="stylesheet" href="/css/jquery.jscrollpane.css" />

我在我的主题的根目录中有一个名为“css”的目录中的 jquery.jscrollpane.css，在我的主题的根目录中的一个名为“js”的目录中有 jquery.jscrollpane.min.js 和 jquery.mousewheel.js。

在我的footer.php 的正上方，我有：

<script type="text/javascript">
jQuery(function()
{
jQuery('#main').jScrollPane();
});
</script>

目前我的functions.php 中没有任何内容。

我对 jQuery 一无所知。什么都没有，除了我读过的关于 WordPress 和 no_conflict 模式的各种花絮，注册和排队脚本，以及其他无数次重复的事情，但无论我尝试什么似乎都对我没有帮助......

无数的阅读网站——几十个。无数小时...... WordPress 应该在后端有一些东西来让 jQuery 更容易。我对这一切感到非常厌烦。自从我开始试图弄清楚这件事以来，我没有太多吃的东西或太多的休息，这无济于事......

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

更新：我尝试了 martinCzerwi 所说的，将该代码添加到我的 functions.php 中，并从我的 . 我在 Firebug 的 Web Developer 中收到一条错误消息：

"Error: TypeError: jQuery("#main").jScrollPane is not a function"

这与我网站的 footer.php 有关，其中包括：

<script type="text/javascript">
jQuery(function()
{
    jQuery('#main').jScrollPane('refresh');
});
</script>

我只知道一点PHP；不过，还不足以帮助我。

我按照martinCzerwi 所说的做了。我将它添加到我的 functions.php 并删除了我的 . 在将 URL 修复到我在 functions.php 中的文件之后，它就起作用了。我终于让 jQuery 在 WordPress 网站上工作了！

非常感谢所有人，尤其是 martinCzerwi！

4

3 回答 3

1

使用我推荐的 WordPress 给定函数，而不是使用具有相对路径的脚本标签，您将其包含在您的functions.php:

function theme_enqueue_scripts_and_styles () {
  // Enqueue scripts
  wp_enqueue_script('jquery-mwheel', get_bloginfo('template_url').'/js/jquery.mousewheel.js', array('jquery'));
  wp_enqueue_script('jquery-scrollpane', get_bloginfo('template_url').'/js/jquery.jscrollpane.min.js', array('jquery', 'jquery-mwheel'));

  // Enqueue styles
  wp_enqueue_style('jquery-scrollpane-style', get_bloginfo('template_url').'/css/jquery.jscrollpane.css');
}

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts_and_styles');

注册此功能后，您可以从<head>. 只要您在-Tagwp_head();之前调用，该函数就会自动包含您的样式和脚本，甚至动态包含 jQuery </head>。它使用绝对路径，因为当您使用与默认设置不同的永久链接设置时，相对路径会中断。

于 2012-08-29T14:23:26.087 回答
0

在我看来，您没有正确链接或者您没有包含 jQuery 本身。

如果您的网站结构是这样的，那将是合乎逻辑的：

root\wp-content\themes\your-theme

你会在那里放置一个地图，你可以在其中放置你的 JavaScript，还可能还有一个用于附加 CSS 的单独地图，如下所示：

root\wp-content\themes\your-theme\js
root\wp-content\themes\your-theme\css

然后，您想要链接到这些，将它（就像您所做的那样）放在 header.php 中可能听起来合乎逻辑：

<script type="text/javascript" src="/js/jquery.jscrollpane.min"></script>
<script type="text/javascript" src="/js/jquery.mousewheel"></script>
<link rel="stylesheet" href="/css/jquery.jscrollpane.css" />

Wordpress 具有获取样式表目录的功能。你可以用那个！要回显此目录，请使用以下命令：

<?php echo get_stylesheet_directory_uri(); ?>

因此，上述链接将导致：

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.jscrollpane.min"></script>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.mousewheel"></script>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/jquery.jscrollpane.css" />

如果您使用的主题不包含 jQuery 本身，请添加这行代码，但请确保它在任何其他 JavaScript 代码之前加载（只是为了确保您没有丢失任何使用 jQuery 的脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

通常建议先加载样式表，然后再加载脚本。所以一切都将导致：

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/jquery.jscrollpane.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.jscrollpane.min"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.mousewheel"></script>
于 2012-08-29T14:35:07.913 回答
0

您可以将它添加functions.php到 dereigster 任何 jQuery 脚本并拥有自己的.. 但这不会对抗来自编码不佳的插件的任何硬编码包含。

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');

或者，您可以使用 jQuery 冲突模式，并像这样使用它：

<script type="text/javascript">
var k = jQuery.noConflict();
k(function() {
      k('#main').jScrollPane();
   });
</script>

<? wp_footer(); ?>如果任何插件依赖于包含的库，请确保您的页脚中有。

于 2012-08-29T08:14:42.733 回答