WordPress: Customizing the Read More:修订间差异
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
如果你设置你的WordPress站点,使其在首页或者主页上显示文章摘录,你想要你的访客,点击标题或者一个链接,鼓励他们阅读,继续阅读你的帖子或者文章,对吗?WordPress使这个技术非常地简单,并且使可以自定义的。 | |||
==摘录基本知识== | ==摘录基本知识== | ||
摘录通过两种方法显示在WordPress上。一种是将模板标签<tt>[[WordPress:Template Tags/the_content|the_内容()]]</tt>替换为<tt>[[WordPress:Template Tags/the_excerpt|the_摘录()]]</tt>。然后你在[[WordPress:Administration Panels|管理]] > [[WordPress:Administration_Panels#Write_-_Make_some_content|写]] > [[WordPress:Administration_Panels#Posts|文章]]输入的清楚的[[WordPress:Administration_Panels#Write_Post|摘录]]或者文章内容的前55个字就会出现。用户就会点击标题继续阅读更多的内容,因为你使用了摘要介绍吸引他们继续阅读下去。 | |||
摘录通过两种方法显示在WordPress上。一种是将模板标签<tt>[[WordPress:Template Tags/the_content|the_内容()]]</tt>替换为<tt>[[WordPress:Template Tags/the_excerpt|the_摘录()]]</tt>。然后你在[[WordPress:Administration Panels|管理]] > [[WordPress:Administration_Panels#Write_-_Make_some_content|写]] > [[WordPress:Administration_Panels#Posts|文章]]输入的清楚的[[WordPress:Administration_Panels#Write_Post|摘录]]或者文章内容的前55个字就会出现。用户就会点击标题继续阅读更多的内容,因为你使用了摘要介绍吸引他们继续阅读下去。 | |||
最常用的方法使保存一个<tt>the_content()</tt> 模板标签,在文章中一个你认可的"切断点"插入一个叫做'''更多的'''的quicktag。 | 最常用的方法使保存一个<tt>the_content()</tt> 模板标签,在文章中一个你认可的"切断点"插入一个叫做'''更多的'''的quicktag。 | ||
[[WordPress:Write_Post_SubPanel#Quicktags|quicktags]]是小按钮,可以在[[WordPress:Administration Panels|管理]] > [[WordPress:Administration_Panels#Write_-_Make_some_content|写]] > [[WordPress:Administration_Panels#Posts|文章]] 子面板中的编辑窗口的上面找到。它们包括'''粗体''', ''斜体'',链接,和其它的,以及著名的'''更多的'''。在你想结束文章的内容摘录部分,放上你的指针,并且点击'''更多的'''quicktag按钮。它会在那一处,插进一个看起来像这样的代码: | [[WordPress:Write_Post_SubPanel#Quicktags|quicktags]]是小按钮,可以在[[WordPress:Administration Panels|管理]] > [[WordPress:Administration_Panels#Write_-_Make_some_content|写]] > [[WordPress:Administration_Panels#Posts|文章]] 子面板中的编辑窗口的上面找到。它们包括'''粗体''', ''斜体'',链接,和其它的,以及著名的'''更多的'''。在你想结束文章的内容摘录部分,放上你的指针,并且点击'''更多的'''quicktag按钮。它会在那一处,插进一个看起来像这样的代码: | ||
<pre>我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,说道 | <pre>我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,说道 | ||
<!--more--></pre> | <!--more--></pre> | ||
文章的其余部分继续显示,但当你在一个非单一的/non-permalink网页例如归档,类别,首页,搜索中查看时,文章显示为一个摘录,后面有一个'''更多的''' 点。 | 文章的其余部分继续显示,但当你在一个非单一的/non-permalink网页例如归档,类别,首页,搜索中查看时,文章显示为一个摘录,后面有一个'''更多的''' 点。 | ||
==阅读更多的方法技术== | ==阅读更多的方法技术== | ||
模板标签[[WordPress:Template_Tags/the_content|内容()]]内部的参数是这样的: | 模板标签[[WordPress:Template_Tags/the_content|内容()]]内部的参数是这样的: | ||
<?php the_content('more_link_text', strip_teaser, 'more_file'); ?> | <?php the_content('more_link_text', strip_teaser, 'more_file'); ?> | ||
The '''more_link_text'''将链接原文设置为像"阅读更多的"。第二个,'''strip_teaser''',设置了"更多的"是应该隐藏(正确的)还是应该显现(错误的)。默认的是错误的,会显示链接文章。最后一个,'''more_file''', 如果你想要不同的话,将链接设置到文件上,应该链接"阅读更多的"。默认情况下,它链接到当前的文章文件。 | |||
移动文章内容摘要; | 移动文章内容摘要; | ||
* 在你的 <tt>index.php</tt>(例如,第二个参数控制着这个)中将 <tt>the_content();</tt> 改为: | |||
*在你的 <tt>index.php</tt>(例如,第二个参数控制着这个)中将 <tt>the_content();</tt> 改为: | |||
<pre>the_content('','FALSE','');></pre> | <pre>the_content('','FALSE','');></pre> | ||
* 在<tt><nowiki><!--more-->.</nowiki></tt>后,将<tt><nowiki><!--noteaser--></nowiki></tt>包含到文章中。 | |||
* | |||
在<tt><nowiki><!--more-->.</nowiki></tt>后,将<tt><nowiki><!--noteaser--></nowiki></tt>包含到文章中。 | |||
===链接跳到更多的或者网页的顶上方=== | ===链接跳到更多的或者网页的顶上方=== | ||
默认情况下,当你点击链接'''阅读更多的''',网页载入,然后"跳到"文章中设置<tt><--more--></tt>标签的那个点上。如果你不要那个"跳",通过在<tt>wp-includes/template-functions-post.php</tt>编辑以下的行,你可以改变这个是怎样运行的默认功能。 | 默认情况下,当你点击链接'''阅读更多的''',网页载入,然后"跳到"文章中设置<tt><--more--></tt>标签的那个点上。如果你不要那个"跳",通过在<tt>wp-includes/template-functions-post.php</tt>编辑以下的行,你可以改变这个是怎样运行的默认功能。 | ||
('''注:'''在WP 2.1 和以后的版本中, 代码在 | ('''注:'''在WP 2.1 和以后的版本中, 代码在 | ||
<tt>wp-includes/post-template.php</tt> 中可以找到)。 | <tt>wp-includes/post-template.php</tt> 中可以找到)。 | ||
('''注:''' 当你升级WordPress, 这个文件就会被替换,因此记录一下这个变化,在升级之后,你可以再次地改变文件。): | ('''注:''' 当你升级WordPress, 这个文件就会被替换,因此记录一下这个变化,在升级之后,你可以再次地改变文件。): | ||
<pre><nowiki>$output .= ' <a href="'. get_permalink() | <pre><nowiki>$output .= ' <a href="'. get_permalink() | ||
. "#more-$id\">$more_link_text</a>";</nowiki></pre> | . "#more-$id\">$more_link_text</a>";</nowiki></pre> | ||
改为 | 改为 | ||
<pre><nowiki>$output .= ' <a href="'. get_permalink() | <pre><nowiki>$output .= ' <a href="'. get_permalink() | ||
."\">$more_link_text</a>";</nowiki></pre> | ."\">$more_link_text</a>";</nowiki></pre> | ||
第110行: | 第41行: | ||
或者 | 或者 | ||
<pre><nowiki>$output .= ' <a href="'. get_permalink() | <pre><nowiki>$output .= ' <a href="'. get_permalink() | ||
.'">$more_link_text</a>';</nowiki></pre> | .'">$more_link_text</a>';</nowiki></pre> | ||
==设计更多的标签== | ==设计更多的标签== | ||
因为你知道了它是怎样运行的,现在我们看看怎样将在这个继续阅读你的文章的小邀请变得更加地吸引人。 | 因为你知道了它是怎样运行的,现在我们看看怎样将在这个继续阅读你的文章的小邀请变得更加地吸引人。 | ||
有意地,<tt>[[WordPress:Template Tags/the_content|内容()]]</tt>标签包含一个安排<tt><nowiki><!--more--></nowiki></tt>内容和外观的参数,创建一个"继续阅读"整篇文章的链接。 | 有意地,<tt>[[WordPress:Template Tags/the_content|内容()]]</tt>标签包含一个安排<tt><nowiki><!--more--></nowiki></tt>内容和外观的参数,创建一个"继续阅读"整篇文章的链接。 | ||
默认情况下,它看起来像这样: | 默认情况下,它看起来像这样: | ||
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|more...|更多的]]</div> | <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|more...|更多的]]</div> | ||
如果你想将单词''更多的....''改为其它的什么东西,只要在标签中输入新的单词: | 如果你想将单词''更多的....''改为其它的什么东西,只要在标签中输入新的单词: | ||
<pre><?php the_content('继续阅读...'); ?></pre> | <pre><?php the_content('继续阅读...'); ?></pre> | ||
或者输入一些更加复杂的,使其变得有趣: | 或者输入一些更加复杂的,使其变得有趣: | ||
<pre><?php the_content('...你座位的边缘? 点击这儿来解开奥秘。'); ?></pre> | <pre><?php the_content('...你座位的边缘? 点击这儿来解开奥秘。'); ?></pre> | ||
你也可以在标签中设计文本。 | |||
<pre><?php the_content('<span class="moretext">...你的座位的边缘?点击这儿来解开奥秘 。</span>'); ?></pre> | <pre><?php the_content('<span class="moretext">...你的座位的边缘?点击这儿来解开奥秘 。</span>'); ?></pre> | ||
然后在你的<tt>style.css</tt>样式表上将<tt>moretext</tt>级别设置为任何你喜欢的级别。下面是一个样式的例子,文本是黑体斜体的,比默认的文本要小,并且使用<tt>变化的字体,和小型大写字母<tt>将文本强制为小型大写字母。 | 然后在你的<tt>style.css</tt>样式表上将<tt>moretext</tt>级别设置为任何你喜欢的级别。下面是一个样式的例子,文本是黑体斜体的,比默认的文本要小,并且使用<tt>变化的字体,和小型大写字母<tt>将文本强制为小型大写字母。 | ||
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道<span style="font-weight: bold; font-size: 90%; font-style: italic; font-variant: small-caps">[[WordPress:#Designing the More Tag|...在你座位的边缘? 点击这儿来解开奥秘。]]</span></div> | <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道<span style="font-weight: bold; font-size: 90%; font-style: italic; font-variant: small-caps">[[WordPress:#Designing the More Tag|...在你座位的边缘? 点击这儿来解开奥秘。]]</span></div> | ||
有的人不想要文章,更喜欢使用一个延伸的字符,或者[[WordPress:Fun_Character_Entities|HTML 字符实体]]来引导读者阅读整篇文章。 | 有的人不想要文章,更喜欢使用一个延伸的字符,或者[[WordPress:Fun_Character_Entities|HTML 字符实体]]来引导读者阅读整篇文章。 | ||
第185行: | 第72行: | ||
<pre><?php the_content('&raquo; &raquo; &raquo; &raquo;'); ?></pre> | <pre><?php the_content('&raquo; &raquo; &raquo; &raquo;'); ?></pre> | ||
看起来会像这样的: | 看起来会像这样的: | ||
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|» » » »]]</div> | <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|» » » »]]</div> | ||
在<tt>the_content()</tt>模板标签中有另一个参数,在'''更多的''' 文本中包含文章标题。通过使用<tt>[[WordPress:Template Tags/the_title|标题()]]</tt>,便包含了文章的标题: | 在<tt>the_content()</tt>模板标签中有另一个参数,在'''更多的''' 文本中包含文章标题。通过使用<tt>[[WordPress:Template Tags/the_title|标题()]]</tt>,便包含了文章的标题: | ||
<pre><?php the_content("...continue reading the story | <pre><?php the_content("...continue reading the story | ||
called " . get_the_title('', '', false)); ?></pre> | called " . get_the_title('', '', false)); ?></pre> | ||
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|...继续阅读故事,故事名是一个必须告诉你的故事]]</div> | <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|...继续阅读故事,故事名是一个必须告诉你的故事]]</div> | ||
===使每个文章有一个自定义的文本=== | ===使每个文章有一个自定义的文本=== | ||
虽然<tt>the_content()</tt>通常是在模板中得到访问,而且有一个上述所描述的标准的文本,可以为每一篇文章单独配一个文本。只要写<tt><nowiki><!—更多的你自定义的文本 --></nowiki></tt>。 | 虽然<tt>the_content()</tt>通常是在模板中得到访问,而且有一个上述所描述的标准的文本,可以为每一篇文章单独配一个文本。只要写<tt><nowiki><!—更多的你自定义的文本 --></nowiki></tt>。 | ||
===添加一个图像=== | ===添加一个图像=== | ||
CSS设计的可能性,事实上是无限的,WordPress允许你在它们许多的[[WordPress:Template Tags|模板标签]]中使用图像,包括<tt>more</tt> 标签。有两种方法可以添加一个图像。以最简单的方法开始—在<tt>the_content()</tt>模板标签上将它列出来。 | CSS设计的可能性,事实上是无限的,WordPress允许你在它们许多的[[WordPress:Template Tags|模板标签]]中使用图像,包括<tt>more</tt> 标签。有两种方法可以添加一个图像。以最简单的方法开始—在<tt>the_content()</tt>模板标签上将它列出来。 | ||
这个例子特点是"阅读更多的"文本后有一个叶子的图像。 | 这个例子特点是"阅读更多的"文本后有一个叶子的图像。 | ||
<pre><?php the_content('Read More...<img src="/images/leaf.gif" | <pre><?php the_content('Read More...<img src="/images/leaf.gif" | ||
alt="阅读更多的"标题="阅读更多的..." />'); ?></pre> | alt="阅读更多的"标题="阅读更多的..." />'); ?></pre> | ||
注意代码在图像标签中使用了一个<tt>ALT</tt> 和<tt>TITLE</tt>。这样做为了遵从访问权限和网络标准,因为图像既是一个图像又是一个链接。下面是它可能看起来是怎样的: | 注意代码在图像标签中使用了一个<tt>ALT</tt> 和<tt>TITLE</tt>。这样做为了遵从访问权限和网络标准,因为图像既是一个图像又是一个链接。下面是它可能看起来是怎样的: | ||
<div style="border:1px solid blue; width:70%; margin: 20px; padding:20px"> | <div style="border:1px solid blue; width:70%; margin: 20px; padding:20px"> | ||
我告诉他他应该离开,否则我会和他纠缠不休。他满脸震惊地看着我并且说道<span style="color:blue"><u>阅读更多的...</u></span> [[WordPress:Image:leaf.gif|leaf]]<br /><br /></div> | 我告诉他他应该离开,否则我会和他纠缠不休。他满脸震惊地看着我并且说道<span style="color:blue"><u>阅读更多的...</u></span> [[WordPress:Image:leaf.gif|leaf]]<br /><br /></div> | ||
如上所述的,你甚至可以给图像添加一个样式和<tt>more</tt> 标签,将他设计地更好。使用图像时,不要"阅读更多的"文本,删除文本就行了。 | 如上所述的,你甚至可以给图像添加一个样式和<tt>more</tt> 标签,将他设计地更好。使用图像时,不要"阅读更多的"文本,删除文本就行了。 | ||
第二个例子使用了CSS背景图像。在上述的例子中,我们已经描述了怎样使用样式级别。这是一个小tricker.容器的格式应该设置允许背景图像在文本后显示。如果你要将上述的例子用作一个背景图像,关于这个的<tt>style.css</tt>样式表看起来像: | 第二个例子使用了CSS背景图像。在上述的例子中,我们已经描述了怎样使用样式级别。这是一个小tricker.容器的格式应该设置允许背景图像在文本后显示。如果你要将上述的例子用作一个背景图像,关于这个的<tt>style.css</tt>样式表看起来像: | ||
第262行: | 第108行: | ||
background:url(/images/leaf.gif) no-repeat right middle; | background:url(/images/leaf.gif) no-repeat right middle; | ||
padding: 10px 50px 15px 5px}</pre> | padding: 10px 50px 15px 5px}</pre> | ||
右边距的50px padding应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是"真在那儿",而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。 | 右边距的50px padding应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是"真在那儿",而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。 | ||
你已经得到了基本知识。从这儿开始,就取决于你的想象力了。 | 你已经得到了基本知识。从这儿开始,就取决于你的想象力了。 |
2008年4月16日 (三) 16:15的版本
如果你设置你的WordPress站点,使其在首页或者主页上显示文章摘录,你想要你的访客,点击标题或者一个链接,鼓励他们阅读,继续阅读你的帖子或者文章,对吗?WordPress使这个技术非常地简单,并且使可以自定义的。
摘录基本知识
摘录通过两种方法显示在WordPress上。一种是将模板标签the_内容()替换为the_摘录()。然后你在管理 > 写 > 文章输入的清楚的摘录或者文章内容的前55个字就会出现。用户就会点击标题继续阅读更多的内容,因为你使用了摘要介绍吸引他们继续阅读下去。
最常用的方法使保存一个the_content() 模板标签,在文章中一个你认可的"切断点"插入一个叫做更多的的quicktag。
quicktags是小按钮,可以在管理 > 写 > 文章 子面板中的编辑窗口的上面找到。它们包括粗体, 斜体,链接,和其它的,以及著名的更多的。在你想结束文章的内容摘录部分,放上你的指针,并且点击更多的quicktag按钮。它会在那一处,插进一个看起来像这样的代码:
我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,说道 <!--more-->
文章的其余部分继续显示,但当你在一个非单一的/non-permalink网页例如归档,类别,首页,搜索中查看时,文章显示为一个摘录,后面有一个更多的 点。
阅读更多的方法技术
模板标签内容()内部的参数是这样的: <?php the_content('more_link_text', strip_teaser, 'more_file'); ?>
The more_link_text将链接原文设置为像"阅读更多的"。第二个,strip_teaser,设置了"更多的"是应该隐藏(正确的)还是应该显现(错误的)。默认的是错误的,会显示链接文章。最后一个,more_file, 如果你想要不同的话,将链接设置到文件上,应该链接"阅读更多的"。默认情况下,它链接到当前的文章文件。
移动文章内容摘要;
- 在你的 index.php(例如,第二个参数控制着这个)中将 the_content(); 改为:
the_content('','FALSE','');>
- 在<!--more-->.后,将<!--noteaser-->包含到文章中。
链接跳到更多的或者网页的顶上方
默认情况下,当你点击链接阅读更多的,网页载入,然后"跳到"文章中设置<--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-->内容和外观的参数,创建一个"继续阅读"整篇文章的链接。
默认情况下,它看起来像这样:
如果你想将单词更多的....改为其它的什么东西,只要在标签中输入新的单词:
<?php the_content('继续阅读...'); ?>
或者输入一些更加复杂的,使其变得有趣:
<?php the_content('...你座位的边缘? 点击这儿来解开奥秘。'); ?>
你也可以在标签中设计文本。
<?php the_content('<span class="moretext">...你的座位的边缘?点击这儿来解开奥秘 。</span>'); ?>
然后在你的style.css样式表上将moretext级别设置为任何你喜欢的级别。下面是一个样式的例子,文本是黑体斜体的,比默认的文本要小,并且使用变化的字体,和小型大写字母将文本强制为小型大写字母。
有的人不想要文章,更喜欢使用一个延伸的字符,或者HTML 字符实体来引导读者阅读整篇文章。
<?php the_content('» » » »'); ?>
看起来会像这样的:
在the_content()模板标签中有另一个参数,在更多的 文本中包含文章标题。通过使用标题(),便包含了文章的标题:
<?php the_content("...continue reading the story called " . get_the_title('', '', false)); ?>
使每个文章有一个自定义的文本
虽然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应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是"真在那儿",而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。
你已经得到了基本知识。从这儿开始,就取决于你的想象力了。