WordPress: Customizing the Read More:修订间差异

来自站长百科
跳转至: 导航、​ 搜索
无编辑摘要
无编辑摘要
第1行: 第1行:
If you have set your WordPress site to display post excerpts on the front or home page, you will want visitors to click on the title or a link to encourage them to continue reading your post or article, right?  WordPress makes this technique easy, and customizable.
如果你设置你的WordPress站点,使其在首页或者主页上显示文章摘录,你想要你的访客,点击标题或者一个链接,鼓励他们阅读,继续阅读你的帖子或者文章,对吗?WordPress使这个技术非常地简单,并且使可以自定义的。
 
如果你设置你的WordPress站点,使其在首页或者主页上显示文章摘录,你想要你的访客,点击标题或者一个链接,鼓励他们阅读继续阅读你的帖子或者文章,对吗?WordPress使这个技术非常地简单,并且使可以自定义的。
 
==The Excerpt Basics==


==摘录基本知识==
==摘录基本知识==


Excerpts show up on WordPress through two methods.  One, by replacing the template tag <tt>[[WordPress:Template Tags/the_content|the_content()]]</tt> with <tt>[[WordPress:Template Tags/the_excerpt|the_excerpt()]]</tt>.  Then the explicit [[WordPress:Administration_Panels#Write_Post|excerpt]] you have entered in the [[WordPress:Administration Panels|Administration]] > [[WordPress:Administration_Panels#Write_-_Make_some_content|Write]] > [[WordPress:Administration_Panels#Posts|Post]] SubPanel will appear, or the first 55 words of the post's content. Users can then click on the title to continue reading more as you have enticed them with your summary introduction. 
摘录通过两种方法显示在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个字就会出现。用户就会点击标题继续阅读更多的内容,因为你使用了摘要介绍吸引他们继续阅读下去。
 
The most commonly used method is to keep <tt>the_content()</tt> template tag and insert a quicktag called '''more''' into your post at your desired "cut-off" point. 


最常用的方法使保存一个<tt>the_content()</tt> 模板标签,在文章中一个你认可的"切断点"插入一个叫做'''更多的'''的quicktag。
最常用的方法使保存一个<tt>the_content()</tt> 模板标签,在文章中一个你认可的"切断点"插入一个叫做'''更多的'''的quicktag。
The [[WordPress:Write_Post_SubPanel#Quicktags|quicktags]] are the little buttons found above the editing window in your [[WordPress:Administration Panels|Administration]] > [[WordPress:Administration_Panels#Write_-_Make_some_content|Write]] > [[WordPress:Administration_Panels#Posts|Post]] SubPanel.  They include '''bold''', ''italic'', links, and others, and the famous '''more'''.  Put your cursor where you want to end the excerpted content of your post and click the '''more''' quicktag button.  It will insert a code at that point that looks like this:


[[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>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
<pre>我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,说道
<pre>我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,说道
<!--more--></pre>


<!--more--></pre>
<!--more--></pre>
The rest of the post continues, but when viewed on the non-single/non-permalink web page such as archives, categories, front page, and searches, the post is shown as an excerpt to the '''more''' point.
文章的其余部分继续显示,但当你在一个非单一的/non-permalink网页例如归档,类别,首页,搜索中查看时,文章显示为一个摘录,后面有一个'''更多的''' 点。
文章的其余部分继续显示,但当你在一个非单一的/non-permalink网页例如归档,类别,首页,搜索中查看时,文章显示为一个摘录,后面有一个'''更多的''' 点。
==Read More Techniques==
==阅读更多的方法技术==
==阅读更多的方法技术==
The parameters within the template tag [[WordPress:Template_Tags/the_content|the_content()]] are as follows:
模板标签[[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'); ?>  
<?php the_content('more_link_text', strip_teaser, 'more_file'); ?>  


The '''more_link_text'''将链接原文设置为像"阅读更多的"。第二个,'''strip_teaser''',设置了"更多的"是应该隐藏(正确的)还是应该显现(错误的)。默认的是错误的,会显示链接文章。最后一个,'''more_file''', 如果你想要不同的话,将链接设置到文件上,应该链接"阅读更多的"。默认情况下,它链接到当前的文章文件。


The '''more_link_text''' sets the link text like "Read More".  The second one, '''strip_teaser''',      sets whether or not the "more" link should be hidden (TRUE) or displayed (FALSE). The default is FALSE, which shows the link text.  The last one, '''more_file''', sets the link to the file that the "Read More" should link to, if you want it to be different.  By default, it links to the current post file.
'''更多链接原文'''将链接原文设置为像"阅读更多的"。第二个,'''去除摘录''',设置了"更多的"是应该隐藏(正确的)还是应该显现(错误的)。默认的是错误的,会显示链接文章。最后一个,'''更多的文件''', 如果你想要不同的话,将链接设置到文件上,应该链接"阅读更多的"。默认情况下,它链接到当前的文章文件。
To remove the teaser:
移动文章内容摘要;
移动文章内容摘要;


* Change <tt>the_content();</tt> in your <tt>index.php</tt> to (i.e., the second parameter controls this):
* 在你的 <tt>index.php</tt>(例如,第二个参数控制着这个)中将 <tt>the_content();</tt> 改为:
<pre>the_content('','FALSE','');></pre>
 
*在你的 <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>包含到文章中。
 
* Include <tt><nowiki><!--noteaser--></nowiki></tt> in the post text, immediately after the <tt><nowiki><!--more-->.</nowiki></tt>
 
 
在<tt><nowiki><!--more-->.</nowiki></tt>后,将<tt><nowiki><!--noteaser--></nowiki></tt>包含到文章中。
 
 
 
===Link Jumps to More or Top of Page===


===链接跳到更多的或者网页的顶上方===
===链接跳到更多的或者网页的顶上方===
By default, when you click on the '''Read More''' link, the web page loads and then "jumps" to the spot where the <tt>&lt;--more--&gt;</tt> tag is set in the post.  If you do not want that "jump", you can change the default function of how this works by editing the following line in <tt>wp-includes/template-functions-post.php</tt>


默认情况下,当你点击链接'''阅读更多的''',网页载入,然后"跳到"文章中设置<tt>&lt;--more--&gt;</tt>标签的那个点上。如果你不要那个"跳",通过在<tt>wp-includes/template-functions-post.php</tt>编辑以下的行,你可以改变这个是怎样运行的默认功能。
默认情况下,当你点击链接'''阅读更多的''',网页载入,然后"跳到"文章中设置<tt>&lt;--more--&gt;</tt>标签的那个点上。如果你不要那个"跳",通过在<tt>wp-includes/template-functions-post.php</tt>编辑以下的行,你可以改变这个是怎样运行的默认功能。
('''NOTE:''' In WP 2.1 and later, the code is found in
<tt>wp-includes/post-template.php</tt> ).
('''注:'''在WP 2.1 和以后的版本中, 代码在
('''注:'''在WP 2.1 和以后的版本中, 代码在
<tt>wp-includes/post-template.php</tt> 中可以找到)。
<tt>wp-includes/post-template.php</tt> 中可以找到)。
('''NOTE:''' When you upgrade WordPress, this file will be replaced so make a note of the change so you can change it again after upgrading.):


('''注:''' 当你升级WordPress, 这个文件就会被替换,因此记录一下这个变化,在升级之后,你可以再次地改变文件。):
('''注:''' 当你升级WordPress, 这个文件就会被替换,因此记录一下这个变化,在升级之后,你可以再次地改变文件。):
<pre><nowiki>$output .= ' <a href="'. get_permalink()
. "#more-$id\">$more_link_text</a>";</nowiki></pre>


<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()
."\">$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()
.'">$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>


==Designing the More Tag==
==设计更多的标签==
==设计更多的标签==
Seeing that you know how it works, now look at how we can make this little invitation to continue reading your post be more inviting.


因为你知道了它是怎样运行的,现在我们看看怎样将在这个继续阅读你的文章的小邀请变得更加地吸引人。
因为你知道了它是怎样运行的,现在我们看看怎样将在这个继续阅读你的文章的小邀请变得更加地吸引人。
By design, <tt>[[WordPress:Template Tags/the_content|the_content()]]</tt> tag includes a parameter for formatting the <tt><nowiki><!--more--></nowiki></tt> content and look, which creates a link to "continue reading" the full post.


有意地,<tt>[[WordPress:Template Tags/the_content|内容()]]</tt>标签包含一个安排<tt><nowiki><!--more--></nowiki></tt>内容和外观的参数,创建一个"继续阅读"整篇文章的链接。
有意地,<tt>[[WordPress:Template Tags/the_content|内容()]]</tt>标签包含一个安排<tt><nowiki><!--more--></nowiki></tt>内容和外观的参数,创建一个"继续阅读"整篇文章的链接。


By default, it looks like this:
默认情况下,它看起来像这样:
默认情况下,它看起来像这样:
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">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 [[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>
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|more...|更多的]]</div>
If you want to change the words from ''more....'' to something else, just type in the new words into the tag:


如果你想将单词''更多的....''改为其它的什么东西,只要在标签中输入新的单词:
如果你想将单词''更多的....''改为其它的什么东西,只要在标签中输入新的单词:
<pre><?php the_content('Read on...'); ?></pre>
<pre><?php the_content('继续阅读...'); ?></pre>
<pre><?php the_content('继续阅读...'); ?></pre>


Or get more sophisticated and make it fun:
或者输入一些更加复杂的,使其变得有趣:
或者输入一些更加复杂的,使其变得有趣:
<pre><?php the_content('...on the edge of your seat? Click
here to solve the mystery.'); ?></pre>
<pre><?php the_content('...你座位的边缘? 点击这儿来解开奥秘。'); ?></pre>
<pre><?php the_content('...你座位的边缘? 点击这儿来解开奥秘。'); ?></pre>
 
你也可以在标签中设计文本。
 
 
You can style the text in the tag, too.
你也可以在标签中设计文章。
 
<pre><?php the_content('<span class="moretext">...on the edge of
your seat? Click here to solve the mystery.</span>'); ?></pre>




<pre><?php the_content('<span class="moretext">...你的座位的边缘?点击这儿来解开奥秘 。</span>'); ?></pre>
<pre><?php the_content('<span class="moretext">...你的座位的边缘?点击这儿来解开奥秘 。</span>'); ?></pre>
Then set the <tt>moretext</tt> class in your <tt>style.css</tt> style sheet to whatever you want.  Here is an example of the style which features bold, italic text that is slightly smaller than the default text and uses the <tt>font-variant: small-caps</tt> to force the text into small capital letters. :


然后在你的<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">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 <span style="font-weight: bold; font-size: 90%; font-style: italic; font-variant: small-caps">[[WordPress:#Designing the More Tag|...On the Edge of Your Seat? Click Here to Solve the Mystery.]]</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>
<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>
Some people do not want the text and prefer to use an extended character or [[WordPress:Fun_Character_Entities|HTML character entity]] to move the reader on to the full post.


有的人不想要文章,更喜欢使用一个延伸的字符,或者[[WordPress:Fun_Character_Entities|HTML 字符实体]]来引导读者阅读整篇文章。
有的人不想要文章,更喜欢使用一个延伸的字符,或者[[WordPress:Fun_Character_Entities|HTML 字符实体]]来引导读者阅读整篇文章。
第185行: 第72行:
<pre><?php the_content('&amp;raquo; &amp;raquo; &amp;raquo; &amp;raquo;'); ?></pre>
<pre><?php the_content('&amp;raquo; &amp;raquo; &amp;raquo; &amp;raquo;'); ?></pre>


<pre><?php the_content('&amp;raquo; &amp;raquo; &amp;raquo; &amp;raquo;'); ?></pre>
Would look like this:
看起来会像这样的:
看起来会像这样的:
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">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 [[WordPress:#Designing the More Tag|&raquo; &raquo; &raquo; &raquo;]]</div>


<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|&raquo; &raquo; &raquo; &raquo;]]</div>
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|&raquo; &raquo; &raquo; &raquo;]]</div>
There is another parameter in <tt>the_content()</tt> template tag which will include the title of the post in the '''more''' text.  Through the use of <tt>[[WordPress:Template Tags/the_title|the_title()]]</tt> tag, the title of the article is included:


在<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(&#39;&#39;, &#39;&#39;, false)); ?></pre>
called " . get_the_title(&#39;&#39;, &#39;&#39;, false)); ?></pre>
<pre><?php the_content("...continue reading the story
called " . get_the_title(&#39;&#39;, &#39;&#39;, false)); ?></pre>
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">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 [[WordPress:#Designing the More Tag|...continue reading the story called A Tale That Must Be Told]]</div>


<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>
===Having a custom text for each post===


===使每个文章有一个自定义的文本===
===使每个文章有一个自定义的文本===
Although <tt>the_content()</tt> is usually called from the template with a standard text as described above, it is possible to have an individual text for certain posts. Simply write <tt><nowiki><!--more Your custom text --></nowiki></tt>.


虽然<tt>the_content()</tt>通常是在模板中得到访问,而且有一个上述所描述的标准的文本,可以为每一篇文章单独配一个文本。只要写<tt><nowiki><!—更多的你自定义的文本 --></nowiki></tt>。
虽然<tt>the_content()</tt>通常是在模板中得到访问,而且有一个上述所描述的标准的文本,可以为每一篇文章单独配一个文本。只要写<tt><nowiki><!—更多的你自定义的文本 --></nowiki></tt>。


===Adding An Image===
===添加一个图像===
===添加一个图像===
The design possibilities with CSS are practically unlimited, and WordPress allows you to use images in many of their [[WordPress:Template Tags]], including the <tt>more</tt> tag.  To add an image, there are two ways to do it.  Begin with the most simple -- listing it in <tt>the_content()</tt> template tag.
CSS设计的可能性,事实上是无限的,WordPress允许你在它们许多的[[WordPress:Template Tags|模板标签]]中使用图像,包括<tt>more</tt> 标签。有两种方法可以添加一个图像。以最简单的方法开始—在<tt>the_content()</tt>模板标签上将它列出来。
CSS设计的可能性,事实上是无限的,WordPress允许你在它们许多的[[WordPress:Template Tags|模板标签]]中使用图像,包括<tt>more</tt> 标签。有两种方法可以添加一个图像。以最简单的方法开始—在<tt>the_content()</tt>模板标签上将它列出来。
This examples features the image of a leaf after the "Read More" text.


这个例子特点是"阅读更多的"文本后有一个叶子的图像。
这个例子特点是"阅读更多的"文本后有一个叶子的图像。
<pre><?php the_content('Read More...<img src="/images/leaf.gif"
alt="read more" title="Read More..." />'); ?></pre>


<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>
Notice that the code uses an <tt>ALT</tt> and <tt>TITLE</tt> in the image tag.  This is in compliance with accessibility and web standards, since the image is both an image and a link.  Here is what it might look like.


注意代码在图像标签中使用了一个<tt>ALT</tt> 和<tt>TITLE</tt>。这样做为了遵从访问权限和网络标准,因为图像既是一个图像又是一个链接。下面是它可能看起来是怎样的:
注意代码在图像标签中使用了一个<tt>ALT</tt> 和<tt>TITLE</tt>。这样做为了遵从访问权限和网络标准,因为图像既是一个图像又是一个链接。下面是它可能看起来是怎样的:
<div style="border:1px solid blue; width:70%; margin: 20px; padding:20px">
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 <span style="color:blue"><u>Read More...</u></span>&nbsp;&nbsp;&nbsp;[[WordPress:Image:leaf.gif|leaf]]<br /><br /></div>


<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>&nbsp;&nbsp;&nbsp;[[WordPress:Image:leaf.gif|leaf]]<br /><br /></div>
我告诉他他应该离开,否则我会和他纠缠不休。他满脸震惊地看着我并且说道<span style="color:blue"><u>阅读更多的...</u></span>&nbsp;&nbsp;&nbsp;[[WordPress:Image:leaf.gif|leaf]]<br /><br /></div>


You could even add a style to the image and <tt>more</tt> tag, as mentioned above, to style it even more. To use the image without the "Read More" text, just delete the text.
如上所述的,你甚至可以给图像添加一个样式和<tt>more</tt> 标签,将他设计地更好。使用图像时,不要"阅读更多的"文本,删除文本就行了。
如上所述的,你甚至可以给图像添加一个样式和<tt>more</tt> 标签,将他设计地更好。使用图像时,不要"阅读更多的"文本,删除文本就行了。
The second example uses the CSS background image.  We have described how to use style classes in the above examples. This is a little tricker.  The container's style must be set to allow the background image to show out from behind the text.  If you were to use the above example as a background image, the <tt>style.css</tt> style sheet for this might look like this:


第二个例子使用了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>
<pre>.moretext {
  width: 100px;
  height: 45px;
  background:url(/images/leaf.gif) no-repeat right middle;
  padding: 10px 50px 15px 5px}</pre>
The 50px padding against the right margin should make sure the text is pushed over away from the image as to not overlap it. The height ensures that the container will expand wide enough so the image is visible within the container, since a background image isn't "really there" and can not push against the container's borders.  You may have to experiment with this to fit the size and shape of your own image.


右边距的50px padding应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是"真在那儿",而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。
右边距的50px padding应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是"真在那儿",而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。




You have gotten the basics.  From here, it is up to your imagination.
你已经得到了基本知识。从这儿开始,就取决于你的想象力了。
你已经得到了基本知识。从这儿开始,就取决于你的想象力了。

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-->内容和外观的参数,创建一个"继续阅读"整篇文章的链接。

默认情况下,它看起来像这样:

我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|more...|更多的]]

如果你想将单词更多的....改为其它的什么东西,只要在标签中输入新的单词:

<?php the_content('继续阅读...'); ?>

或者输入一些更加复杂的,使其变得有趣:

<?php the_content('...你座位的边缘? 点击这儿来解开奥秘。'); ?>

你也可以在标签中设计文本。


<?php the_content('<span class="moretext">...你的座位的边缘?点击这儿来解开奥秘 。</span>'); ?>

然后在你的style.css样式表上将moretext级别设置为任何你喜欢的级别。下面是一个样式的例子,文本是黑体斜体的,比默认的文本要小,并且使用变化的字体,和小型大写字母将文本强制为小型大写字母。

我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|...在你座位的边缘? 点击这儿来解开奥秘。]]

有的人不想要文章,更喜欢使用一个延伸的字符,或者HTML 字符实体来引导读者阅读整篇文章。

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

看起来会像这样的:

我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|» » » »]]

the_content()模板标签中有另一个参数,在更多的 文本中包含文章标题。通过使用标题(),便包含了文章的标题:

<?php the_content("...continue reading the story
called " . get_the_title('', '', false)); ?>
我告诉他,他应该离开,否则我会和他纠缠不休。他一脸震惊地看着我,并且说道[[WordPress:#Designing the More Tag|...继续阅读故事,故事名是一个必须告诉你的故事]]

使每个文章有一个自定义的文本

虽然the_content()通常是在模板中得到访问,而且有一个上述所描述的标准的文本,可以为每一篇文章单独配一个文本。只要写<!—更多的你自定义的文本 -->

添加一个图像

CSS设计的可能性,事实上是无限的,WordPress允许你在它们许多的模板标签中使用图像,包括more 标签。有两种方法可以添加一个图像。以最简单的方法开始—在the_content()模板标签上将它列出来。

这个例子特点是"阅读更多的"文本后有一个叶子的图像。

<?php the_content('Read More...<img src="/images/leaf.gif" 
alt="阅读更多的"标题="阅读更多的..." />'); ?>

注意代码在图像标签中使用了一个ALTTITLE。这样做为了遵从访问权限和网络标准,因为图像既是一个图像又是一个链接。下面是它可能看起来是怎样的:

我告诉他他应该离开,否则我会和他纠缠不休。他满脸震惊地看着我并且说道阅读更多的...   leaf

如上所述的,你甚至可以给图像添加一个样式和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应该确保文本远离图像,以不与图像交迭。高度确保容易扩充得够宽,这样就可以在容器内部看到图像,因为一个背景图像不是"真在那儿",而且也不能推向容器的边缘。你也许要试试这个,以使你自己图像的大小和形状适应。


你已经得到了基本知识。从这儿开始,就取决于你的想象力了。