Question

我使用html在wordpress的“页面”中创建了一个jQuery手风琴滑块。滑块在我的页面中完美运行。

我想将此滑块移动到我的wordpress主题的标题中。请有人可以告诉我，我的页面html的哪些部分需要插入'header.php'

我的wordpress页面中有以下html：

<div class="container">

    <div id="va-accordion" class="va-container">
        <div class="va-nav">
            <span class="va-nav-prev">Previous</span>
            <span class="va-nav-next">Next</span>
        </div>
        <div class="va-wrapper">
            <div class="va-slice va-slice-1">
                <div class="va-title">Marketing</div>
                <div class="va-content">
                    <p>Henry Watson</p>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="va-slice va-slice-2">
                <div class="va-title">Management</div>
                <div class="va-content">
                    <p>Keith Johnson</p>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>  
            </div>
            <div class="va-slice va-slice-3">
                <div class="va-title">Visual Design</div>
                <div class="va-content">
                    <p>Andrew Alaniz</p>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>  
            </div>
            <div class="va-slice va-slice-4">
                <div class="va-title">Quality Control</div>
                <div class="va-content">
                    <p>Ben Freeman</p>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>  
            </div>
            <div class="va-slice va-slice-5">
                <div class="va-title">Web development</div>
                <div class="va-content">
                    <p>Alex Schuman</p>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>  
            </div>
            <div class="va-slice va-slice-6">
                <div class="va-title">Customer Support</div>
                <div class="va-content">
                    <p>Maria Wales</p>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>  
            </div>
            <div class="va-slice va-slice-7">
                <div class="va-title">Server Administration</div>
                <div class="va-content">
                    <p>Paul White</p>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>  
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="wp-content/themes/FSI5/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="wp-content/themes/FSI5/jquery.mousewheel.js"></script>
<script type="text/javascript" src="wp-content/themes/FSI5/jquery.vaccordion.js"></script>
<script type="text/javascript">
    $(function() {
        $('#va-accordion').vaccordion({
            visibleSlices   : 5,
            expandedHeight  : 250,
            animOpacity     : 0.1,
            contentAnimSpeed: 100
        });
    });
</script>

这是我在wordpress中的header.php中的代码：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset') ?>" />
<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
<!-- Created by Artisteer v4.0.0.58475 -->
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
remove_action('wp_head', 'wp_generator');
if (is_singular() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
}

wp_head();
?>
</head>
<body <?php body_class(); ?>>

<div id="art-main">
    <div class="art-sheet clearfix">
<nav class="art-nav clearfix">
    <?php
    echo theme_get_menu(array(
            'source' => theme_get_option('theme_menu_source'),
            'depth' => theme_get_option('theme_menu_depth'),
            'menu' => 'primary-menu',
            'class' => 'art-hmenu'
        )
    );
?> 
    </nav>

<?php if(theme_has_layout_part("header")) : ?>
<header class="clearfix art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?>



    <div class="art-shapes">

<div class="art-object1784062466" data-left="3.03%"></div>

            </div>



</header>
<?php endif; ?>

<div class="art-layout-wrapper clearfix">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <?php get_sidebar(); ?>
                        <div class="art-layout-cell art-content clearfix">

谢谢

Wordpress Header中的jQuery手风琴

0 个答案: