原文出处:露兜博客 https://www.ludou.org/create-wordpress-themes-single.html

因原文发表时间较早,已有部分内容过时,所以转载时略有删改。


今天我们来制作单文章页single.php,有了之前制作index.php的经验,制作single.php也不再那么难了,这里将直接略过一些内容,直接给出结果。如果对某些修改不太清楚,可以先参考:WordPress主题制作全过程(八):制作index.php

添加文章标题

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

改成:

1
2
3
<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('标签:', ', ', ''); ?>

添加日期

找到:31st Sep, 09 改成:

1
<?php the_time('Y年n月j日') ?>

显示评论数

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

改成:

1
<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>

添加编辑按钮

接上面的评论代码,改成:

1
2
<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>
<?php edit_post_link('编辑', ' • ', ''); ?>

添加文章内容

将<!– 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
2
3
4
<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>

改成:

1
2
3
4
<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 –>

改成:

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"> </div>

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。