如何将单个滚动页面html模板转换为wordpress？
我在index.html页面中有六个div，它们的类为row，id为row1到row6。
我已复制所有索引html代码并将其粘贴到wordpress主题目录中的index.php作为二十三个主题和所有相关文件夹，如js文件夹中的文件和css文件夹和图像文件夹我已粘贴到主题目录中的所有资源文件夹，使用下面的代码。
但是我的导航无法在html模板中滚动。
============================Header.php==============================
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single scroll Page</title>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/bootstrap.min.css">
<link href="http://vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/index.css">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/lightbox.min.css">
<style type="text/css">
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: #000000 }
.vjs-default-skin .vjs-control-bar { font-size: 100% }
</style>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/custom.js"></script>
<script src="http://vjs.zencdn.net/4.11/video.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
var nav_home = $('#row1').find('ul').children('li').eq(0).find('a');
var biography = $('#row1').find('ul').children('li').eq(1).find('a');
var news = $('#row1').find('ul').children('li').eq(2).find('a');
var videos = $('#row1').find('ul').children('li').eq(3).find('a');
var gallery = $('#row1').find('ul').children('li').eq(4).find('a');
var contact = $('#row1').find('ul').children('li').eq(5).find('a');
var dom = $('body');
var row1 = $("#row1").offset();
var row2 = $("#row2").offset();
var row3 = $("#row3").offset();
var row4 = $("#row4").offset();
var row5 = $("#row5").offset();
var row6 = $("#row6").offset();
nav_home.click(function(){
biography.removeClass('biography');
news.removeClass('news');
videos.removeClass('videos');
gallery.removeClass('gallery');
contact.removeClass('contact');
var $this = $(this);
dom.animate({scrollTop: 0},700);
$this.addClass('home_active');
return false;
});
biography.click(function(){
nav_home.removeClass('home_active');
news.removeClass('news');
videos.removeClass('videos');
gallery.removeClass('gallery');
contact.removeClass('contact');
var $this = $(this);
dom.animate({scrollTop: row2.top},700);
$this.addClass('biography');
return false;
});
news.click(function(){
nav_home.removeClass('home_active');
biography.removeClass('biography');
videos.removeClass('videos');
gallery.removeClass('gallery');
contact.removeClass('contact');
var $this = $(this);
dom.animate({scrollTop: row3.top}, 700);
$this.addClass('news');
return false;
});
videos.click(function(){
nav_home.removeClass('home_active');
biography.removeClass('biography');
news.removeClass('news');
gallery.removeClass('gallery');
contact.removeClass('contact');
var $this = $(this);
$this.addClass('videos');
dom.animate({scrollTop: row4.top}, 700);
return false;
});
gallery.click(function(){
nav_home.removeClass('home_active');
biography.removeClass('biography');
videos.removeClass('videos');
news.removeClass('news');
contact.removeClass('contact');
var $this = $(this);
$this.addClass('gallery');
dom.animate({scrollTop: row5.top}, 700);
return false;
});
contact.click(function(){
nav_home.removeClass('home_active');
biography.removeClass('biography');
videos.removeClass('videos');
news.removeClass('news');
gallery.removeClass('gallery');
var $this = $(this);
$this.addClass('contact');
dom.animate({scrollTop: row6.top}, 700);
return false;
});
$(window).scroll(function(){
var $this = $(this);
var row2_heading = $('#row2').find('h1');
if($this.scrollTop() < row2.top){
nav_home.addClass('home_active');
nav_home.css("color", "white");
biography.css("color", "white");
videos.css("color", "white");
news.css("color", "white");
contact.css("color", "white");
$("#contact, #contact a").css("color", "white");
}
else{
nav_home.removeClass('home_active');
}
if(($this.scrollTop() >= row2.top) && ($this.scrollTop() < row3.top)){
biography.addClass('biography');
nav_home.css("color", "white");
biography.css("color", "white");
videos.css("color", "white");
news.css("color", "white");
contact.css("color", "white");
$("#contact, #contact a").css("color", "white");
}
else{
biography.removeClass('biography');
}
if(($this.scrollTop() >= row3.top) && ($this.scrollTop() < row4.top)){
news.addClass('news');
nav_home.css("color", "white");
biography.css("color", "white");
videos.css("color", "white");
news.css("color", "white");
contact.css("color", "white");
$("#contact, #contact a").css("color", "white");
}
else{
news.removeClass('news');
}
if(($this.scrollTop() >= row4.top) && ($this.scrollTop() < row5.top)){
videos.addClass('videos');
nav_home.css("color", "white");
biography.css("color", "white");
videos.css("color", "white");
news.css("color", "white");
contact.css("color", "white");
$("#contact, #contact a").css("color", "white");
}
else{
videos.removeClass('videos');
}
if(($this.scrollTop() >= row5.top) && ($this.scrollTop() < row6.top)){
gallery.addClass('gallery');
nav_home.css("color", "black");
biography.css("color", "black");
videos.css("color", "black");
news.css("color", "black");
contact.css("color", "black");
$("#contact, #contact a").css("color", "black");
}
else{
gallery.removeClass('gallery');
}
if(($this.scrollTop()-22 >= row6.top)){
contact.addClass('contact');
nav_home.css("color", "white");
biography.css("color", "white");
videos.css("color", "white");
news.css("color", "white");
contact.css("color", "white");
$("#contact, #contact a").css("color", "white");
}
else{
contact.removeClass('contact');
}
if(row2.top-200){
$('#row2').find('h1').show('1500');
}
if($(window).width() >= 992) {
$("#sub_hoi").css({"width": "619", "left": "-191", "height": "443"});
}
if($(window).width() < 992) {
$("#sub_hoi").css({"width": "100%", "left": 0, "top": "50", "height": "250"});
}
else{
return false;
}
if($(window).width() < 768) {
$("#sub_hoi").css({"width": "100%", "left": 0, "height": "150"});
}
else{
return false;
}
});
});
</script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
===========================Header End===================================
================================index.php=================================
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme and one of the
* two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* @link http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>
<body <?php // body_class(); ?>>
<!--
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php // bloginfo('template_url'); ?>/<?php // echo esc_url( home_url( '/' ) ); ?>" title="<?php // echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php // bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php // bloginfo( 'description' ); ?></h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<button class="menu-toggle"><?php // _e( 'Menu', 'twentythirteen' ); ?></button>
<a class="screen-reader-text skip-link" href="<?php // bloginfo('template_url'); ?>/<?php // bloginfo('template_url'); ?>/content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php // wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php // get_search_form(); ?>
</nav><!-- #site-navigation -->
<!--</div><!-- #navbar -->
<!--</header>--><!-- #masthead -->
<!--<div id="main" class="site-main">
-->
<div class="container-fluid">
<div class="row" id="row1">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="navbar navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav">
Toggle Navigation
</button>
<p class="hidden-xs hidden-sm hidden-md navbar-brand" id="contact">Contact: +92 334498315/ <a href="<?php bloginfo('template_url'); ?>/<?php bloginfo('template_url'); ?>/">abc@gmail.com</a></p>
</div>
<div class="collapse navbar-collapse" id="nav">
<?php wp_nav_menu( array('menu' => 'Menuone','before' => '<div id="nav">','after' => '</div>' )); ?>
<!--<ul class="nav navbar-nav navbar-right">
<li><a class="home_active" href="#">Home</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>-->
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 id="heading">abcxyz</h1>
</div>
</div>
</div>
<div class="row" id="row2">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="container">
<h1><span>Bio</span><br><span>Graphy</span></h1>
<h2><span>abcxyz</span><br><span>Biography</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>
</div>
</div>
</div>
<div class="row" id="row5">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1>Gallery</h1>
</div>
<div class="carousel slide" id="gallery">
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="images/gallery_1_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_1.jpg" alt="Gallery Image"></a>
<a href="images/gallery_2_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_2.jpg" alt="Gallery Image"></a>
<a href="images/gallery_3_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_3.jpg" alt="Gallery Image"></a>
<a href="images/gallery_4_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_4.jpg" alt="Gallery Image"></a>
<a href="images/gallery_5_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_5.jpg" alt="Gallery Image"></a>
<a href="images/gallery_6_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_6.jpg" alt="Gallery Image"></a>
<a href="images/gallery_7_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_7.jpg" alt="Gallery Image"></a>
<a href="images/gallery_8_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_8.jpg" alt="Gallery Image"></a>
<a href="images/gallery_9_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_9.jpg" alt="Gallery Image"></a>
<a href="images/gallery_10_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_10.jpg" alt="Gallery Image"></a>
</div>
</div>
<div class="item">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="images/gallery_1_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_1.jpg" alt="Gallery Image"></a>
<a href="images/gallery_2_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_2.jpg" alt="Gallery Image"></a>
<a href="images/gallery_3_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_3.jpg" alt="Gallery Image"></a>
<a href="images/gallery_4_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_4.jpg" alt="Gallery Image"></a>
<a href="images/gallery_5_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_5.jpg" alt="Gallery Image"></a>
<a href="images/gallery_6_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_6.jpg" alt="Gallery Image"></a>
<a href="images/gallery_7_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_7.jpg" alt="Gallery Image"></a>
<a href="images/gallery_8_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_8.jpg" alt="Gallery Image"></a>
<a href="images/gallery_9_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_9.jpg" alt="Gallery Image"></a>
<a href="images/gallery_10_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_10.jpg" alt="Gallery Image"></a>
</div>
</div>
<div class="item">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="images/gallery_1_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_1.jpg" alt="Gallery Image"></a>
<a href="images/gallery_2_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_2.jpg" alt="Gallery Image"></a>
<a href="images/gallery_3_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_3.jpg" alt="Gallery Image"></a>
<a href="images/gallery_4_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_4.jpg" alt="Gallery Image"></a>
<a href="images/gallery_5_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_5.jpg" alt="Gallery Image"></a>
<a href="images/gallery_6_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_6.jpg" alt="Gallery Image"></a>
<a href="images/gallery_7_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_7.jpg" alt="Gallery Image"></a>
<a href="images/gallery_8_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_8.jpg" alt="Gallery Image"></a>
<a href="images/gallery_9_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_9.jpg" alt="Gallery Image"></a>
<a href="images/gallery_10_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_10.jpg" alt="Gallery Image"></a>
</div>
</div>
<div class="item">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="images/gallery_1_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_1.jpg" alt="Gallery Image"></a>
<a href="images/gallery_2_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_2.jpg" alt="Gallery Image"></a>
<a href="images/gallery_3_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_3.jpg" alt="Gallery Image"></a>
<a href="images/gallery_4_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_4.jpg" alt="Gallery Image"></a>
<a href="images/gallery_5_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_5.jpg" alt="Gallery Image"></a>
<a href="images/gallery_6_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_6.jpg" alt="Gallery Image"></a>
<a href="images/gallery_7_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_7.jpg" alt="Gallery Image"></a>
<a href="images/gallery_8_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_8.jpg" alt="Gallery Image"></a>
<a href="images/gallery_9_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_9.jpg" alt="Gallery Image"></a>
<a href="images/gallery_10_popup.jpg" data-lightbox="gallery"><img src="<?php bloginfo('template_url'); ?>/images/gallery_10.jpg" alt="Gallery Image"></a>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-8">
<ol class="list-inline">
<li><a href="<?php bloginfo('template_url'); ?>/gallery" data-slide-to="0">Opening</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/gallery" data-slide-to="1">Video Making</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/gallery" data-slide-to="2">Concerts</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/gallery" data-slide-to="3">Studio Recording</a></li>
</ol>
</div>
</div>
</div>
</div>
</div>
<!--<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php // if ( have_posts() ) : ?>
<?php /* The loop */ ?>
<?php // while ( have_posts() ) : the_post(); ?>
<?php // get_template_part( 'content', get_post_format() ); ?>
<?php // endwhile; ?>
<?php // twentythirteen_paging_nav(); ?>
<?php // else : ?>
<?php // get_template_part( 'content', 'none' ); ?>
<?php // endif; ?>
</div>--><!-- #content -->
<!--</div>--><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>