从产品类别页面中删除边栏 | WordPress Woocommerce

Question

我的问题是，我如何才能删除特定产品类别 "Slug" 而不是其子 slug 的侧边栏。
如果 url 如下所示 - 删除边栏并使页面全宽仅用于 slug "sanitaryware" 和 "closets" http://www.example.com/product-category/sanitaryware/
http://www.example.com/product-category/sanitaryware/closets/

出于所有 "Product Category" 原因，我不想删除侧边栏，我希望侧边栏显示孙子 slug"one-piece-closets":
http://www.example.com/product-category/sanitaryware/closets/one-piece-closets

代码：我在 function.php 中使用的代码 - 这将删除网站所有产品类别中的侧边栏。

  <?php
            /**
             * woocommerce_sidebar hook
             *
             * @hooked woocommerce_get_sidebar - 10
             */
            if (!is_product_category('sanitaryware')){
        do_action('storefront_sidebar');
}
?>

Answer 1

一种方法是制作一个自定义模板，并在查看产品类别页面时阻止侧边栏呈现。按照 Woocommerce docs 的升级安全建议，您应该：

1) 进入wp-content/plugins/woocommerce/templates/目录，复制archive-product.php文件

2) 在您的主题目录中创建一个 woocommerce 目录（例如 wp-content/themes/your-theme/woocommerce）

3) 创建wp-content/plugins/woocommerce/templates/archive-product.php的副本并将其放入wp-content/themes/your-theme/woocommerce/并将文件命名为archive-product.php

4) 查看新自定义文件的底部附近并找到：

do_action( 'woocommerce_sidebar' );

5) 将该行代码替换为：

if (!is_product_category('sanitaryware') && !is_product_category('Faucet')) {
   do_action( 'woocommerce_sidebar' );
}

6) 要使产品类别页面内容全宽，您可以使用过滤器将名为 product-category 的 class 添加到这些页面的 <body>。

要添加这个新的 class，请在您的 functions.php 文件中插入此代码：

// Add specific CSS class by filter
add_filter( 'body_class', 'product_categories' );
function product_categories( $classes ) {
    // add 'class-name' to the $classes array
    if (is_product_category('sanitaryware') && is_product_category('Faucet')) {
        $classes[] = 'product-category';
    }
    // return the $classes array
    return $classes;
}

7) 然后在您的主题样式表中，您可以使用此 CSS 选择器定位产品类别页面：

body.product-category { /* place Product Category page specific CSS here */ }

由于我不知道您的主题的具体细节，我无法告诉您您希望将哪些 HTML 元素设置为 100% 宽度，但是如果页面内容位于像 <div id="content"> 你可以像这样设置 CSS:

body.product-category #content { 
    width: 100%;
    float: none;
}

Answer 2

根据您希望隐藏顶级类别及其直接子类别的侧边栏的愿望，我们将需要一个系统来确定任何术语档案的层次结构 "depth"。类似于人们经常获取 "top-level" 父项的方式，我们可以执行一个 while 循环来获取项的项对象并检查项的父项。在我们的例子中，我们不使用 return 顶层父级，而是只保留一个计数并 return 那个。

/**
* Returns depth level of product category
*
* @param    string      $catid  Product category ID to be checked
* @return   string      $depth  how many categories deep is this term in the hierarchy
*/
function so_32165017_get_product_cat_depth($catid) {
    $depth = 0;
    while ($catid) {
        $cat = get_term_by('id', $catid, 'product_cat'); // get the object for the catid
        if( $cat->parent > 0 ){
            $depth++;
        }
        $catid = $cat->parent; // assign parent ID (if exists) to $catid
        // the while loop will continue whilst there is a $catid
    }
    return $depth;
}

现在我们有了可以用作条件的东西，我们可以有条件地删除 WooCommerce 侧边栏：

/**
* Hide the sidebar for items 2 levels deep or more
*/
function so_32165017_conditionally_remove_sidebar(){
    if( is_product_category()){
        $t_id = get_queried_object()->term_id;
        if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
            remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
            // could be theme specific ex: Storefront
            remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
        }
    }
}
add_action( 'woocommerce_before_main_content', 'so_32165017_conditionally_remove_sidebar' );

Edit/Update

如果您还想添加自定义正文 class 以使无侧边栏的页面更易于设置样式，那么我相信您可以同时从 body_class 过滤器中删除相关操作你实际过滤正文的时间 class.

/**
* Hide the sidebar for items 2 levels deep or more
*/
function so_32165017_conditionally_remove_sidebar( $class ){
    if( function_exists('is_product_category') && is_product_category() ){
        $t_id = get_queried_object()->term_id;
        if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
            remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
            // could be theme specific ex: Storefront
            remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
            // add a custom body class
            $class[] = 'full-width';
        }
    }
    return $class;
}
add_action( 'body_class', 'so_32165017_conditionally_remove_sidebar' );

Answer 3

您可以从类别页面覆盖中删除边栏 archive-product.php 或使用 function.php[=39= 中的操作挂钩] 在您当前的 WordPress 主题中。

与其直接在插件中编辑这些文件（这是一个非常糟糕的主意，因为一旦更新插件，您所做的所有更改都将丢失！），您可以将它们复制到您的主题中：

在您的主题目录中，创建一个名为“WooCommerce”的新文件夹。

导航到 WooCommerce 插件目录并打开 "templates" 文件夹。 templates 文件夹有很多子文件夹，其中包含 WooCommerce 使用的所有不同模板。幸运的是，WooCommerce 中的模板文件结构和命名很容易理解。

在您新创建的 "WooCommerce" 文件夹中，复制您要编辑的模板文件。

Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory.

在存档中-product.php-

<?php /** * woocommerce_sidebar hook * * @hooked woocommerce_get_sidebar - 10 */ do_action('woocommerce_sidebar');?>

此代码在类别页面上显示侧边栏删除此代码并保存文件。

或

要从您要使用操作挂钩的类别页面中删除侧边栏
function.php 文件 -

add_filter( 'body_class', 'remove_sidebar' ); function remove_sidebar() { if( is_product_category()) { remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10); } }

接下来，我们要编辑主题文件夹中的style.css-

body.product-category #content { width: 100%; }

Here you can get WooCommerce Action and Filter Hook -https://docs.woothemes.com/wc-apidocs/hook-docs.html

从产品类别页面中删除边栏 | WordPress Woocommerce

Remove Sidebar from Product Category Page | Wordpress Woocommerce

css

php

wordpress

woocommerce