現在「SILK」スキンを適用中です。

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集

Tips
この記事は約6分で読めます。

。Cocoonでは、デフォルト機能で様々なアスペクト比のサムネイルを利用することができます。

テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法
テーマで利用されているサムネイル画像のアスペクト比を変更したい場合に一括して変更する方法です。

ただ、カスタマイズによっては、

自分で画像サイズを決めたい

縦長の画像サムネイルを設定したい

なんて需要もあるかと思います。

そこで、Cocoon 1.8.4からフィルターフックを利用して手軽に各部分のサムネイルサイズを変更できるようになりました。

サムエルサイズを変更できる部分はこちら。

  • インデックスページのエントリーカード
  • 投稿の関連記事カード
  • 内部ブログカード
  • 新着記事ウィジェット(ショートコード)
  • 人気記事ウィジェット(ショートコード)
  • 関連記事ウィジェット
  • ページ送りナビカード
  • カルーセルカード

以下では、それぞれのカスタマイズコードサンプルを紹介します。

画像サイズは、各々設定したいサイズに変更して修正してください。

カスタマイズ後は、Regenerate Thumbnails等のサムネイル再生成プラグインで画像を作成し直す必要があります。

テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。

以下のコードは、子テーマのfunctions.phpに貼り付けてご利用ください。

縦横比1:1.9の画像に変更するカスタマイズ例です。
スポンサーリンク

インデックスページのエントリーカード

エントリーカードサムネイル

//インデックスエントリーカードサムネイルサイズ
add_image_size('index_thumb', 320, 168, true);
add_filter('get_entry_card_thumbnail_size', function (){
  return 'index_thumb';
});
スポンサーリンク

投稿の関連記事カード

関連記事カードサムネイル

//関連記事カードサムネイルサイズ
add_image_size('related_thumb', 320, 168, true);
add_filter('get_related_entry_card_thumbnail_size', function (){
  return 'related_thumb';
});
スポンサーリンク

内部ブログカード

ブログカードサムネイル

//内部ブログカードサムネイルサイズ
add_image_size('internal_blogcard_thumb', 160, 84, true);
add_filter('get_internal_blogcard_thumbnail_size', function (){
  return 'internal_blogcard_thumb';
});
関連記事の表示タイプによって、画像サイズを合わせる必要があると思います。

新着記事ウィジェット(ショートコード)

記事ウィジェットサムネイル

//新着記事ウィジェットサムネイルサイズ
add_image_size('new_entries_thumb', 120, 63, true);
add_filter('get_new_entries_thumbnail_size', function (){
  return 'new_entries_thumb';
});
ウィジェットの表示タイプによって、画像サイズを合わせる必要があると思います。

人気記事ウィジェット(ショートコード)

人気記事ウィジェットサムネイル

//人気記事ウィジェットサムネイルサイズ
add_image_size('popular_entries_thumb', 120, 63, true);
add_filter('get_popular_entries_thumbnail_size', function (){
  return 'popular_entries_thumb';
});
ウィジェットの表示タイプによって、画像サイズを合わせる必要があると思います。

関連記事ウィジェット

関連記事ウィジェットサムネイル

//関連記事ウィジェットサムネイルサイズ
add_image_size('related_entries_thumb', 120, 63, true);
add_filter('get_related_entries_thumbnail_size', function (){
  return 'related_entries_thumb';
});
ウィジェットの表示タイプによって、画像サイズを合わせる必要があると思います。

ウィジェットをまとめて

新着・人気・関連記事ウィジェット(ショートコード)のサムネイルをまとめて変更する場合はget_widget_entries_thumbnail_sizeフックを利用します。

//新着・人気・関連記事ウィジェットサムネイルサイズ
add_image_size('widget_thumb', 120, 63, true);
add_filter('get_widget_entries_thumbnail_size', function (){
  return 'widget_thumb';
});
ウィジェットの表示タイプによって、画像サイズを合わせる必要があると思います。

ページ送りナビカード

ページ送りナビカードサムネイル

//ページ送りナビサムネイルサイズ
add_image_size('post_navi_thumb', 120, 63, true);
add_filter('get_post_navi_thumbnail_size', function (){
  return 'post_navi_thumb';
});

カルーセルカード

カルーセルカードサムネイル

//カルーセルカードサムネイルサイズ
add_image_size('carousel_thumb', 320, 168, true);
add_filter('get_carousel_entry_card_thumbnail_size', function (){
  return 'carousel_thumb';
});

同じサイズの場合はまとめて変更例

同じサムネイルサイズなのに毎回add_image_size関数を利用してサムネイルを生成するのは非効率なので、まとめて指定するサンプルはこちら。

//新着・人気・関連・ページ送りナビサムネイルサイズ
add_image_size('w120_thumb', 120, 63, true);
add_filter('get_post_navi_thumbnail_size', 'w120_thumb_set');
add_filter('get_new_entries_thumbnail_size', 'w120_thumb_set');
add_filter('get_popular_entries_thumbnail_size', 'w120_thumb_set');
add_filter('get_related_entries_thumbnail_size', 'w120_thumb_set');
function w120_thumb_set(){
  return 'w120_thumb';
}

最後に

冒頭でも書きましたが、子テーマのfunctions.phpに上記コードを挿入するだけでは画像サイズわかりません。

画像サイズを変更するには、以下のような方法でサムネイルの再生成を行う必要があります。

テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。
Tips カスタマイズ
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年7ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年5ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon

コメント テーマの質問はフォーラムへ

タイトルとURLをコピーしました