PR

【WordPress】抜粋を入力するとそのまま表示される？文字数制限や「続きを読む」を付ける方法

ワードプレスでサイドバーにある「抜粋」を入力すると、記事の一覧表示でタイトル下に表示される抜粋の文字数が制限なくそのまま表示されたり、文字が切れるときの記号というか「続きを読む」表現が付かない、なんてことがありますね。

使っているテーマによるものですが、たとえば私が利用しているテーマ「賢威」では、抜粋の入力ありなしで以下のように異なる表示がされます。

  • 抜粋の入力がある場合：入力した文字がすべて表示される
  • 抜粋の入力が無い場合：記事の先頭から何文字かを表示して最後に [･･･]みたいな記号が付いて表示される

抜粋を入力しても抜粋の入力が無い場合と同じ文字数で切り取って同じ記号を最後に付けたい、という場合のカスタマイズ方法をご紹介。

文字数と記号を合わせたい

使うテーマによっては、以下のようにワードプレスのサイドバーにある「抜粋」を設定した時としてない時では、記事の一覧表示で記事タイトル下に表示される抜粋の文字数が異なる場合があるようです。

①の「抜粋」を入力した場合では、入力した抜粋内容がすべて表示され、
②の「抜粋」に入力が無い場合では、記事の先頭から何文字か切り取って最後に [･･･]マーク付きで表示されます。

これは、WordPressの標準関数（ get_the_excerpt() ）が、以下のように「気を利かせて」表示を切り替えているのが原因です。

  • 抜粋欄に文字があるとき：
    「わざわざ入力したんだから、これを全部表示しよう」と判断して丸ごと出す
  • 抜粋欄が空っぽのとき：
    「仕方ないから、本文の先頭から100文字前後（設定による）を自動で拾ってきて、最後に省略記号を付けておこう」と判断する

こうした「親切心」が裏目に出て、
一覧に並んだ時に文字数がバラバラになってしまうわけですね。

ということは、抜粋の入力がある場合も、入力が無い場合と同じ文字数で切って取り出し、最後に同じ記号を付ければよい、ということになりますね。

文字数をそろえるコード

まずはコード全体はこちら。

Code
define('EXCERPT_NEW_LENGTH', 150 );   // 抜粋の文字数定義（半角も全角も1文字は1文字）
define('EXCERPT_END_MARK', ' ...' );  // 抜粋の最後につけるマーク（続きを読むマーク）

//抜粋の文字数設定
function new_excerpt_length($length) {	
    return EXCERPT_NEW_LENGTH;
}	
add_filter( 'excerpt_length', 'new_excerpt_length', 999 );


//続きを読むの表現を設定する
function new_excerpt_more($more) {	
	return EXCERPT_END_MARK;
}
add_filter('excerpt_more', 'new_excerpt_more');


//抜粋の入力がある場合、文字数をEXCERPT_NEW_LENGTHにそろえる
function excerpt_input_new( $excerpt ) {
	//抜粋の入力がある場合は指定文字数 EXCERPT_NEW_LENGTH で切り取り
	if( has_excerpt() ){
		//抜粋入力の文字数取得（UTF-8を明示）
		$excerpt_length	= mb_strlen( $excerpt, 'UTF-8' );
		
		//指定文字数EXCERPT_NEW_LENGTH より長い場合、
		//指定文字数EXCERPT_NEW_LENGTH で切取りして最後に続きを読むマークを付けて返す
		if( $excerpt_length > EXCERPT_NEW_LENGTH){
			$excerpt	= mb_substr( $excerpt, 0, EXCERPT_NEW_LENGTH, 'UTF-8' );	
			return	$excerpt.EXCERPT_END_MARK;			
		}
	}
	//抜粋の入力がない場合は何もせずそのまま返す
	//抜粋の入力があっても指定文字数以内ならそのまま返す
	return	$excerpt;		
}
add_filter( 'get_the_excerpt', 'excerpt_input_new' );
Jin Simple Code Block

順に1つ1つ説明していくと．．．

抜粋の文字数を指定

まずは文字数をそろえてみます。

WordPressの初期値は「110単語（英語基準）」になっています。日本語のブログでは、多くの人が「WP Multibyte Patch」というプラグインを使って「110文字」になるよう調整していますが、まずは「自分の好きな文字数で揃う」ように設定しておきます。

Code
define('EXCERPT_NEW_LENGTH', 150 );   // 抜粋の文字数定義（半角も全角も1文字は1文字）

//抜粋の文字数設定
function new_excerpt_length($length) {	
    return EXCERPT_NEW_LENGTH;
}	
add_filter( 'excerpt_length', 'new_excerpt_length', 999 );
Jin Simple Code Block

設定した抜粋文字数を EXCERPT_NEW_LENGTH として、
defineで150文字にまず指定。（この数値を好みに変えればOK）

その EXCERPT_NEW_LENGTH を抜粋の文字数として
excerpt_lengthフックで設定しておきます。

このコードを functions.php に貼り付けると以下のようになります。

記事の先頭から取ってくる抜粋の表示文字数を EXCERPT_NEW_LENGTH （150文字）に変えたので、まず②はその文字数に変わりました。

①の抜粋の入力がある場合はそのまま表示されるので変わりませんが、次にこの文字数をそろえてみましょう。

文字数を揃える

抜粋の入力がある場合にも、
最大文字数が EXCERPT_NEW_LENGTH（150文字）となるようにしてみます。

Code
//抜粋が設定されているとき、文字数をEXCERPT_NEW_LENGTHにそろえる
function excerpt_input_new( $excerpt ) {
	//抜粋の入力がある場合は指定文字数で切り取り
	if( has_excerpt() ){
		// UTF-8を明示して、日本語が変なところで切れないようにする
		$excerpt = mb_substr( $excerpt, 0, EXCERPT_NEW_LENGTH, 'UTF-8' );
		return $excerpt;
	}
	//抜粋の入力がない場合は何もせずそのまま返す
	return $excerpt;		
}
add_filter( 'get_the_excerpt', 'excerpt_input_new' );
Jin Simple Code Block

4行目で、抜粋に入力があるかどうかをチェックして、
あれば5行目でマルチバイトの文字を数える関数 mb_substr() を使い、
先頭から EXCERPT_NEW_LENGTH 文字分（150文字分）を取得して返す。

このコードを functions.php に貼り付けると以下のようになります。

文字数が大体そろいました。

でも、表示される文字数が同じには見えない。

これは英数記号など半角文字も日本語の全角文字もどちらも1文字と数えてるからなんですね。（上の抜粋では全角文字が多く、下の抜粋は半角英数が多い）

※）半角文字を1文字、全角文字を半角文字の2文字分として数え、
よりしっかり全体の文字量を合わせたい場合には、以下参照してみてください。
【WordPress】記事一覧で抜粋の文字数を揃えたい！全角半角混在でも同じにする方法

文字数を揃えても、抜粋に入力がある場合、
単に文字列が切れている、みたいな表示になってます。

ということで、
最後に「続きを読む」マークを付けるようにしてみましょう。

「続きを読む」マークを付ける

まず「続きを読むマーク」を
自由に変更できるようにしておきます。

Code
define('EXCERPT_END_MARK', ' ...' );  // 抜粋の最後につけるマーク（続きを読むマーク）

//続きを読むの表現を設定する
function new_excerpt_more($more) {	
	return EXCERPT_END_MARK;
}
add_filter('excerpt_more', 'new_excerpt_more');
Jin Simple Code Block

ここでは ' …' と半角スペース+「…」にして、
1行目にて定数 EXCERPT_END_MARK で定義。
（表現を変えたい場合にはここで好みに変えればOK）

それを5行目で「続きを読むマーク」として設定。

では「文字数を揃える」のところで作ったコード（excerpt_input_new）に対し、以下のように修正してみましょう。

  • 抜粋の入力がある場合：
    EXCERPT_NEW_LENGTH文字（150文字）を超える場合には、
    EXCERPT_NEW_LENGTH文字（150文字）を切り取って最後にEXCERPT_END_MARK（ …）を付ける
  • 抜粋の入力が無い場合：
    何もせずそのまま返す

実際修正したコードは以下。

Code
//抜粋の入力がある場合、文字数をEXCERPT_NEW_LENGTHにそろえる
function excerpt_input_new( $excerpt ) {
	
	//抜粋の入力がある場合は指定文字数 EXCERPT_NEW_LENGTH で切り取り
	if( has_excerpt() ){
		
		//抜粋入力の文字数取得（UTF-8を明示）
		$excerpt_length	= mb_strlen( $excerpt, 'UTF-8' );
		
		//指定文字数EXCERPT_NEW_LENGTH より長い場合、
		//指定文字数EXCERPT_NEW_LENGTH で切取りして最後に続きを読むマークを付けて返す
		if( $excerpt_length > EXCERPT_NEW_LENGTH){
			$excerpt = mb_substr( $excerpt, 0, EXCERPT_NEW_LENGTH, 'UTF-8' );	
			return $excerpt . EXCERPT_END_MARK;			
		}
	}
	
	//抜粋の入力がない場合は何もせずそのまま返す
	//抜粋の入力があっても指定文字数以内ならそのまま返す
	return $excerpt;		
}
add_filter( 'get_the_excerpt', 'excerpt_input_new' );
Jin Simple Code Block
  • マルチバイトの文字数をカウントするには、関数mb_strlen()を使います。（8行目）
  • 12行目で文字数が EXCERPT_NEW_LENGTH（150文字）より多いか判断
    • 多ければ EXCERPT_NEW_LENGTH（150文字）文切り出して（13行目）、
    • 最後に EXCERPT_END_MARK を付けて返す（14行目）

このコードに差し替えると以下のようになりますね。

以上で、抜粋に入力がある場合もない場合も表示はそろったと思います。

でも全角も1文字、半角も1文字と数えるより、
半角を1文字とした時、全角は半角2文字分として見た目の文字量もそろえたいですね。

その場合には以下参照してみてください。

【WordPress】記事一覧で抜粋の文字数を揃えたい！全角半角混在でも同じにする方法

またネットビジネス、ブログの収益化に興味がある場合には、以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

無料メールマガジンの詳しい内容を見る！

時間や場所に縛られず稼いだJINが教える

～ 最短で月収10万円稼げるようになる方法 ～

お名前/ニックネーム

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる！

コメント