重写控件通过的functions.php
问题描述:
Woocommerce带有默认的产品过滤器窗口小部件,位于重写控件通过的functions.php
/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>
答
根据您根据您保存这个小部件改变路径此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.
}
辉煌,欢呼,排序我的错误,但功能似乎没有工作。我不确定javascript是否可以在一个小部件中工作:-( – PaulMcF87
它的确如此,但是你必须小心地添加脚本并将它排入队列。看看更新部分,我希望它能起作用! – EniGma
感谢您花时间帮助我尝试了一下你在上面的更新中说过的话,但是仍然没有得到新Javascript的功能生效,我知道我可能把它放在错误的地方或者做一个简单的错误,但我没有经验或知识知道我要去哪里错。 – PaulMcF87