ブログカードのタイトル文字数が32以上の場合は省略して出力するカスタマイズ例

先日、Cocoonフォーラムのトピックに以下のようなカスタマイズ需要の書き込みがあったのでフィルターフックで対応してみました。

いつも大変お世話になっております。

【カスタマイズ相談内容】

ブログカードで50~60文字のタイトル全て表示すると特にスマホでうるさい感じを与えてしまうので、32文字で制御し残りは・・・みたいなものにできますでしょうか？

【相談背景】

私が運営しているサイトはタイトルが50-60文字のものが多いです。Google的には32文字までなのはわかっていますが、自分なりにABテストをした結果、検索結果には32文字程度しか表示されなかったり、長いタイトルが短縮されて置き換わったりするものの、検索結果から記事をクリックしてもらった後は、50-60文字のほうがむしろスクロールして本文を読んでくれる傾向にあります。

※前半32文字までに見せたいものを詰め込んでいます

とはいえ、ブログカードにタイトル全てが表示されてしまうとうるささが出てしまうので32文字とかで制御したいなと思っている次第です。

内部・外部ブログカードのタイトル省略

全ブログカードタイトルの32文字以上を省略するカスタマイズ例はこちら。

//内部・外部ブログカードのタイトルを32文字で切り出し
add_filter('cocoon_blogcard_title', function ($title){
  if (mb_strlen($title) > 32) {
    $title = mb_substr($title, 0, 32).'...';
  }
  return $title;
});

内部ブログカードのタイトル省略

内部ブログカードのタイトルだけ。

//内部ブログカードのタイトルを32文字で切り出し
add_filter('cocoon_internal_blogcard_title', function ($title){
  if (mb_strlen($title) > 32) {
    $title = mb_substr($title, 0, 32).'...';
  }
  return $title;
});

外部ブログカードのタイトル省略

外部ブログカードのタイトルだけ。

//外部ブログカードのタイトルを32文字で切り出し
add_filter('cocoon_external_blogcard_title', function ($title){
  if (mb_strlen($title) > 32) {
    $title = mb_substr($title, 0, 32).'...';
  }
  return $title;
});