Las tabs jQuery UI no funcionan en WordPress 4.4 y posterior

En mi tema de WordPress, tengo una página de Opciones de tema que está usando tabs de IU de jQuery. Estas tabs funcionan perfectamente en las versiones de WordPress debajo de 4.4. Pero parece que no funcionan en las versiones posteriores a 4.4

Simplemente no da ningún error ni nada. Las otras funciones de jQuery (como jQuery color-picker, slider..etc.) En la página de opciones funcionan bien. Solo son las tabs las que están rotas.

En la consola recibo este mensaje

Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier. 

Es del archivo jQuery.js que se incluye en la carpeta wp-include/js/jQuery

Este es mi código …

 
    foreach ( $this->sections as $section_slug => $section ) echo '
  • ' . $section . '
  • ';
jQuery(document).ready(function(jQuery) { var sections = [];'; foreach ( $this->sections as $section_slug => $section ) echo "sections['$section'] = '$section_slug';"; echo 'var wrapped = jQuery(".wrap h3").wrap("
"); wrapped.each(function() { jQuery(this).parent().append(jQuery(this).parent().nextUntil("div.ui-tabs-panel")); }); jQuery(".ui-tabs-panel").each(function(index) { jQuery(this).attr("id", sections[jQuery(this).children("h3").text()]); if (index > 0) jQuery(this).addClass("ui-tabs-hide"); }); jQuery(".ui-tabs").tabs({ fx: { opacity: "toggle", duration: "fast" } }); jQuery("input[type=text], textarea").each(function() { if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "") jQuery(this).css("color", "#999"); }); jQuery("input[type=text], textarea").focus(function() { if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "") { jQuery(this).val(""); jQuery(this).css("color", "#000"); } }).blur(function() { if (jQuery(this).val() == "" || jQuery(this).val() == jQuery(this).attr("placeholder")) { jQuery(this).val(jQuery(this).attr("placeholder")); jQuery(this).css("color", "#999"); } }); jQuery(".wrap h3, .wrap table").show(); // This will make the "warning" checkbox class really stand out when checked. // I use it here for the Reset checkbox. jQuery(".warning").change(function() { if (jQuery(this).is(":checked")) jQuery(this).parent().css("background", "#c00").css("color", "#fff").css("fontWeight", "bold"); else jQuery(this).parent().css("background", "none").css("color", "inherit").css("fontWeight", "normal"); }); // Browser compatibility if (jQuery.browser.mozilla) jQuery("form").attr("autocomplete", "off"); });

¿Cuál es el motivo de este extraño comportamiento? ¿Hay algo en mi código? Pero funciona bien en versiones anteriores de WP. Cualquier pista ?

Finalmente calculé la respuesta para mi propia pregunta …

En realidad, este error se debió a algunos cambios principales de WP en la interfaz back-end. Han cambiado la estructura de encabezados Backend. Por lo tanto, su etiqueta

en WordPress 4.3 ya no es

en 4.4 y versiones posteriores.

Por lo tanto, en la página de opciones personalizadas, en WP 4.3, los títulos se representaron como tags

. Y, esos títulos se vincularon a mi código de JavaScript como .h2 . Entonces, ahí es donde ocurrió el error.

Ese pequeño error causó el mal funcionamiento de todo el bloque de JavaScript. Entonces, las tabs jQuery no funcionaron.

Puedes explorar esto con el inspector. Ver la imagen a continuación.

enter image description here

Como puede ver, los títulos en WordPress 4.3 se representaron como

pero en WordPress 4.4, son

Entonces, lo que hice fue ajustar mi código JavaScript para vincular el título como .h2 y .h3

De esto…

 jQuery(this).children("h2").text(); 

Me gusta esto …

 jQuery(this).children("h2, h3").text(); 

Esto funcionó para mí. Tu código puede ser diferente al mío. Pero, la causa del problema puede ser …

¡Espero que esto ayude!