模板标签 the_content() 显示当前文章的内容。该标签必须在 WordPress 主循环 (loop) 中。若文章使用快速标签 <!--more--> 来截取摘要,the_content() 标签将只在非单篇文章或非固定链接文章上显示 <!--more--> 前的摘要部分。 the_content() 标签可包含一个规定 <!--more--> 内容和样式的参数,该参数会生成 「继续阅读全文」 的链接。
关于 <!--more--> 标签有以下三条规定:
<!--more--> 快速标签中的 more 前不得有空格。否则 <!--more--> 将无法发挥作用。
<!--more--> 快速标签无法在模板中运行 (会被模板忽略),如 single.php 只会显示一篇文章。
改变 「READ MORE」 的样式
我们在博客首页显示日志摘要时,总希望读者能够点击日志标题或某个链接,继续阅读日志全文。 WordPress 就为我们提供了自定义 「Read More(阅读全文)」 链接样式的机会。
WordPress 通过两种方法显示日志摘要。第一种,用模板标签 the_excerpt() 代替 the_content(),之后我们在管理页面中 「添加新文章」 下的 「摘要」 中输入的内容就会出现在博客首页上。如果没有在 「摘要」 中输入内容,日志的前 55 个单词会作为摘要被显示在首页上。当访问者阅读摘要后,希望了解更多相关信息时,可以点击日志标题阅读全文。
而在 WordPress 中,显示日志的最常用方法是:保留 the_content() 模板标签,在日志中选择一个适当的位置 (预设一个摘要截取位置),插入一个名为 more 的快速标签 (quicktag) 。
控制板 「添加新文章」 中编辑窗口上方的小图标被称为快速标签。这些图标包括加粗、斜体、添加链接等,以及大名鼎鼎的 「插入 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() 的参数如下:
1 <?php
2 the_content( $more_link_text , $strip_teaser, $more_file );
3 ?>
$more_link_text 将链接文本设置为类似 「Read More」 的内容。第二个参数 $strip_teaser 决定是 (TRUE) 否 (FALSE) 隐藏 「more」 链接,该参数的默认值为 FALSE——不隐藏 more 链接。最后一个参数 $more_file 将链接连接到我们所希望的 「Read More」 被链接到的内容中。默认情况下,$more_file 链接到当前日志文件。
如果不希望显示摘要,那么可以将 index.php 中的 the_content(); 更改为 (例如让第二个参数控制属性值):
1 the_content('',FALSE,'');
或者在在 <!--more--> 后的日志正文中立即包含<!--noteaser--> 。
默认情况下,访问者点击 「Read More」 链接时,网页会加载日志内容并将访问者带领到日志中<--more--> 标签的位置上。如果我们不希望将访问者导向到这个位置,可以在主题的 functions.php 文件中加入以下代码:
01 function remove_more_jump_link($link)
02 {
03 $offset = strpos($link, '#more-');
04 if ($offset)
05 {
06 $end = strpos($link, '"',$offset);
07 }
08 if ($end)
09 {
10 $link = substr_replace($link, '', $offset, $end-$offset);
11 }
12 return $link;
13 }
14 add_filter('the_content_more_link', 'remove_more_jump_link');
在 WP 2.7.1 以及之前的版本中,可以在 wp-includes/post-template.php 中编辑以下代码行,以此改变控制 more 指向内容的默认函数 (注意:在 WP 2.1 之前,以下代码出现在 wp-includes/template-functions-post.php 中) 。
注意:升级 WordPress 时,该文件会被复原,因此我们需要保存所做修改,升级完毕后再重新修改文件。
我们需要将:
1 $output .= ' <a href="'.%20get_permalink()%20."#more-$id">$more_link_text</a>";
改为
1 $output .= ' <a href="'.%20get_permalink()%20."">$more_link_text</a>";
或
1 $output .= ' <a href="'.%20get_permalink()%20.'">$more_link_text</a>';
具体实现函数如下:
01 /**
02 * Retrieve the post content.
03 *
04 * @since 0.71
05 *
06 * @param string $more_link_text Optional. Content for when there is more text.
07 * @param string $stripteaser Optional. Teaser content before the more text.
08 * @return string
09 */
10 function get_the_content($more_link_text = null, $stripteaser = 0) {
11 global $id, $post, $more, $page, $pages, $multipage, $preview,$pagenow;
12 if ( null === $more_link_text )
13 $more_link_text = __( '(more...)' );
14 $output = '';
15 $hasTeaser = false;
16 // If post password required and it doesn't match the cookie.
17 if ( post_password_required($post) ) {
18 $output = get_the_password_form();
19 return $output;
20 }
21 if ( $page > count($pages) ) // if the requested page doesn't exist
22 $page = count($pages); // give them the highest numbered page that DOES exist
23 $content = $pages[$page-1];
24 if ( preg_match('/<!--more(.*?)?-->/', $content, $matches) ) {
25 $content = explode($matches[0], $content, 2);
26 if ( !empty($matches[1]) && !empty($more_link_text) )
27 $more_link_text =strip_tags(wp_kses_no_null(trim($matches[1])));
28 $hasTeaser = true;
29 } else {
30 $content = array($content);
31 }
32 if ( (false !== strpos($post->post_content, '<!--noteaser-->') && ((!$multipage) || ($page==1))) )
33 $stripteaser = 1;
34 $teaser = $content[0];
35 if ( ($more) && ($stripteaser) && ($hasTeaser) )
36 $teaser = '';
37 $output .= $teaser;
38 if ( count($content) > 1 ) {
39 if ( $more ) {
40 $output .= '<span id="more-' . $id . '"></span>' .$content[1];
41 } else {
42 if ( ! empty($more_link_text) )
43 $output .= apply_filters( 'the_content_more_link', ' <a href="' .%20get_permalink()%20.%20"#more-$id" class="more-link" target="_blank">$more_link_text</a>", $more_link_text );
44 $output = force_balance_tags($output);
45 }
46 }
47 if ( $preview ) // preview fix for javascript/ target=_blank class=infotextkey>javascript bug with foreign languages
48 $output = preg_replace_callback('/%u([0-9A-F]{4})/', create_function('$match', 'return "&#" . base_convert($match[1], 16, 10) . ";";'), $output);
49 return $output;
50 }
如果想点击 more 时弹出新页面,可以修改以上函数,加入 target="_blank" 即可。
了解 「Read More」 的运行原理后,我们可以尝试把 「Read More」 内容变得更有趣些,激发访问者的阅读兴趣。
经过设计, the_content() 标签包含了一个可以设计<!--more--> 内容和样式的参数,而<!--more--> 标签生成 「continue reading(继续阅读全文)」 的链接。
默认情况下,一个带有 「more」 的摘要可以是下面这样:
1 and I told him that he should get moving or I'd be on him
2 like a limpet. He looked at me with shock on his face and
3 said more...
如果希望将 more 换成其它单词,只要在标签中输入新单词就可以了:
1 <?php the_content('Read on...'); ?>
也可以将 more 换成幽默的句子:
1 <?php the_content('...on the edge of your seat? Click
2 here to solve the mystery.'); ?>
还可以在标签中设计文本样式:
1 <?php the_content('<span class="moretext">...on the edge of
2 your seat? Click here to solve the mystery.</span>'); ?>
之后在 style.css 样式表单中,将 moretext 设为自己想要显示的内容。下面的摘要示例使用了加粗字体与斜体,比默认文本字号稍小,示例用 font-variant: small-caps 强制摘要内容显示为小写字母:
1 and I told him that he should get moving or I'd be on him
2 like a limpet. He looked at me with shock on his face and
3 said ...On the Edge of Your Seat? Click Here to Solve the
4 Mystery.
有些用户不希望在摘要中显示 「Read More」 等文本,他们希望用扩展字符或 HTML 字符实体将读者导向到日志全文。
1 <?php the_content('» » » »'); ?>
模板标签 the_content() 中还有一个参数可以在 more 的位置上显示日志标题。用 the_title() 标签包含日志标题:
1 <?php the_content("...continue reading the story
2 called " . get_the_title('', '', false)); ?>
根据上文的描述,我们通常从模板中调用带有标准文本的 the_content() 。但我们可以为一些日志设置其它的 「more」 显示方式。在可视化编辑器中,输入<!--more Your custom text --> 。
CSS 为我们提供了无限的设计可能,WordPress 也允许我们在很多模板标签中使用图片,包括 more 标签。有两种方法可以在 more 标签中插入图片。简单的方法是——在 模板标签 the_content() 中展示图片。
1 <?php the_content('Read more...<img src="/images/leaf.gif"
2 alt="read more" title="Read more..." />'); ?>
注意:上述代码在图片标签中使用了 ALT 和 TITLE 属性。这是为了符合网络标准以及保证图片的可访问性,因为图片不仅是图片,同时也是一个链接。
我们甚至可以根据上一个章节中的描述进一步改造图片和 more 标签。如果只想使用图片二不想显示 「Read More」,可以删除 「Read More」 字样。
第二个示例使用的是 CSS 背景图片。我们在之前的例子中以及论述过怎样使用样式类。这个例子稍微复杂一些。容器的样式必须设为允许背景图片显示在文本后。如果我们用上一个示例做背景图,其 style.css 样式表单应该显示为:
1 .moretext {
2 width: 100px;
3 height: 45px;
4 background:url(/images/leaf.gif) no-repeat right middle;
5 padding: 10px 50px 15px 5px}
6 }
页面右边 50 像素的内边距能够保证文本与图片间的距离,保证两者不相覆盖。而高度则保证容器有足够的宽度容纳图片,因为背景图并不是 「实际存在」 的,也不可能与容器的边框相抵。我们需要将图片的大小和形状都考虑进去,用最适当的方式显示图片。
掌握这其中的基本原理后,我们就可以随心所欲地开始设计了。
切记,网站首页 ( is_home() == TRUE ) 是不显示 <!--more--> 标签的,除非我们用以下代码来激活显示:
1 <?php
2 global $more;
3 $more = 0;
4 ?>
总结,模板标签-the_content() 用法如下:
1 <?php the_content( $more_link_text, $strip_teaser, $more_file ); ?>
$more_link_text:(字符串)(可选)「more」 链接的链接文本, 默认值: '(more...)'
$strip_teaser:(布尔型)(可选) 显示 (FALSE) 或隐藏 (TRUE)more 链接前的文本。默认值:FALSE
$more_file:(字符串)(可选)more 链接所指向的文件 默认值:当前文件
使用以下方式在 「More」 中加入标题,在 the_title() 标签和 display 参数的帮助下,若文章使用 ,该示例可以显示"Continue reading ACTUAL POST TITLE"(继续阅读当前文章标题) 。
1 <?php the_content("Continue reading " . the_title('', '', false)); ?>
如果 the_content() 不能按计划运行 (如当你希望显示<!--more--> 标签前的内容,the_content() 却显示了全文内容),你可以用全局变量 $more 改写这一行为:
1 <?php
2 global $more; // Declare global $more (before the loop).
3 $more = 0; // Set (inside the loop) to display content above the more tag.
4 the_content("More...");
5 ?>
如果需要显示所有正文:
1 <?php
2 global $more; // Declare global $more (before the loop).
3 $more = 1; // Set (inside the loop) to display all content, including text below more.
4 the_content();
5 ?>
你可以用 get_the_content 函数返回文章内容的值,而非直接输出文章内容。示例如下:
1 <?php $content = get_the_content(); ?>
请注意!get_the_content 无法进行以下操作,因此你最好手动添加以下代码,直到核心程序升级成功:
1 <?php
2 $content = apply_filters('the_content', $content);
3 $content = str_replace(']]>', ']]>', $content);
4 ?>
the_content() 位于 wp-includes/post-template.php