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