Technical Blog
BLOG

ワードプレスで取得した概要などのテキストを綺麗にする

ワードプレスで一覧ページやトップページの記事一覧を表示するときに記事の抜粋などを使用して表示させることがあります。しかしこの機能を使うと余計なタグや空白なのが自動挿入されることがあるので、綺麗なテキストを表示させる方法を紹介したいと思います。

通常の記事ループのサンプル

まずは、以前にも紹介した記事ループを作成します。今回はトップページ想定で組んだので、サブループを使用して記事一覧を取得します。

<?php
//reset
$theme_dir = '';
//テーマディレクトリーを変数に置き換える
//リクエスト回数を減らすため、値が変化しないものは先に変数化しておく
$theme_dir = get_template_directory_uri();

$args = array(
  'numberposts'  => 5,  //表示（取得）する記事の数
  'post_type'  => 'post'//投稿のみを取得
);
 
//変数RESET
$newPosts = array();
 
if(get_posts($args)) : //記事が1件以上あった場合
  $newPosts = get_posts($args);
  foreach($newPosts as $post): setup_postdata( $post );
?>
<!-- 各記事で取得 -->
<div class="post_item">
  <div class="thumb_block"><?php if( has_post_thumbnail() ) ://記事にアイキャッチ画像が設置されていたら ?>
    <?php
    	the_post_thumbnail();
    else:
    	echo '<img src="' .esc_url( $theme_dir. '/parts-images/no_image.jpg' ). '" alt="">';
    endif;
    ?>
  </div>
  <h3><?php the_excerpt();?></h3>
  <p><?php the_excerpt();?><p>
</div><!-- /.post_item -->

 <?php  
  endforeach;
endif;//END
wp_reset_postdata(); //サブループの場合は必ずRESETする
?>

「 the_excerpt()」に余計なタグが入る場合の対処方法

「 the_excerpt()」は記事の抜粋から情報を取得を行い、もし抜粋が空欄だったら本文の先頭テキストを取得する関数です。

しかしこの「 the_excerpt()」は標準でPタグや固形な空白などが入っていますので、非常に使いづらい状態です。
※なぜこんな仕様になっているか疑問ではありますが。

テーマ修正 「functions.php」でPタグを除去する

下記コードは「the_excerpt」からPタグを取り除くためのリムーブフィルターです。テーマ内にあるfunctions.php内の適当な場所気追記して、FTP等でテーマフォルダへアップ（上書き）すれば反映され、Pタグが生成されなくなります。

/* function.php */

//抜粋からPタグを取り除く
remove_filter( 'the_excerpt', 'wpautop' );

抜粋のテキストを変数化してPHPできれいにする

次にループの中身を変更をかけます。今回は「get_the_excerpt()」で取得して変数に置き換えますので、必ずループの始まるときに変数をリセットしますので忘れないようにしましょう。
リセットを忘れるとデータが空の時に前のループの値が表示されてしみます。

<?php

//ここから記事のループが始まる

//reset
//ループするので変数は取得前にRESETをかける
$post_excerpt ='';
//get
//抜粋を取得する
$post_excerpt = get_the_excerpt();

if(!empty($post_excerpt))://値が空じゃなかったら処理をする
	$post_excerpt = sanitize_text_field($post_excerpt );//タグなどはすべて除去
	$post_excerpt = str_replace(array("rn","n","r","/n+/"," "), '', $site_content_text);//改行コードや半角スペースは取り除く
endif;

?>
<!-- 各記事で取得 -->
<div class="post_item">
  <div class="thumb_block"><?php if( has_post_thumbnail() ) ://記事にアイキャッチ画像が設置されていたら ?>
    <?php
    	the_post_thumbnail();
    else:
    	echo '<img src="' .esc_url( $theme_dir. '/parts-images/no_image.jpg' ). '" alt="">';
    endif;
    ?>
  </div>
  <h3><?php the_excerpt();?></h3>
  <p><?php echo esc_html($post_excerpt);//the_excerpt();?><p><!-- きれいになったテキストを表示させる -->
</div><!-- /.post_item -->