Eliminar el atributo type de las etiquetas script y style añadidas por WordPress

WordPress 5.3 introduce una forma considerablemente más sencilla de lograr esto. Al registrar el soporte del tema para HTML 5 en script y style, el atributo type="" se omitirá:

add_action(
    'after_setup_theme',
    function() {
        add_theme_support( 'html5', [ 'script', 'style' ] );
    }
);

Puedes eliminar los atributos type='*' y sus valores de los scripts y estilos cargados con wp_enqueue, utilizando los respectivos hooks *_loader_tag.

El siguiente código funcionó para mí:

add_action( 'wp_enqueue_scripts', 'myplugin_enqueue' );

function myplugin_enqueue() {
    // wp_register_script(...
    // wp_enqueue_script(...
}


add_filter('style_loader_tag', 'myplugin_remove_type_attr', 10, 2);
add_filter('script_loader_tag', 'myplugin_remove_type_attr', 10, 2);

function myplugin_remove_type_attr($tag, $handle) {
    return preg_replace( "/type=['\"]text\/(javascript|css)['\"]/", '', $tag );
}

Lo obtuve del plugin soil / roots. Hizo el trabajo en su mayor parte.

    add_filter( 'style_loader_tag',  'clean_style_tag'  );
add_filter( 'script_loader_tag', 'clean_script_tag'  );

/**
 * Limpiar la salida de las etiquetas <link> de hojas de estilo
 */
function clean_style_tag( $input ) {
    preg_match_all( "!<link rel='stylesheet'\s?(id='[^']+')?\s+href='(.*)' type='text/css' media='(.*)' />!", $input, $matches );
    if ( empty( $matches[2] ) ) {
        return $input;
    }
    // Solo mostrar media si es significativo
    $media = $matches[3][0] !== '' && $matches[3][0] !== 'all' ? ' media="' . $matches[3][0] . '"' : '';

    return '<link rel="stylesheet" href="' . $matches[2][0] . '"' . $media . '>' . "\n";
}

/**
 * Limpiar la salida de las etiquetas <script>
 */
function clean_script_tag( $input ) {
    $input = str_replace( "type='text/javascript' ", '', $input );

    return str_replace( "'", '"', $input );
}

Los enfoques de style_loader_tag y script_loader_tag mencionados anteriormente parecen funcionar para cualquier marcado que WordPress genere, en casos donde el tema/plugin utiliza las funciones de encolado adecuadas.

Si tienes plugins problemáticos que no cooperan (por ejemplo, Jetpack solía ser uno de ellos, a menos que una versión más reciente haya corregido esto), y estás decidido a resolver este problema a pesar de que es poco probable que afecte a tus visitantes (¡su navegador renderizará la página sin problemas!), siempre puedes optar por usar el buffering de salida:

add_action('wp_loaded', 'output_buffer_start');
function output_buffer_start() { 
    ob_start("output_callback"); 
}

add_action('shutdown', 'output_buffer_end');
function output_buffer_end() { 
    ob_end_flush(); 
}

function output_callback($buffer) {
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Advertencia: aunque esto es una solución, no es muy eficiente. Estarías ejecutando preg_replace() en toda la salida "final" de WordPress antes de que se envíe al navegador del cliente, para cada solicitud.

El buffering de salida se activa al inicio (gancho wp_loaded), es decir, justo cuando WordPress + tema + plugins + etc. están completamente cargados, y se desactiva en el último momento (gancho shutdown), que se ejecuta justo antes de que PHP termine la ejecución. La expresión regular debe procesar todo, ¡y eso puede ser mucho contenido!

Los enfoques de style_loader_tag y script_loader_tag mencionados anteriormente solo ejecutan la expresión regular en una cadena muy pequeña (la etiqueta en sí), por lo que el impacto en el rendimiento es insignificante.

Supongo que si tienes contenido relativamente estático y usas una capa de caché, podrías intentar mitigar el problema de rendimiento.

Referencias del manual de PHP:

• http://php.net/manual/en/function.ob-start.php
• http://php.net/manual/en/function.ob-end-flush.php

Esto me ayudó mucho:

add_filter('script_loader_tag', 'clean_script_tag');
  function clean_script_tag($input) {
  $input = str_replace("type='text/javascript' ", '', $input);
  return str_replace("'", '"', $input);
}

Gracias a css-tricks (LeoNovais): https://css-tricks.com/forums/topic/clean-up-script-tags-in-wordpress/#post-246425

Según el código en script-loader.php, el atributo type se omite cuando se añade soporte para temas html5 con los argumentos de script y style.

Ver los siguientes enlaces:

• https://build.trac.wordpress.org/browser/tags/5.3/wp-includes/script-loader.php#L2576
• https://build.trac.wordpress.org/browser/tags/5.3/wp-includes/script-loader.php#L2758

function yourthemeprefix_theme_supportt() {
    add_theme_support(
        'html5',
        array(
            'script', // Corrección para: El atributo "type" es innecesario para recursos JavaScript.
            'style',  // Corrección para: El atributo "type" para el elemento "style" no es necesario y debe omitirse.
        )
    );
}
add_action( 'after_setup_theme', 'yourthemeprefix_theme_support' );

Basado en @realmag77. Esto aprovechará el plugin Autoptimize para poder filtrar TODOS los atributos type sin romper nada si no está instalado y activado. El respaldo funciona bien, pero esos scripts y hojas de estilo cargados a través de plugins no serán filtrados. No sé cómo filtrarlos de otra manera que no sea utilizando la parte de Autoptimize.

/* ==========================================
   Eliminar el atributo type en JS/CSS
   (requiere el plugin Autoptimize y Optimizar HTML marcado)
   pero con respaldo por si acaso
========================================== */

// Si Autoptimize está instalado y activado, elimina los atributos type para todo JS/CSS
if ( is_plugin_active( 'autoptimize/autoptimize.php' ) ) {

    add_filter('autoptimize_html_after_minify', function($content) {

        $site_url = home_url();
        $content = str_replace("type='text/javascript'", '', $content);
        $content = str_replace('type="text/javascript"', '', $content);

        $content = str_replace("type='text/css'", '', $content);
        $content = str_replace('type="text/css"', '', $content);

        $content = str_replace($site_url . '/wp-includes/js', '/wp-includes/js', $content);
        $content = str_replace($site_url . '/wp-content/cache/autoptimize', '/wp-content/cache/autoptimize', $content);
        $content = str_replace($site_url . '/wp-content/themes/', '/wp-content/themes/', $content);
        $content = str_replace($site_url . '/wp-content/uploads/', '/wp-content/uploads/', $content);
        $content = str_replace($site_url . '/wp-content/plugins/', '/wp-content/plugins/', $content);

        return $content;

    }, 10, 1);

} else {

    // Respaldo para eliminar atributos type excepto aquellos cargados a través de plugins
    add_filter('style_loader_tag', 'pss_remove_type_attr', 10, 2);
    add_filter('script_loader_tag', 'pss_remove_type_attr', 10, 2);
    function pss_remove_type_attr($tag, $handle) {
        return preg_replace( "/type=['\"]text\/(javascript|css)['\"]/", '', $tag );
    }
}

add_action('wp_loaded', 'prefix_output_buffer_start');
function prefix_output_buffer_start() { 
    ob_start("prefix_output_callback"); 
}

add_action('shutdown', 'prefix_output_buffer_end');
function prefix_output_buffer_end() { 
    ob_end_flush(); 
}

function prefix_output_callback($buffer) {
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Puedes usar las siguientes funciones para eliminar los atributos type de las etiquetas link y script.

Pega la siguiente función en functions.php para eliminar el type=text/css de las etiquetas link

/* Elimina el atributo " 'type=text/css' " de las hojas de estilo */
function wpse51581_hide_type($src) {
    return str_replace("type='text/css'", '', $src);
}
add_filter('style_loader_tag', 'wpse51581_hide_type');

===========================================================================

Pega la siguiente función en functions.php para eliminar el type='text/javascript' de las etiquetas script

//* Elimina el atributo type de script y style
add_filter('script_loader_tag', 'codeless_remove_type_attr', 10, 2);
function codeless_remove_type_attr($tag, $handle) {
    return preg_replace( "/type=['\"]text\/(javascript|css)['\"]/", '', $tag );
}

Bueno, porque he probado montones de otros códigos y los mencionados aquí, todavía quedan rastros del text/javascript de los archivos principales de WordPress y también de otros plugins y códigos javascript inline. Después de probar este código, todo se ha resuelto:

// Eliminar la validación w3 respecto a "text/javascript"
add_action('wp_loaded', 'prefix_output_buffer_start');
function prefix_output_buffer_start() { 
    ob_start("prefix_output_callback"); 
}
add_action('shutdown', 'prefix_output_buffer_end');
function prefix_output_buffer_end() { 
    ob_end_flush(); 
}
function prefix_output_callback($buffer) {
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Espero que pueda ayudar a alguien :)

Gracias

Si estás experimentando esto con WP Fastest Cache, puedes eliminar manualmente el atributo type en el script PHP del plugin. Esto debería funcionar con otros plugins también, aunque no conozco los archivos específicos donde están agregando el atributo type. Para WP Fastest Cache, debes ir a la carpeta wp-content/plugins/wp-fastest-cache/inc y abrir js-utilities.php, luego buscar text/javascript y eliminarlo junto con el atributo. Yo tenía esa advertencia en el Validador W3 y lo solucioné de esa manera. También ten en cuenta que cuando actualices el plugin, ese cambio podría revertirse. Para desactivar las actualizaciones del plugin, puedes editar wpFastestCache y cambiar la versión del plugin a algo como 10.0.8.7.7.

Puedes optimizar el código HTML de tu sitio como desees en 2 pasos:

• Instala este plugin: https://wordpress.org/plugins/autoptimize/
• Activa en las opciones del plugin 'Optimizar código HTML?'

• En el archivo functions.php de tu tema actual de WordPress aplica el siguiente código:

  add_filter('autoptimize_html_after_minify', function($content) {

      $site_url = 'https://bulk-editor.com';    
      $content = str_replace("type='text/javascript'", ' ', $content);
      $content = str_replace('type="text/javascript"', ' ', $content);
  
      $content = str_replace("type='text/css'", ' ', $content);
      $content = str_replace('type="text/css"', ' ', $content);
  
      $content = str_replace($site_url . '/wp-includes/js', '/wp-includes/js', $content);
      $content = str_replace($site_url . '/wp-content/cache/autoptimize', '/wp-content/cache/autoptimize', $content);
      $content = str_replace($site_url . '/wp-content/themes/', '/wp-content/themes/', $content);
      $content = str_replace($site_url . '/wp-content/uploads/', '/wp-content/uploads/', $content);
      $content = str_replace($site_url . '/wp-content/plugins/', '/wp-content/plugins/', $content);    
      return $content;    }, 10, 1);
  

  y no olvides cambiar $site_url por el enlace de tu sitio sin barra al final