如何为缩略图 Woocommerce 创建滑块
Posted
技术标签:
【中文标题】如何为缩略图 Woocommerce 创建滑块【英文标题】：how can I create a slider for the thumbnails Woocommerce 【发布时间】：2021-12-06 01:44:09 【问题描述】：我想为缩略图制作一个滑块，
我以链接为例：
http://flexslider.woothemes.com/thumbnail-slider.html
我搜索了很多但找不到解决方案，有人可以帮忙吗？
这是我页面的来源
Link to Single Product Page
按照我的代码：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;
【问题讨论】：
见，***.com/a/51002547/1565472 我认为我公开解释了我的问题，这与我的职位无关。 【参考方案1】：这很简单。
步骤
-
下载滑块 CSS/JS 文件并将主题存储在文件夹（css/js）中
在 functions.php 或 footer.php 中包含 CSS/JS
从插件 woocommerce/single-product/product-image.php 覆盖单个产品图像到您的活动主题 woocommerce/single-product/product-image.php
相应地添加/更新页面代码并包含滑块代码
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 或页脚的 css/js 文件。 php
您可以相应地更改/更新 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中设置的图像
【讨论】：
我照你说的做了，但仍然没有与缩略图互动：\ 打印 $attachment_ids = $product->get_gallery_image_ids();然后您将获得所有产品图库图片，然后您可以相应地进行管理 我已经有了所有的产品图库图片，我想要的只是缩略图在左右两边都有箭头，并且在浏览主图片时它们会滚动 我分享了我自己页面的url链接，你能查一下吗 无法打开您的共享单页(kucuksun.com/product/…) 是“无法访问此站点 kucuksun.com 拒绝连接”之类的返回错误。以上是关于如何为缩略图 Woocommerce 创建滑块的主要内容，如果未能解决你的问题，请参考以下文章