WordPress主题制作课程#10：制作文章内容页文件single.php

WordPress教程 2168

前面完成了索引页文件index.php，现在就来继续制作文章页文件，wordpress每篇文章内容页面调用的是single.php文件，有了先前index.php文件的制作经验，制作single.php文件就简单许多，也因此single.php文件的制作不会像index.php文件制作教程那么详细，如果有不明白的地方，可以参考：WordPress主题制作课程#9：制作索引页文件index.php，或者在下面留言。

制作single.php文件

编辑single.html文件，删除header.php、footer.php、sidebar.php文件的公共部分代码，保存为single.php文件，并在该文件中删除代码的原位置分别调用上面三个文件，single.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<?php get_header(); ?>
	<!-- Column 1 /Content -->
	<div class="grid_8">
		<!-- Blog Post -->
		<div class="post">
			<!-- Post Title -->
			<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>
			<!-- Post Title -->
			<p class="sub"><a href="#">News</a>, <a href="#">Products</a> &bull; 31st Sep, 09 &bull; <a href="#">7 Comments</a></p>
			<div class="hr dotted clearfix">&nbsp;</div>
			<!-- Post Title -->
			<img class="thumb" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" alt=""/>
			<!-- Post Content -->
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel diam id mauris accumsan egestas. Sed sed lorem. Integer id mi vel sapien fermentum vehicula. Pellentesque vitae lacus a sem posuere fringilla. Vestibulum dolor. Phasellus cursus augue ac purus. Curabitur faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<h1>H1 Heading</h1>
			<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
			<h2>H2 Heading</h2>
			<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
			<h3>H3 Heading</h3>
			<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
			<h4>H4 Heading</h4>
			<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
			<h5>H5 Heading</h5>
			<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
			<h6>H6 Heading</h6>
			<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
			<!-- Post Links -->
			<p class="clearfix"> <a href="blog.html" class="button float" >&lt;&lt; Back to Blog</a> <a href="#commentform" class="button float right" >Discuss this post</a> </p>
		</div>
		<div class="hr clearfix">&nbsp;</div>
		<!-- Comment's List -->
		<h3>Comments</h3>
		<div class="hr dotted clearfix">&nbsp;</div>
		<ol class="commentlist">
			<li class="comment">
				<div class="gravatar"> <img alt="" src='images/gravatar.png' height='48' width='48' /> <a class="comment-reply-link" href=''>Reply</a> </div>
				<div class="comment_content">
					<div class="clearfix"> <cite class="author_name"><a href="">Joe Bloggs</a></cite>
						<div class="comment-meta commentmetadata">January 6, 2010 at 6:26 am</div>
					</div>
					<div class="comment_text">
						<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>
					</div>
				</div>
			</li>
		</ol>
		<div class="hr clearfix">&nbsp;</div>
		<!-- Comment 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

<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>

改成：

1

<h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
添加文章标签
1

<a href="#">News</a>, <a href="#">Products</a>

改成：

1

<?php the_tags('标签：', ', ', ''); ?>
添加日期

找到：

1

31st Sep, 09

改成：

1

<?php the_time('Y年n月j日') ?>
显示评论数
1

<a href="#">7 Comments</a>

改成：

1

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>
添加编辑按钮

接上面的评论代码，改成

添加文章内容

将 <!-- Post Content --> 和 <!-- Post Links --> 之间的代码全部删除，替换成：

1

<?php the_content(); ?>

另外，你可以将文章页那张图片删除了，删除以下代码：

1

<img class="thumb" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" alt=""/>
添加返回博客首页和发表评论按钮

其实就是添加博客首页和评论锚点链接，在制作header.php，我们已经知道可以通过get_option('home');来获取博客地址。

1

<p class="clearfix"> <a href="blog.html" class="button float" >&lt;&lt; Back to Blog</a> <a href="#commentform" class="button float right" >Discuss this post</a> </p>

改成：

1

<p class="clearfix"> <a href="<?php echo get_option('home'); ?>" class="button float" >&lt;&lt; 返回首页</a> <a href="#commentform" class="button float right" >发表评论</a> </p>
加上一个条件语句

如果不加上条件语句，WordPress就不会去数据库读出你的文章内容，也就不能显示出内容。搜索代码：

改成：

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="errorbox">
        没有文章！
    </div>
    <?php endif; ?>
    <?php get_sidebar(); ?>
文章页顶部文字

Our blog, keeping you up-to-date on our latest news.

可以替换成你的内容。如果不需要，可以将以下代码删除：

1
2

<h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
    <div class="hr grid_12 clearfix">&nbsp;</div>

至此，主题的文章页文件single.php制作完成。

代码转自露兜博客

精品推荐：