it-swarm-ja.com

カスタムWoocommerceの画像サイズ

Woocommerceには3つの画像サイズが組み込まれています。しかし、3つ以上の異なるコンテナサイズがあるため、一部の画像は常に伸縮します。そのため、画質とページ速度が低下します。 Woocommerceは、例えばカタログ画像と関連商品画像にカタログサイズを使用します。 Wordpressはカスタム画像サイズを生成する簡単な方法を提供します。そして私は私の関連製品のサイズを生成しようとしました:

add_action( 'after_setup_theme', 'jmt_theme_setup' );
function jmt_theme_setup() {
add_image_size( 'related-thumb', 274, 274, true );
}

このサイズをウーコマース関連の商品画像に組み込む方法はありますか?

あなたの興味をありがとう。

テオについて

1
timholz

画像サイズを変更するときはいつでもあなたが選ぶことができるいくつかのオプションがあります。実際のデフォルトのWooCommerce画像を切り替えることは、それらがプラグインに根付いているので、通常のWordPressインストールよりも困難です。


関連製品画像のサイズを変更する:

私はこれをテストしました、そしてそれは関連する製品でのみうまくいくようです(私はそれが他の分野に拡大されることができると確信していますが)。正しいサイズを得るには、まだ サムネイルの再生成 を利用する必要があるかもしれません。

すべてをwpフィルタに入れる必要があります。

function woo_init() {
    // Below functions go here...
}
add_action( 'wp', 'woo_init' );

この最初の部分はスキップしてquery varを設定しても機能しますが、一般的なcontent-product.phpテンプレートを使用しているので信頼できません。したがって、画像サイズのみを変更するようにquery varを設定します。関連製品の場合

if( is_singular( 'product' ) ) {
    add_filter( 'woocommerce_related_products_args', function( $query_args ) {
        if( ! empty( $query_args ) ) {
            set_query_var( 'related_products', true );
        }

        return $query_args;
    } );
}

次に、デフォルトのloop_product_thumbnailを削除してカスタムのものに置き換える必要があります。新しいイメージを提供する前にrealted_products queryvarが設定され、TRUEが設定されていることを確認します。それ以外の場合はデフォルトイメージを提供します。

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title',
    function() {
        $related = get_query_var( 'related_products' );
        if( TRUE == $related ) {
            echo woocommerce_get_product_thumbnail( 'related-thumb', 274, 274 );    // Our new image size
        } else {
            echo woocommerce_get_product_thumbnail();   // Default Image Size
        }
    },
    10
);

_ css _

WooCommerceは、all _自分の画像にwidth: 100%; height: auto;を使用しています。これをmax-width: 100%; width: auto; height: auto;に変更して、余白/列数で試して見栄えを良くすることができます。

初期画像サイズを変更します

WooCommerceが使用する実際の画像サイズは、以下の手順で変更できます。

  • WordPressにログイン
  • WooCommerce -> Products Tab -> Display ( Sub-tab )に移動します
  • 下に向かって画像サイズを設定できます:
    • カタログ画像
    • 単一製品イメージ
    • 製品のサムネイル
  • 最後に、 サムネイルの再生成 をインストールしてサイズを変更することができます。

別の方法はインストール時にこれらのサイズを持つことです。

function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
        return;
    }

    $catalog = array(
        'width'     => '400',   // px
        'height'    => '400',   // px
        'crop'      => 1        // true
    );

    $single = array(
        'width'     => '600',   // px
        'height'    => '600',   // px
        'crop'      => 1        // true
    );

    $thumbnail = array(
        'width'     => '120',   // px
        'height'    => '120',   // px
        'crop'      => 0        // false
    );

    // Image sizes
    update_option( 'shop_catalog_image_size', $catalog );       // Product category thumbs
    update_option( 'shop_single_image_size', $single );         // Single product image
    update_option( 'shop_thumbnail_image_size', $thumbnail );   // Image gallery thumbs
}

add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 );

WooCommerce参照リンク:

1
Howdy_McGee

このスニペットでWooCommerceのCSSを上書きすることができます。 Remi Corson

<?php
add_filter( 'wp_head' , 'related_products_style' );

function related_products_style() {
   if( is_product() ) :
   ?>
   <style>
   .woocommerce .related ul.products li.product img, .woocommerce .related ul li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce-page .related ul li.product img, .woocommerce-page .upsells.products ul.products li.product img, .woocommerce-page .upsells.products ul li.product img
   {
      width: 274px !important;
      height: 274px !important;
   }
   </style>
<?php
endif;
}
1
Manoj Kumar

WooCommerceは(私の考えでは)width: 100%にすべきときに(迷惑に)max-width: 100%を使用するため、CSSの問題だと思います。 width: autoを使って幅を上書きしようとすると、助けになるはずです。

0
Stefan