解决 javascript 与父主题在 wordpress 子主题上的冲突
Resolve javascript conflict with parent theme on wordpress child theme
我已经构建了 Divi Theme to use with Buddypress 的子主题。到目前为止一切顺利,除了评论按钮上的脚本冲突。
主题加载 javascript(js/custom.js
at 2642:2662)具有以下功能:
$( 'a[href*=#]:not([href=#])' ).click( function() {
if ( $(this).closest( '.woocommerce-tabs' ).length && $(this).closest( '.tabs' ).length ) {
return false;
}
if ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) {
var target = $( this.hash );
target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
if ( target.length ) {
et_pb_smooth_scroll( target, false, 800 );
if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
setTimeout(function(){
et_pb_smooth_scroll( target, false, 200);
}, 500 );
}
return false;
}
}
});
此事件针对 Buddypress 用于评论的同一按钮,防止 AJAX 表单在点击时加载。
我不想编辑父主题 (custom.js)。我怎样才能防止这种冲突?有没有解决方法,也许来自 functions.php?
更新
稍后使用 [wp_dequeue_script][4] 加载该脚本无效。在 functions.php
中使用此代码时
function de_script() {
wp_dequeue_script( 'divi-custom-script' );
}
add_action( 'wp_print_scripts', 'de_script', 100 );
那么完整的脚本 (custom.js) 根本没有加载。
首先,为了解决javascript冲突,我在主题js/
文件夹下设置了一个简单的tl_custom.js
,代码如下
jQuery(document).ready(function($) {
// Remove handler set by themes/Divi/js/custom.js at line 2642
$( 'a[href*=#]:not([href=#])' ).off();
});
然后我在functions.php
中加入如下代码的脚本
function tl_custom_scripts() {
if ( ! is_admin() ) {
$scriptsrc = get_stylesheet_directory_uri() . '/js/';
wp_register_script( 'tl_custom', $scriptsrc . 'tl_custom.js', '', '', true );
wp_enqueue_script( 'tl_custom' );
}
}
add_action( 'wp_enqueue_scripts', 'tl_custom_scripts', 20 );
主要问题是父主题在页脚中注册了 custom.js
,所以我不得不将 wp_register_script last parameter to true
and then set add_action 优先级设置为 20。
这个答案现在可能有点太晚了,但我目前正在从事一个我继续从事的继承项目。我发现他们在更新的 Wordpress 上使用 Divi 主题,这会触发上述所有错误。
我检查了源错误,发现这个选择器不正确:
$( 'a[href*=#]:not([href=#])' )
我通过在不影响任何功能的情况下将其更改为此来修复此问题:
$( 'a[href*=\#]:not([href=\#])' )
它也适用于此:
$( 'a[href*="#"]:not([href="#"])' )
问题已解决,该代码块的功能仍在运行。
我已经构建了 Divi Theme to use with Buddypress 的子主题。到目前为止一切顺利,除了评论按钮上的脚本冲突。
主题加载 javascript(js/custom.js
at 2642:2662)具有以下功能:
$( 'a[href*=#]:not([href=#])' ).click( function() {
if ( $(this).closest( '.woocommerce-tabs' ).length && $(this).closest( '.tabs' ).length ) {
return false;
}
if ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) {
var target = $( this.hash );
target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
if ( target.length ) {
et_pb_smooth_scroll( target, false, 800 );
if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
setTimeout(function(){
et_pb_smooth_scroll( target, false, 200);
}, 500 );
}
return false;
}
}
});
此事件针对 Buddypress 用于评论的同一按钮,防止 AJAX 表单在点击时加载。
我不想编辑父主题 (custom.js)。我怎样才能防止这种冲突?有没有解决方法,也许来自 functions.php?
更新
稍后使用 [wp_dequeue_script][4] 加载该脚本无效。在 functions.php
中使用此代码时function de_script() {
wp_dequeue_script( 'divi-custom-script' );
}
add_action( 'wp_print_scripts', 'de_script', 100 );
那么完整的脚本 (custom.js) 根本没有加载。
首先,为了解决javascript冲突,我在主题js/
文件夹下设置了一个简单的tl_custom.js
,代码如下
jQuery(document).ready(function($) {
// Remove handler set by themes/Divi/js/custom.js at line 2642
$( 'a[href*=#]:not([href=#])' ).off();
});
然后我在functions.php
function tl_custom_scripts() {
if ( ! is_admin() ) {
$scriptsrc = get_stylesheet_directory_uri() . '/js/';
wp_register_script( 'tl_custom', $scriptsrc . 'tl_custom.js', '', '', true );
wp_enqueue_script( 'tl_custom' );
}
}
add_action( 'wp_enqueue_scripts', 'tl_custom_scripts', 20 );
主要问题是父主题在页脚中注册了 custom.js
,所以我不得不将 wp_register_script last parameter to true
and then set add_action 优先级设置为 20。
这个答案现在可能有点太晚了,但我目前正在从事一个我继续从事的继承项目。我发现他们在更新的 Wordpress 上使用 Divi 主题,这会触发上述所有错误。
我检查了源错误,发现这个选择器不正确:
$( 'a[href*=#]:not([href=#])' )
我通过在不影响任何功能的情况下将其更改为此来修复此问题:
$( 'a[href*=\#]:not([href=\#])' )
它也适用于此:
$( 'a[href*="#"]:not([href="#"])' )
问题已解决,该代码块的功能仍在运行。