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

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

 

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

 

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

 

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

 

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

 

事象の確認

問題というのは、

 

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

 

というものです。

 

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

 

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

 

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

 

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

 

＆ｎｂｓｐ；が表示される原因

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

（正確には「＆ｎｂｓｐ；」の半角）

 

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

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

 

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

 

<p>&nbsp;</p>

 

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

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

 

この「＆ｎｂｓｐ；」も文字列としてカウントされるため、抜粋の文字数の終わりあたりにちょうどかかってしまうと、「＆ｎｂｓ」「＆ｎｂ」「＆ｎ」といった尻切れトンボ状態で表示されてしまうのです。

 

解消法

対処としては、抜粋の文字数制限処理前に「＆ｎｂｓｐ；」という文字列を取り除いてしまうのが良いかと思いです。

 

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

 

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

 

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

 

最後に

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

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

 

 

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

 

それは、抜粋の切れ目のところで、変なところで区切ったら意味が通じない文字列になるもの（＝＆ｎｂｓｐ；など）があったら、表示しないという処理くらい汎用的に作れないかなぁと思っていることです。

 

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

 

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