Ver1.5 Released !

関連記事ショートコードのサムネイル画像を長方形で表示する方法

SANGOの関連記事ショートコード[kanren id="投稿ID"]では、サムネイル画像が正方形にトリミングして表示されます。以下のような形ですね。

▼通常の表示
SANGOの設計図SANGOテーマの設計図(各ファイルの役割)

このサムネイル画像を「正方形にトリミングせずに表示したい」というご要望があったので、対応の仕方を紹介します。この方法だと、以下のようにデフォルトのサムネイル画像の縦横比が保たれたまま表示されるようになります。

▼今回紹介する方法を使うと
ボタンの挿入方法とデザイン一覧 ボタンの挿入方法と種類一覧
MEMO
もともとアイキャッチ画像サイズが保たれるため、正方形のアイキャッチ画像を登録しているのであれば(あまり無いとは思いますが)、この方法を使っても正方形で表示されます。

準備

子テーマの設定

子テーマをまだ導入していない方は用意してくださいませ(なお、残念ながら子テーマ導入時にはサイトカラー設定をやり直す必要があります。早めの設定をおすすめします)。

WordPressで子テーマを活用して安全にカスタマイズを行う方法

functions.phpをバックアップ

子テーマ内のfunctions.phpを触ります。はじめてfunctions.phpを触る方であればバックアップは不要ですが、すでに何らかの追記を行っている方は、念のためバックアップを取っておいてくださいませ。


具体的な手順

手順1:コードの貼り付け先を把握する

子テーマのfunctions.phpを開き、以下の部分を見つけてくださいませ。

functions.php
/************************
 *function.phpへの追記は以下に
 *************************/
ここに貼り付ける

赤字の部分に次のステップで紹介するコードを貼り付けてください。

手順2:functions.phpにコードを貼り付ける

この部分に以下のコードを全てコピーして貼り付けます。

functions.php
//関連記事ショートコード長方形
add_shortcode('kanrenc','sng_entry_linkc');
function sng_entry_linkc($atts) {
  $output = '';
  $id = isset($atts['id']) ? esc_attr($atts['id']) : null;
  if($id){
    $ids = (explode(',',$id));
  }
  if(isset($ids)) {
  foreach ($ids as $eachid) {
    $img = (get_the_post_thumbnail($eachid)) ? get_the_post_thumbnail($eachid, 'medium') : '<img src="'.featured_image_src('medium').'">';
    $url = esc_url(get_permalink($eachid)); //URL
    $title = esc_attr(get_the_title($eachid));
    if($url && $title) {
      $output .= <<<EOF
      <a class="linkto table" href="{$url}">
              <span class="tbcell tbimg">{$img}</span>
              <span class="tbcell tbtext">{$title}</span>
            </a>
EOF;
      }
      } //endforeach
  } else {$output = '関連記事のIDを正しく入力してください';}
      return $output;
}
//END 関連記事ショートコード長方形

貼り付けたらファイルを保存しましょう。

手順3:うまく表示されるかテストする

ここまでできたら、一旦記事を新規作成し、以下のショートコードを使ってみます。

[kanrenc id="投稿ID"]

kanrenではなくkanrencなのでご注意くださいませ。これでデフォルトの縦横比のサムネイル画像付きリンクが挿入されるはずです。

サイト内の全記事の投稿ID/カテゴリーIDを一覧で表示する方法

手順4:必要に応じて置き換える

もし、すでに[kanren id=""]の方のショートコードを複数記事で使っており「まとめて置き換えたい!」という場合には、プラグイン「Search Regex」を使って一括置換するのがおすすめです。

kanren id="kanrenc id="に置き換えればOKですね。

MEMO
[kanren]の方のショートコードを使った場合には、これまで通り正方形のサムネイル画像が表示されます。

参考:サムネイルサイズを変える方法

style.css
.linkto .tbimg {
 width: 120px;/*ショートコード画像の幅*/
}

上のCSSを子テーマのstyle.cssに貼り付けると、サムネイル画像が少し大きめに表示されるようになります。値は自由に調整してください(スマホ表示のチェックもお忘れなく)。

参考:ショートコードを横いっぱいに表示する

style.css
.entry-content .linkto {
    max-width: 100%;
  }

上のCSSを追加すると、横長のショートコードが最大幅制限がなくなり、PC表示でも記事のコンテンツ幅いっぱいに表示されるようになります。

11 Comments

ココア

お世話になっております。コメント失礼します。

長方形のサムネイル画像の比重を4:3にすることは可能でしょうか?

また、ショートコードだけでなく、関連記事(記事下)、おすすめ記事(記事下)、記事一覧カード内のサムネすべての画像を統一で4:3の長方形にしたいです。

お忙しいと思いますが、ご教授の程よろしくお願いします。

返信する
匿名

質問失礼します。
アイキャッチ画像を正方形の512×512の画像を使用しているのですが
記事一覧レイアウトで[モバイル]トップページの記事一覧カードを横長にする
にすると表示される左の画像の画質が劣化して表示されてしまいます。

カードを横長にするのチェックを外すと綺麗に表示されるのですが、
画質の問題かそれとも仕様でしょうか?
よろしくお願い致します。

返信する
サルワカくん

そちらは横長を選んだ場合の仕様です。読み込み速度を早くするためにそのサイズにしております。

返信する
匿名

なるほど!
ちなみにそのサイズを変更する方法はありますでしょうか?
一度どのようになるか確かめてみたいので可能であればよろしくお願い致します。

返信する
サルワカくん

例えば、サムネイルの解像度を160pxから250pxに変える場合、子テーマのfunctions.phpに以下のコードを追記します。

//サムネイル画像の大きさを250pxにオーバーライド
function my_change_thumbnail160_size() {
  add_image_size( 'thumb-160', 250, 250, true );
}
add_action( 'after_setup_theme', 'my_change_thumbnail160_size', 11);
//END サムネイル画像をオーバーライド

その後、Regenerate Thumbnailなどのプラグインでサムネイルを再生成する必要ありです。

返信する
あんん

質問失礼します。
関連記事にて、親カテゴリーに属する記事も含めるをチェック入れた場合、同カテゴリーをメインに表示させることはできないでしょうか?
関連記事の表示数を5にした場合
カテゴリー内の記事数が少ないものがあり(例えば3つ)それを記事表示させて残りの余った枠に親カテゴリーを表示させたいです。(例えば2つ)よろしくお願い致します。

返信する
サルワカくん

大変申し訳ないのですが、カスタマイズではちょっと難しいですね…。
ただ、良い形だと思うので、できないか検討しておきます。

返信する
あんん

お返事ありがとうございます。
その方が周回してもらえる確率も少しは上がるかな?と考えております。お忙しいとおもいますが、ご検討よろしくお願いいたします。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です