Skip to main content
[WordPress]使用excerpt讓文章在首頁自動產生摘要

[WordPress]使用excerpt讓文章在首頁自動產生摘要

(這是一篇筆記文)

上次在撰寫文章時,研究出了使用手動插入繼續閱讀標籤修改文字的方法。不過在閱讀官方文件後,發現還有另外一種方式,可以插入繼續閱讀標籤,而且不用手動插入;也就是當你發表文章時,會自動在首頁產生摘要。

既然有這麼方便的方法,怎麼能不知道呢?抱持著研究精神,以及誤打誤撞的運氣,和子決定試試看使用另外一種方式。如果你也跟和子一樣想試試好手氣,請先備份好你的WordPress,以下可能會需要修改佈景主題的檔案。

開啟excerpt設定

WordPress裡有一個功能叫做excerpt,它可以自動讓文章顯示摘錄,關於詳細的說明可以看官方說明文件。有些佈景主題會內建excerpt的開關選項,例如現在和子使用的主題Sparkling,就剛好有這項功能。位置在外觀>自訂>Sparkling Options>Content options,進去後會看到第一個選項「Show post excerpts?」,請先開啟它。

開啟之後回首頁,就可以看到之前的文章都全部變成部份摘錄了,而且會在摘錄最末尾產生一個[…],就像下面這樣:

文章摘錄(修改前)

這樣看似已經完成了!不過總是覺的[…]這個東西有點不討喜,如果可以把[…]改成別的是不是會好一些?翻閱官方說明文件找到解決方法,可以到佈景主題的functions.php加入以下程式碼:

1
2
3
4
5
6
// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
  global $post;
  return '<a class="moretag" href="'. get_permalink($post->ID) . '"> ...繼續閱讀</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

加入以上程式就變成下面這樣:

文章摘錄(修改後)

加入繼續閱讀按鈕

在開啟excerpt功能後,有些佈景主題會自動產生繼續閱讀的按鈕,取代原本接續在摘要後面的文字,不僅看上去會稍微美觀些,也方便使用者做點選。如果佈景主題沒有的話怎麼辦?其實也不難,只要在以上程式的第4行做點小修改:

1
return '...<p><a class="moretag" href="'. get_permalink($post->ID) . '"> 繼續閱讀</a></p>';

另外請在佈景主題的style.css檔加入以下css:

1
2
3
4
5
6
7
.moretag {
  float:right;
  font-size:16px;
  padding:10px 20px;
  color:#fff;
  background:#666;
}

這樣在摘要後面就會變成「…」,而原本繼續閱讀透過簡單的css控制,變成一個按鈕:

利用css增加按鈕

修改摘要顯示字數

如果想要修改摘要顯示字數可另外自行加入以下程式碼,詳細可以參考官方文件

1
2
3
4
function wpdocs_custom_excerpt_length( $length ) {
  return 20; //返回顯示字數
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

和子

喜歡設計,享受生活,愛好新鮮事。某天不小心踏上網頁開發設計的旅途,從HTML、CSS、PHP、JQuery,到近期開始接觸WordPress。

發表迴響

釘選至 Pinterest

%d 位部落客按了讚: