WordPressで抜粋を改行したくないので改行しない抜粋にした

2014年12月28日

WordPress の記事一覧（トップページやアーカイブページ）を表示する時、

アイキャッチ画像を設定する場合、
普通ならアイキャッチ画像の横に記事の冒頭を抜き出して、抜粋として表示する。

（もしくは、投稿時の抜粋フィールドだが、今回、それは無視）

でも、この抜粋がなんとなく読みづらい（読まなくても見栄えが良くない）

改行がないので、抜粋が読みにくい

とりあえず、記事の本文と、記事一覧 の見た目の違いは、

↓ こーいう記事の場合

↓ 記事一覧だと、このように表示される

ぶっちゃけ、改行が無くなってるのが嫌だ。

タグはいらんのがだ、改行は残したい。

なので、他のタグは消すけど、<p> と <br> のタグだけは残す抜粋にしてみた。

functions.php

以下、functions.php に追加

function the_break_excerpt( $content=null ) {
    global $more;
    $more = true;    // more タグ無視で指定した文字数まで出力( more で切る場合は false に)

    $length = 120;    // 抜粋文字数(p、br タグを含む文字数)

    if( !$content ) {
        $content = apply_filters( 'the_content', get_the_content("") );
    }
    $content = preg_replace( "/\r\n|\r|\n/", "", trim( $content ) );

    // <p><br>タグは残して、他のタグを削除
    $content = strip_tags( $content, "<p><br>" );
    // <img ～>などを<p>で囲ってた場合、<p></p> の形で残るので削除
    $content = str_replace( "<p></p>", "", $content );

    $content = mb_substr( $content, 0, $length );    //文字列を指定した長さで切り取る

    // <p><br>タグの途中で文字列が切れた場合、中途半端に残ったタグを < が出てくるまで後ろから1文字づつ削除
    while( strrpos( $content, "<" ) > strrpos( $content, ">" ) ) {
        $content = mb_substr( $content, 0, -1 );
    }
    // 最後が<br>だったら削除
    if( substr( $content, -6 ) == "<br />" ) {
        $content = mb_substr( $content, 0, -6 );
    }
    elseif( substr( $content, -4 ) == "<br>" ) {
        $content = mb_substr( $content, 0, -4 );
    }

    // 三点リーダー付ける
    if( substr( $content, -4 ) == "</p>" ) {
        $content = mb_substr( $content, 0, -4 );
        $content .= " ...</p>";
    }
    else {
        $content .= " ...";
    }

    // <p>タグの終了タグが無くなってた場合は終了タグを補完
    if( strrpos( $content, "<p>" ) > strrpos( $content, "</p>" ) ) {
        $content .= "</p>";
    }

    return $content;
}

表示部分の変更

あとは、記事リストで抜粋を表示してる部分を変更。
テーマによるけど、the_content か get_the_content
（もしくは、the_excerpt か get_the_excerpt 等々）

the_content()
　↓
echo the_break_excerpt()

もしくは、

echo get_the_content()
　↓
echo the_break_excerpt()

に変更

結果

↓ こーなった。

読みやすくなった ヽ(´ー｀)ノ

WordPress

Posted by るな