站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Customizing the Read More
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
Xxf3325
(
讨论
|
贡献
)
2008年4月10日 (四) 09:32的版本
(新页面: 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 p...)
(差异) ←上一版本 |
最后版本
(
差异
) |
下一版本→
(
差异
)
跳转至:
导航
、
搜索
警告:您正在编辑的是本页面的旧版本。
如果您发布该更改,该版本后的所有更改都会丢失。
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
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. ==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. 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. 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: <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 <!--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. ==Read More Techniques== The parameters within the template tag [[WordPress:Template_Tags/the_content|the_content()]] are as follows: <?php the_content('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): <pre>the_content('','FALSE','');></pre> * Include <tt><nowiki><!--noteaser--></nowiki></tt> in the post text, immediately after the <tt><nowiki><!--more-->.</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><--more--></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> ('''NOTE:''' In WP 2.1 and later, the code is found in <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.): <pre><nowiki>$output .= ' <a href="'. get_permalink() . "#more-$id\">$more_link_text</a>";</nowiki></pre> to <pre><nowiki>$output .= ' <a href="'. get_permalink() ."\">$more_link_text</a>";</nowiki></pre> or <pre><nowiki>$output .= ' <a href="'. get_permalink() .'">$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. 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> 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> 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> 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> 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. : <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> 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. <pre><?php the_content('&raquo; &raquo; &raquo; &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|» » » »]]</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: <pre><?php the_content("...continue reading the story called " . get_the_title('', '', 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> ===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>. ===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. 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> 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. <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> [[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. 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: <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. You have gotten the basics. From here, it is up to your imagination.
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)