让我们从头开始。
首先，我将引导您了解风格和脚本的归属。在您的functions.php 文件添加：
add_action( \'wp_enqueue_scripts\', \'splash_intro_scripts\');
if ( ! function_exists( \'splash_intro_scripts\' ) ){
function splash_intro_scripts() {
if (is_page_template(\'page-intro.php\')) {
wp_enqueue_style(\'google_font_1\', \'https://fonts.googleapis.com/css?family=Arvo&subset=latin,latin-ext\');
wp_enqueue_style(\'google_font_2\', \'https://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext\');
wp_enqueue_style(\'google_font_3\', \'https://fonts.googleapis.com/css?family=Josefin+Slab&subset=latin,latin-ext\');
wp_enqueue_script( \'bootstrap\', get_stylesheet_directory_uri().\'/js/bootstrap.js\', array( \'jquery\' ),\'\', false );
wp_enqueue_script( \'blocs\', get_stylesheet_directory_uri().\'/js/blocs.js\', array( \'jquery\' ),\'\', false );
wp_enqueue_style( \'bootstrap_css\', get_stylesheet_directory_uri() . \'/css/bootstrap.css\', array( ),\'\');
wp_enqueue_style( \'fontawesome_css\', get_stylesheet_directory_uri() . \'/css/font-awesome.min.css\', array( ),\'\');
wp_enqueue_style( \'stylesplash_css\', get_stylesheet_directory_uri() . \'/css/style-splash.css\', array( ),\'\');
}
}
}
或者，也可以找到
add_action( \'wp_enqueue_scripts\',...); 位于
functions.php 文件，并添加
if 此处的声明。
现在，字体是通过google加载的，所以您只需在wp_enqueue_style.
你会注意到我的目录和你的有点不同。你有/javascript/ 我有/js/; 你有/stylesheet/ 我有/css/. 只需更改它以适合您的主题（文件结构）。然后放置除jquery, 因为它是由wordpress加载的，不需要将自己的文件排队。这就是为什么我添加了bootstrap 到array(\'jquery\').
您还需要将fontawesome字体文件夹放在主题根文件夹中。
还有/img 文件夹必须转到/stylesheet 文件夹，因为您的style-splash.css 在里面/stylesheet 文件夹（因此它正在查看该文件夹中的图像）。
blocks.js 需要修改才能工作。
你需要把所有东西都包起来
jQuery(function($){ });
因此：
jQuery(function($){
// Loading page complete
$(window).load(function()
{
checkHero(); // Check hero height is correct
animateWhenVisible(); // Activate animation when visible
});
... all the way down ...
$(document).on(\'click\', \'.next-lightbox, .prev-lightbox\', function(e)
{
e.preventDefault();
var idx = $(\'a[data-lightbox]\').index(targetLightbox);
var next = $(\'a[data-lightbox]\').eq(idx+1) // Next
if($(this).hasClass(\'prev-lightbox\'))
{
next = $(\'a[data-lightbox]\').eq(idx-1) // Prev
}
$(\'#lightbox-image\').attr(\'src\',next.attr(\'data-lightbox\'));
$(\'.lightbox-caption\').html(next.attr(\'data-caption\'));
targetLightbox = next;
// Handle navigation buttons (next - prev)
$(\'.next-lightbox, .prev-lightbox\').hide();
if($(\'a[data-lightbox]\').index(next) != $(\'a[data-lightbox]\').length-1)
{
$(\'.next-lightbox\').show();
}
if($(\'a[data-lightbox]\').index(next) > 0)
{
$(\'.prev-lightbox\').show();
}
});
}
});
否则您将出现错误。以及
page-intro.php模板文件只是：
<?php
/*
Template Name: Splash Intro
*/
get_header();
?>
<div class="page-container">
<!-- Hero Bloc -->
<div id="hero-bloc" class="bloc hero bgc-white bg-walkway d-bloc">
<div class="container bloc-sm hero-nav">
<nav class="navbar row">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Company</a>
<button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".navbar-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-1">
<ul class="site-navigation nav navbar-nav pull-right">
<li>
<a id="pl-undefined" href="#">Home</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="v-center">
<div class="vc-content row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-md-6 col-md-offset-3">
<div class="embed-responsive embed-responsive-4by3">
<iframe src="https://player.vimeo.com/video/106743683" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<h1 class=" mg-lg text-center">
It\'s all about the big hero strapline.
</h1>
</div>
</div><a id="scroll-hero" class="btn-dwn" href="#"><span class="fa fa-chevron-down"></span></a>
</div>
</div>
<!-- Hero Bloc END -->
<!-- Bloc Group -->
<div class=\'bloc-group\'>
<!-- bloc-2 -->
<div class="bloc bgc-white bloc-tile-2 bg-citysky d-bloc" id="bloc-2">
<div class="container bloc-lg">
<div class="row">
<div class="col-sm-12">
<h3 class="mg-md text-justify ">
<strong>BENEFITS</strong>
</h3>
<p class="text-justify ">
Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.
</p>
</div>
</div>
</div>
</div>
<!-- bloc-2 END -->
<!-- bloc-3 -->
<div class="bloc bgc-white bloc-tile-2 bg-citysky d-bloc" id="bloc-3">
<div class="container bloc-lg">
<div class="row">
<div class="col-sm-12">
<h3 class="mg-md ">
<strong>COLLABORATION</strong>
</h3>
<p class=" text-justify">
Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo.
</p>
</div>
</div>
</div>
</div>
<!-- bloc-3 END -->
</div>
<!-- Bloc Group END -->
<!-- Footer - bloc-4 -->
<div class="bloc bgc-white bg-walkway d-bloc" id="bloc-4">
<div class="container bloc-lg">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div class="col-sm-3 text-center">
<a class="social-lg" href="#" target="_blank"><span class="fa fa-twitter icon-lg"></span></a>
</div>
<div class="col-sm-3 text-center">
<a class="social-lg" href="#" target="_blank"><span class="fa fa-facebook icon-lg"></span></a>
</div>
<div class="col-sm-3 text-center">
<a class="social-lg" href="#" target="_blank"><span class="fa fa-dribbble icon-lg"></span></a>
</div>
<div class="col-sm-3 text-center">
<a class="social-lg" href="#" target="_blank"><span class="fa fa-instagram icon-lg"></span></a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer - bloc-4 END -->
</div>
<!-- Main container END -->
<?php get_footer();
基本上所有的html都只是粘贴在里面。就这样。
如果你不想让页眉或页脚显示出来，你必须对其进行一些修改。通过更改header.php 和footer.php 或者用css隐藏它们。
就是这样。我已经把我在2016年考试主题中描述的所有东西都放好了，效果很好。
