Javascript 在WordPress中使用jQuery插件

我试图在WordPress中使用jQuery响应动画网格插件

在测试过程中，我让插件在网站的HTML版本中工作（我将代码压缩到相关位）：

$（函数（）{
$（'#ri grid'）。gridrotator（{
行：2，
栏目：7，
步骤：“随机”，
最大步长：3
} );
});

但是，这在WordPress中不起作用，因此经过一些尝试和错误后，我得出了以下结论：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.gridrotator.js"></script>

  <script type="text/javascript">   

         jQuery(function($) {

            $( '#ri-grid' ).gridrotator( {
                rows : 2,
                columns : 7
            } );

        });
    </script> 

---

您的主要问题是，您为Wordpress错误地包含脚本文件，这可能会导致与主题或其他插件包含的脚本冲突

首先，您需要将用于初始化gridRotator的代码片段放入它自己的文件中。因此，在/js/目录中创建一个新文件，并将其命名为“jquery.gridrotator.init.js”，然后将代码复制并粘贴到该文件中

jQuery(function($) {
    $( '#ri-grid' ).gridrotator( {
        rows : 2,
        columns : 7
    });
});

然后从页眉或页脚或任何地方删除问题中编写的所有代码，因为我们将在
functions.php
文件中包含脚本

在functions.php文件中添加以下行

function lukas_add_scripts() {
    wp_register_script('gridRotator', get_template_directory_uri() . '/js/jquery.gridrotator.js', 'jquery', null, true );
    wp_register_script('gridRotatorInit', get_template_directory_uri() . '/js/jquery.gridrotator.init.js', 'gridRotator', null, true );

    wp_enqueue_script('jquery');
    wp_enqueue_script('gridRotator');
    wp_enqueue_script('gridRotatorInit');
}

add_action( 'wp_enqueue_scripts', 'lukas_add_scripts' );

这将告诉Wordpress把你的3个脚本放在正确的位置，重要的是。。。除非他们还没有被包括在内

希望这对你有用。。。如果没有，您可以尝试在google chrome中预览该站点，右键单击该页面，然后单击“检查元素”打开浏览器开发工具。在那里单击“控制台”，很可能会出现某种错误或通知。。。如果是这样，请让我们知道错误是什么，这将大大有助于查明您的问题

问候

Dan
如果插件需要特定版本的jQuery，您应该从那里开始。此外，请确保您正在加载任何其他依赖项（css、其他JS文件等）是的，它需要V1.8.3，正如您在第一个版本中看到的那样。但是，如果我加载该jQuery版本，插件根本不起作用。您在WordPress中使用的是哪个版本？1.11是我认为应该升级您的版本的版本。然后解决它为什么不加载的问题。您会遇到哪些控制台错误？
function lukas_add_scripts() {
    wp_register_script('gridRotator', get_template_directory_uri() . '/js/jquery.gridrotator.js', 'jquery', null, true );
    wp_register_script('gridRotatorInit', get_template_directory_uri() . '/js/jquery.gridrotator.init.js', 'gridRotator', null, true );

    wp_enqueue_script('jquery');
    wp_enqueue_script('gridRotator');
    wp_enqueue_script('gridRotatorInit');
}

add_action( 'wp_enqueue_scripts', 'lukas_add_scripts' );