wordpressで投稿記事の抜粋を表示する方法

wordpressの投稿記事を抜粋して、トップページやカテゴリーページで表示させたい時に使える方法です。

the_excerpt

wordpressのループ内で使うことができる投稿記事を抜粋してくれるwordpressの関数です。

例えば、

<?php if(have_posts()): ?>
<?php while(have_posts()): the_post();?>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?>
<p><?php the_category(); ?></p></div>
<?php endwhile; ?>
<?php endif; ?>

※the_excerpt();初めからpタグに囲まれて表示されます。

ただし、英語版だと55個の単語が抜粋されて表示されるのですが、、日本語の取り扱いでは上手くいきません。

そのための方法が二種類あります。

moreタグを使う

htmlの場合

 <!--more-->

を文章の抜粋したいところの最後に入れることで、タグより前の文章が抜粋されて表示されます。

ビジュアルの場合

赤枠の部分クリックすると画像のような区切り線が表示されます。
その区切り線を同じように抜粋したいところの最後にいれることで、タグより前の文章が抜粋されて表示されます。

※もちろん、画像は無視されて文章のみ表示されます。

WP Multibyte Patchのプラグインを使う

日本語の取り扱いができるように作られたプラグインで、初めからプラグインとして準備されています。
左メニュー→プラグイン

有効化してあげることで、投稿内容の頭から110文字を自動的に抜粋してくれます。
ただし、moreタグがある場合は、moreタグを優先します。

改造1.続きを読むで投稿記事にリンクをはる

初期設定だと、文章が110文字表示されて最後に[…]が表示されるだけなのですが、
これでは、続きがあるのかどうかわかりにくいです。
最後の[…]を続きを読むに個別記事へのリンクを張ります。

functions.phpに追加します。

function new_excerpt_more($more) {
global $post;
return '……(<a href="' . get_permalink() . '">' . __('続きを読む') . '</a>)';
}
add_filter('excerpt_more', 'new_excerpt_more');

改造2.抜粋文章全体をリンクできるようにする

上記の抜粋を表示するwordpressループを書き換えます。

<?php if(have_posts()): ?>
<?php while(have_posts()): the_post();?>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<div><a href="<?php the_permalink(); ?>">
<?php the_excerpt(); ?></a>
<p><?php the_category(); ?></p></div>
<?php endwhile; ?>
<?php endif; ?>

ただし、the_excerptは自動的にpタグが入ってしまうので、pタグを表示させないようにする必要があります。
functions.phpに

remove_filter('the_excerpt', 'wpautop');

を追加する事でpタグが入らないようになります。

また、[…]ではわかりにくいので「…続きを読む」に書き換えます。
functions.phpに下記を追加

function new_excerpt_more($more) {
	return '…続きを読む';
}
add_filter('excerpt_more', 'new_excerpt_more');

return ”の中を好きに書き換えることでいろいろな文字に変更することができます。

改造3.文字数を変更する。

functions.phpに下記を追加します。

function new_excerpt_mblength($length) {	
     return 20;	
}	
add_filter('excerpt_mblength', 'new_excerpt_mblength');	

returnの後の数字で表示される文字数を変更することができます。
今回は、20文字になります。


コメントする