WordPressテーマTCDのカスタマイズを研究するサイト

商品画像サイズの調整

Q.自動リサイズされる商品画像のサイズを変更できますか?

「Precious (TCD019)」を使用していますが、扱う商品の関係上、商品写真を縦長に変更したいと思っています。アップロードの際、トリミングされてしまうので困っています。写真を縦に表示することは可能でしょうか。

A.下記ファイルの該当箇所を編集します


編集するファイル:functions.php
編集する箇所:

  add_image_size( 'size4', 575, 380, true );

    ↓

  add_image_size( 'size4', 575, 任意の数値, false );


編集するファイル:style_pc.css
編集する箇所:

#product_image_slider { width:575px; height:380px; margin:; overflow:hidden; }
#product_image_slider img { width:575px; height:380px; }

※上記2か所の「height」の値を①で変更した値にご変更ください。


編集するファイル:single-product.php
編集する箇所:

  <div id="product_image_slider">
   <?php if (!empty($custom_fields['product_image1'][0])) { ?><img src="<?php echo $image1[0]; ?>" width="575" height="380" alt="" title="" data-thumb="<?php echo $image1_2[0]; ?>" /><?php }; ?>
   <?php if (!empty($custom_fields['product_image2'][0])) { ?><img src="<?php echo $image2[0]; ?>" width="575" height="380" alt="" title="" data-thumb="<?php echo $image2_2[0]; ?>" /><?php }; ?>
   <?php if (!empty($custom_fields['product_image3'][0])) { ?><img src="<?php echo $image3[0]; ?>" width="575" height="380" alt="" title="" data-thumb="<?php echo $image3_2[0]; ?>" /><?php }; ?>
  </div>
 </div>
 <?php } elseif(!empty($custom_fields['product_image1'][0])) { ?>
 <div id="product_image">
  <?php if (!empty($custom_fields['product_image1'][0])) { ?><img src="<?php echo $image1[0]; ?>" width="575" height="380" alt="" title="" /><?php }; ?>
 </div>

※上記箇所に含まれる「height=”380″」という部分の数値を①で変更した値にご変更ください。

上記でご案内している内容は、横幅(575px)については変更しておりません。レイアウトの関係上、横幅を変更すると表示が大きく崩れる可能性がございますので横幅については変更されないことをお勧めいたします。

最後に、上記変更はそのままでは既に投稿した記事には反映されません。既に投稿された記事に新しい設定を反映するためには、すべての画像を再生成する必要がございます。
その際大変便利なプラグインがございますので是非ご利用ください。
弊社サイトに紹介記事がございますのでご参照ください。
サムネイル画像を一括で作りなおせるプラグイン「Regenerate Thumbnails」

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。