WordPressで【続きを読む】を表示させる方法

アーカイブや、記事一覧を表示させるときに、

...続きを読む

を表示させる方法を紹介します。

全てfunctions.phpに記載します。

抜粋の文字数を変更する

WordPress Codexに変更方法が記載されています。WordPress Codexでは、

function custom_excerpt_length( $length ) {
     return 20;	
}	
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

のようになっています。デフォルトでは、抜粋の長さは 55 単語です。

今回の設定では、以下のようにします。

//記事抜粋の文字数の設定
function change_excerpt_length( $length ) {
  $length = 200;
  if ( is_category() || is_tax() ) $length = 100;
  return $length;
}
add_filter( 'excerpt_length', 'change_excerpt_length', 999 );

カスタム分類のアーカイブページ、またはカテゴリーページのみ抜粋長さを100文字にしています。ここの抜粋する単語数、条件分岐は好きなように変えてもらって大丈夫です。

省略記号の変更

WordPress version 2.9では概要の[...]文字列を変更するための新たなフィルターが追加されました。WordPress versionに対してしようするものを変更する必要があります。両方を同時に使用することはできません。

バージョン 2.9 以降

//【続きを読む】の設定
function change_excerpt_more( $more ) {
  $html = '<a href="' . esc_url( get_permalink() ) . '">...続きを読む</a>';
  return $html;
}
add_filter('excerpt_more', 'change_excerpt_more' );

続きを読むのスタイルを変更させる場合、クラスを追加したい場合があると思います。その場合はこのようにしてください。そのまま追加するだけで大丈夫です。

function change_excerpt_more( $more ) {
  $html = '<a href="' . esc_url( get_permalink() ) . '" class="btn-sticky">...続きを読む</a>';
  return $html;
}
add_filter('excerpt_more', 'change_excerpt_more' );

バージョン 2.8.x 以前

function change_excerpt_more($excerpt) {
	return str_replace('[...]', '...続きを読む', $excerpt);
}
add_filter('wp_trim_excerpt', 'change_excerpt_more');

以前は、[...]という文字列を検索して、置換していました。フック名も違います。

これで終わりです。

【続きを読む】のデザインを変更する場合、いくつかデザインが良いと思った参考のサイトを紹介しておきます。

コピペでできる！CSSとhtmlのみで作る「続きを読む」の開閉ボタン

[CSSのみ] 続きを読むボタンをCSSで実装する