2008.05 19

如何让Wordpress实现文章的自动截断

标签: , ,
Wordpress, 资源共享

我们知道，如果用<?php the_excerpt(); ?>可以实现文章的摘要输出，但它不会按一定的字数输出，即我们所说的自动截断。很多人都想实现这个效果，无奈教程很少。比如我，在用Wordpress初期，也想尝试这种效果，当然，没成功，因为对WP并不熟悉，再之是不懂得CSS。

今天，让我们来说说如何让WP实现文章的自动截断输出吧。不懂PHP/JS，所以，无法从这两个方面实现，但有两种比较简单的，即利用插件和CSS。而我们介绍的也是这两种方法。

  • 利用插件自动截断

    Advanced Excerpt

    这个插件需要你调用<?php the_excerpt(); ?>，然后在后台做相应的设置，详情如下图。我在sofish v1.0这个主题用的就是这个插件。

    advanced excerpt

    WP Limit Posts Automatically

    同样是一个非常强大的插件，功能比上一个插件还多，支持按单词（英文，如sofish只认为是一个单词）输入、按字数（中文用户或许应该选择这个，方便控制）、只输出第一段，更详细的设置作者哪里有图示，这里就不贴图了。

    Limit-Post

    这个插件使用应该是比较简单吧。不过，只是用 < ? the_content_limit(1000, "Read more…);?>来调用，当然，"1000"是你所要显示的数字。简单，或许是不错的选择。

  • CSS实现文章自动截断输出

    这个方法第一次是从5key那里得来的。这个方法在Firefox下是不会显示省略号的。具体的方式是：

    div.test{
    width:200px; // 宽度一般会继承上级容器
    height:100px; // 注意设置你的高度
    border:1px solid red;
    border-top:4px solid red;
    padding:10px;
    overflow:hidden; // firefox下隐藏超出部分
    text-overflow:ellipsis; // 显示省略号，FF下只显示截断
    white-space:nowrap; // 强制不换行
    }

我想，如果你不懂怎么用CSS的话，用插件是非常方便的事。如果你懂的CSS的话，用插件也是非常好的选择。我们通常都只是单纯都希望截断，然后忘记了表现形式。最好的方法是将两者结合。比如用这个来控制每篇文章都在同样大小的区域内显示。这对于想做一个CMS型的主题，也是非常棒的方法。

OK，这里祝你成功了。如果你有更好的方法，让大家知道吧。也可以让我添加上，给我写邮件，或者，留言。

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » Wordpress, 资源共享 »

19

  1. 2008.05.19 6:25 pm
    一亿度(visit): [回复]

    按一定字数显示摘要到蛮省事的，写完文章也不用添加more标签了。留个记号，以后可能用得着。

  2. 2008.05.19 8:15 pm
    小墨(visit): [回复]

    都用的more~~

  3. 2008.05.19 9:44 pm
    sofish(visit): [回复]

    @一亿度: 我也习惯加more,那也是比较方便的,这样的方法,一般博客也很少用上…

    @小墨: 听起来像,都用”墨”了,哈哈…

  4. 2008.05.20 4:24 pm
    一亿度(visit): [回复]

    小墨，名字不错！哈哈

  5. 2008.05.20 10:14 pm
    chunfa(visit): [回复]

    没用过这个功能，都是全文输出。中文工具箱也可以吧？
    还有，博主交换链接吗？

  6. 2008.05.20 11:38 pm
    sofish(visit): [回复]

    @一亿度: 哈哈,听起来挺亲切的…

    @chunfa: 我已经将你添加了…呵呵…

  7. 2008.05.21 12:18 am
    chunfa(visit): [回复]

    看见了，:)

  8. 2008.07.26 8:30 pm
    jackie(visit): [回复]

    我还是全文的吧，这样浏览都要舒服多了，不然看一篇点一次再返回一次。太麻烦。

  9. 2008.07.26 9:26 pm
    睡到自然醒blog(visit): [回复]

    同more:)

  10. 2008.07.30 4:16 pm
    lifishake(visit): [回复]

    white-space:nowrap;
    这一句是必须的吗?感觉有时候会影响效果吧…

  11. 2008.07.30 6:54 pm
    sofish(visit): [回复]

    不会啊,这个是强制不换行的,是必要的…

  12. 2008.11.09 1:50 pm
    JoBru(visit): [回复]

    这里的图片超出了～～

  13. 2008.11.09 2:26 pm
    sofish(visit): [回复]

    @JoBru: 哈哈，暂时只能这样了。不想缩小^,^…

  14. 2008.11.13 1:04 pm
    racoonwise(visit): [回复]

    第一个插件判断字数的时候能分辨中文么？

  15. 2008.11.26 11:59 pm
    不是(visit): [回复]

    感觉这类型插件的功能还是有提升空间的，比如增加按行截断的选项，在（ 首页、分类、归档、搜索）使用不同的截断方式等…

  16. 2008.11.30 8:13 pm
    修行(visit): [回复]

    FireFox可以使用Hack写入content: “…”;或者图片解决~

  17. 2009.05.08 8:09 pm
    l(visit): [回复]

    不错,采用了!

  18. 2009.12.05 11:24 pm
    XXWY(visit): [回复]

    Advanced Excerpt 不能用 函数放哪里 我用INOVE主题

  19. 2010.01.20 2:44 pm
    宝宝抱抱(visit): [回复]

    不知道有没有办法用js实现呢？

Additional comments powered by BackType