エントリーカードのタイトルの文字数を制限する方法

はじめに

以下をCocoonで実現します。

【SWELL】投稿リストブロックのタイトルの文字数を制限する方法｜かんた🌊SWELLマニア

SWELLのコミュニティーで見かけた次の質問についてです。 投稿リストのタイトルの文字数を制限したい タイトルが長い記事があり、投稿リストではタイトルに文字数の制限を掛けたいのですがどの様にすればよいでしょうか？ 引用元：SWELLコミュニ...

note.com

カードタイトルの文字数を制限し、超過分は三点リーダーで表示します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/entry-card', function ($content) {
  $title = get_the_title();
  $max_length = 15;

  if (mb_strlen($title) <= $max_length) {
    return $content;
  }

  $trim_title = mb_substr($title, 0, $max_length) . get_entry_card_excerpt_more();

  return str_replace($title, $trim_title, $content);
});

参考：CSSのみで三点リーダー表示にする方法

文字数ではなく行数で制限し、超過分は三点リーダーで表示します。

1行で三点リーダー表示

.card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

複数行で三点リーダー表示

複数行の場合、タイトルを表示する高さを定義する必要があります。

.card-title {
  display: -webkit-box;
  height: 3.2em;
  line-height: 1.6;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

さいごに

今回紹介した方法を使えば、カードタイトルの長さを調整し、統一感のあるデザインを実現できます。
PHPを使った文字数制限だけでなく、CSSのみで行数を制限する方法もあるので、用途に応じて選択してください。