ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマPrecious:商品画像サイズを変更する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

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)については変更しておりません。レイアウトの関係上、横幅を変更すると表示が大きく崩れる可能性がございますので横幅については変更されないことをお勧めいたします。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事