WordPressの記事一覧を出力するループ内でタイトルを省略して表示する方法

記事の一覧などを出力する時に、タイトルを省略して表示させる方法を紹介します。

記事一覧ページで、タイトルの文字数を揃えることで、見た目を統一したい時にご活用ください。

記事一覧を出力するループ内でタイトルを省略して表示する方法

例えば、以下のようなループがあったとします。

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'paged' => $paged,
'posts_per_page' => 5,
);
$wp_query_post = new WP_Query($args);
?>
<?php if ($wp_query_post->have_posts()): ?>
<ul>
<?php while($wp_query_post->have_posts()): $wp_query_post->the_post(); ?>
<li>
<span class="date"><?php the_time('Y/m/d'); ?></span>
<span class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?><p>No items</p>
<?php endif; wp_reset_postdata(); ?>

これをindex.phpなどに入れると、最新の投稿を5件出力します。ただ、このままだとタイトルがそのまま出力されるので、記事によってはタイトルが2行になって高さが変わったりしますね。

これを以下のように変更することで、タイトルが20文字以上の時は三点リーダ(…)で省略して出力されます。

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'paged' => $paged,
'posts_per_page' => 5,
);
$wp_query_post = new WP_Query($args);
?>
<?php if ($wp_query_post->have_posts()): ?>
<ul>
<?php while($wp_query_post->have_posts()): $wp_query_post->the_post(); ?>
<li>
<span class="date"><?php the_time('Y/m/d'); ?></span>
<span class="title"><a href="<?php the_permalink(); ?>"><?php if(mb_strlen($post->post_title)>20) { $title= mb_substr($post->post_title,0,20) ; echo $title. … ;} else {echo $post->post_title;}?></a></span>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?><p>No items</p>
<?php endif; wp_reset_postdata(); ?>

14行目のthe_title()関数を変更しています。このように記述することで、タイトルが20文字以上の時は20文字以降を省略します。

あとがき

mb_strlenやmb_substrを使っているので、日本語などのマルチバイト文字にも対応しています。

省略する文字数を変更したい場合は、14行目の20を他の値に変更してください。