Question

Woocommerce附带一个默认的产品过滤器小部件，位于

/wp-content/plugins/woocommerce/includes/widgets/class-wc-widget-layered-nav-filters.php

我有很多产品/类别等，使用它看起来非常混乱。我试着整理一下，把它变成一个手风琴菜单，从底部的代码可以看出它似乎有效。

然而，我正在努力将其添加到我的主题中。

我使用以下方法创建了自己的小部件：

＆＃13;

<?php>
    class Custom_WC_Widget_Layered_Nav extends WC_Widget_Layered_Nav {
        Public function widget( $args, $instance ) {
          //taken details prom default plugin and inserted here
		}
    ?>	

    <script>
        var acc = document.getElementsByClassName("widget-title");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight){
                panel.style.maxHeight = null;
                } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
                } 
            }
        }
    </script>

＆＃13;

我已将此保存在：

/wp-content/themes/my-theme/woocommerce/includes/widgets/custom-wc-widget-layered-nav.php

然后我将以下代码添加到functions.php中：

add_action( 'widgets_init', 'err_override_woocommerce_widgets', 15 );
function err_override_woocommerce_widgets() {
    if ( class_exists( 'WC_Widget_Layered_Nav' ) ) {
        unregister_widget( 'WC_Widget_Layered_Nav' );
        include_once( 'wp-content/themes/my-theme/woocommerce/includes/widgets/custom-wc-widget-layered-nav.php' );
        register_widget( 'Custom_WC_Widget_Layered_Nav' );
    }
}

functions.php中的新代码似乎给出了错误：

致命错误：Class＆＃39; Custom_WC_Widget_Layered_Nav＆＃39;在第106行/homepages/8/d692312546/htdocs/Mytheme/wp-includes/class-wp-widget-factory.php中找不到

我可以更改任何内容以避免此错误吗？

正如您在下面所看到的，编码似乎起作用并且具有预期效果。

＆＃13;

var acc = document.getElementsByClassName("widget-title");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
            panel.style.maxHeight = null;
            } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
            } 
        }
    }

＆＃13;

h1.widget-title {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-top:5px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
h1.widget-title.active, h1.widget-title:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
aside>ul {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
h1.widget-title:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

h1.widget-title.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

#secondary .widget {
    font-size: 0.86em;
}
.widget-area > aside {
    background: white;
    border: 1px solid #ededed;
    border-radius: 6px;
    padding: 5px 20px;
    margin-bottom: 5px;
    width:20em
}
.widget-title {
    font-size: 1.43em;
}

＆＃13;

<div class="widget-area" id="secondary" role="complementary">
    <aside class="widget woocommerce widget_layered_nav" id="Woocommerce-layered-nav-1">
        <h1 class="widget-title">Title1</h1>
        <ul>
            <li class="layered-nav-term">
                <a href="http....co.uk">nav term</a>
                <span class="count">(10)</span>
            </li>
        </ul>
    </aside>
    <aside class="widget woocommerce widget_layered_nav" id="Woocommerce-layered-nav-2">
        <h1 class="widget-title">Title2</h1>
        <ul>
            <li class="layered-nav-term">
                <a href="http....co.uk">nav term2</a>
                <span class="count">(10)</span>
            </li>
        </ul>
    </aside>
</div>

＆＃13;

Answer 1

根据此article

您必须根据保存此窗口小部件的位置更改路径：

add_action( 'widgets_init', 'err_override_woocommerce_widgets', 15 );

function err_override_woocommerce_widgets() {
  // Ensure our parent class exists to avoid fatal error (thanks Wilgert!)

  if ( class_exists( 'WC_Widget_Layered_Nav' ) ) {

        unregister_widget( 'WC_Widget_Layered_Nav' );

        include_once( 'woocommerce/includes/widgets/custom-wc-widget-layered-nav.php' );

        register_widget( 'Custom_WC_Widget_Layered_Nav' );
  }

}

希望它有效！

<强>更新

要记住的是首先将脚本保存在js文件夹中，并将其命名为custom.js，然后您必须注册该脚本，如下所示：

// Register your assets during `wp_enqueue_scripts` hook inside `functions.php`.
function custom_register_scripts() {
    // Give the path of the script
    wp_register_script('js-custom', 'path/to/js/custom.js',array('jquery'));
}

然后您可以将脚本排入窗口小部件的位置。

public function widget( $args, $instance ) {
        // Enqueue needed assets inside the `widget` function.
        wp_enqueue_script('js-custom');

        // Output widget contents.
    }

通过functions.php

1 个答案: