砌体在 Woocommerce 商店页面上不起作用

Question

我正在建立一个库存照片网站，并且（我认为）在商店主页上只显示图片是件好事。 我想出了如何在我的第二十二个子主题（functions.php）中隐藏标题、价格和按钮（使用 remove_action）

现在添加砖石。我添加了一些代码（来自 James Koster 的 sn-p）以将 WP 构建排入 Masonry 脚本中。

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;
}

很遗憾，对我的页面没有影响。没有砌体效果，项目边缘没有变化。见截图。

问题是：从这里出发。我搜索了互联网，发现了几种可能性，但似乎我不明白。 （新手）我正在寻找如下所示的结果：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 商店页面上使用砖石。它的工作方式是这样的：

如您所见，有 4 列可填充周围 div 的总宽度。然而，砌体并没有开始。当我将浏览器窗口调整为更小的尺寸时，图像并没有调整大小。 （响应）直到一定的屏幕宽度。然后突然布局变为 3 列布局砖石开始了。见截图。 对 3 列的更改必须与 css 有关....但是我不知道是什么。傻我。 然后，当进一步调整屏幕大小（更小）时，布局变为两列（这是可以理解的），但砌体停止工作。见截图。

我确实期待一个有效的砌体和响应式布局。

结束编辑 2

我完全被困在这里了。

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

Answer 1

起初我需要覆盖标准的 woocommerce css 行为。正如 mevius 在上面的 cmets 中所建议的那样，这是一种可能性。所以我将样式出列，将文件复制到我的 /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' );
    }
 }

为了让砌体工作，我在 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;
        }
 }

据我所知，这非常好。响应能力还可以。调整屏幕大小时，甚至图像也会动画到它们的新位置。祝你好运。