WordPressの新着記事タイトルを魅力的に表示！文字数制限で見栄えを改善｜DAD UNION

Web開発の世界では、ユーザー体験を最適化するために細部にまで気を配ることが重要です。特に、ブログやニュースサイトなどのコンテンツ重視のプラットフォームにおいては、訪問者の注目を引く工夫が不可欠です。本記事では、WordPressサイトの新着記事表示をスタイリッシュに整える、タイトル文字数制限の技術について詳しく解説します。

Contents

なぜタイトルの文字数制限が重要なのか？
WordPressにおけるタイトル文字数制限の実装方法
- 固定ページ用テンプレートの作成
- 処理フローの理解
実装例とその効果：WordPress投稿記事のタイトル文字数制限を掛けて表示する固定ページ
まとめ

なぜタイトルの文字数制限が重要なのか？

WebサイトのTOPページやサイドバーに新着情報として記事のタイトルを表示させることは一般的です。しかし、タイトルが長すぎると、デザインが崩れたり、情報の一貫性が失われたりすることがあります。これを解決するために、タイトルの文字数を一定の長さに制限し、一貫性のある魅力的なレイアウトを実現します。

WordPressにおけるタイトル文字数制限の実装方法

WordPressでタイトルの文字数を制限するためには、PHPのコーディング技術が必要です。以下のステップで、簡単に実装することができます。

固定ページ用テンプレートの作成

まずは、特定の固定ページでのみタイトル文字数を制限するためのテンプレートファイル（例：page-ttlmozi.php）を作成します。このファイル内に、以下のようなPHPコードを記述します。

固定ページ用のテンプレート

ファイル名 : page-ttlmozi.php
Template Name : タイトル文字数制限TPL

を用意して以下のphpコードを記述してます。

<ul>
<?php
query_posts('post_type=post&order=DESC&orderby=date&showposts=10');
if(have_posts()) : while(have_posts()) : the_post();
?>
<li><a href="<?php the_permalink(); ?>">
<?php
if(mb_strlen($post->post_title,'UTF-8')>25) {
  $title= mb_substr($post->post_title,0,25,'UTF-8');
  echo $title."…";
} else {
  echo $post->post_title;
}
?>
</a></li>
<?php
endwhile; endif;
?>
<?php wp_reset_query(); ?>
</ul>

　
このコードは、最新の10件の投稿を取得し、それぞれのタイトルが25文字を超える場合は25文字でカットし、「…」を追加して表示します。これにより、どんなに長いタイトルでも一定の長さに保たれ、デザインの整合性が保たれます。