JQuery Accordion插件一旦在WP中使用就不能工作

时间：2013-04-27 作者：Mark

我正在尝试在我的WP中使用手风琴脚本：http://www.armagost.com/zaccordion/

问题是，在一个独立的html/php文件上，它工作得很好，但一旦粘贴到我的标题中。php文件无法使其工作。我也试着用<?php require_once("example.php") ?> 但没有成功。

你可以看到我的标题。php文件位于此处：http://pastebin.com/SrkmWxp1

谢谢你的帮助。

2 个回复

最合适的回答,由SO网友:t31os 整理而成

您似乎仍然有问题，我要做的是设置一组排队，但在打印脚本操作中处理html5 js以及适当的条件注释（对于排队系统，没有合适的方法可以做到这一点），以避免标题中的所有代码混乱。

首先是HTML5 js，直接打印条件逻辑和脚本标记（这是一种适合这种情况的操作）。

add_action( \'wp_print_scripts\', \'do_print_html5js\' );

function do_print_html5js() {
    echo \'<!--[if lt IE 9]>\' . "\\n";
    echo \'<script type="text/javascript" src="\'.get_stylesheet_directory_uri().\'/js/html5.js"></script>\' . "\\n";
    echo \'<![endif]-->\' . "\\n";
}

Notes: 尽管老实说，上面的部分根本没有必要，您可以将其保留在头文件中，但Twenty13主题就是这样做的，我个人会避免额外的混乱。

然后，使用dependencies参数向每个脚本指示它所依赖的其他脚本，为accordian发出排队。我引用了内部jQuery，不需要从外部获取它。

add_action( \'wp_enqueue_scripts\', \'register_and_enqueue_scripts\' );

function register_and_enqueue_scripts() {
    wp_enqueue_script( \'jquery-easing\', \'http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js\', array(\'jquery\'), false );
    wp_enqueue_script( \'jquery-zaccordian\', get_stylesheet_directory_uri() . \'/js/jquery.zaccordion.js\', array( \'jquery-easing\'), false );
    wp_enqueue_script( \'my-zaccordian\', get_stylesheet_directory_uri() . \'/js/myaccordion.js\', array(\'jquery-zaccordian\'), false );
    wp_enqueue_style( \'slidemenucss\', get_stylesheet_directory_uri() . \'/css/slidemenu.css\', array(), false );
}

将创建手风琴的jQuery代码移动到一个单独的文件中，并在上面的队列中调整文件名，myaccordion.js 根据需要。

在发布此答案之前，我测试了上述代码，以下是我在header.php 文件和用于创建accorbian的jQuery。

header.php - html（只是重要的一点）

<ol id="example1">
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
    <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/myimage.png" alt="" /></li>
</ol>

myaccordion.js

jQuery(document).ready(function($) {
    $("#example1").zAccordion({
        easing: "easeOutBounce",
        height: "150px",
        slideWidth: "600px",
        width: "900px"
    });
});

希望这对您有所帮助，并使您的头文件更干净……）

SO网友:Sisir

再次查看代码。以下是我的想法

Change This:

<script src="js/jquery.zaccordion.js"></script>

                <script type="text/javascript">
                        $(document).ready(function() {
                                $("#example11").zAccordion({
                                        easing: "easeOutBounce",
                                        height: "150px",
                                        slideWidth: "600px",
                                        width: "900px"
                                });
                        });
                </script>

To This:

假设您的主题目录中有手风琴脚本。您不能在wordpress中使用相对url。您必须使用完整URL。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.zaccordion.js"></script>

                <script type="text/javascript">
                        jQuery(document).ready(function($) { // using jQuery instead of $ and passing $
                                $("#example11").zAccordion({
                                        easing: "easeOutBounce",
                                        height: "150px",
                                        slideWidth: "600px",
                                        width: "900px"
                                });
                        });
                </script>

Doing It Right:

我展示的代码就是如何让它工作的。您根本不应该在头上添加脚本。使用wp_register_script(). 然后使用wp_enqueue_script(). 所有脚本都应加载到页脚区域。

More On How to Use jQuery with Wordpress

http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

结束

小码农CODE

JQuery Accordion插件一旦在WP中使用就不能工作

相关推荐

配置文件模板的jQuery滑块