關於wordpress的more標籤

只要熟悉WordPress的用戶都應該知道<!−−more−−>標籤。在撰寫文章時,你可以在文章的正文中插入<!−−more−−> 標籤來創建文章摘要。

tips:這篇文章剛寫的時候沒有搞格式,不用看了。。。看着估計也看不懂。。。

這樣文章裏默認就會顯示 “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 >"; 
}
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 “','”',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 />元素的alttitle屬性,你也可以完全繞開<img />元素,使用CSS來定製圖片風格:

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

同樣的,這也僅是一個例子,more標籤還有很多用法,你可以盡情發揮自己的想象力。
轉載自:作者WordPress啦!
媽耶。。。這個格式什麼鬼。。。看來轉載直接複製還是不好搞。。。mdzz

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章