0

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

1 回答 1

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 是一个元素,用于保存元素以循环它们。

于 2013-01-25T12:38:21.390 回答