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

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

▼通常の表示

カスタマイザーでデザインや細かな設定をしよう

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

▼今回紹介する方法を使うと

ボタンの挿入方法と種類一覧

準備

子テーマの設定

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

WordPressの子テーマとは？安全にカスタマイズを行う方法

functions.phpをバックアップ

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

具体的な手順

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

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

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

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

手順2：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：うまく表示されるかテストする

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

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

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

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

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

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

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

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

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

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

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

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