重寫控件通過的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. 
    }