抜粋文に半角スペース が途切れて表示される問題の解消法

公開:2017-01-07 / WordPress 制作・開発 / , , , ,
更新:2017-02-12

先日、コチラの記事で「WordPressの記事本文の抜粋表示」について紹介させていただきました。

 

僕はフィルターフックを利用しexcerpt_mblengthに対してPCとスマホとでデバイス判定を行い、デバイスごとに抜粋文の文字数を制限しています。

 

本ブログでは、記事抜粋を適用すると以下キャプチャの赤枠の箇所のようになります。

記事抜粋表示 正常

 

ところが対応後、しばらく運用していたところ、少々気になる問題が見つかりました。。。

 

そこで、本日はこの問題の紹介とその解決方法について紹介します。

 

事象の確認

問題というのは、

 

続き文字(このサイトであれば「…」)の前に、意図しない文字列が入ってしまうことがある

 

というものです。

 

これはご覧頂いた早いので、下の画面キャプチャの赤枠を御覧ください。

記事抜粋表示 異常

 

このとおり「…」の前に「&nb」という文字列が表示されてしまっています。

 

他にも記事を見ていていくと「&nbs」「&nb」「&n」「&」という文字が勝手に挿入されていることがわかりました。

 

この&(アンパサンド)で始まる文字列をヒントに、原因を探ってみます。

 

 が表示される原因

マークアップエンジニアであれば、上記で紹介した文字列を見ればピンと来るかと思いますが、勝手に挿入されている文字列は「 」です。

(正確には「 」の半角)

 

実はこれ、テキストモードで表示するとわかりますが、WordPressで記事を投稿すると、改行の度に「 」が自動挿入されることが原因です。

(いつもビジュアルモードで記事を書いている人は、テキストモードにしてみてください)

 

これは、WordPressがbrタグの代わりに、

 

<p>&nbsp;</p>

 

のようにpタグで半角スペースを括ることで改行を表現しているためです。

(これを嫌う人たちも多く、その場合はPタグを除去するプラグインを利用したりしています。この内容は、コチラの記事で紹介しています)

 

この「&nbsp;」も文字列としてカウントされるため、抜粋の文字数の終わりあたりにちょうどかかってしまうと、「&nbs」「&nb」「&n」といった尻切れトンボ状態で表示されてしまうのです。

 

解消法

対処としては、抜粋の文字数制限処理前に「&nbsp;」という文字列を取り除いてしまうのが良いかと思いです。

 

ですが、僕が紹介した方法だとやりづらいので、僕が独自に考えた「get_the_excerrpt」フィルタをフックする方法で対処してみます。

 

function my_excerpt($content){
	$trimMatch = array("&nbsp;" , "&nbsp" , "&nbs" , "&nb" , "&n" , "&");
	return str_replace($trimMatch , "" , $content);
}
add_filter('get_the_excerpt', 'my_excerpt');

 

これだと、普通に半角の「&」を使うと、消えてしまうため完全にOKではありませんが、この一文字だけであれば大文字で使う、抜粋に入らないようにするといった運用回避が可能かと思います。

 

最後に

この問題は、以下の複合的な問題が起因していますが、原因のひとつひとつは大したことはありません。

  • 改行の際に「<p>&nbsp;</p>」が挿入されること
  • 普段ビジュアルモードで入力していると「<p>&nbsp;</p>」に気が付かないこと
  • 本文を抜粋する際、HTMLタグを除去した本文で文字数カウントされるが、半角スペース「&nbsp;」などの特殊記号は除去されず1文字としてカウントされること

 

 

ところが、僕はこの処理に思うところがあります。

 

それは、抜粋の切れ目のところで、変なところで区切ったら意味が通じない文字列になるもの(=&nbsp;など)があったら、表示しないという処理くらい汎用的に作れないかなぁと思っていることです。

 

確かに、「&nb」と意図的に入力しているケースもあると思いますが、だとしても抜粋文の一番最後なので、特殊記号の尻切れであろうと、意図的に入力した文字列であろうと、削除してしまっていいのではないかと考えているからです。

 

いつの日かWordPressの有志の方たちの手で改修されることを期待しつつ、このブログを終えたいと思います。

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

コメントはありません

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...