0

私はワードプレスに不慣れで、私のサイトでこのjqueryプラグインを使用したいと思います。私はこれをワードプレスのプラグインリストに追加し始めましたが、プラグインではないため機能しません。そのため、自分のサイトでどのように使用できるのか、テーマでどのファイルを変更する必要があるのか​​を知りたいのです。私の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 に答える