北街今天经过Alex 的博客时,发现他首页每篇文章显示文章摘录的地方都有一个“Read More”的链接。点击这个链接,读者可以继续阅读整篇文章。我刚建站的时候就想实现这个功能,但是由于不得法,弄了好久都没成。其实WordPress使这个技术非常地简单,并且是可以自定义的。
摘录基本知识
摘录通过两种方法显示在WordPress上。
一种是将index.php模板中“the_content()”替换为“the_excerpt()”。然后你在后台的管理首页 > 日志 > 撰写日志中输入的清楚的摘录。
另外一种就是最常用的方法,在index.php中保留“the_content()”,然后在文章中一个你认可的“截断点”插入一个叫做“更多”的quicktag标签。quicktags是小按钮,可以在管理首页 > 撰写日志 面板中的编辑窗口的上面工具栏找到,就在“删除链接”按钮的后面。
阅读更多的方法技术
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('» » » »'); ?>
看起来会像这样的:
我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道» » » »
添加一个图像
CSS设计的可能性,事实上是无限的,WordPress允许你在它们许多的模板标签中使用图像,包括more 标签。有两种方法可以添加一个图像。以最简单的方法开始—在the_content()模板标签上将它列出来。
这个例子特点是“阅读更多的”文本后有一个叶子的图像。
<?php the_content('Read More...<img src="/images/leaf.gif"
alt="阅读更多的"标题="阅读更多的..." />'); ?>
注意代码在图像标签中使用了一个ALT 和TITLE。这样做为了遵从访问权限和网络标准,因为图像既是一个图像又是一个链接。下面是它可能看起来是怎样的:
如上所述的,你甚至可以给图像添加一个样式和more 标签,将他设计地更好。使用图像时,不要“阅读更多的”文本,删除文本就行了。
第二个例子使用了CSS背景图像。在上述的例子中,我们已经描述了怎样使用样式级别。这是一个小tricker.容器的格式应该设置允许背景图像在文本后显示。如果你要将上述的例子用作一个背景图像,关于这个的style.css样式表看起来像:
.moretext {
width: 100px;
height: 45px;
background:url(/images/leaf.gif) no-repeat right middle;
padding: 10px 50px 15px 5px}
右边距的50px padding应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是“真在那儿”,而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。


支持
学习后飘过
学习了
最开始我在平平的博客中看到他用了这个技术,本来我也想用的。。
谢谢!学习了