Remova o atributo type das tags de script e estilo adicionadas pelo WordPress


15
Warning: The type attribute is unnecessary for JavaScript resources.
    From line 10, column 146; to line 10, column 176
    feed/" /> <script type="text/javascript">window

 Warning: The type attribute for the style element is not needed and should be omitted.
    From line 11, column 1798; to line 11, column 1820
    </script> <style type="text/css">img.wp

Warning: The type attribute for the style element is not needed and should be omitted.
    From line 23, column 193; to line 23, column 251
    a='all' /><style id='kirki-styles-global-inline-css' type='text/css'>.envel

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 23, column 905; to line 23, column 1010
    }</style> <script async type="text/javascript" src="http://....../wp-content/cache/minify/df983.js"></scri

Warning: The type attribute for the style element is not needed and should be omitted.
    From line 70, column 126; to line 70, column 167
    70.png" /><style type="text/css" id="wp-custom-css">@media

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 441, column 156; to line 441, column 261
    iv></div> <script defer type="text/javascript" src="http://......./wp-content/cache/minify/26938.js"></scri

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 441, column 272; to line 441, column 302
    </script> <script type='text/javascript'>/*  */

Warning: The type attribute is unnecessary for JavaScript resources.
    From line 443, column 17; to line 443, column 122
    </script> <script defer type="text/javascript" src="http://......../wp-content/cache/minify/6ce07.js"></scri

Esses erros são uma nova introdução do W3C e começaram a surgir nos últimos 3-4 dias.insira a descrição da imagem aqui

Enfileiramos scripts como este →

wp_register_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.1', true );
    wp_enqueue_script( 'custom-js' );

Podemos corrigir isso do método de enfileiramento acima de alguma forma?

Atualizar →

esses são os erros reais. Na caixa vermelha são provenientes do cache total do W3.insira a descrição da imagem aqui


5
o validador W3C raramente retorna como sem erros para sites do Wordpress ou qualquer cms popular. parece estar ficando cada vez pior a cada ano. O validador (imho) deve ser usado como ferramenta para revelar alguns erros básicos (como esquecer as alttags ou esquecer de fechar uma tag), mas não deve ser encarado como padrão antes.
David Sword

eles o introduziram após 2 de dezembro de 017. Antes disso, meu tema era livre de erros / avisos. Deve haver alguma maneira de se livrar deles.
O WP Intermediate

11
Se você olhar dentro do script_loader_taggancho, poderá fazer um str_replace()para removê-los.
David Espada

Vale ressaltar que estes são apenas avisos , não erros. Seu site ainda será validado.
swissspidy

Você pode verificar seguinte resposta também - stackoverflow.com/a/53380692/2611955
Jahirul Islam Mamun

Respostas:


16

Você pode remover os type='*'atributos e valores wp_enqueuedos scripts e estilos ed usando os respectivos *_loader_tagganchos.

O seguinte funcionou para mim:

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 );
}

Eu tentei isso, mas não resolveu o problema. Pode ser que precisamos de alguma manipulação.
O WP Intermediate

11
Especulo que alguns de seus scripts de plug-ins (como os plug-ins de cache com a defertag) podem não estar sendo usados wp_enqueue_scripte, portanto, não seriam usados *_loader_tag. Você pode confirmar que, com meu snippet adicionado, no código-fonte do seu site, custom.jsele ainda type='text/javascript'existe?
David Espada

Não. Excluí o plug-in de cache total w3. O erro 3/8 desapareceu, mas ainda restavam 5.
O WP Intermediate

Bem, você pode rastrear a fonte dos cinco e ver se é possível editar as tags. Especulo novamente que eles provavelmente não usam wp_enqueue. Sugiro que você adicione um UPDATE à sua postagem original para refletir os 5 teimosos restantes, com referências de código e plug-in - pode ajudar um pouco mais.
David Sword

Senhor, Atualizei os erros com a imagem neste momento.
O WP Intermediate

12

O WordPress 5.3 apresenta uma maneira consideravelmente mais simples de conseguir isso. Ao registrar o suporte ao tema para HTML 5 para scripte style, o type=""atributo será omitido:

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

Funcionou obrigado.
Michael Rogers

11
esta é a maneira correta de fazer isso.
Ankit Chauhan

2
Agradável! Essa deve ser a resposta aceita.
Joe

3

Consegui isso no plugin solo / raízes. fez o trabalho na maior parte.

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

/**
 * Clean up output of stylesheet <link> tags
 */
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;
    }
    // Only display media if it is meaningful
    $media = $matches[3][0] !== '' && $matches[3][0] !== 'all' ? ' media="' . $matches[3][0] . '"' : '';

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

/**
 * Clean up output of <script> tags
 */
function clean_script_tag( $input ) {
    $input = str_replace( "type='text/javascript' ", '', $input );

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

você tentou isso?
The WP Intermediate -

3

As abordagens style_loader_tage script_loader_tagacima parecem que devem funcionar para qualquer marcação que o Wordpress esteja gerando, nos casos em que o tema / plugin estiver usando as funções de enfileiramento apropriadas.

Se você possui plug-ins ofensivos que não cooperam (o IIRC Jetpack é / foi um ofensor, a menos que uma versão mais recente desde que minha lembrança tenha revisado isso!), E você é inflexível em resolver esse problema, apesar de seus visitantes provavelmente não impactado de qualquer forma (o navegador renderizará a página muito bem!), você sempre pode fazer tudo e usar o buffer de saída:

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 );
}

Esteja avisado de que, embora seja uma solução, não é muito eficiente. Você estaria executando preg_replace()toda a saída "final" do Wordpress antes de ser enviada ao navegador do cliente, para cada solicitação.

O buffer de saída é ativado no início ( wp_loadedgancho), ou seja, quando o wp + theme + plugins + etc está totalmente carregado, e é desativado no último momento ( shutdowngancho), que é acionado imediatamente antes do PHP encerrar a execução. A regex deve funcionar com tudo , e isso pode ser muito conteúdo!

As abordagens style_loader_tage script_loader_tagacima executam apenas a regex em uma sequência muito pequena (a própria tag), portanto o impacto no desempenho é insignificante.

Suponho que se você tivesse um conteúdo relativamente estático e usasse uma camada de armazenamento em cache, poderia tentar mitigar a preocupação com o desempenho.

referências manuais do php:


Essa é a melhor resposta e só funciona corretamente, sem erros. Obrigado cara.
Ivijan Stefan Stipić

A solução só trabalhando
Timur Gafforov

Se alguém da Curioso, WordPress não parecem usar a style_loader_tagou script_loader_tagfiltros ao adicionar uma <script>tag para embutidos scripts. developer.wordpress.org/reference/classes/wp_scripts/…
firxworx:

1

Isso me ajudou muito:

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

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


A publicação específica acima mencionada no OP está aqui: css-tricks.com/forums/topic/clean-up-script-tags-in-wordpress/… Nota: o script está oculto, mas ao selecionar o texto, você pode leia-o e conforme publicado acima. LeoNovais não oferece nenhuma explicação adicional. Não sei por que o CSS Tricks ocultou seu script.
SherylHohman

1

De acordo com o código no script-loader.php, o atributo type é omitido quando o suporte ao tema html5 é adicionado com argumentos de script e estilo.

Veja os links abaixo:

function yourthemeprefix_theme_supportt() {
    add_theme_support(
        'html5',
        array(
            'script', // Fix for: The "type" attribute is unnecessary for JavaScript resources.
            'style',  // Fix for: The "type" attribute for the "style" element is not needed and should be omitted.
        )
    );
}
add_action( 'after_setup_theme', 'yourthemeprefix_theme_support' );

0

Construindo fora de @ realmag77. Isso aproveitará o plug-in de otimização automática para poder filtrar TODOS os atributos de tipo, mas não interromperá se não estiver instalado e ativado. O fallback funciona bem, mas os scripts e folhas de estilo carregados por plugins não serão filtrados. Não sei mais como filtrá-los, mas usando a parte Otimização automática.

/* ==========================================
   Remove type attribute on JS/CSS
   (requires Autoptimize plugin and Optimize HTML checked)
   but with fallback just in case
========================================== */

// If Autoptimize is installed and activated, remove type attributes for all 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 {

    // Fallback to remove type attributes except for those loaded through 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 );
    }
}

0
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 );
}

Bem-vindo ao WPSE, Jeevan. É útil se você incluir uma explicação com sua resposta sobre por que isso resolve o problema e como ele funciona.
Butlerblog

0

Bem, porque eu tentei vários outros códigos e os mencionados aqui, ainda existem vestígios dos text/javascriptarquivos principais do WordPress e também de outros códigos javascript embutidos e de plug-in. Depois de testar esse código, tudo foi resolvido:

// Remove w3 validator regarding "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 possa ajudar alguns :)

Obrigado


-1

Se você estiver enfrentando isso com o WP Fastest Cache, poderá excluir manualmente o atributo type no script PHP do plug-in, isso também deve funcionar com outros plug-ins, mas não conheço arquivos onde eles estão adicionando o atributo type. Para o WP Fastest Cache, você deve ir para a pasta wp-content / plugins / wp-quick-cache / inc e abrir js-utilities.php, procurar texto / javascript e excluí-lo com o atributo Eu recebi esse aviso no W3 Validator e o corrigi dessa maneira, também esteja ciente de que, quando você atualizar o plugin, a alteração poderá ser revertida. Para desativar a atualização do plugin, você pode editar o wpFastestCache e alterar a versão do plugin para algo como este 10.0.8.7.7


-1

Você pode otimizar o código HTML do seu site conforme desejar em 2 etapas:

  • Instale este plugin: https://wordpress.org/plugins/autoptimize/
  • Ative nas opções do plug-in 'Otimizar código HTML?'
  • Em functions.php do seu tema atual do wordpress, aplique o próximo código:

    add_filter ('autoptimize_html_after_minify', função ($ 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);

    e não se esqueça de alterar $ site_url no link do seu site sem barra no final


-1

Você pode usar as funções abaixo para remover atributos de tipo das tags de link e script.

Cole a função abaixo em functions.php para remover o type = text / css das linktags

/ * Remova o atributo "'type = text / css'" da folha de estilo * /
função wpse51581_hide_type ($ src) {
    return str_replace ("type = 'text / css'", '', $ src);
}
add_filter ('style_loader_tag', 'wpse51581_hide_type');

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

Cole a função abaixo em functions.php para remover o type = 'text / javascript' de script

// * Remova a tag de tipo do script e estilo
add_filter ('script_loader_tag', 'codeless_remove_type_attr', 10, 2);
função codeless_remove_type_attr ($ tag, $ handle) {
    retornar preg_replace ("/ type = ['\"] texto \ / (javascript | css) [' \ "] /", '', $ tag);
}

a resposta está correta, mas ainda alguém votou negativo
Infoconic
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.