エントリーカードのスニペットを全文表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

Gutenbergエディターの設定→「SEO」をオンにすると、メタディスクリプションの入力が可能になります（図1参照）。
入力した文は、メタディスクリプションとエントリーカードのスニペットにそのまま反映されます。

しかし未入力の場合、本文の先頭からCocoon設定→インデックス→自動生成抜粋文字数で設定した文字数分を抽出し、見出しなどを含めたテキストがスニペットとして表示されます。

ただし、エントリーカードのスニペットは、デフォルトで最大3行表示され、文字数が超過すると「…」が表示されます。
エントリーカードに全文を表示したい場合もあります。

この記事では、エントリーカードのスニペットを全文表示に変更する方法について説明します。

大多数のブログは、本文（見出しを含む）から機械的に抽出されたテキストがスニペットとして表示されており、無意味と感じています。
そのため、本スキンではスニペットを非表示にしています。

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

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

add_filter('hvn_theme_options', function ($options) {
  $options['entry_card_snippet_visible'] = 1;

  return $options;
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

/* エントリーカード（デフォルト） サムネイル幅 */
.body .entry-card-thumb {
  --thumb-width: 200px;
}

.body .ect-vertical-card .a-wrap {
  height: 100%;
}

/* スニペット全文表示 */
.body .entry-card .entry-card-snippet {
  color: var(--s-text-color);
  display: block;
  font-size: var(--cocoon-text-size-s);
  line-height: 1.8;
  margin: 0;
  padding: var(--padding15) 0 0 0;
}

さいごに

今回紹介した方法を使えば、エントリーカードにスニペットを全文表示することができます。
メタディスクリプションを入力し、スニペットの内容を自分好みに調整して、より効果的なカード表示を実現できます。