WordPress主题制作课程#12：制作单页面文件page.php

WordPress教程 1972

制作单页面文件page.php是全套wordpress主题制作课程的最后一篇，在进入正文前先来解释一下什么是单页面，很多人把单页面单纯地理解为网站的一个页面，在wordpress中单页面指的是在“后台——页面”里创建的页面，一个用于单独显示网站某部分内容的页面，例如“网站简介”、“联系方式”等内容的页面。

单页面文件page.php和文章内容页面文件single.php基本是相通的，具体理论博客吧不作解析，有兴趣的可以在制作完page.php文件后，把代码和single.php文件的代码进行对比。

开始制作page.php文件

编辑page.html文件，删除header.php、footer.php、sidebar.php文件的公共部分代码，保存为page.php文件，并在该文件中删除代码的原位置分别调用上面三个文件，page.php文件初始代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<?php get_header(); ?>
	<!-- Column 1 / Content -->
	<div class="grid_8">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel porta erat. Quisque sit amet risus at odio pellentesque sollicitudin. Proin suscipit molestie facilisis. Aenean vel massa magna. Proin nec lacinia augue. Mauris venenatis libero nec odio viverra consequat. In hac habitasse platea dictumst.</p>
		<!-- Contact Form -->
		<form id="comment_form" action="" method="post">
			<h3>Add a comment</h3>
			<div class="hr dotted clearfix">&nbsp;</div>
			<ul>
				<li class="clearfix">
					<label for="name">Your Name</label>
					<input id="name" name="name" type="text" />
				</li>
				<li class="clearfix">
					<label for="email">Your Email</label>
					<input id="email" name="email" type="text" />
				</li>
				<li class="clearfix">
					<label for="email">Your Website</label>
					<input id="website" name="website" type="text" />
				</li>
				<li class="clearfix">
					<label for="message">Comment</label>
					<textarea id="message" name="message" rows="3" cols="40"></textarea>
				</li>
				<li class="clearfix">
					<!-- Add Comment Button -->
					<a type="submit" class="button medium black right">Add comment</a> </li>
			</ul>
		</form>
	</div>
	<?php get_sidebar(); ?>
<?php get_footer(); ?>
添加页面标题

搜索代码：

1

<!-- Column 1 / Content -->

改成：

1
2

<!-- Column 1 / Content -->
    <h2 class="grid_12 caption clearfix"><?php the_title(); ?></h2>
添加页面内容

把下的代码：

1

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel porta erat. Quisque sit amet risus at odio pellentesque sollicitudin. Proin suscipit molestie facilisis. Aenean vel massa magna. Proin nec lacinia augue. Mauris venenatis libero nec odio viverra consequat. In hac habitasse platea dictumst.</p>

改成：

1

<?php the_content(); ?>
添加评论框

把 <!-- Contact Form --> 与 </form>之间的所有代码删除（包括</form>）

替换成：

1

<?php comments_template(); ?>
添加查询语句

搜索代码：

1

<!-- Column 1 / Content -->

改成：

1
2

<!-- Column 1 / Content -->
    <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

查找：

1
2

</div>
    <?php get_sidebar(); ?>

改成：

1
2
3
4
5
6
7

    </div>
    <?php else : ?>
    <div class="grid_8">
        没有找到你想要的页面！
    </div>
    <?php endif; ?>
    <?php get_sidebar(); ?>

至此，page.php文件就制作完成了。此外还有两个页面，无边栏页面full_width.php，联系页contact.php，制作方法和page.php完全一样，博客吧不再详述了，压缩包里已经直接写好，下载即可。那这两个页面怎么用呢？这两个页面的代码开头分别写了两个注释。

full_width.php文件：

1
2
3
4
5

<?php
/*
Template Name: Page without sidebar
*/
?>

contact.php文件：

1
2
3
4
5

<?php
/*
Template Name: contract
*/
?>

新建页面的时候，在右边栏可选择页面模板，你可以选择Page without sidebar 或 contract，不选默认使用page.php模板！contact.php边栏的联系方式你自己改一下内容就可以了。

完整主题文件下载：aurelius_final.zip

PS：到此，断断续续终于把露兜博客的整套wordpress主题制作教程转载完毕，该套教程虽然已经发了好几年，但是由于wordpress的模板机制没有改变，因此该教程依然可用，如果你具有一定的html、css、php基础，看完整套教程，相信应该可以独立制作出一款主题了。

精品推荐：