简书仿站报告（四）：如何制作文章详情页

看这篇文章之前，请先看看：
《简书仿站报告（一）：建站前的基础准备》
《简书仿站报告（二）：如何实现首页基础功能》
《简书仿站报告（三）：关于WordPress建站的原理二三事》

简书仿站的文章详情页的基本功能跟首页差不多，因此制作的过程我就不再详细讲述。而是换一个角度，通过介绍那些文章详情页会使用到的函数的具体使用方法来更深入的理解制作的过程。

文章详情页的制作方法

1.建single.php，这是文章详情页的页面文件。

打开简书网站的任何一篇文章页，保存网页到桌面，会得到一个html文件和文章页所有文件的一个文件夹。将html文件改成single.php。连同文章页的所有文件图片JS等全部存到jianshu文件夹中。

2.登入你的WP后台仪表盘，找到single.php，就在这里修改内容。

在仪表盘右侧导航中找到【外观】-【编辑】，找到single.php文件，就可以在代码编辑区内修改了。（就跟前面找index.php方法一样，去看看报告（二）），以后的代码修改就在这里修改，然后点击下面的蓝色按钮更新，去前台看看效果。

3.修改single.php里头的相对地址

由于single页的所有的文件图片都保存到了jianshu文件夹这个主目录里头了，那么就把single.php中的相对地址都换上，还记得吧，用下面的代码。（忘记了就去看看报告（二））。

<?php bloginfo('template_directory'); ?>//表示主目录的地址

4.文章详情页的核心功能图是这样的，看下图：

简书文章详情页的核心功能图

以下介绍文章详情页核心功能会用到的WP函数（更正确是说话应该是WP的模板标签），用这些模板标签函数替换掉静态的文本就可以了。

1.获取文章标题

<? php the_title(); ?>//用于显示当前文章的标题

放在主循环内用于显示当前文章的标题。主循环是每循环一次就会有一篇当前文章，它就是显示当前文章的标题。循环还是要用的，因为不只是一篇文章的详情页，是很多篇文章的详情页，详情页的single.php虽然只有一个文件，但是代表了很多的文章详情页，所以就要用循环来实现多篇文章显示效果。

附.显示当前文章的链接

<? php the_permalink() ?>

这段标签用来显示当前文章的固定链接，标题鼠标点击以后的href一定会有链接，就用这个代替。由于the_permalink()只能显示正在被主循环处理的文章的固定链接，因此用户无法用它来显示任意文章。如果你希望显示某篇文章的固定链接，并且你知道这篇文章的ID，可以考虑使用get_permalink()。如果你希望不在主循环中使用，也请你用get_permalink()。比如<? echo'get_permalink(3);'?>，3是文章ID。

另外the_permalink()和get_permalink()的区别就是一个不加echo，一个加。以后碰到类似的其他模板标签，都是这个区别。get是获得的意思，获得了自然就要打印出来，就是echo了。

2.获取文章内容

<?php the_content();?>//主循环内显示当前文章的内容

这个也是要在主循环内使用的。（关于循环的内容，下次再讲，报告（三）有提到一点）。

这个标签更正确的用法是这样的：

<?php the_content( $more_link_text, $strip_teaser, $more_file ); ?
//后两个参数都可以默认，不用填

比如<?php the_content('Read more...'); ?>

Read more...就是文章末尾更多内容点击>>>之类的。
另外，这个标签，也有get_the_content()。

3.获取文章分类

<?php the_category(',') ?>

这个标签真正的用法是这样的。

<?php the_category( $separator, $parents ); ?> 

第一个参数是，多个分类之间用什么符号隔开，可以是空格，或者逗号之类的，比如<?php the_category(',') ?>，第二个参数是当你要显示父子分类目录的时候可以填，'multiple' 表示显示父子分类目录，'single' 是只显示子分类目录，这顺便也是默认模式***

4.获取时间

<?php the_time( 'Y-m-d H:i' ); ?>
//显示格式：2015-01-07 10：23

the_time();该标签显示当前文章的发表时间。()中的参数是你想要的时间格式。关于时间格式的问题，详情点击WP-时间格式的参数列表

5.获取文章字数

找到下面的代码，就是class="wordage"这段代码，然后修改成下面的样子。

<span class="wordage">字数: <?php echo count_words ($text); ?> </span>

修改完了，然后在jianshu文件夹中，新建一个functions.php，把下面的代码复制进去，保存。

<?php
function count_words ($text) { 
global $post; 
if ( '' == $text ) { 
$text = $post->post_content; 
if (mb_strlen($output, 'UTF-8') 
< mb_strlen($text, 'UTF-8')) $output .= mb_strlen(preg_replace
('/\s/','',html_entity_decode
(strip_tags($post->post_content))),'UTF-8') ; 
return $output; 
} 
}
?>

6.获取点击量可以用插件

这里不在说了，可以百度一下WordPress点击量插件，下载后，然后在仪表盘上传安装包就可以了用了。

7.获取文章的作者

用下面这个。

<?php the_author(); ?>

另外获取作者的网站链接用这个<?php the_author_url(); ?>
作者的网站链接可在WP后台用户资料（管理面板>用户>我的配置）中设置。

8.获取作者的头像

<?php echo get_avatar( get_the_author_email(), 60 ); ?>

60是尺寸大小，调用的是gavatar网站你注册的头像，虽然这个头像注册网站的使用率很高，但是因为是国外服务器，头像有可能显示不出来，因为网络加载的关系。网上有一些替代的方法。

9.记得在外面包裹一层循环

<?php while (have_posts()) : the_post(); ?>
<?php endwhile;?>

最终实现的效果：

简书仿站-文章详情页最终效果