[解決済み] 商品ページの画像サイズについて
- このトピックには14件の返信、4人の参加者があり、最後に
により5年、 9ヶ月前に更新されました。
-
投稿
-
お世話になります。
商品ページの画像を350×350pxにしたくて、こちらに似たような質問がいくつかあったので、参考にして下記のようにしてみました。
・#itempage .itemimgと#itempage .itemimg imgを width:350px; height:350px;に変更。
・メディア設定のサムネイルサイズを 350×350pxに変更。
・wc_item_single.phpの該当箇所を<?php usces_the_itemImage(0, 350, 350, $post); ?>に変更
すると希望のサイズにはなるのですが、画質が引き伸ばされたように荒くなってしまいます。
どうすればきれいに画像サイズを大きく出来るのでしょうか。
お忙しい中恐縮ですが、どうぞ宜しくお願い致します。
ご返信ありがとうございます。
元画像は、500px以上の正方形にしています。
最初、wordpessでは投稿画像が正方形に必ずクロップされてしまうと勘違いし、掲載写真をすべて正方形に直してしまいました（添付①）
本当は、そのまま（添付②）のような形で、長辺350pxで掲載するのが理想です。
そのあたりも含めてご教授いただけると幸いです。
宜しくお願い致します。
[attachment=9683,218] [attachment=9683,219]
こんにちは。
「#itempage .itemimg img」セレクタで横幅・縦幅を350pxで固定してしまっているのが原因かと思われます。
#itempage .itemimg img {
width: auto;
height: auto;
max-width: 350px;
max-height: 350px;
}
などにしてみると画像の広がりはなくなるかと思います。
yasuma様、ご返信ありがとうございます。
cssを下記のように変更してみました。
#itempage .itemimg img {
width: auto;
height: auto;
max-width: 350px;
max-height: 350px;}
#itempage .itemimg {
width: 350px;
height: 350px;
float: left;
margin-right: 10px;}
そうしますと、350px分のスペースは空くのですが、画像は200×200pxになってしまいました。
念のため、画像を一旦削除し再度アップロードしてみました。
ということは、cssではなくphpの問題なのでしょうか？
wc_item_single.phpは以下のようにしています。
<div id=”itempage”>
<div class=”itemimg”>
</div>
こんにちは。
おかしな挙動をしているので、今一度確認させてください。
★ メディア設定 ★
管理画面の「設定＞メディア」の画像サイズは、WordPressをインストールした状態のままでしょうか？
★ コード ★
<?php usces_the_itemImage(0, 350, 350, $post); ?>をwc_item_single.phpに記述
★ 登録画像 ★
登録した画像は、「500px×500px」もしくはそれ以上。
こちらでは、以上の条件で350px×350px内にリサイズされたものが表示されたのですが、wishnerrobinsさんのところでは200px×200px内にリサイズされるのでしょうか。。。。
yasuma様、ご返信ありがとうございます。
もう一度色々確認していたところ、原因がわかりました。
修正するPHPファイルを間違えていました。
◯：wp-content>plugins>usc-e-shop>templates>single_item.php
☓：wp-content>themes>welcart_defult>wc_templates>wc_item_single.php
無事に希望通りの修正が出来ました。
すごく初歩的なことでお恥ずかしいですが、丁寧に対応してくださって感謝しています。
どうもありがとうございましたm(_ _)m
こんにちは。
最新版にアップグレードができなくなってしまうため、Welcart本体を修正するのは推奨しておりません。
現在お使いのテーマをお聞きするのを忘れておりました。
現在、welcart_defaultではなくオリジナルテーマでショッピングサイトを制作されているということでしょうか？
でしたら、下記のどちらかの方法を推奨いたします。
・お使いのテーマにwc_templatesをコピーしてマークアップを修正してから画像のサイズを変更
・「usces_filter_the_itemImage」というフィルターフックを利用して画像のサイズを変更
上記方法でしたらWelcart本体のアップグレードは可能となります。
フィルターフックに関しては下記サイトをご参照ください。
はい、オリジナルテーマでショッピングサイトを作成しています。
フィルターフックがまだよく分からないため、もう一方の方法を試したいのですが、
オリジナルテーマ内に「wc_templates」を丸ごとコピーし、その中のsingle_item.phpを修正するという感じで大丈夫でしょうか？子テーマ内でなくても大丈夫ですか？
こんにちは。
はい。オリジナルテーマに「wc_templates」を丸ごとコピーしてください。
ただし、「wc_templates」は、welcart_defaultを元にマークアップしております。
オリジナルテーマで利用する場合は、マークアップを調整してあげないとレイアウトが崩れることがございますのでご注意ください。
また、商品詳細のテンプレートは「wc_templates/wc_item_single.php」となります。
yasuma様、ご返信ありがとうございます。
オリジナルテーマに「wc_templates」をコピーして、wc_templates/wc_item_single.phpの画像サイズ部分を希望のサイズに編集してみました。
しかし、アップロードしてみても変化がありませんでした。
レイアウトが崩れるということはなかったようです。
そこでこちら→[解決済み] 商品詳細ページのメイン画像サイズ変更についてを参考に、オリジナルテーマのfunction.phpに、以下のフィルターフックを入れてみました。
add_filter(‘usces_filter_the_itemImage’, ‘my_itemimage_func’, 10, 3);
function my_itemimage_func() {
global $post;
$itemImage = usces_the_itemImage(0, 350, 350, $post);
return $itemImage;
}
すると、画像のサイズは変わってくれましたが・・・
①画像の右側に回り込んでいた商品情報部分が、float解除したように下にいってしまいました。
②画像をクリックすると拡大するようになっていたのが、できなくなってしまいました(リンクが貼られていない)
【plugins>usc-e-shop>templates>single_item.php】を直接修正した時のように、表示される画像のサイズのみを修正ということはできますか？
こんにちは。
usces_the_itemImage(0, 350, 350, $post);を
usces_the_itemImage(0, 350, 350, $post, 'return');にしてみるとどうでしょうか？
——————————————-
WordPress のバージョン：5.0.3
Welcart のバージョン：1.9.14
PHP のバージョン：7.1.16
Welcart専用の拡張プラグイン：
ご利用のテーマ：welcart e-commerce
症状を確認したブラウザ：chrome safari
サーバー：さくらサーバー
SSLの利用：
——————————————–ショッピングカートの商品画像のサイズが画面いっぱいに拡大されて表示されてしまいます。
使用している画像サイズは1480×1080.jpgです。CSSなど全くの初心者です。
wc_item_single.php
からどの項目の数字を、どのくらいの数値に設定すれば適正な画像サイズが表示されるようになるのでしょうか？
よろしくお願いいたします。ホームページのアドレスは、
http://lacr.jp
になります。
- このトピックに返信するにはログインが必要です。
PAGE TOP