如何使用Elastislide - 一个在wordpress中响应的jQuery Carousel插件

时间:2013-01-25 08:47:17

标签: wordpress jquery-plugins twitter-bootstrap

我是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 */

1 个答案:

答案 0 :(得分:2)

在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代码,并添加将调用元素插件的其他.js文件。

wp_enqueue_script( 'theme_js', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', false );

将插件标注放在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是一个元素,用于循环它们的元素。