编辑“WordPress设计Read More样式”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶使用|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
我们在博客首页显示日志摘要时，总希望读者能够点击日志标题或某个链接，继续阅读日志全文。WordPress就为我们提供了自定义“Read More（阅读全文）”链接样式的机会。

==摘要形成原理==
WordPress通过两种方法显示日志摘要。第一种，用模板标签[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-the_excerpt%28%29.html the_excerpt()]代替[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-the_content%28%29.html the_content()]，之后我们在管理页面中“添加新文章”下的“摘要”中输入的内容就会出现在博客首页上。如果没有在“摘要”中输入内容，日志的前55个单词会作为摘要被显示在首页上。当访问者阅读摘要后，希望了解更多相关信息时，可以点击日志标题阅读全文。

而在WordPress中，显示日志的最常用方法是：保留the_content()模板标签，在日志中选择一个适当的位置（预设一个摘要截取位置），插入一个名为more的快速标签（quicktag）。

控制板“添加新文章”中编辑窗口上方的小图标被称为[http://codex.wordpress.org/Write_Post_SubPanel#Quicktags 快速标签]。这些图标包括加粗、斜体、添加链接等，以及大名鼎鼎的“插入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”标签前的内容，作为摘要。

==设计Read More链接的技巧==
模板标签[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-the_content%28%29.html the_content()]的参数如下：
 <?php the_content( $more_link_text , $strip_teaser, $more_file ); ?>  

$more_link_text将链接文本设置为类似“Read More”的内容。第二个参数$strip_teaser决定是（TRUE）否（FALSE）隐藏“more”链接，该参数的默认值为FALSE——不隐藏more链接。最后一个参数$more_file将链接连接到我们所希望的“Read More”被链接到的内容中。默认情况下，$more_file链接到当前日志文件。

如果不希望显示摘要：
将index.php中的the_content();更改为（例如让第二个参数控制属性值）：
 the_content('',FALSE,'');
在<!--more-->后的日志正文中立即包含<!--noteaser--> 

'''将Read More的链接指向摘要后的内容或正文顶部'''

默认情况下，访问者点击“Read More”链接时，网页会加载日志内容并将访问者带领到日志中<--more-->标签的位置上。如果我们不希望将访问者导向到这个位置，可以在主题的functions.php文件中加入以下代码：
 function remove_more_jump_link($link) { 
 $offset = strpos($link, '#more-');
 if ($offset) {
 $end = strpos($link, '"',$offset);
 }
 if ($end) {
 $link = substr_replace($link, '', $offset, $end-$offset);
 }
 return $link;
 }
 add_filter('the_content_more_link', 'remove_more_jump_link');

在WP 2.7.1以及之前的版本中，可以在[http://core.trac.wordpress.org/browser/trunk/wp-includes/post-template.php wp-includes/post-template.php]中编辑以下代码行，以此改变控制more指向内容的默认函数（<STRONG>注意</STRONG>：在WP   2.1之前，以下代码出现在 [http://core.trac.wordpress.org/browser/trunk/wp-includes/template-functions-post.php wp-includes/template-functions-post.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标签样式==
了解“Read More”的运行原理后，我们可以尝试把“Read More”内容变得更有趣些，激发访问者的阅读兴趣。

经过设计， [http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-the_content%28%29.html the_content()]标签包含了一个可以设计<!--more--> 内容和样式的参数，而<!--more--> 标签生成“continue reading（继续阅读全文）”的链接。

默认情况下，一个带有“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...'); ?>
也可以将more换成幽默的句子：
 <?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 ...[http://codex.wordpress.org/Customizing_the_Read_More#Designing_the_More_Tag On the Edge of Your Seat? Click Here to Solve the ]
 [http://codex.wordpress.org/Customizing_the_Read_More#Designing_the_More_Tag">Mystery.]
有些用户不希望在摘要中显示“Read More”等文本，他们希望用扩展字符或HTML字符实体将读者导向到日志全文。
 <?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的位置上显示日志标题。用[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-the_title%28%29.html 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 ...[http://codex.wordpress.org/Customizing_the_Read_More#Designing_the_More_Tag continue reading the story called A Tale That Must Be]
 [http://codex.wordpress.org/Customizing_the_Read_More#Designing_the_More_Tag Told]

===为每篇日志设计不同的more链接===
根据上文的描述，我们通常从模板中调用带有标准文本的 the_content()。但我们可以为一些日志设置其它的“more”显示方式。在可视化编辑器中，输入
 <!--more Your custom text -->。
这时在网页上看到的是：
 <!--more But wait, there's more! -->

'''添加图片'''
[[CSS]]为我们提供了无限的设计可能，WordPress也允许我们在很多模板标签中使用图片，包括more[[标签]]。有两种方法可以在more标签中插入图片。简单的方法是——在 模板标签the_content() 中展示图片。

下面的示例在“Read More”后加上了一片树叶。
 <?php the_content('Read more...<img src="/images/leaf.gif" 
 alt="read more" title="Read more..." />'); ?>

注意：上述代码在图片标签中使用了ALT和TITLE属性。这是为了符合[[网络]]标准以及保证图片的可访问性，因为图片不仅是图片，同时也是一个链接。下面是页面显示效果：
 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|WordPress设计Read More样式]]
我们甚至可以根据上一个章节中的描述进一步改造图片和more标签。如果只想使用图片二不想显示“Read More”，可以删除“Read More”字样。

第二个示例使用的是CSS背景图片。我们在之前的例子中以及论述过怎样使用样式类。这个例子稍微复杂一些。容器的样式必须设为允许背景图片显示在文本后。如果我们用上一个示例做背景图，其style.css样式表单应该显示为：
 .moretext {
   width: 100px; 
   height: 45px; 
   background:url(/images/leaf.gif) no-repeat right middle;
   padding: 10px 50px 15px 5px}
页面右边50像素的内边距能够保证文本与图片间的距离，保证两者不相覆盖。而高度则保证容器有足够的宽度容纳图片，因为背景图并不是“实际存在”的，也不可能与容器的边框相抵。我们需要将图片的大小和形状都考虑进去，用最适当的方式显示图片。

掌握这其中的基本原理后，我们就可以随心所欲地开始设计了。

==首页不显示Read More链接==
切记，网站首页 ([http://codex.wordpress.org/Function_Reference/is_home is_home()]== TRUE )是不显示 <!--more-->标签的，除非我们用以下代码来激活显示：

<?php  
global $more;  
$more = 0;  
?>  
参见论坛中[http://wordpress.org/support/topic/168032 More tag ignored on home page]。
==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|S]]
[[category:WordPress使用|S]]