BLOGスタッフブログ

インソースマーケティングデザイン

2016.02.02 コーディング

【wordpress】記事抜粋表示するとたまにでてくる をやっつける方法

マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

最近健康診断がありました。
30代に突入すると、20代の頃と比べて検査項目がどっと増えます。
嫌味かってくらい増えます。
今年は30代初の健康診断だったので、その差に少し泣きそうになりました。
あ、バリウムは案外平気でした。
これからも健康には気をつけて頑張りたいと思います。

■記事抜粋表示するとたまにでてくる をやっつける方法

さて、今回もまたまたwordpressのお話をひとつ。
投稿記事を一覧表示させるときによく使う抜粋表示、ありますよね。
wordpressで記事を投稿するとき、ビジュアルモードで文章を書いた場合、エンター キーの押下で改行されるかと思います。
この時、目には見えませんが実は というスペースを意味するエンティティ文字が挿入されます。
記事本文を抜粋するときに使うテンプレートタグにthe_excerpt()というものがありますが、
このタグを使うとき、切り取る文字数や の位置によっては予定外の文字が表示されてしまうんです。
(例 ■記事抜粋表示するとたまにでてくる をやっつける方法&nbs…)

本当はこのthe_excerpt()だけでそこらへんどうにかしてくれると助かったんですが、どうしようもないので、別の抜粋表示の仕方をご紹介いたします。
サンプルソースは以下。

<?php
$p = get_post($id);
$content = strip_shortcodes( $p->post_content );
echo ‘<p>’. wp_html_excerpt($content,26,’…’) . ‘</p>’;
?>
①記事IDを取得する、get_post();

$idはwordpressではグローバル変数として扱われます。
この変数には、現在の投稿IDが代入されているので、ループの中で記事を抜粋したいときには$p = get_post($id);と書けばOKです。
他にも、get_post(get_the_ID());と書いてIDをひっぱってくる書き方もあったりします。

②ショートコードを取り除く、strip_shortcords();

投稿本文にはショートコードが含まれている場合があるため、これを予め取り除いておきます。
先述のget_post($id);から取得した投稿に関する情報からpost_content(記事本文)に対してこの処理をかけ、$contentという変数に代入しています。

③指定した文字数で抜粋する、wp_html_excerpt();

the_excerpt()もHTMLタグや画像は取り除かれますが、&nbsp;のようなエンティティは適切に処理してくれません。
そこで使うのがこのwp_html_excerpt();です。
このタグはHTMLタグはもちろんエンティティなども考慮して抜粋してくれます。
ただし、&nbsp;は1文字ではなくそのエンティティ文字数分カウントされるので(&nbsp;だと4文字となる)、引数指定する文字数はこれを考慮した方がいいでしょうね。

wp_html_excerpt();の嬉しいところは、抜粋する文字数や、抜粋されたテキストの最後の文字も簡単に任意に指定できるところです。
the_excerpt();だと、システム側で予め設定された文字数で抜粋されるので、別途フィルターフックなどを使って設定してあげないといけません。

以上のことから、記事本文を抜粋させたい場合は、the_excerpt();を使うよりもwp_html_excerpt();を使ってあげた方が色々と都合がいいかもしれません。(今の所the_excerpt();でなければいけない理由がわかりません…)
抜粋表示を使うことは多々あると思うので、意識して使っていきたいですね。

以上、虎澤がお送りいたしました♪

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します