Question

我正在建立一个股票照片网站，（我认为）只在商店主页上显示图片很好。我想出了如何在我的二十岁儿童主题（functions.php）中隐藏标题，价格和按钮（带有remove_action）

现在添加砖石。我添加了一些代码（来自James Koster的代码片段），用于在砌体脚本中排列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;
}

可悲的是，对我的页面没有影响。没有砌体效果，物品边缘没有变化。见截图。 enter image description here

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

enter image description here

正如您所看到的，有4列可以填充周围div的总数。然而，Masonry并未参与其中。当我将浏览器窗口调整为较小尺寸时，图像不会调整大小。（响应）直到某个屏幕宽度。然后，布局突然变为3列布局，并且砖石踢入。请参见截图。 enter image description here 对3列的更改必须与css有关....但是我无法弄清楚是什么。傻我。然后当进一步调整屏幕大小（更小）时，布局分为两列（这是可以理解的）但是砌体停止工作。见截图。

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

END EDIT 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' );
    }
 }

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

据我所知，这非常好。责任还可以。在调整屏幕大小时，甚至图像也会动画到新位置。祝你好运。

砌体不在Woocommerce商店页面上工作

1 个答案: