简书仿站报告(四):如何制作文章详情页

看这篇文章之前,请先看看:
《简书仿站报告(一):建站前的基础准备》
《简书仿站报告(二):如何实现首页基础功能》
《简书仿站报告(三):关于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;?>

最终实现的效果:

简书仿站-文章详情页最终效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容