首頁 / Web Blog / WordPress + 繼續閱讀

WordPress + 繼續閱讀

之前在說重點 這邊談到如何摘錄後,我就查一下我用的WordPress是否也提供這個功能,果真是功能強大到,這種細節的功能也有原文在此,Customizing the Read More,後來為嘉惠所有中文的讀者,我也把它做了翻譯,內容如下:

假如你已經設定了你的WordPress網站顯示張貼的引用在首頁,接下來你會想要訪客按下標題或連結來鼓勵他們繼續閱讀你張貼的文章,對吧? 可以讓這個技術變得容易而且可以訂製。

摘錄的基礎

在WordPress顯示摘錄有兩種方法,一種是將模版標簽the_content() 換成 the_excerpt(),然後你在管理面板 > 撰寫 > 文章所輸入的摘錄就會出現,或者是張貼內容的前面55個字,然後使用者會因你的摘錄介紹誘使他們按下標題繼續閱讀。

最常使用的方法是保留the_content() 模版標簽並且新增一個叫作more的快速標簽在你想要”截斷” 的地方.

快速標簽是在管理面板 > 撰寫 > 文章編輯視窗上的一個小按鈕,這些按鈕有粗體斜體、連結、其他的按鈕及最有名的more,移動你的游標到你想截斷的地方按下more 快速標簽按鈕,然後會在那個地方出現像這樣子的碼:

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-->

文章的其餘內容還是存在,但是除了在像是檔案、分類、前頁及搜尋之類的非單篇文章外,文章的內容會像more 的地方顯示繼續閱讀。

繼續閱讀的技術

在模版標簽the_content()中的參數如下所示:

<?php the_content('more_link_text', strip_teaser, 'more_file'); ?>

more_link_text 設定像是”繼續閱讀”的連結文字,第二個參數strip_teaser設定這個”more”連結是咬隱藏(TRUE)或是顯示(FALSE),預設是FALSE也就是會顯示連結文字,最後一個參數是more_file設定”繼續閱讀”的連結檔案,如果你要有所不同的話,一般預設是連結到目前張貼的文章

要移除teaser:

  • 在你的index.php中改變the_content();成﹝這個函式的第二個參數控制像下列那樣:﹞
the_content('','FALSE','');>
  • <!--noteaser--> 緊接在文章中<!--more-->.後。

跳到More或頁首的連結

按照預設當你按下繼續閱讀的連結時,這個網頁會載入然後”跳到”文章中有<--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標簽

你已經知道了怎麼運作,現在讓我們看看我們要如何做一個小邀請來讓你的文章可以繼續被閱讀。

依照設計the_content()標簽中有一個參數用來設定<!--more-->這個內容及外觀,這個外觀會產生一個”繼續閱讀”文章所有內容的連結。

預設看起來像這樣:

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…

假如你想改變這些more….文字為其他的,只要在這個標簽改成新的文字即可:

<?php the_content('Read on...'); ?>

或是像這樣更複雜更有趣的樣子:

<?php the_content('...on the edge of your seat? Click here to solve the mystery.'); ?>

你也可以在標簽中使用樣式。

<?php the_content('<span class="moretext">...on the edge of your seat? Click here to solve the mystery.</span>'); ?>

然後在你的style.css樣式表中設定moretext類別成你要的樣式,這裡有一個例子它的特色是粗體加斜體並且使用font-variant: small-caps來強迫文字變成小的大寫字樣。:

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 …On the Edge of Your Seat? Click Here to Solve the Mystery.

有些人不想要使用文字而喜歡使用特殊字元或是HTML character entity來使讀者能繼續閱讀。

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

這樣看起來會像:

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 » » » »

the_content()模版標簽中有另一個參數會將文章的標題放在more文字中,通過使用the_title()標簽文章的標題會被使用進來:

<?php the_content("...continue reading the story called " . get_the_title('', '', false)); ?>

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 …continue reading the story called A Tale That Must Be Told

每篇文章都有訂製的文字

雖然從模板中呼叫the_content()會產生像上面那樣標準的文字,但是要對特定的文章讓它有個別的文字也是可以的,只要這樣寫<!--more 你的訂製文字 -->就可以。

增加圖片

使用CSS來設計可以變得無限可能,而Wordpress也允許你使用影像在它們的模版標簽中包括more 標簽,要增加一個影像有兩個方法,最簡單的一個方法就是 — 在the_content() 模版標簽中使用。

下麵這個例子是在”Read More”後顯示一個葉子的圖片。

<?php the_content('Read More...<img src="/images/leaf.gif"  alt="read more" title="Read More..." />'); ?>

註意這段原始碼使用了ALTTITLE 屬性在image的標簽中,這是遵循可攜性及網站標準,因為image既是一個圖片也是一個連結所以才要這樣用,下麵是它顯示的樣子

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 Read More… Image:Leaf.gif
你甚至可以像上面提到的增加樣式到image 及more標簽中,不想使用”繼續閱讀”這些文字而只要圖片的話就把文字給刪除就行

第二個例子是使用CSS 背景圖片,我們已經說過在上面的例子中如何使用樣式的類別,這是一個小偏方,這個容器的樣式必須設成允許使用背景圖片顯示在文字後面,假如你要使用上面例子有背景圖片,可以將style.css樣式表改成像這樣:

.moretext {    width: 100px;     height: 45px;     background:url(/images/leaf.gif) no-repeat right middle;    padding: 10px 50px 15px 5px}

50px padding 是相對於右邊界這樣可以確使文字及圖片不會互相覆蓋,這個高度可以確保容器展開的夠寬來讓圖片可以在容器內顯示,這是因為背景圖片不是”真的在那裡”而且也不能相對於容器的邊界來放入,你必須針對自己圖片的尺寸及形狀來做測試才能適合。

你已經瞭解基本的概念,從這裡你可以開始你的想像。

以上翻譯內容直接從此http://codex.wordpress.org.cn/index.php?title=%E8%A8%82%E8%A3%BD%E7%B9%BC%E7%BA%8C%E9%96%B1%E8%AE%80連結轉貼來,如果文章內有無法連結現象請直接至該連結閱讀,翻的不好可以直接修改,或回應給我修改也行,感謝您的閱讀及參與!

Print Friendly, PDF & Email
馬上成為工作達人的Fans

About ㄚ琪

工作達人Fun Taiwan的創辦者及總編,可以在這裡更認識他。

發表迴響

你的電子郵件位址並不會被公開。 Required fields are marked *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Scroll To Top