重写控件通过的functions.php

Question

Woocommerce带有默认的产品过滤器窗口小部件，位于

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

我有很多的产品/类别等，并利用这看起来很凌乱。我试图整理它，并将它变成一个手风琴菜单，从底部的代码中可以看出它似乎起作用。

但是，我很努力地将它添加到我的主题中。

我已创建使用我自己的小工具：

<?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 
 
\t \t } 
 
    ?> \t 
 

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

我已保存这：

/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的新代码似乎给出错误：

Fatal error: Class 'Custom_WC_Widget_Layered_Nav' not found in /homepages/8/d692312546/htdocs/Mytheme/wp-includes/class-wp-widget-factory.php on line 106

请问有什么可以改变，以避免这个错误？

正如您在下面看到的那样，编码似乎有效且具有期望的效果。

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

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

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

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

} 

希望工程！

UPDATE：

什么进来头脑先保存脚本您的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. 
    }