Zwingende Widget über functions.php

Question

WooCommerce mit einem Standard-Produktfilter widget kommt, befindet sich in

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

habe ich eine Menge von Produkten/Kategorien etc und mit diesem sieht sehr chaotisch. Ich habe versucht, es aufzuräumen und es in ein Akkordeonmenü zu verwandeln, das zu funktionieren scheint, wie aus dem Code unten ersichtlich ist.

Ich kämpfe jedoch, um es zu meinem Thema hinzuzufügen.

Ich habe mein eigenes Widget mit erstellt:

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

ich gespeichert habe dies in:

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

ich dann den folgenden Code in functions.php hinzugefügt:

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

Der neue Code in der functions.php scheint Fehler zu geben:

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

Gibt es etwas, das ich diesen Fehler zu vermeiden, ändern?

Wie Sie unten sehen können, scheint die Codierung zu funktionieren und gewünschte Wirkung zu haben.

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

Nach diesem article

Sie den Pfad ändern müssen je nachdem, wo Sie das Widget gespeichert:

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

} 

Hoffe, es funktioniert!

UPDATE:

Was in den Sinn kommt zuerst das Skript in Ihrem js Ordner speichern und zu benennen wie custom.js etwas, dann müssen Sie das Skript wie folgt registrieren:

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

Sie dann Sie können Ihr Skript in das Widget einfügen.

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

     // Output widget contents. 
    }