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

概要

subcategory_archive_thumbnail_sizeフィルタは、WooCommerceでサブカテゴリーアーカイブのサムネイル画像のサイズを変更するために使用されます。このフィルタを使用することで、デフォルトのサイズとは異なるカスタムサイズの画像を表示することができ、ウェブサイトのビジュアルデザインを向上させることができます。以下のような使用例があります。

カスタムテーマにおける画像サイズの調整: 特定のテーマデザインに合わせたサムネイルサイズを設定する。
レスポンシブデザインの実現: 画面サイズに応じて異なるサムネイルサイズを設定する。
Eコマースサイトの魅力向上: 商品カテゴリーの視覚的な魅力を高めるために、特定のサイズを設定して見栄えを良くする。
カスタムフィールドとの統合: 商品にカスタムフィールドを使用して、サムネイルサイズを動的に変更する。
サイトパフォーマンスの最適化: 不必要に大きな画像を使用せず、高速なページ表示を実現するためにサイズを調整する。
特定のデバイスに最適化: モバイルデバイスやタブレットに最適化された表示のために異なるサイズを提供する。

構文

add_filter('subcategory_archive_thumbnail_size', 'custom_thumbnail_size');

パラメータ

$size: サムネイルのサイズ（例: ‘thumbnail’, ‘medium’, ‘large’ またはカスタムサイズ配列）。

戻り値

カスタムサイズを指定する整数または配列。

WooCommerceおよびWordPressのバージョン

WooCommerce: 5.0以降
WordPress: 5.0以降

サンプルコード

サンプルコード1

add_filter('subcategory_archive_thumbnail_size', function($size) {
    return 'medium_large'; // サムネイルを 'medium_large' サイズに変更
});

このコードは、サブカテゴリーアーカイブのサムネイルサイズを「medium_large」に変更します。

サンプルコード2

add_filter('subcategory_archive_thumbnail_size', function($size) {
    return [300, 300]; // サムネイルサイズを300x300ピクセルに変更
});

このコードでは、サブカテゴリーアーカイブのサムネイルを300×300ピクセルに設定します。

サンプルコード3

add_filter('subcategory_archive_thumbnail_size', function($size) {
    return 'large'; // サムネイルを 'large' サイズに設定
});

このコードは、サブカテゴリーのサムネイル画像を「large」サイズに設定します。

サンプルコード4

add_filter('subcategory_archive_thumbnail_size', function($size) {
    if (is_tablet()) {
        return [250, 250]; // タブレット用にサムネイルサイズを変更
    }
    return $size; // それ以外はデフォルトサイズを使用
});

このコードでは、ページがタブレットデバイスで表示されている場合にのみ、サムネイルサイズを250×250に変更します。

サンプルコード5

add_filter('subcategory_archive_thumbnail_size', function($size) {
    return 'thumbnail'; // デフォルトのサムネイルサイズに戻す
});

このコードは、サブカテゴリーアーカイブのサムネイルサイズをデフォルトの「thumbnail」に戻します。

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

アクション	使用可能性
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

概要

構文