如何为缩略图 Woocommerce 创建滑块

Question

我想制作缩略图滑块，

我留下链接作为示例：

http://flexslider.woothemes.com/thumbnail-slider.html

我搜索了很多但找不到解决方案，有人可以帮忙吗？

这是我的页面来源

链接到单个产品页面

按照我的代码：

functions.php

add_filter('woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options');
function ud_update_woo_flexslider_options($options) {
      // show arrows
      $options['directionNav'] = true;
      $options['controlNav'] = wp_is_mobile() ? true : 'thumbnails';
      return $options;
}

CSS

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
}

.woocommerce div.product div.images .flex-control-thumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
}

 ul.flex-direction-nav {
    position: absolute;
    top: 40%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;
 }

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-prev {visibility:hidden;}

a.flex-next::after {
    visibility:visible;content: '\f054';
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    font-size: 20px;   
    font-weight: bold;
}
a.flex-prev::before {
    visibility:visible;
    content: '\f053';
    font-family: 'Font Awesome 5 Free';   
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
} 
.flex-direction-nav a{
    opacity:1!important;
    height: 50px!important;
    position: revert!important;
}

Answer 1

非常简单。

步骤

1. 下载滑块 CSS/JS 文件并将主题存储在文件夹(css/js)中
2. 包含functions.php或footer.php中的CSS/JS
3. 从插件 woocommerce/single-product/product-image.php 覆盖单个产品图像到您的活动主题 woocommerce/single-product/product-image.php
4. 相应地添加/更新页面代码并包含滑块代码

product-image.php 示例：

<?php
/**
 * Single Product Image
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.5.1
 */

defined( 'ABSPATH' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
    return;
}

?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/flexslider.css">
<?php

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters(
    'woocommerce_single_product_image_gallery_classes',
    array(
        'woocommerce-product-gallery',
        'woocommerce-product-gallery--' . ( $post_thumbnail_id ? 'with-images' : 'without-images' ),
        'woocommerce-product-gallery--columns-' . absint( $columns ),
        'images',
    )
);

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) { ?>
        <div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
            <figure>
                <section class="slider">
                    <div id="slider" class="flexslider">
                        <ul class="slides">
                            <?php 
                            foreach ( $attachment_ids as $attachment_id ) {
                                $image_url = wp_get_attachment_url($attachment_id);
                            ?>
                                <li data-thumb="<?php echo $image_url; ?>">
                                    <img src="<?php echo $image_url; ?>" />
                                </li>
                            <?php } ?>
                        </ul>
                    </div>
                </section>
            </figure>
        </div>
<?php } ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/jquery.flexslider.js"></script>
<script type="text/javascript">
    jQuery(window).load(function(){
        jQuery('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        start: function(slider){
            jQuery('body').removeClass('loading');
        }
    });
    });
</script>

注意：目前我已经在product-image.php页面上包含了CSS/JS文件/CDN，但这不是最好的方法，所以你应该始终包含functions.php或footer.php中的css/js文件

您可以相应地更改/更新 HTML/滑块结构。

方法二：

如果您想要具有不同网站标题的产品图库图像，然后您将相应地管理图像，请尝试以下操作：

function wc_get_prioduct_gallery_image_with_title_html( $attachment_id, $main_image = false ) {
    $flexslider        = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
    $gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
    $thumbnail_size    = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
    $image_size        = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
    $full_size         = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
    $thumbnail_src     = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
    $full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
    $image             = wp_get_attachment_image( $attachment_id, $image_size, false, array(
        'title'                   => get_post_field( 'post_title', $attachment_id ),
        'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
        'data-src'                => $full_src[0],
        'data-large_image'        => $full_src[0],
        'data-large_image_width'  => $full_src[1],
        'data-large_image_height' => $full_src[2],
        'class'                   => $main_image ? 'wp-post-image' : '',
    ) );
    $imageTitle         = '<span>' . esc_html( get_the_title($attachment_id) ) . '</span>';
    
    return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . $imageTitle . '</a></div>';
}

$attachment_ids = $product->get_gallery_image_ids();
$image = array();
foreach ($attachment_ids as $attachment_id) {
    $image[] = wc_get_gallery_image_with_title_html($attachment_id); 
}
echo "<pre>"; print_r($image); exit;

您可以相应地更新函数 wc_get_prioduct_gallery_image_with_title_html() 返回 html 语法。

如果您传递$attachment_id，您将获得在返回html中设置的图像