WordPress

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

Web開発の世界では、ユーザー体験を最適化するために細部にまで気を配ることが重要です。特に、ブログやニュースサイトなどのコンテンツ重視のプラットフォームにおいては、訪問者の注目を引く工夫が不可欠です。本記事では、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文字でカットし、「…」を追加して表示します。これにより、どんなに長いタイトルでも一定の長さに保たれ、デザインの整合性が保たれます。

処理フローの理解

このコードの処理フローを理解することで、カスタマイズやトラブルシューティングが容易になります。処理の流れは以下の通りです。

  1. query_postsで最新の投稿記事10件を取得
  2. 取得した記事数分ループ
  3. 記事リンクとタイトルを取得
  4. 記事タイトルが25文字より多い場合は、25文字まで表示し「…」を追加
  5. 記事タイトルが25文字以下の場合は、そのまま表示

実装例とその効果:WordPress投稿記事のタイトル文字数制限を掛けて表示する固定ページ

実際に、当サイトでこの方法を試してみた結果を以下のリンクから確認できます。
タイトル文字制限(25文字以降は…)

この変更により、サイトの見栄えが格段に向上し、ユーザーのサイト滞在時間が増加したことを確認しました。また、情報の整理が容易になり、ユーザーが求めるコンテンツに迅速にアクセスできるようになります。

まとめ

WordPressサイトでのタイトル文字数制限は、小さな変更ですが、ユーザーエクスペリエンスに大きな影響を与えます。この方法を利用して、あなたのサイトも更に魅力的なものにしましょう。

 
※流用される場合は自己責任でお願いします。