Ver1.3.1をリリースしました(11/22)

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

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}">
              <figure class="tbcell">{$img}</figure>
              <div class="tbcell">{$title}</div>
            </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]の方のショートコードを使った場合には、これまで通り正方形のサムネイル画像が表示されます。

コメントを残す

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