WordPress 非單篇瀏覽形式下,WordPress 文章是全文顯示,如果 WordPress 文章裏插入了 more 標籤,WordPress 文章只顯示到 more 標籤截斷那裏,然後顯示 「read more」 、 「繼續閲讀」 鏈接,點擊鏈接進入單篇 WordPress 文章閲讀,顯示全文。
為何要使用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 >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 >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> 元素的 alt 和 title 屬性,你也可以完全繞開<img> 元素,使用 CSS 來定製圖片風格:
.more-link img {
background:url(http://domain.tld/read-more.png) no-repeat left center;
padding: 10px;
height: 100px;
width: 300px;
}
同樣的,這也僅是一個例子,more 標籤還有很多用法,你可以盡情發揮自己的想象力。
來源:Cool Things You can do with the WordPress 「more」 Tag