Wordpress 最简单的首页文章截断输出方式

有个插件名字叫 Limit Posts Automatically，可以统一截断首页的文章输出。我以前用过，但是后来觉得为了一个小功能引入那么大的插件，不太合算，所以自己研究了一下这方面的 PHP 函数。

最终被我找到的函数是 mb_strimwidth()。它能满足的需求有：正确截断，无乱码，每条截取内容的长度基本相等。

先简单介绍一下。mb_strimwidth() 会根据"宽度"来截取文字，全角字符宽度为2，半角字符为 1，只要我们将截断的宽度设置为偶数，那最后截断输出的内容一定不会有乱码。

在截断输出首页文章内容的问题上，我们还应该搭配 strip_tags() 来共同实现。strip_tags() 的作用是清除字符串内的 html 标签，放在这里就是清除输出的内容格式(包括清除图片)。既然目的是截取小段文字，自然也不需讲求格式。

废话打住，说"正题"：

请找到模板内 index.php 中的

<?php the_content(); ?>

将其替换为

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 120,"......"); ?>

之后首页文章内容截断输出就实现了。更改截取字数请调整例子中的 "120" 为你想要的数值，它后面的 "......" 是输出末尾的替换内容，款式参考我的首页。这六个点也算在 120 之内，占 6 个半角宽度。

如果有看我前面对 mb_strimwidth 的介绍，聪明人该知道怎么将他们用在 Wordpress 模板侧边栏，毕竟在 css3 普及之前，用 PHP 的截断方式肯定是最佳的侧边栏截断选择。

P.S 完全使用我的方法，又出现错误，那么估计是你的主机没有安装 multibyte string extension ，对此我爱莫能助。

Tag(s): ,
  • QQ书签
  • Del.icio.us
  • 百度收藏
  • Google
  • 饭否
  • FriendFeed
Shawn Published@14:43 / 2008-10-21 / Trackback / Skip
45 Comments Contributed by Visitors
  1. rebuttonfind / 16:02@2008-10-21 1
    find

    :cool: 对PHP不通,但是好容易路过,必须回复一下才甘心.

  2. rebuttonShawn / 16:08@2008-10-21 2
    Shawn

    @find: 呵呵，你的网页很有趣。

  3. rebutton老所 / 16:51@2008-10-21 3
    老所

    好文！the_excerpt的替换方法：）

  4. rebutton老所 / 16:52@2008-10-21 4
    老所

    现在就试验去：）

  5. rebuttonShawn / 16:53@2008-10-21 5
    Shawn

    @老所: 其实我上回就想告诉你，可是你那里我评论的时候只要发这俩函数就被过滤，所以我才说你那里过滤严重。

  6. rebutton老所 / 16:55@2008-10-21 6
    老所

    @Shawn: 嗯，我正需要使用这个办法来调整我的tag搜索以及其他文章查询结果。等我调整好这些后，嘿嘿，俺再把你的笔记本留言给搬过去，哈哈

  7. rebutton老所 / 16:56@2008-10-21 7
    老所

    你的评论里要加代码需要加什么标签么？

  8. rebuttonShawn / 16:59@2008-10-21 8
    Shawn

    @老所: 只要把俩对尖替换成 <和 > 就成，其他不用变化。

  9. rebuttonShawn / 17:00@2008-10-21 9
    Shawn

    @老所: &lt; 和 &gt;

  10. rebuttonShawn / 17:05@2008-10-21 10
    Shawn

    @老所: 我去看了你的首页，你忘了在 php 之外用 <p> </p> 把它们包上。

  11. rebuttonNickyYe / 17:06@2008-10-21 11
    NickyYe

    好方法，赞。
    不过我还是习惯首页完整输出的，看起来也方便点，不然同时只能看一篇。
    当然这是有得有失的事情，各有所爱～

  12. rebuttonShawn / 17:10@2008-10-21 12
    Shawn

    @NickyYe: 其实最影响的是 SEO，至于样式倒是额外的考虑。。。要知道你首页和单篇有完全相同的内容的话，两方在搜索引擎面前的权重都一样，等于是在分散权重。当然，不在乎SEO就无所谓了。。。

  13. rebutton老所 / 17:17@2008-10-21 13
    老所

    首页调整完毕！多谢Shawn!!!

  14. rebuttonnetputer / 17:18@2008-10-21 14
    netputer

    嘿嘿，有用哦！
    不过直接清除掉HTML格式不太好吧。。

  15. rebutton老所 / 17:20@2008-10-21 15
    老所

    @netputer: 我到觉得清除掉HTML很不错：）

  16. rebuttonShawn / 17:30@2008-10-21 16
    Shawn

    @netputer: 不想清除格式就把 strip_tags 拿开。

  17. rebuttonShawn / 17:33@2008-10-21 17
    Shawn

    @老所: 其实你还可以用同样的方法来截短标题，这样会更好看一些，你那里有些长标题影响版面了。不过更好的办法是通过 css 把标题字号缩小一点。

  18. rebuttonShawn / 17:38@2008-10-21 18
    Shawn

    @netputer: 清除掉 html 格式之后，你自己在外部添加，还能创造明显区别于正文的样式，有什么不好？

  19. rebuttoniColor / 17:45@2008-10-21 19
    iColor

    哈哈,前几天我把首页弄成显示摘要时就遇到这个问题了,,瞎看了半天官方文档,也没找出个方法来,,
    不过,如果摘要内容不是正文开始部分的话,(比如我的有些摘要是选自正文内的一小部分)有没有更好的方法实现??(这样的话不知道是不是手动来的更实际??)

  20. rebuttonMY-Hou / 17:47@2008-10-21 20
    MY-Hou

    首页留HTML格式，存档页去...实在不习惯首页那么寡 哈哈

  21. rebuttonShawn / 17:48@2008-10-21 21
    Shawn

    @iColor: 我这个方法不适合设置特殊的摘要，你只能指定它从第几个字开始，至第几个字结束。你的要求其实没有全自动的方案，只能手动操作。。。

  22. rebuttoniColor / 17:49@2008-10-21 22
    iColor

    对了,,Yet Another Related Posts Plugin的截断好像对中英混合内容会有问题,怎么能改善一下吗??

  23. rebuttonShawn / 17:50@2008-10-21 23
    Shawn

    @MY-Hou: 我还不是为了 SEO :cry:

  24. rebuttonShawn / 17:53@2008-10-21 24
    Shawn

    @iColor: 我研究看看，一会儿告诉你。

  25. rebuttonShawn / 18:04@2008-10-21 25
    Shawn

    @iColor: 我看了，不是中英文混合的问题，是表情混合的问题。你在文章里加入了表情，Yarpp 的相关文章输出的时候将它们替换成了字符。如果不想替换，可以找到插件内 includes.php 文件 308 行，删除/([,;.-]+)\s*/','\1 但保留最外层引号就可以了。

  26. rebuttoniColor / 18:07@2008-10-21 26
    iColor

    @Shawn:
    OK,,收到,我试试,,多谢了... :smile:

  27. rebutton老所 / 18:12@2008-10-21 27
    老所

    嘿嘿，我使用这个方法把归档和查询界面都整了，漂亮多了，再次感谢shawn~

  28. rebuttonShawn / 19:16@2008-10-21 28
    Shawn

    @老所: 继续去猜密码？

  29. rebuttonleehow / 22:15@2008-10-21 29
    leehow

    你们两个擦出火花了。

  30. rebuttonShawn / 22:17@2008-10-21 30
    Shawn

    @leehow: 啥意思？

  31. rebuttonaunsen / 23:15@2008-10-21 31
    aunsen

    基本上很高深很奥妙

  32. rebuttonJoya / 0:24@2008-10-22 32
    Joya

    你的回复功能很有意思哇。就是@XXX 这种，很方便美观呐。

  33. rebuttonShawn / 0:35@2008-10-22 33
    Shawn

    @Joya: 呵呵，@xxx 这种可以安装 http://www.thinkagain.cn 做的插件。

  34. rebuttonEvan / 1:29@2008-10-23 34
    Evan

    谢谢，正是我要找的！

  35. rebutton春饼 / 14:39@2008-10-23 35
    春饼

    有了时间，我也要研究一下WordPress！

  36. rebuttonHumphrey / 16:56@2008-10-26 36
    Humphrey

    :lol: 在幸福收藏夹那里看到的原来是你的文章啊，呵呵……牛人！页面也相当好看，尤其是效果和速度！稀饭！

  37. rebuttonHumphrey / 16:57@2008-10-26 37
    Humphrey

    序号前的那个星星是在线和不在线的显示吗？有意思！！！ :eek:

  38. rebuttonShawn / 17:02@2008-10-26 38
    Shawn

    @Humphrey: 呵呵，没有那么神奇，不是在线的状态，是我最后回复的状态。也就是说评论当中，我回复的最后一条评论会被标记为绿色星号，而首页的最新一篇也是。

  39. rebuttonHumphrey / 17:13@2008-10-26 39
    Humphrey

    @Shawn: 呵呵，这个功能有意思哈，我还是把我那个评论插件卸了用你的吧，不然我刚改的评论序号就会显示的乱七八糟了。你这个插件即简单又实用！

  40. rebuttonShawn / 17:16@2008-10-26 40
    Shawn

    @Humphrey: 没必要，我可以教你怎么正确查询主楼层数。

  41. rebuttonHumphrey / 17:26@2008-10-26 41
    Humphrey

    @Shawn: 好啊好啊，高人愿意教小弟求之不得啊，用了wp-thread comments插件后，点reply然后发表，作者的楼层就不显示了，是不是要修改插件的php啊？

  42. rebuttonJoBru / 21:08@2008-10-27 42
    JoBru

    非常好～～

  43. rebuttonShawn / 2:54@2008-10-30 43
    Shawn

    :smile:

  44. rebutton任平生 / 0:58@2008-11-14 44
    任平生

    有用有用，拿走了

  45. rebutton胡想 / 2:06@2008-11-29 45
    胡想

    呵呵~最近正为首页文章截断而烦，shawn 的方法正好解决我的问题，先谢了 :lol:

  46. rebutton山上渔夫 / 17:53@2009-01-13 46
    山上渔夫

    刚才问了一个菜鸟问题 现在找到答案了 谢谢shawn

  47. rebutton山上渔夫 / 18:03@2009-01-13 47
    山上渔夫

    非常只好用 多谢啦

  48. rebuttonlisa / 23:41@2009-02-04 48
    lisa

    :lol: 可是图片貌似无法输出 - -

  49. rebutton修愚 / 2:43@2009-03-14 49
    修愚

    现在2.7里貌似在主题的INDEX文件里找不到“”

  50. rebutton路途志 / 0:30@2009-03-23 50
    路途志

    这个挺有意思，我正用得着

  51. rebutton路途志 / 11:57@2009-03-23 51
    路途志

    请教，这篇文章里代码部分的格式是怎么实现的

  52. rebuttoni.robot / 17:21@2009-03-29 52
    i.robot

    哈, 学会了~
    不过貌似strip_tags不起作用啊... :eek:

  53. rebuttontk / 9:29@2009-05-23 53
    tk

    你好，非常感谢的技术共享，我使用后发现首页文章截断不会出现More»字样，请问改怎么解决哦？
    我是把

    改成
    post_content)), 0, 120,"......"); ?>

  54. rebuttonre / 11:47@2009-06-04 54
    re

    @老所: @i.robot: sdfsfd

  55. rebuttonwhisperer / 5:53@2009-07-25 55
    whisperer

    对嘛 怎么添加“read more”啊，看到你主页已经添加了，但是查看文章分类页面还没有~

  56. rebutton漠天 / 9:13@2010-01-03 56
    漠天

    在截取的字段和六个点之间出现乱码是怎么回事，希望你你个看一下。

  57. rebuttonedikud / 13:37@2010-01-05 57
    edikud

    首页文章截断输出,用JQ怎样添加more>>像你这样的 :cool: 效果啊....

  58. rebuttonedikud / 13:48@2010-01-05 58
    edikud

    @someone 评论预览,你用JQ怎样实现的,我的新主题的评论样式模仿了你的啊,主题很快可以完工了...

  59. rebuttonedikud / 13:53@2010-01-05 59
    edikud

    ...#comment-6965 刷新也有平滑滚动的. :eek:

  60. rebuttonedikud / 14:16@2010-01-05 60
    edikud

    忘记写上我的网址http://www.mcooo.com/ :grin:

  61. rebutton杰伦迷迷 / 13:18@2010-02-27 61
    杰伦迷迷

    谢谢博主~~已经照做~~还有一个问题，怎么在被截断的文章后面显示“阅读全文”的超链接呢？期待解答。。。再次感谢

  62. rebuttonAndroid / 5:55@2010-05-03 62
    Android

    @Shawn: 找到以前的我了，你的热心依然不减！佩服！

  63. rebuttonpan / 20:10@2010-05-07 63
    pan

    用了你的代码，很有效

  64. rebuttonwtobase / 16:29@2010-09-01 64
    wtobase

    方法不错，收藏了。我有一个方法不知道行得通不，用css来隐藏多余的文字，如：控制高度与宽度，然后加个样式overflow:hidden;不知道这个对seo是否有利？请高手指点....

Leave Comments Here...

必填

必填&保密

随您

支持Ctrl+Enter快捷提交

  • 已部署"白忙活" Anti-Spam 系统，猪肉 Spammer 请注意查看源代码链接处。
  • 本站不会泄露您的邮件地址，敬请放心。
  • 支持常用 HTML 代码调用，插入 PHP 代码需注意：< = &lt;，> = &gt; 。
  • 仅当某人针对您的评论做出回应时，您才会收到由本站发出的通知信件。
  • 如您希望以相同方式通知某位网友，请点击 Reply 按钮，或自行输入 @对方名字:。
  • 鼠标移至评论列表中的 @someone: 区域即可自动显示 someone 的评论内容。
9 Trackbacks/Pingbacks

Shawn Blog

Shawn的个人博客(Blog)，分享Wordpress技巧和Firefox浏览器心得，关注Web 2.0应用发展，记录对虚拟主机的使用评价。