プラグインなしでWORDPRESS+Welcartの商品カテゴリー一覧をリストまたはサムネイル表示にしたい

今回は小さなECサイトのWordPress＋Welcart導入・設定ガイドのカスタマイズ後のテーマを利用しています。（category.phpを除く）

商品のカテゴリーページにサブカテゴリを表示する手順をご紹介します

まずサブカテゴリのサムネイルを追加させます

WORDPRESSのFUNCTIONに下記コードを追加します

 

// カテゴリーサムネイルフィールドを追加
function add_category_thumbnail_field($term) {
    $thumbnail_id = get_term_meta($term->term_id, 'category_thumbnail_id', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="category_thumbnail">カテゴリーサムネイル</label>
        </th>
        <td>
            <input type="hidden" id="category_thumbnail_id" name="category_thumbnail_id" value="<?php echo esc_attr($thumbnail_id); ?>" />
            <div id="category-thumbnail-wrapper">
                <?php if ($thumbnail_id) { echo wp_get_attachment_image($thumbnail_id, 'thumbnail'); } ?>
            </div>
            <p>
                <input type="button" class="button button-secondary" id="upload-category-thumbnail" value="サムネイルをアップロード" />
                <input type="button" class="button button-secondary" id="remove-category-thumbnail" value="サムネイルを削除" />
            </p>
        </td>
    </tr>
    <?php
}
add_action('category_edit_form_fields', 'add_category_thumbnail_field');

// カテゴリーサムネイルを保存
function save_category_thumbnail($term_id) {
    if (isset($_POST['category_thumbnail_id'])) {
        update_term_meta($term_id, 'category_thumbnail_id', intval($_POST['category_thumbnail_id']));
    }
}
add_action('edited_category', 'save_category_thumbnail');

// サムネイルアップロードのスクリプトを追加
function category_thumbnail_script() {
    ?>
    <script>
    jQuery(document).ready(function($){
        var frame;
        $('#upload-category-thumbnail').on('click', function(e) {
            e.preventDefault();
            if (frame) {
                frame.open();
                return;
            }
            frame = wp.media({
                title: 'カテゴリーサムネイルを選択',
                button: { text: 'この画像を使用' },
                multiple: false
            });
            frame.on('select', function() {
                var attachment = frame.state().get('selection').first().toJSON();
                $('#category_thumbnail_id').val(attachment.id);
                $('#category-thumbnail-wrapper').html('<img src="'+attachment.url+'" style="max-width:100%;"/>');
            });
            frame.open();
        });
        $('#remove-category-thumbnail').on('click', function() {
            $('#category_thumbnail_id').val('');
            $('#category-thumbnail-wrapper').html('');
        });
    });
    </script>
    <?php
}
add_action('admin_footer', 'category_thumbnail_script');

 

これでカテゴリサムネイルの画像が追加できました

それからcategory.phpにサブカテゴリタイトルとサブカテゴリのサムネイルを呼び出す

今回は次のカテゴリだけ表示させます。

<?php
// 現在のカテゴリーIDを取得
$category_id = get_queried_object_id();

// 現在のカテゴリーの直下の子カテゴリーを取得
$categories = get_terms(array(
    'taxonomy' => 'category',
    'parent' => $category_id,
    'hide_empty' => false, // 記事があるカテゴリーのみを表示したい場合は、trueに設定
));

// 直下の子カテゴリーがある場合、その名前とサムネイルを表示
if ($categories) :
?>
    <div class="sub-categories">
        <div class="sub-category-list">
            <?php foreach ($categories as $category) : ?>
                <div class="col-sm-3">
                    <a href="<?php echo get_category_link($category->term_id); ?>">
                        <!-- サムネイルをチェックして表示 -->
                        <?php
                        // カテゴリーのサムネイルIDを取得
                        $thumbnail_id = get_term_meta($category->term_id, 'category_thumbnail_id', true);

                        // サムネイルIDが存在する場合、サムネイルを表示し、alt属性を追加
                        if ($thumbnail_id) {
                            echo wp_get_attachment_image($thumbnail_id, 'thumbnail', false, array('alt' => esc_attr($category->name)));
                        }
                        ?>
                        <!-- カテゴリー名は常に表示 -->
                        <p class="button2"><?php echo esc_html($category->name); ?></p>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
<?php
endif;
?>