ワードプレスでサイドバーにある「抜粋」を入力すると、記事の一覧表示でタイトル下に表示される抜粋の文字数が制限なくそのまま表示されたり、文字が切れるときの記号というか「続きを読む」表現が付かない、なんてことがありますね。
使っているテーマによるものですが、たとえば私が利用しているテーマ「賢威」では、抜粋の入力ありなしで以下のように異なる表示がされます。
- 抜粋の入力がある場合：入力した文字がすべて表示される
- 抜粋の入力が無い場合：記事の先頭から何文字かを表示して最後に [･･･]みたいな記号が付いて表示される
抜粋を入力しても抜粋の入力が無い場合と同じ文字数で切り取って同じ記号を最後に付けたい、という場合のカスタマイズ方法をご紹介。
文字数と記号を合わせたい
賢威の場合（ここでは賢威8ですが）、以下のようにワードプレスのサイドバーにある「抜粋」を設定した時としてない時では、記事の一覧表示で記事タイトル下に表示される抜粋の文字数とかが異なります。
①の「抜粋」を入力した場合では、入力した抜粋内容がすべて表示され、
②の「抜粋」に入力が無い場合では、記事の先頭から何文字か切り取って最後に [･･･]マーク付きで表示されます。
これは抜粋表示のために使っているワードプレスの関数（ get_the_excerpt() ）の仕様によるもので、抜粋の入力があれば、その入力文字列をそのまま全て出し、抜粋の入力が無ければ記事の先頭から決められた文字数（ワードプレスの初期値は110文字）を取ってきて返す、となっているからですね。
ということは、抜粋の入力がある場合も、入力が無い場合と同じ文字数で切って取り出し、最後に同じ記号を付ければよい、ということになりますね。
文字数をそろえるコード
まずはコード全体はこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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() ){ //抜粋入力の文字数取得 $excerpt_length = mb_strlen( $excerpt ); //指定文字数EXCERPT_NEW_LENGTH より長い場合、 //指定文字数EXCERPT_NEW_LENGTH で切取りして最後に続きを読むマークを付けて返す if( $excerpt_length > EXCERPT_NEW_LENGTH){ $excerpt = mb_substr( $excerpt , 0 , EXCERPT_NEW_LENGTH ); return $excerpt.EXCERPT_END_MARK; } } //抜粋の入力がない場合は何もせずそのまま返す //抜粋の入力があっても指定文字数以内ならそのまま返す return $excerpt; } add_filter( 'get_the_excerpt', 'excerpt_input_new' ); |
順に1つ1つ説明していくと．．．
抜粋の文字数を指定
まずは文字数をそろえてみます。
ワードプレスの初期値は110文字になってますが、いつでも好みの数に変えられるようにまずしておきましょう。
|
1 2 3 4 5 6 7 |
define('EXCERPT_NEW_LENGTH', 150 ); // 抜粋の文字数定義（半角も全角も1文字は1文字） //抜粋の文字数設定 function new_excerpt_length($length) { return EXCERPT_NEW_LENGTH; } add_filter( 'excerpt_length', 'new_excerpt_length', 999 ); |
設定した抜粋文字数を EXCERPT_NEW_LENGTH として、
defineで150文字にまず指定。（この数値を好みに変えればOK）
その EXCERPT_NEW_LENGTH を抜粋の文字数として
excerpt_lengthフックで設定しておきます。
このコードを functions.php に貼り付けると以下のようになります。
記事の先頭から取ってくる抜粋の表示文字数を EXCERPT_NEW_LENGTH （150文字）に変えたので、まず②はその文字数に変わりました。
①の抜粋の入力がある場合そのまま表示されるので変わりませんが、次にこの文字数文字数をそろえてみましょう。
文字数を揃える
抜粋の入力がある場合にも、
最大文字数が EXCERPT_NEW_LENGTH（150文字）となるようにしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 |
//抜粋が設定されているとき、文字数をEXCERPT_NEW_LENGTHにそろえる function excerpt_input_new( $excerpt ) { //抜粋の入力がある場合は指定文字数で切り取り if( has_excerpt() ){ $excerpt = mb_substr( $excerpt , 0 , EXCERPT_NEW_LENGTH ); return $excerpt; } //抜粋の入力がない場合は何もせずそのまま返す return $excerpt; } add_filter( 'get_the_excerpt', 'excerpt_input_new' ); |
4行目で、抜粋に入力があるかどうかをチェックして、
あれば5行目でマルチバイトの文字を数える関数 mb_substr() を使い、
先頭から EXCERPT_NEW_LENGTH 文字分（150文字分）を取得して返す。
このコードを functions.php に貼り付けると以下のようになります。
文字数が大体そろいました。
でも表示される文字数が同じは見えない。
これは英数記号など半角文字も日本語の全角文字もどちらも1文字と数えてるからなんですね。（上の抜粋では全角文字が多く、下の抜粋は半角英数が多い）
※）半角文字を1文字、全角文字を半角文字の2文字分として数え、
よりしっかり全体の文字量を合わせたい場合には、以下参照してみてください。
【WordPress】記事一覧で抜粋の文字数を揃えたい！全角半角混在でも同じにする方法
文字数を揃えても、抜粋に入力がある場合、単に文字列が切れている、みたいな表示になってます。
ということで、最後に「続きを読む」マークを付けるようにしてみましょう。
「続きを読む」マークを付ける
まず「続きを読むマーク」を自由に変更できるようにしておきます。
|
1 2 3 4 5 6 7 |
define('EXCERPT_END_MARK', ' ...' ); // 抜粋の最後につけるマーク（続きを読むマーク） //続きを読むの表現を設定する function new_excerpt_more($more) { return EXCERPT_END_MARK; } add_filter('excerpt_more', 'new_excerpt_more'); |
ここでは ' ...' と半角スペース+「...」にして、
1合目にて定数 EXCERPT_END_MARK で定義。
（表現を変えたい場合にはここで好みに変えればOK）
それを5行目で「続きを読むマーク」として設定。
では「文字数を揃える」のところで作ったコード（excerpt_input_new）に対し、以下のように修正してみましょう。
- 抜粋の入力がある場合：
EXCERPT_NEW_LENGTH文字（150文字）を超える場合には、
EXCERPT_NEW_LENGTH文字（150文字）を切り取って最後にEXCERPT_END_MARK（ ...）を付ける - 抜粋の入力が無い場合：
何もせずそのまま返す
実際修正したコードは以下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//抜粋が入力がある場合、文字数をEXCERPT_NEW_LENGTHにそろえる function excerpt_input_new( $excerpt ) { //抜粋の入力がある場合は指定文字数 EXCERPT_NEW_LENGTH で切り取り if( has_excerpt() ){ //抜粋入力の文字数取得 $excerpt_length = mb_strlen( $excerpt ); //指定文字数EXCERPT_NEW_LENGTH より長い場合、 //指定文字数EXCERPT_NEW_LENGTH で切取りして最後に続きを読むマークを付けて返す if( $excerpt_length > EXCERPT_NEW_LENGTH){ $excerpt = mb_substr( $excerpt , 0 , EXCERPT_NEW_LENGTH ); return $excerpt.EXCERPT_END_MARK; } } //抜粋の入力がない場合は何もせずそのまま返す //抜粋の入力があっても指定文字数以内ならそのまま返す return $excerpt; } add_filter( 'get_the_excerpt', 'excerpt_input_new' ); |
マルチバイトの文字数をカウントするには、関数mb_strlen()を使います。
（8行目）
12行目で文字数が EXCERPT_NEW_LENGTH（150文字）より多いか判断して、多ければ EXCERPT_NEW_LENGTH（150文字）文切り出して（13行目）、最後に EXCERPT_END_MARK を付けて返す（14行目）。
このコードに差し替えると以下のようになりますね。
以上で、抜粋に入力がある場合もない場合も表示はそろったと思います。
でも全角も1文字、半角も1文字と数えるより、
半角を1文字とした時、全角は半角2文字分として見た目の文字量もそろえたいですね。
その場合には以下参照してみてください。
【WordPress】記事一覧で抜粋の文字数を揃えたい！全角半角混在でも同じにする方法
またネットビジネス、ブログの収益化に興味がある場合には、以下のメルマガにも登録してみてくださいね。
