在 WordPress 中使用 jQuery 插件答案

【问题标题】：Using a jQuery plugin inside WordPress在 WordPress 中使用 jQuery 插件
【发布时间】：2015-02-16 16:27:05
【问题描述】：

我正在尝试在 WordPress http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/ 中使用 jQuery Responsive 动画网格插件@

在测试时，我使插件在网站的 HTML 版本中工作（我将代码压缩为相关位）：

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
    <script type="text/javascript"> 
        $(function() {

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

        });
    </script>

但是，这在 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>

在第二个版本中，插件可以正常工作，但是在播放动画时似乎有错误，而且看起来非常“锯齿”，图像没有任何过渡。我猜我在这里做错了什么，但是什么？是不是因为我没有加载插件设计的 jQuery 版本？

【问题讨论】：

如果插件需要特定版本的 jQuery，你应该从那里开始。还要确保您正在加载任何其他依赖项（css、其他 JS 文件等）
是的，它需要 V1.8.3，正如您在第一个版本中看到的那样，但是如果我加载该 jQuery 版本，插件就根本不起作用
您在 WordPress 中使用的是哪个版本？
1.11是我认为的版本
我会在那里升级你的版本。然后解决为什么它没有加载。你得到什么控制台错误？

标签： javascript jquery wordpress

【解决方案1】：

您的主要问题是您为 Wordpress 包含的脚本文件不正确，这可能会导致与您的主题或其他插件包含的脚本发生冲突。

首先，您需要将用于初始化 gridRotator 的 sn-p 放入它自己的文件中。因此，在您的 /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 中预览该网站，右键单击该页面并单击“检查元素”以打开您的浏览器开发人员工具。在那里单击“控制台”，很可能会出现某种错误或通知...如果是这样，请告诉我们错误是什么，它将极大地帮助您查明您的问题。

问候

丹

【讨论】：