首页 > 上海日记 > WordPress添加Read More的方法
2009
08-08

WordPress添加Read More的方法

北街今天浏览 Alex 的博客时候,发现首页每篇文章显示文章摘要的地方都有一个“Read More”的链接。读者点击这个链接,就可以继续阅读整篇文章。北街博客在刚建站的时候就想实现这个功能,因为不得法门,所以弄了好久都没成功。通过这篇文章才知晓 WordPress 使这个技术非常地简单,而且可以自定义。

一、什么是文章摘要?
摘要通过两种方法显示在 WordPress 上:

一种是将 index.php 模板中 “the_content()” 替换为 “the_excerpt()” 。然后你在后台的管理首页 > 日志 > 撰写日志中输入的清楚的摘要。

另外一种就是最常用的方法,在 index.php 中保留 “the_content()” ,然后在文章中一个你认可的 “截断点” 插入一个叫做 “更多” 的 quicktag 标签。Quicktags 是小按钮,可以在管理首页 > 撰写日志 > 面板中的编辑窗口的上面工具栏找到,就在 “删除链接” 按钮的后面。

二、添加 Read More 的方法
Index.php 模板中 the_content() 内部的参数是这样的:

<php the_content('more_link_text', strip_teaser, 'more_file'); ?>

第一个,more_link_text,他可以将链接原文设置为像 “阅读更多的” 或者 “Read More” 。
第二个,strip_teaser,设置了“阅读更多的”是应该隐藏,还是应该显现。默认为 false ,这样就会显示链接。
第三个,more_file,如果你想要不同的话,将链接设置到文件上,应该链接 “阅读更多的” 。默认情况下,它链接到当前的文章文件。
例如:

<?php the_content(__('','FALSE','')); ?>

三、设计更多的标签
因为你知道了它是怎样运行的,现在我们看看怎样将在这个继续阅读你的文章的小邀请变得更加地吸引人。如果你想将单词 Read More… 改为其它的什么东西,只要在标签中输入新的单词:

<?php the_content('继续阅读...'); ?>

或者输入一些更加复杂的,使其变得有趣:

<?php the_content('...你座位的边缘? 点击这儿来解开奥秘。'); ?>

我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道…在你座位的边缘? 点击这儿来解开奥秘。

  有的人不想要文章,更喜欢使用一个延伸的字符,或者 HTML 字符实体来引导读者阅读整篇文章。

<?php the_content('&amp;raquo; &amp;raquo; &amp;raquo; &amp;raquo;'); ?>

看起来会像这样的:

我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道» » » »

四、添加一个图像
CSS 设计的可能性,事实上是无限的, WordPress 允许你在它们许多的模板标签中使用图像,包括 more 标签。有两种方法可以添加一个图像。以最简单的方法开始—在 “the_content()” 模板标签上将它列出来。

这个例子特点是 “阅读更多的” 文本后有一个叶子的图像。

<php the_content('Read More...<img src="/images/leaf.gif" 
alt="阅读更多的" 标题="阅读更多的..." />'); ?>

注意代码在图像标签中使用了一个 ALTTITLE 。这样做为了遵从访问权限和网络标准,因为图像既是一个图像又是一个链接。下面是它可能看起来是怎样的:

如上所述的,你甚至可以给图像添加一个样式和 more 标签,将他设计地更好。使用图像时,不要 “阅读更多的” 文本,删除文本就行了。

第二个例子使用了 CSS 背景图像。在上述的例子中,我们已经描述了怎样使用样式级别。这是一个小 tricker.css 容器的格式应该设置允许背景图像在文本后显示。如果你要将上述的例子用作一个背景图像,关于这个的 style.css 样式表看起来像:

.moretext {
width: 100px;
height: 45px;
background:url(/images/leaf.gif) no-repeat right middle;
padding: 10px 50px 15px 5px}

右边距的 50px padding 应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是“真在那儿”,而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。

最后编辑:
作者:北街
身高八尺,腰围也是八尺!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

WordPress添加Read More的方法》有 7 条评论

  1. 江夏离 说:

    不错。值得学习啊,顶一个

  2. AK 说:

    😛 thankyou

  3. hello 说:

    谢谢!学习了

  4. 卢松松 说:

    最开始我在平平的博客中看到他用了这个技术,本来我也想用的。。

  5. bolo 说:

    学习后飘过

AK的回复 取消回复

你的email不会被公开。