如何使用Elastislide–;wordpress中的响应式jQuery旋转木马插件

如何使用Elastislide–;wordpress中的响应式jQuery旋转木马插件,wordpress,jquery-plugins,twitter-bootstrap,Wordpress,Jquery Plugins,Twitter Bootstrap,我是wordpress的新手,我想在我的网站上使用这个jquery插件。我开始在我的wordpress插件列表中添加它,但它不起作用,因为它不是一个插件。这就是为什么我想知道我如何在我的网站中使用它意味着我必须在我的主题中更改哪些文件。我应该更改header.php文件吗?? 请帮帮我,伙计们 这是我的header.php文件: <?php /** header.php * * Displays all of the <head> section and everythin

我是wordpress的新手,我想在我的网站上使用这个jquery插件。我开始在我的wordpress插件列表中添加它,但它不起作用,因为它不是一个插件。这就是为什么我想知道我如何在我的网站中使用它意味着我必须在我的主题中更改哪些文件。我应该更改header.php文件吗?? 请帮帮我,伙计们

这是我的header.php文件:

<?php
/** header.php
 *
 * Displays all of the <head> section and everything up till </header>
 *
 * @author      Konstantin Obenland
 * @package     The Bootstrap
 * @since       1.0 - 05.02.2012
 */

?>
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
    <head>
        <?php tha_head_top(); ?>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title><?php wp_title( '&laquo;', true, 'right' ); ?></title>

        <?php tha_head_bottom(); ?>
        <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>
        <div class="container">
            <div id="page" class="hfeed row">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("widgetized-page-top") ) : ?>



                    <?php endif; ?>
<div class="span8"> 

    <?php if ( the_bootstrap_options()->navbar_searchform ) {
                                            the_bootstrap_navbar_searchform();
                                        } ?> 
</div>
                <?php tha_header_before(); ?>
                <header id="branding" role="banner" class="span12">
                    <?php tha_header_top();
                    wp_nav_menu( array(
                        'container'         =>  'nav',
                        'container_class'   =>  'subnav clearfix',
                        'theme_location'    =>  'header-menu',
                        'menu_class'        =>  'nav nav-pills pull-right',
                        'depth'             =>  3,
                        'fallback_cb'       =>  false,
                        'walker'            =>  new The_Bootstrap_Nav_Walker,
                    ) ); ?>
                    <hgroup>
                        <h1 id="site-title">
                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                                <span><?php bloginfo( 'name' ); ?></span>
                            </a>
                        </h1>
                        <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
                    </hgroup>

                    <?php if ( get_header_image() ) : ?>
                    <a id="header-image" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                        <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
                    </a>
                    <?php endif; // if ( get_header_image() ) ?>

                    <nav id="access" role="navigation">
                        <h3 class="assistive-text"><?php _e( 'Main menu', 'the-bootstrap' ); ?></h3>
                        <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'the-bootstrap' ); ?>"><?php _e( 'Skip to primary content', 'the-bootstrap' ); ?></a></div>
                        <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'the-bootstrap' ); ?>"><?php _e( 'Skip to secondary content', 'the-bootstrap' ); ?></a></div>
                        <?php if ( has_nav_menu( 'primary' ) OR the_bootstrap_options()->navbar_site_name OR the_bootstrap_options()->navbar_searchform ) : ?>
                        <div <?php the_bootstrap_navbar_class(); ?>>
                            <div class="navbar-inner">
                                <div class="container">
                                    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </a>
                                    <?php if ( the_bootstrap_options()->navbar_site_name ) : ?>
                                    <span class="brand"><?php bloginfo( 'name' ); ?></span>
                                    <?php endif;?>
                                    <div class="nav-collapse">
                                        <?php wp_nav_menu( array(
                                            'theme_location'    =>  'primary',
                                            'menu_class'        =>  'nav',
                                            'depth'             =>  3,
                                            'fallback_cb'       =>  false,
                                            'walker'            =>  new The_Bootstrap_Nav_Walker,
                                        ) ); 
                                         ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
                    </nav><!-- #access -->
                    <?php if ( function_exists( 'yoast_breadcrumb' ) ) {
                        yoast_breadcrumb( '<nav id="breadcrumb" class="breadcrumb">', '</nav>' );
                    }
                    tha_header_bottom(); ?>
                </header><!-- #branding --><?php
                tha_header_after();


/* End of file header.php */
/* Location: ./wp-content/themes/the-bootstrap/header.php */


在functions.php中,需要包含jQuery插件的js和css文件:

wp_enqueue_style ('your_plugin_css_handler_name', get_bloginfo('template_url') . '/css/jquery-plugin-css-file.css', '', '1.0');
wp_enqueue_script( 'your_plugin_js_handler_name', get_bloginfo('template_url') . '/js/jquery-plugin-js-file.js', array('jquery'), '1.0', false );
更改上面的行,以便它们与您的插件一起工作

现在您需要添加header.php代码,该代码将变为carousel,并添加额外的.js文件,该文件将调用元素的插件

wp_enqueue_script( 'theme_js', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', false );
将插件callout放在theme.js文件中,所有这些都应该可以工作

对于jquery,循环代码如下所示: functions.php

wp_enqueue_script( 'cycle_js', get_bloginfo('template_url') . '/js/jquery.cycle.all.js', array('jquery'), '2.9', false );
wp_enqueue_script( 'theme_js', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', false );
和theme.js:

jQuery(function($){
    $('#headerrotator').cycle();
})

#headerrotator是一个元素,它可以让元素循环运行。

有人来帮我吗。