WordPress + 继续阅读

之前在说重点 这边谈到如何摘录后,我就查一下我用的WordPress是否也提供这个功能,果真是功能强大到,这种细节的功能也有原文在此,Customizing the Read More,后来为嘉惠所有中文的读者,我也把它做了翻译,内容如下:

假如你已经设定了你的WordPress网站显示张贴的引用在首页,接下来你会想要访客按下标题或连结来鼓励他们继续阅读你张贴的文章,对吧?WordPress 可以让这个技术变得容易而且可以订制。

摘录的基础

在WordPress显示摘录有两种方法,一种是将模版标签the_content() 换成 the_excerpt(),然后你在管理面板 > 撰写 > 文章所输入的摘录就会出现,或者是张贴内容的前面55个字,然后使用者会因你的摘录介绍诱使他们按下标题继续阅读。

最常使用的方法是保留the_content() 模版标签并且新增一个叫作more的快速标签在你想要”截断” 的地方.

快速标签是在管理面板 > 撰写 > 文章编辑视窗上的一个小按钮,这些按钮有粗体斜体、连结、其他的按钮及最有名的more,移动你的游标到你想截断的地方按下more 快速标签按钮,然后会在那个地方出现像这样子的码:

and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on  his face and said  <!--more-->

文章的其余内容还是存在,但是除了在像是档案、分类、前页及搜寻之类的非单篇文章外,文章的内容会像more 的地方显示继续阅读。

继续阅读的技术

在模版标签the_content()中的参数如下所示:

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

more_link_text 设定像是”继续阅读”的连结文字,第二个参数strip_teaser设定这个”more”连结是咬隐藏(TRUE)或是显示(FALSE),预设是FALSE也就是会显示连结文字,最后一个参数是more_file设定”继续阅读”的连结档案,如果你要有所不同的话,一般预设是连结到目前张贴的文章

要移除teaser:

  • 在你的index.php中改变the_content();成﹝这个函式的第二个参数控制像下列那样:﹞
the_content('','FALSE','');>
  • <!--noteaser--> 紧接在文章中<!--more-->.后。

跳到More或页首的连结

按照预设当你按下继续阅读的连结时,这个网页会载入然后”跳到”文章中有<--more-->标签的地方,假如你不想这样跳你可以在wp-includes/template-functions-post.php编辑下面这一行变成你想要的功能。

(注意: 在WP 2.1版中程式码是在wp-includes/post-template.php )。

(注意: 当你升级WordPress时这个档案会被取代,所以在升级后你要再一次修改这个档案。):

$output .= ' <a href="'. get_permalink()  . "#more-$id\">$more_link_text</a>";

改成

$output .= ' <a href="'. get_permalink()  ."\">$more_link_text</a>";

$output .= ' <a href="'. get_permalink()  .'">$more_link_text</a>';

设计More标签

你已经知道了怎么运作,现在让我们看看我们要如何做一个小邀请来让你的文章可以继续被阅读。

依照设计the_content()标签中有一个参数用来设定<!--more-->这个内容及外观,这个外观会产生一个”继续阅读”文章所有内容的连结。

预设看起来像这样:

and I told him that he should get moving or I’d be on him like a limpet. He looked at me with shock on his face and said more…

假如你想改变这些more….文字为其他的,只要在这个标签改成新的文字即可:

<?php the_content('Read on...'); ?>

或是像这样更复杂更有趣的样子:

<?php the_content('...on the edge of your seat? Click here to solve the mystery.'); ?>

你也可以在标签中使用样式。

<?php the_content('<span class="moretext">...on the edge of your seat? Click here to solve the mystery.</span>'); ?>

然后在你的style.css样式表中设定moretext类别成你要的样式,这里有一个例子它的特色是粗体加斜体并且使用font-variant: small-caps来强迫文字变成小的大写字样。:

and I told him that he should get moving or I’d be on him like a limpet. He looked at me with shock on his face and said …On the Edge of Your Seat? Click Here to Solve the Mystery.

有些人不想要使用文字而喜欢使用特殊字元或是HTML character entity来使读者能继续阅读。

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

这样看起来会像:

and I told him that he should get moving or I’d be on him like a limpet. He looked at me with shock on his face and said » » » »

the_content()模版标签中有另一个参数会将文章的标题放在more文字中,通过使用the_title()标签文章的标题会被使用进来:

<?php the_content("...continue reading the story called " . get_the_title('', '', false)); ?>

and I told him that he should get moving or I’d be on him like a limpet. He looked at me with shock on his face and said …continue reading the story called A Tale That Must Be Told

每篇文章都有订制的文字

虽然从模板中呼叫the_content()会产生像上面那样标准的文字,但是要对特定的文章让它有个别的文字也是可以的,只要这样写<!--more 你的订制文字 -->就可以。

增加图片

使用CSS来设计可以变得无限可能,而Wordpress也允许你使用影像在它们的模版标签中包括more 标签,要增加一个影像有两个方法,最简单的一个方法就是 — 在the_content() 模版标签中使用。

下面这个例子是在”Read More”后显示一个叶子的图片。

<?php the_content('Read More...<img src="/images/leaf.gif"  alt="read more" title="Read More..." />'); ?>

注意这段原始码使用了ALTTITLE 属性在image的标签中,这是遵循可携性及网站标准,因为image既是一个图片也是一个连结所以才要这样用,下面是它显示的样子

and I told him that he should get moving or I’d be on him like a limpet. He looked at me with shock on his face and said Read More… Image:Leaf.gif
你甚至可以像上面提到的增加样式到image 及more标签中,不想使用”继续阅读”这些文字而只要图片的话就把文字给删除就行

第二个例子是使用CSS 背景图片,我们已经说过在上面的例子中如何使用样式的类别,这是一个小偏方,这个容器的样式必须设成允许使用背景图片显示在文字后面,假如你要使用上面例子有背景图片,可以将style.css样式表改成像这样:

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

50px padding 是相对于右边界这样可以确使文字及图片不会互相覆盖,这个高度可以确保容器展开的够宽来让图片可以在容器内显示,这是因为背景图片不是”真的在那里”而且也不能相对于容器的边界来放入,你必须针对自己图片的尺寸及形状来做测试才能适合。

你已经了解基本的概念,从这里你可以开始你的想像。

以上翻译内容直接从此http://codex.wordpress.org.cn/index.php?title=%E8%A8%82%E8%A3%BD%E7%B9%BC%E7%BA%8C%E9%96%B1%E8%AE%80连结转贴来,如果文章内有无法连结现象请直接至该连结阅读,翻的不好可以直接修改,或回应给我修改也行,感谢您的阅读及参与!