玩转WordPress “more”标签-WordPress啦

只要熟悉WordPress的用户都应该知道<!–more–>标签。在撰写文章时，你可以在文章的正文中插入<!–more–> 标签来创建文章摘要。这样文章里默认就会显示 “more…” 链接，读者点击它就可以阅读整篇文章。使用more标签时，在所有的非单篇文章浏览形式（如分类、标签和存档）下只会显示文章摘要，而只有在单片文章浏览形式下才会显示整篇文章内容。接下来我们就来看看下面的例子。

如何使用more标签

假设你有一篇文章内容如下:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

<!-more->

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor,
commodo a semper suscipit, sodales sit amet, nisi adipiscing.

那么在非单篇文章浏览形式下，你的文章将会这样显示:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
more…

而浏览单篇文章时，显示的内容如下:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor,
commodo a semper suscipit, sodales sit amet, nisi adipiscing.

全文显示了这篇文章并且没有more链接。

为何要使用more标签?

主要是因为摘要显示很实用，你可以在主页上显示多篇文章摘要，这样读者不需要往下拉动页面太多就可以快速地浏览所有文章的大概内容。如果你的摘要吸引了读者的注意力，他们就会想接着阅读整篇文章，那么只要点击“more”标签创建的链接就可以了。因此，这里就给大家介绍几种自定义more链接的文本内容的方法。

一篇一篇地自定义more标签文本

想自行定义你的more链接文本，这里有两个好方法。最简单的一个就是，在文章内容插入more标签时自行加入自定义的文本内容。例如，需要将默认的more改成 “keep reading this post”，你就可以将平常用的<!–more–>标签替换为:

<!--more Keep reading this post-->

使用这种方法，你可以为WordPress 中任何一篇文章的more标签设定独特的文本内容。这是WordPress一个非常讨人喜欢的地方，不过可能很多人还不知道。所以更多的人还是使用下面的方法来自定义每篇文章的more标签文本：

<?php $custom_more = get_post_meta($post->ID,  "custom_more_text", true);
if(!$custom_more) { $custom_more = "Keep reading  this post &raquo;"; }
the_content($custom_more); ?>

这段代码通过寻找自定义的一个叫做 “custom_more_text” 的字段，并将它的值显示为该文章的自定义more标签文本。

统一定制more标签文本

估计有人会嫌一篇篇地修改more文本的方式麻烦，其实也可以为整个网站的所有文章一起设定more标签文本。最简单常见的方法就是在the_content() 模板标签里添加自定义文本：

<?php the_content('Keep reading this post'); ?>

你甚至可以根据自己的需要给显示效果设定一个格式：

<?php the_content("<span  class="custom-more">Keep reading this post</span>");  ?>

我相信大多数WordPress内行人都对这个比较熟悉，也应该经常使用这种方法。不过还有一种方法也可以达到同样的效果，它是通过functions.php文件来实现的。WordPress 2.8以后，我们可以使用新的filter hook来过滤整个网站的more标签文本:

function my_more_link($more_link, $more_link_text) {
return str_replace($more_link_text, 'Keep reading this post', $more_link);
}
add_filter('the_content_more_link', 'my_more_link', 10, 2);

首先进入你主题的 functions.php文件，然后将 “Keep reading this post”修改为任何你自己喜欢的more标签文本内容。这种方法没有对主题模板文件进行任何修改，非常适合想通过子主题来自定义more文本的用户。

自动将文章题目显示在more标签中

另外一个更酷的方法就是将文章题目放入到more链接文本里。例如，我们可以设置如下的效果:

Lorem ipsum..
Continue reading “Lorem Ipsum Strikes Back”

在more链接中加入你的文章题目，这样显得摘要更富有个性。代码如下:

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

就这样也行，不过下面的好像更简洁一点:

<?php the_content(the_title('Continue reading &ldquo;','&rdquo;',false)); ?>

如果你想在所有标签里显示相关文章的题目，那就用这个办法吧！

阻止more链接跳转到页面的中间

默认情况下，点击more链接将会将读者带到单篇文章浏览的形式，并且会转到more标签指定的位置。这样，如果你使用默认的more标签功能，读者点击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');

这样就可以阻止more链接的跳转，读者也不会觉得突兀。注意，此功能只适用于WordPress 2.8及以后的版本。

用more标签来自定义页面

more标签的主要用途是打开相关文章的独立浏览模式。但有时也不是这样的，你是否有需要将more链接的目标指向另一个不同的页面呢？为了更好地理解这一点，我们来看一下the_content() 模板标签里提供的参数:

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

这里，$more_link_text 参数定义了more链接使用的文本；$strip_teaser 参数定义了一个布尔值来决定是否显示more链接。第三个参数就是我们这里需要用到的参数。$more_file参数指定了more链接应该指向的URL地址，默认情况下，这个 URL将会指向相关的单一文章浏览模式，但是我们也可以对它进行自定义:

<?php the_content('Order Now!', FALSE, 'http://amazing-product.com/order-page.html'); ?>

或者其他任何你需要的URL地址，当然，很少人会这么使用，不过如果有人需要的话，是可以用上面的方法实现的。

More标签的样式

需要修改所有标签的样式，最简单的办法就是使用内置的分类属性。默认情况下，所有WordPress more标签都会自动包含此分类。这样，你可以直接使用样式，例如：

.more-link {
border: thin solid black;
letter-spacing: 1px;
background: yellow;
font-size: 24px;
color: red;
}

如果你还需要额外的其他属性，你可以通过the_content()模板标签来整合更多的自定义内容:

<?php the_content("<span  class="custom-more">Keep reading <em>this</em>  post</span>"); ?>

这样你就可以在CSS中使用下面的代码了：

.custom-more {
font-weight: bolder;
}
.custom-more em {
font-weight: normal;
font-style: italic;
}

当然，上面只是一个简单的例子，你可以添加任何其他你需要自定义的内容。

给more标签添加图片

最后给大家介绍下给more标签添加图片的方法来结束这篇文章。第一种方法就是，直接在the_content( ) 模板标签里添加图片元素：

<?php the_content('<img  src="http://domain.tld/read-more.png" alt="Arrow"  title="Read more" />'); ?>

这样你的more标签就会显示图片而不是文本了。你也可以添加一些文本，但是如果你不熟悉<img>元素的alt和title属性，你也可以完全绕开<img>元素，使用CSS来定制图片风格:

.more-link img {
background:url(http://domain.tld/read-more.png) no-repeat left center;
padding: 10px;
height: 100px;
width: 300px;
}

同样的，这也仅是一个例子，more标签还有很多用法，你可以尽情发挥自己的想象力。

来源：Cool Things You can do with the WordPress “more” Tag

分类：新闻资讯

标签：“more”标签, 使用技巧, 多样, 实用, 方法

首页 > 新闻资讯 > 玩转WordPress “more”标签