WordPress

【WordPressワードプレス】抜粋文の使い方の基礎を解説|文字数と末尾をカスタマイズする

2021年1月13日

 

こんにちは、イケゾーです。

こちらはGoogleの検索結果の画面ですが、タイトルと少しの文章がズラーっと表示されていて、これを見て自分が知りたいことが書いてありそうなページをクリックしますよね。

この少しの文章のことを抜粋(ばっすい)と呼び、ユーザに読ませて興味を持ってもらうことを目的に設置しています。

今回は、WordPressサイトで抜粋文を使う方法を解説します。抜粋の基本的な使い方から、文字数や表示方法のカスタマイズまで解説していきます。

 

この記事はこんな人におすすめ!

  • WordPressで作成したサイトで抜粋文を表示したい
  • WordPressで作成したサイトの抜粋の文字数を変更したい
ユーザーに記事の概要を伝えられると、クリックしてもらえるかも
イケゾー

 

【WordPressワードプレス】抜粋文の使い方の基礎を解説|文字数と末尾をカスタマイズする

この記事では、ソースコードを実際に掲載して解説していきます

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

抜粋文の使い方の基礎を解説|文字数と末尾をカスタマイズする

この記事を読んでできること

文字数や表示方法を指定して、抜粋文を表示します。

 

 

抜粋文のデフォルト文字数を定義する

抜粋文の最後に表示する文字を変更し、デフォルトの文字数を定義します。

functions.php
// 文字列の最後の文字
function cms_excerpt_more(){
	return '...';
}
add_filter('excerpt_more', 'cms_excerpt_more');

// 文字数を80文字に指定
function cms_excerpt_length(){
	return 80;
};
add_filter('excerpt_mblength', 'cms_excerpt_length');

 

excerpt_more フィルターフック

抜粋文の最後につく文字を変更します。「...」や「read more」、「続きを読む」などがよく使われています。

excerpt_mblength フィルターフック

文字数をWP Multibyte Patch標準の110文字から80文字に変更します。

 

抜粋文をget_the_excerptで表示します。必要であれば、サブクエリを作成してください。

front-page.php
<?php echo get_the_excerpt(); ?>

 

 

これで記事80文字を抜粋として表示出来るようになりました
イケゾー

 

抜粋文を入力する

前章で抜粋を表示できるようになりましたが、今のままでは記事本文の最初80文字が表示されています。これでは使い勝手が悪く、記事の内容を要約したものとは言えませんよね。

そこで、管理画面から「抜粋文」を新たに作成して表示すると良いでしょう。

 

固定ページで、抜粋機能を使うために、下記の記述をします。

functions.php
add_post_type_support( 'page', 'excerpt' );// 固定ページで抜粋を表示する

add_post_type_support()

投稿タイプ別の機能を設定する記述です。投稿タイプ、機能名の順に引数を指定します。

 

管理画面から抜粋文を入力します。

get_the_excerptは記事の抜粋を取得するものですが、抜粋に何も入力されていない場合は本文を取得します。

これで任意の抜粋文を80文字表示できるようになりました
イケゾー

 

抜粋文を適度な長さに調整する

前章では、抜粋の文字数を80に指定しましたが、設置する場所によって文字数を変えられると便利です。

 

文字数を変えられるように関数を作成していきます。

functions.php
function get_flexible_excerpt( $number ) {
	$value = get_the_excerpt();
	$value = wp_trim_words( $value, $number, '...' );
	return $value;
}

get_flexible_excerpt()

引数に指定した文字数を抜粋または本文から取得する関数

 

wp_trim_words()

第一引数:抜粋対象の文字列

第二引数:get_flexible_excerpt()関数の引数で指定された数値

第三引数:抜粋文の最後に表示する内容

 

抜粋の表示部分のコードを下記のように変更します。例では40文字の抜粋を表示しています。

front-page.php
<?php echo get_flexible_excerpt( 40 ); ?>

 

抜粋の文字数を可変にする関数を作り表示ができました
イケゾー

 

抜粋文の改行を反映させる

ここで、ひとつ問題が有ります。

管理画面で入力した抜粋に改行を入れたのですが、改行が反映されていません

 

改行を反映させるために記述を追加します。

functions.php
//get_the_excerpt() で取得する文字列に改行タグを挿入
function apply_excerpt_br( $value ) {
	return nl2br( $value );
}
add_filter( 'get_the_excerpt', 'apply_excerpt_br' );

 

抜粋に入力した改行も反映することができました。
イケゾー

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

 

まとめ

以上で、抜粋の使い方を解説しました。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-WordPress

© 2021 IkezoooBlog