【Cocoon】ブログカードの抜粋文&タイトルの文字数を設定する【コピペOK】

今回は『【Cocoon】ブログカードの抜粋文&タイトルの文字数を設定する【コピペOK】』について初心者にもわかりやすく解説します。

「ブログカードのタイトルを制限したい」
「Cocoonでブログカードの抜粋文を全文表示したい」

こんな方におすすめです。

1. ブログカードのタイトル&抜粋文の文字数を設定する
- 1.1. コードのコピペ場所
2. ブログカードのタイトル&抜粋文の文字数を制限する
- 2.1. タイトルの文字数を制限する
- 2.2. 抜粋文の文字数を制限する
3. ブログカードの抜粋文を全文表示、非表示にする
4. 「カスタマイズが難しい…」という方へ

ブログカードのタイトル&抜粋文の文字数を設定する

今回解説するのは以下の2つです。

ブログカードのタイトル&抜粋文の文字数を制限する
ブログカードの抜粋文を全文表示、非表示にする

是非参考にしてください。

コードのコピペ場所

まず、コードを追加する場所を表示しましょう。

管理画面から［外観➡︎テーマエディター］を選択し、［編集するテーマを選択］がCocoon Child（子テーマ）であることを確認してください。

なってない場合はCocoon Childに設定しましょう。

ブログカードのタイトル&抜粋文の文字数を制限する

Cocoonのブログカードは、デフォルトだと以下のように表示されます。

「タイトル&抜粋文はこんなに表示されなくていい」という方のために、文字数を制限し、最後に『...』を表示させる方法を解説します。

タイトルの文字数を制限する

まず、［外観➡︎テーマエディター➡︎Cocoon Child: functions.php］を開いてください。

そして、以下のコードをコピペしましょう。

//内部・外部ブログカードのタイトルを32文字で切り出し
add_filter('cocoon_blogcard_title', function ($title){
if (mb_strlen($title) > 32) {
$title = mb_substr($title, 0, 32).'...';
}
return $title;
});
引用元：ブログカードのタイトル文字数が32以上の場合は省略して出力するカスタマイズ例

一番下にコピペしてください。

このコードをfunctions.phpにコピペすると、タイトルが32文字に制限されます。

タイトルの省略する文字数を変えるときは、青いマーカーの数字を書き換えましょう。

抜粋文の文字数を制限する

先程と同じように、以下のコードをコピペしてください。

//内部・外部ブログカードのスニペット部分の文字列制御
add_filter( 'cocoon_blogcard_snippet', function ($snippet){
return mb_substr($snippet, 30);//文字数となる数字は好みで変更してください
} );
引用元：内部ブログカードの抜粋文字数を指定したい | カスタマイズ相談 | Cocoon フォーラム

このコードをfunctions.phpにコピペすると、抜粋文の30文字以上は省略されます。

こちらも、青いマーカーの数字が表示される文字数です。

ブログカードの抜粋文を全文表示、非表示にする

続いて、ブログカードの抜粋文を全文表示、非表示にする方法を解説します。

ブログカードの抜粋文を全文表示させる方法

ブログカードのデフォルトは、以下のように抜粋文が見切れています。

少し見にくいと思ったので、抜粋文を全文表示させる方法を解説します。

まず、［外観➡︎テーマエディター➡︎Cocoon Child: style.css］を開いてください。

そこに、以下のコードをコピペしましょう。

.blogcard-content {
  max-height: 30em;
}

このコードをコピペすると、ブログのスニペットが見切れることはなくなります。

ブログカードの抜粋文を非表示にする方法

続いて、ブログカードの抜粋文を非表示にする方法を解説します。

前回と同じstyle.cssに、紹介するコードをコピペしてください。

■ブログカードの抜粋文を非表示にする

/*ブログカードの抜粋文を非表示にする*/ 
.blogcard-snippet{
   display: none;
}

■内部ブログカードのみ抜粋文を非表示にする場合

/*内部ブログカードの抜粋文を非表示にする*/
.internal-blogcard-snippet{
display: none;
}

■外部ブログカードのみ抜粋文を非表示にする場合

/*外部ブログカードの抜粋文を非表示にする*/
.external-blogcard-snippet{
  display: none;
}

以上です。

コードのコピペが完了したら『ファイルを更新』をクリックしましょう。

全コードのまとめ

それでは、今回紹介したコードを全てまとめます。👇

functions.php

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

内部・外部ブログカードのスニペット部分の文字列制御 
add_filter( 'cocoon_blogcard_snippet', function ($snippet){
   return mb_substr($snippet, 30);//文字数となる数字は好みで変更してください 
} );

style.css

.blogcard-content {
max-height: 30em;
}

/*ブログカードの抜粋文を非表示にする*/
.blogcard-snippet{
  display: none;
}

/*内部ブログカードの抜粋文を非表示にする*/
.internal-blogcard-snippet{
  display: none;
}

/*外部ブログカードの抜粋文を非表示にする*/
.external-blogcard-snippet{
  display: none;
}