简书仿站报告（二）：如何实现首页基础功能
在《简书仿站报告（一）：建站前的基础准备》这篇文章中，已经详细介绍了仿站前的准备工作。今天的内容主要是开始制作简书仿站的首页，如何将静态的html文件（虽然已经改成.php后缀了），变成动态的php文件，绝不是将文件名后缀改成php就算php文件。简而言之，就是如何将仿站首页的内容和WP（WordPress，以下简称WP）的后台管理系统联系起来，将我们在后台发布的文章调取到首页，实现动态网页的效果。
准备工作
1.发布几篇文章，添加不同的分类，供以后调取备用
在做之前，我们先去自己的WP后台，发布几篇文章。（本地服务器的）打开127.0.0.1/wordpress/wp-admin登入页面，（购买服务器的）打开你的域名/wp-admin，比如我的话，www.designnote.cn/wp-admin，（这是登陆页面，下次记住了，不说了）输入你的用户名和密码，登陆到WP的后台（以下简称仪表盘），然后选择【文章】-【写文章】，写几篇文章备用，注意在内容编辑区的右侧有一个添加新分类的选项。添加几个分类，随便写几个，比如我的话，随便写了CSS3、Moblie、JQuery、Responsive这几个分类，然后再在每个分类上都发布几篇文章，文章内容随便写，找几篇简书上面的文章复制粘贴一下就可以了。然后在【文章】-【所有文章】中就可以看到你发布的所有文章了。
准备调用的文章
2.解决上次遗留的问题，相对地址错误了。
在WP的仪表盘，选择【外观】-【编辑】，然后选择index.php。这是我们仿站的首页文件，接下来的内容就在这个编辑区中修改，修改完后，点击下面的更新按钮提交。
代码编辑区
注意：修改一点，更新一点，这样，一旦发生错误，才会知道哪里错了，便于复原回来。
现在我们来解决相对地址错误的问题，在你的index.php中看一下，有没有我下面图片红框圈出来的东西。
相对地址错误需要修改的地方
把代码中所有./首页 - 简书_files都找出来，替换成以下代码：
<?php bloginfo('template_directory'); ?>//显示主目录的固定链接
为什么要这样写呢，因为简书的所有文件都存在主目录的jianshu文件夹中了，而不是存在“首页-简书” 这个文件夹里了。
然后再打开你的首页，看看，正常了吧~
接下来我们开始做了~（需要点Html基础）
首先分析一下简书首页的核心内容模块，看下面的图片，重点的地方我已经标出来了。每篇文章的调取都包括红字标出的8个方面，分别是调取文章的标题、文章的部分内容、作者的头像、作者名字、文章分类、入选专题、评论数、人气数。然后循环调取多篇文章，我们暂时设置调取10篇文章好了。
简书首页
入选专题这块涉及到其他的页面制作，先放一边。评论数这个以后会有一篇文章详细介绍如何实现评论功能，也暂放一边，人气数这个功能可以用插件来实现，也先放一边，以后介绍。我们要今天要实现的就五个功能，分别是调取文章标题、文章部分内容、作者名字、作者头像、文章分类。
1.找到代码中代表核心模块的地方，删除多余的代码。
核心模块的代码从第236行开始（用Dreamweaver打开看几行），就是<ul class="thumbnails">这行开始，保留第一个
< li></ li>
下面的都删掉吧，只要保留第一篇文章就可以，多篇文章可以用循环多次调取的方式，把从第258行开始，到617行都删掉。
第一篇文章的代码-要保留的代码
2.提取10篇文章，设置循环调取的函数
提取10篇文章的函数为：
<?php query_posts('showposts=10'); ?>
将它放在<ul class="thumbnails">前面。
循环调取的函数为：
<?php while (have_posts()) : the_post(); ?>
<?php endwhile;?>
将它放在
< li></ li>
上面，包裹着li
提取10篇文章函数和设置循环调取函数的放置位置
循环调取函数结束标记的放置位置
3.调取文章标题
找到文章标题的代码，看下面，就是这段
<a class="title" href="http://www.jianshu.com/p/7089ae79c660"
target="_blank">佛教中的段子手----禅宗</a>
把这段代码换成下面的代码
<a class="title"href="<?phpthe_permalink() ?>" target="_blank">
<? php the_title(); ?></a>
解说：
<? php the_permalink() ?>//意为调取当前文章的链接
<? php the_title(); ?>//意为调取当前文章的标题
修改完了，点击下面蓝色的更新按钮，然后去首页看看，标题是不是调取过来了~正是你原先写来备用的文章标题。
4.调取文章的部分内容
下面是代表文章的内容部分的代码：
<a class="content"
href="http://www.jianshu.com/p/7089ae79c660"target="_blank">
禅宗是佛教的世俗化，也是佛教的中国化。
季羡林先生是这么说的： 首先，一部分禅宗大师，比如百丈怀海，
规定和尚必须参加生产劳动，认为“担水砍柴，无非妙道”。印度佛
教本来是不让和尚劳动的。这种做法脱离群众，引起非议。中国禅
宗一改，与信徒群众的隔阂就除掉了。这也符合宗教发展的规律。
因此，在众多...</a>
将它替换成下面的代码：
<a class="content"href="<?php the_permalink() ;?>" target="_blank">
<? php echo mb_strimwidth(strip_tags
(apply_filters('the_content', $post->post_content)), 0, 290,"..."); ?></a>
然后更新看看，内容是不是也调取过来了。
5.调取作者名字
找到下面的作者部分的代码：
< a class="author"
href="http://www.jianshu.com/users/476c057d254d">霍真布鲁兹老爷</ a>
替换为下面的代码，就是把“霍真布鲁兹老爷”替换成php函数
<a class="author" href="http://www.jianshu.com/users/ee4d96b80f41">
<?php the_author(); ?></a>
至于作者主页的链接就先放着，因为作者页还没做。
6.调取文章分类
找到下面的代表文章分类部分的代码，就是class=notebook的这段代码。
<a class="notebook"
href="http://www.jianshu.com/notebooks/254113/latest">今夕何夕</a>
替换成下面的代码：
<a class="notebook">
<? php the_category(',') ?></a>
7.调取作者的头像
找到下面代表作者头像的代码：
<a class="avatarmaleskine-author"data-user-slug="476c057d254d"
href="/users/dcc2fa4844d0">
<img alt="B551dd52c001"quality="100"
src="./首页-简书_files/b551dd52c001.jpg"
thumbnail="90x90"></a>
将整个<img/>替换成头像的函数。替换完就变成下面这样了。
<a class="avatarmaleskine-author"data-user-slug="476c057d254d"
href="/users/dcc2fa4844d0">
<?php echo get_avatar( get_the_author_email(), 60 ); ?></a>
因为这个头像调取函数是调取gravatar网站的头像，因此要去这个网站注册上传一下头像就ok了。
到此就修改完了，更新一下，看看前台首页的显示如何。
如果头像不显示，可能是因为gravatar是国外服务器的关系。加载慢了，这个问题我们以后再解决。
最终效果如下：
最终实现的首页效果
