修改的PHP代码

<?php
// First, define these.
$max_cat_count = 32; // this is \'x\'
$qty_per_column = 8; // this is \'y\'

// Then the $args array.
$args = array(
    \'taxonomy\'   => \'product_cat\',
    \'number\'     => $max_cat_count + 1, // keep the + 1
    \'hide_empty\' => 0,
    // ... your other args here ...
);

// Get the categories list.
$get_cats = get_terms( $args );
$get_cats = ( ! is_wp_error( $get_cats ) ) ? $get_cats : [];

// Default thumbnail URL.
$default_thumb = content_url( \'/uploads/woocommerce-placeholder-100x100.png\' );

$total = count( $get_cats );
$list_number = 1;
$_new_col = false;

$columns = \'\';
foreach ( $get_cats as $i => $cat ) {
    if ( $i >= $max_cat_count ) {
        break;
    }

    if ( $i % $qty_per_column === 0 ) {
        // Close previous column, if any.
        if ( $_new_col ) {
            $columns .= \'</ul></div><!-- .cat_columns -->\';
        }

        // Open new column.
        $id = \'cat-col-\' . $list_number;
        $columns .= \'<div class="menu cat_columns" id="\' . $id . \'">\';
        $columns .= \'<ul class="hoverimage">\';

        $_new_col = true;
        $list_number++; // increment the columns count
    }

    if ( $total > $max_cat_count && $i === $max_cat_count - 1 ) {
        // Make sure to change the # to the proper URL.
        $columns .= \'<li class="menu-item"><a href="#">View All</a></li>\';
    } else {
        $thumbnail_id = get_term_meta( $cat->term_id, \'thumbnail_id\', true );
        $image = $thumbnail_id ? wp_get_attachment_url( $thumbnail_id ) : \'\';
        // If $image is empty, just let it be. JS will set it to $default_thumb.
        // That way, the page source/HTML will be less.

        $link = \'<a href="\' . esc_url( get_term_link( $cat ) ) . \'">\' . esc_html( $cat->name ) . \'</a>\';
        $columns .= \'<li class="menu-item" data-image="\' . esc_url( $image ) . \'">\' . $link . \'</li>\';
    }
}
// Close last column, if any.
if ( $_new_col ) {
    $columns .= \'</ul></div><!-- .cat_columns -->\';
}
?>
<div class="design">
    <div class="zoom-preview">
        <div class="img_container" data-default_thumb="<?php echo esc_url( $default_thumb ); ?>">
        </div>
    </div>
    <?php echo $columns; ?>
    <div class="clear"></div>
</div>

修改的jQuery代码

jQuery(function( $ ){
    var imageContainer = \'.img_container\',
        imageList      = \'.hoverimage\',
        maxWidth       = \'100%\'; // parent or specific css width;

    var $imageContainer = $(imageContainer).eq(0);
    var $imageList      = $(imageList);

    /*
     * I moved this var to here, and use data-default_thumb to specify the
     * default thumbnail URL. That way, you can - and should - avoid using
     * PHP in JS. So your opening DIV tag would look like:
     * <div class="img_container" data-default_thumb="http://example.com/image.png">
     */
    var defImage        = $imageContainer.data( \'default_thumb\' );

    if (maxWidth === \'parent\') {
        maxWidth = $imageContainer.width() + \'px\';
    }

    // Load images and set hover::
    $imageList.find(\'li[data-image]\').each(function(index){
        if (typeof $(this).data(\'image\') === \'string\') {
            var thumb_url = $( this ).data( \'image\' ) || defImage;
            $imageContainer.append(
                "<img id=\'imageToggle"+index+
                "\' src=\'"+ thumb_url +
                "\' style=\'max-width: "+maxWidth+"; max-height:100%; display:none;\' />"
            );
            $(this).data("image","imageToggle"+index);
            $(this).hover(
                function(){ loadImage($(this).data(\'image\')); },
                function(){ loadImage(\'imageToggleDef\'); }
            );
        }
    });

    // Load default:
    $imageContainer.append(
        "<img id=\'imageToggleDef"+
        "\' src=\'"+defImage+
        "\' style=\'max-width: "+maxWidth+"; max-height:100%\' />"
    );

    // Toggle images:
    function loadImage(imageId) {
        $imageContainer.stop(true).fadeOut(\'fast\', function(){
            $(this).find(\'img\').hide();
            $(this).find(\'img#\'+imageId).show();
            $(this).fadeIn(\'fast\');
        });
    }
});

示例CSS代码

.cat_columns {
    float: left;
    width: 20%;
}

.zoom-preview {
    float: left;
    width: 20%;
    text-align: center;
}

.clear {
    clear: both;
}

在实现所有代码后，生成的标记/HTML将如下所示：

<div class="design">
  <div class="zoom-preview">
    <div class="img_container" data-default_thumb="{Default thumbnail URL}">
      {Thumbnails added via JS}
    </div>
  </div>
  <div class="menu cat_columns">
    <ul class="hoverimage">
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="{Category URL}">{Category Name}</a></li>
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="{Category URL}">{Category Name}</a></li>
      ...
    </ul>
  </div>
  <div class="menu cat_columns">
    <ul class="hoverimage">
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="{Category URL}">{Category Name}</a></li>
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="{Category URL}">{Category Name}</a></li>
      ...
    </ul>
  </div>
  ...
  <div class="clear"></div>
</div>

Try a demo on JS Fiddle

附加注释title_li, echo, style 和show_count 将与一起使用wp_list_categories(), 并且对get_terms().

我用过content_url() 要检索WordPress“content”URL，如下所示http://example.com/wp-content.

测试完所有内容后，应该将jQuery脚本放在外部脚本中，并使用wp_enqueue_scripts 挂钩和wp_enqueue_script() 加载脚本。（我最近发布了this answer 这可能会帮助你wp_enqueue_script().)

如果要立即加载默认缩略图，则应手动添加<img> 到HTML：

<!-- With this version, no need for data-default_thumb -->
<div class="img_container">
        <img id="imageToggleDef" src="<?php echo esc_url( $default_thumb ); ?>" alt="" style="max-width: 100%; max-height: 100%" />
</div>

您可以尝试演示here 并且确保在那里使用JS，而不是上面最初发布的JS。