php - masonry 不适用于 Woocommerce 商店页面

Question

我正在构建一个图片库网站，(我认为)最好在商店主页上只显示图片。我想出了如何在我的 twentytwelve 子主题 (functions.php) 中隐藏标题、价格和按钮(使用 remove_action)

现在开始添加 masonry 。我添加了一些代码(来自 James Koster 的片段)以在 Masonry 脚本中对 WP 构建进行排队。

add_action( 'wp_enqueue_scripts', 'jk_masonry' );
     function jk_masonry() {
     wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}

我将以下代码添加到我的 footer.php 中，我可以在标记中看到它已加载。

<script> 
    jQuery(document).ready(function($) {
         $('#content').masonry({
             itemSelector: 'products',
             isAnimated: true;
         }); 
    });
</script>

我的页面没有变化。

我将其添加到我的子主题 styl.css 中:

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product,
#primary ul.products li.product{
    margin-right: 3px;
    margin-bottom: 3px;
}

遗憾的是，对我的页面没有影响。没有 masonry 效果，项目的边距没有变化。见截图。

问题是:我们要从这里走。我在网上搜索过，发现了几种可能性，但似乎我不明白。 (新手)我正在寻找如下所示的结果:lhotse masonry .

编辑:html 输出

<div id="primary" class="site-content"><div id="content" role="main">

    <div class="page-description"><div class="post-text"></div>
        <p>&nbsp;</p>
    </div>

    <ul class="products">
        <li class="post-70 product type-product status-publish has-post-thumbnail first sale taxable shipping-taxable purchasable product-type-simple product-cat-posters product-tag-adri instock">
            <a href="http://localhost/shop/flying-ninja/">
                <img width="600" height="600" src="http://localhost/wp-content/uploads/2013/06/poster_2_up-600x600.jpg" class="attachment-shop_catalog wp-post-image" alt="poster_2_up" />
    </a>
        </li>

<!-- Following items-->

    </ul>

结束编辑

编辑 NR。 2

昨天我学会了一种覆盖标准 woocommerce css 文件的方法。如果好奇...给我留言。但是，就我的问题而言，这只是解决方案的一部分。如前所述，我想在我的 woocommerce 购物页面上使用 masonry 。它的工作方式如下所示:

如您所见，有 4 列填充了周围 div 的总宽度。然而，Masonry 并没有启动。当我将浏览器窗口调整为较小尺寸时，图像没有调整大小。 (响应)直到一定的屏幕宽度。然后布局突然更改为 3 列布局并且 masonry 开始。请参见屏幕截图。 对 3 列的更改必须与 css 有关....但是我无法弄清楚是什么。傻我。然后当进一步调整屏幕大小时(更小)布局变成两列(这是可以理解的)但是 masonry 停止工作。见截图。

我确实期待一个工作的 masonry 和响应式布局。

结束编辑 2

我完全卡在这里了。

非常非常感谢任何帮助。提前致谢。

Answer 1

起初我需要覆盖标准的 woocommerce css 行为。正如 mevius 在上面的评论中所建议的那样，这是一种可能性。所以我将样式出列，将文件复制到我的/childtheme/woocommerce/css 文件夹中，然后将它们排入这个新位置。这样当更新出来时，css 文件不会被覆盖。这是我的子主题的 functions.php 的代码:

add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );     // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
    return $enqueue_styles;
}

function wp_enqueue_woocommerce_style(){
wp_register_style( 'woocommerce-layout', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce-layout.css' );
if ( class_exists( 'woocommerce' ) ) {
    wp_enqueue_style( 'woocommerce-layout' );
}

wp_register_style( 'woocommerce-smallscreen', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce-smallscreen.css' ,array(),'4.0.1','only screen and (max-width: 768px)' );
    if ( class_exists( 'woocommerce' ) ) {
            wp_enqueue_style( 'woocommerce-smallscreen' );
    }

wp_register_style( 'woocommerce-general', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce.css' );
if ( class_exists( 'woocommerce' ) ) {
    wp_enqueue_style( 'woocommerce-general' );
    }
 }

为了让 masonry 正常工作，我将以下内容添加到我的 functions.php 中，就在 woocommerce 样式表的出队和入队之上。

add_action( 'wp_enqueue_scripts', 'jk_masonry' );
function jk_masonry() {
  wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}

然后我将这段代码放入我的子主题footer.php:

<script> 
   jQuery(document).ready(function($) {
       $('.products').masonry({
           itemSelector: '.product',
           isAnimated: true
        }); 
   });
</script>

接下来我必须更改 woocommerce css 文件中的一些样式。

我将下面的规则更改为:(只需在您的 css 文件中执行搜索)

在 woocommerce.css 中:

.woocommerce .products ul li,
.woocommerce ul.products li,
.woocommerce-page .products ul li,
.woocommerce-page ul.products li {
    list-style: none;
    width: 24.3%;
    margin-right: 8px;
    margin-bottom: 8px;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    width: 100%;
    height: auto;
    display: block;
   -webkit-transition: all ease-in-out .2s;
   -moz-transition: all ease-in-out .2s;
   -o-transition: all ease-in-out .2s;
   transition: all ease-in-out .2s;
}

上面的一些只是装饰性的。

在 woocommerce-layout.css 文件中:

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: left;
    margin: 0 8px 8px 0;
    padding: 0;
    position: relative;
    width: 24.5%;
}

在 woocommerce-smallscreen.css 中:

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 2px 2px 0;
}

@media screen and (max-width: 450px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 100%;
        float: left;
        clear: both;
        margin: 0 0 2px 0;
        }
 }

据我所知，这个作品相当不错。 react 还可以。在调整屏幕大小时，即使是图像也会动画到它们的新位置。祝你好运。