导读:今天我们来制作单文章页 single php,有了之前制作 index php 的经验,制作 single php 也不再那么难了,这里将直接略过一些内容,直接给出结果
今天我们来制作单文章页 single.php,有了之前制作 index.php 的经验,制作 single.php 也不再那么难了,这里将直接略过一些内容,直接给出结果。如果对某些修改不太清楚,可以先参考:WordPress 主题制作全过程 (八):制作 index.php
1 、添加文章标题:
- <h3 class=「title」><a href=「single.html」>Loreum ipsium massa cras phasellus</a></h3>
改成:
- <h3 class=」title」><a href=」<?php the_permalink(); ?>「><?php the_title(); ?></a></h3>
2 、添加文章标签
- <a href=「#」>News</a>, <a href=「#」>Products</a>
改成:
- <?php the_tags(『标签:』, 『, 『, 」); ?>
3 、添加日期
找到:31st Sep, 09 改成:
- <?php the_time(『Y 年 n 月 j 日』) ?>
4 、显示评论数
- <a href=「#」>7 Comments</a>
改成:
- <?php comments_popup_link(』0 条评论』, 』1 条评论』, 『% 条评论』, 」, 『评论已关闭』); ?>
5 、添加编辑按钮
接上面的评论代码,改成:
- <?php comments_popup_link(』0 条评论』, 』1 条评论』, 『% 条评论』, 」, 『评论已关闭』); ?><?php edit_post_link(『编辑』, 『 • 『, 」); ?>
6 、添加文章内容
将<!-- Post Content --> 和 <!-- Post Links --> 之间的代码全部删除,替换成:
另外,你可以将文章页那张图片删除了,删除以下代码:
- <img class=「thumb」 src=「<?php bloginfo(『template_url』); ?>/images/610×150.gif」 alt=」」/>
7 、添加返回博客首页和发表评论按钮
其实就是添加博客首页和评论锚点链接,在制作 header.php,我们已经知道可以通过 get_option('home'); 来获取博客地址。
- <p class=「clearfix」> <a href=「blog.html」 class=「button float」 ><< Back to Blog</a> <a href=「#commentform」 class=「button float right」 >Discuss this post</a> </p>
改成:
- <p class=」clearfix」> <a href=」<?php echo get_option(『home』); ?>」 class=」button float」 ><< 返回首页</a> <a href=」#commentform」 class=」button float right」 > 发表评论</a> </p>
好了,基本上的修改就这些了,但是你的文章页仍然不能显示文章内容,你得给它加上一个条件语句,这样 WordPress 才会去数据库读出你的文章内容。搜索代码:<!-- Column 1 /Content -->
改成:
- <!– Column 1 /Content –>
- <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>
将:
- </div>
- <?php get_sidebar(); ?>
改成:
- </div>
- <?php else : ?>
- <div class=」errorbox」>
- 没有文章!
- </div>
- <?php endif; ?>
- <?php get_sidebar(); ?>
现在你的文章内容应该都可以正常显示了,一个文章页基本上也成型了。下节我们将讲解如何制作评论页,本次不提供修改的主题文件下载,下次一起提供。
另外,文章页顶部会有一段文字:
Our blog, keeping you up-to-date on our latest news.
可以替换成你的内容。如果不需要,可以将以下代码删除:
- <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」> </div>
好了今天的教程就讲到这。