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

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

▼通常の表示

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

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

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


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

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

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

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表示でも記事のコンテンツ幅いっぱいに表示されるようになります。

39 COMMENTS

アバター
mimi 2022/05/03

関連記事のタイトルを任意のものにしたい

お世話になっております。 関連記事出力時に表示されるタイトルを、その記事本来のタイトルではなく、任意のものに変更したいのですが、カスタマイズの方法を教えていただけないでしょうか。 よろしくお願い致します。

回答を見る
アバター
Kura-kura 2022/02/08

Gutenbergの関連記事ブロックと関連記事一覧ブロックで選択できるようにしてほしい

このページで紹介されている、アイキャッチを長方形で表示させる方法をfunctions.phpをいじらなくても、Gutenbergのブロックの設定から選べるようにならないでしょうか?

回答を見る
アバター
カメ 2021/06/28

SANGO Gutenbergで関連記事が働かない

いつもお世話になっております。 SANGO Gutenbergで関連記事を使おうとすると 「ブロックを空白としてレンダリングします。」となったり 投稿記事の「検索結果が見当たりません」などの症状がみられます。 なぜでしょうか?使えるようにしたいです。 よろしくお願いいたします。 SANGOのバージョン: 2.9.1

回答を見る
アバター
asa 2021/01/18

関連記事(記事下)のタイトルが表示されない

お世話になっております。質問失礼致します。 カスタマイズ画面→関連記事(記事下)→関連記事のタイトル を記入したのですが、プレビュー画面では表示されるものの、本番環境に反映されません。どのようにしたらよろしいでしょうか?よろしくお願いいたします。

回答を見る
アバター
maru 2020/12/08

関連記事([kanren id=""])に非公開記事のIDが入ってる場合に表示されないようにしたい

お世話になっております。 非公開に設定した記事が、[kanren id=""]に記載されてる場合に、関連記事として表示されてしまっています。 クリックすると404で非公開にはなってますが、そもそも表示されないようにしたいのですが、どうすればよいでしょうか。 ご教授いただけると嬉しいです。 どうぞよろしくお願いいたします。

回答を見る
アバター
リュード 2020/04/28

関連記事のリンクの幅が最大化出来なかった

こちらの記事を参考にサムネ画像を長方形にした関連記事のリンクカードの幅を最大化したいと思ったのですが @charset "UTF-8"; /* Theme Name: SANGO Child Theme URI: https://saruwakakun.design Author: SARUWAKA Author URI: https://saruwakakun.com Tem…

回答を見る
アバター
taku 2020/01/29

関連記事ショートコードのサムネイル画像で長方形と正方形が混在してしまう件について

いつもお世話になっております。 関連記事ショートコードのサムネイル画像が長方形と四角が混在してしまう件についてのご相談です。 関連記事のリンクを貼る際にショートコードで私は[kanren id=""]というショートコードのみ使用しています。 こちらで統一しているのですがリンクのサムネイルに長方形と正方形が混在してしまいました。 こちらのページのカスタマイズは行っておりません。 何か原因はございます…

回答を見る
アバター
米っ子 2019/08/20

関連記事 タイトルの文字数制限

こんばんわ。 関連記事の表示について質問です。 長めのタイトルが多いため、タイプCの横長のデザインを選ぶと、 見た目が妙なことになってしまいます。 タイトルの文字数を制限して表示する方法を教えていただけませんか? entry-functions.phpに// 関連記事の出力という部分があるのですが、 ここに何か書き足すのでしょうか? よろしくお願いします。

回答を見る
アバター
taku 2019/05/25

記事下の関連記事について

度々失礼します。 関連記事のタグではなく、記事下にある関連記事で、公開日時が新しいものから優先して表示させることは可能でしょうか?できるとありがたいなと思いました。

回答を見る
アバター
まさと 2018/11/20

サムネイル画像が長方形で表示される

質問、というか困っているます。 関連記事の画像を正方形で表示したいのに長方形で表示されてしまいます。なぜでしょう...

回答を見る
アバター
mkt2 2018/10/04

関連記事が勝手に表示され、デザインの変更ができない

質問失礼します。 「外観 > カスタマイズ > SANGOオリジナル機能の管理 > 関連記事(記事下)」にて関連記事のデザイン変更を行っても反映されず、それなら非表示にしよう…前述のカスタマイザー内と、「設定 > 表示設定」から設定を変えているのですが、一向に非表示になりません。 見出しやサムネイルまでは非表示にすることができるのですが、関連記事の表題は消えません。 (カスタマイザーのプレビューで…

回答を見る
アバター
匿名 2018/05/03

サムネイル画像の解像度を上げたい

質問失礼します。 アイキャッチ画像を正方形の512×512の画像を使用しているのですが 記事一覧レイアウトで[モバイル]トップページの記事一覧カードを横長にする にすると表示される左の画像の画質が劣化して表示されてしまいます。 カードを横長にするのチェックを外すと綺麗に表示されるのですが、 画質の問題かそれとも仕様でしょうか? よろしくお願い致します。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。