プラグインWooCommerceのwoocommerce_thumbnail_sizeフィルタの使用方法・解説

概要

woocommerce_thumbnail_size フィルタは、WooCommerceで表示される商品サムネイルのサイズをカスタマイズするために使用されます。このフィルタは、商品ページやカタログページでのサムネイル画像の表示に関わるため、商品の視覚的アピールを向上させるためによく使われます。具体的には、次のような機能を実装する際によく利用されます。

商品リストページでのサムネイルサイズ調整
商品詳細ページでのサムネイルの最適化
レスポンシブデザイン対応のためのサイズ変更
特定のテーマやプラグインとの互換性を持たせるためのサイズ変更
商品カタログの見た目向上
SEOを考慮した画像サイズ調整

構文

add_filter('woocommerce_thumbnail_size', 'custom_thumbnail_size');

パラメータ

$size: 画像サイズを定義する配列（幅と高さ）

戻り値

カスタマイズされた画像サイズ

使用可能なプラグイン及びバージョン

WooCommerce バージョン: 3.0 以降
WordPress バージョン: 4.0 以降

この関数のアクションでの使用可能性

アクション	使用可能性
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプルコード 1

add_filter('woocommerce_thumbnail_size', 'set_custom_thumbnail_size');

function set_custom_thumbnail_size($size) {
    return array(300, 300); // 幅300px、高さ300pxに設定
}

このコードは、WooCommerceの商品サムネイルのサイズを300×300ピクセルに設定します。

サンプルコード 2

add_filter('woocommerce_thumbnail_size', 'modify_thumbnail_size');

function modify_thumbnail_size() {
    return array(200, 200); // 幅200px、高さ200pxに設定
}

このコードは、WooCommerceの商品サムネイルを200×200ピクセルに変更します。

サンプルコード 3

add_filter('woocommerce_thumbnail_size', 'custom_product_thumbnail_size');

function custom_product_thumbnail_size() {
    return array(400, 400); // 幅400px、高さ400pxに設定
}

このコードは、サムネイルのサイズを400×400ピクセルに変更し、商品の視覚的な印象を強調します。

サンプルコード 4

add_filter('woocommerce_thumbnail_size', 'responsive_thumbnail_size');

function responsive_thumbnail_size($size) {
    return array(100, 100); // モバイル表示用にサムネイルを100x100pxに設定
}

このコードは、モバイルでの表示時にサムネイルサイズを100×100ピクセルに設定します。

サンプルコード 5

add_filter('woocommerce_thumbnail_size', 'get_optimal_thumbnail_size');

function get_optimal_thumbnail_size() {
    return array(150, 150); // 商品カタログ用のサムネイルを150x150pxに設定
}

このコードは、商品カタログ用に最適化されたサムネイルサイズを150×150ピクセルに設定します。

概要

構文