Cómo cambiar las etiquetas de encabezado <h1> a <h1 data-splitting> y <h2> a <h2 data-splitting> y <h3> a <h3 data-splitting> y <h4> a <h4 data-splitting> en WordPress?
¿Cómo puedo cambiarlos en todas las páginas mediante codificación fija o mediante cambios a través de JS/JQuery? (Mis páginas están completamente almacenadas en caché por Cloudflare CDN)
Para la codificación dura, ¿dónde debo mirar, en los archivos de temas, o está codificado en el propio WordPress?
Hay ID y clases como <div id="nav"> y <div class="sidebar-box"> pero ¿cómo se llama el tipo anterior? ¿Es lo mismo que <h2> + <data-splitting>?
Esto es necesario para agregar algún efecto de animación a los encabezados: Ver en Codepen
Ahora, ¿cómo puedo cambiar las etiquetas de encabezado?
Agregué esto a las funciones de WordPress.php: –
function enqueue_my_custom_script() {
wp_enqueue_script( 'hjs', 'https://example.com/h.js', false );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );
El h.js tiene el siguiente código: –
$('document').ready(function() {
$('h1, h2, h3, h4').attr('data-splitting', '');
});
Pero esto no agrega el guión a la cabeza.
Incluso lo agregué manualmente como <script async src="https://example.com/h.js"> pero lo hace no aparece en la cabeza.
Así que agregué el archivo JS como un script en línea en la cabeza, ahora el script aparece en la sección principal como JS en línea pero no cambia el <h1> a <h1 data-splitting> y <h2> a <h2 data-splitting>.
<script>
$('document').ready(function() {
$('h1, h2, h3, h4').attr('data-splitting', '');
});
</script
o como
<script>
jQuery.noConflict()(function($) {
$('document').ready(function() {
$('h1, h2, h3, h4').attr('data-splitting', '');
});
});
</script>
Ahora el script está presente en el encabezado como JS en línea, pero no cambia las etiquetas de encabezado.
.