Удаление атрибута type из тегов script и style, добавляемых WordPress

WordPress 5.3 представляет значительно более простой способ достичь этого. Регистрируя поддержку HTML5 для script и style в теме, атрибут type="" будет опущен:

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

Вы можете удалить атрибуты type='*' и их значения из скриптов и стилей, загружаемых через wp_enqueue, используя соответствующие хуки *_loader_tag.

Следующий код сработал у меня:

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

Получил это из плагина soil / roots. В основном справился с задачей.

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

/**
 * Очистка вывода тегов <link> для таблиц стилей
 */
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;
    }
    // Выводим media только если оно имеет значение
    $media = $matches[3][0] !== '' && $matches[3][0] !== 'all' ? ' media="' . $matches[3][0] . '"' : '';

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

/**
 * Очистка вывода тегов <script>
 */
function clean_script_tag( $input ) {
    $input = str_replace( "type='text/javascript' ", '', $input );

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

Подходы с использованием style_loader_tag и script_loader_tag, описанные выше, должны работать с любым HTML-кодом, генерируемым WordPress, при условии, что тема или плагин используют правильные функции для подключения скриптов и стилей.

Если у вас есть проблемные плагины, которые не сотрудничают (например, Jetpack в некоторых версиях мог быть таким нарушителем), и вы решительно настроены решить эту проблему, несмотря на то, что посетители вашего сайта вряд ли заметят разницу (их браузеры отобразят страницу корректно!), вы можете использовать буферизацию вывода:

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

Предупреждаем: хотя это решение работает, оно не очень эффективно. Функция preg_replace() будет выполняться для всего окончательного HTML-кода, сгенерированного WordPress, перед отправкой в браузер клиента, для каждого запроса.

Буферизация вывода включается в начале (wp_loaded хук), то есть когда WordPress, тема, плагины и т.д. полностью загружены, и отключается в последний момент (shutdown хук), который срабатывает непосредственно перед завершением работы PHP. Регулярное выражение должно обработать весь контент, а его может быть очень много!

Подходы с style_loader_tag и script_loader_tag выполняют замену только для небольших строк (самих тегов), поэтому их влияние на производительность минимально.

Если у вас относительно статичный контент и используется кеширование, это может частично решить проблему производительности.

Ссылки на документацию PHP:

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

Это очень помогло мне:

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

Спасибо css-tricks (LeoNovais): https://css-tricks.com/forums/topic/clean-up-script-tags-in-wordpress/#post-246425

Согласно коду в script-loader.php, атрибут type опускается, когда добавлена поддержка html5 в теме с аргументами script и style.

Смотрите ссылки ниже:

• 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', // Исправление: Атрибут "type" не обязателен для ресурсов JavaScript.
            'style',  // Исправление: Атрибут "type" для элемента "style" не нужен и должен быть опущен.
        )
    );
}
add_action( 'after_setup_theme', 'yourthemeprefix_theme_support' );

Развивая решение от @realmag77. Этот код использует плагин Autoptimize для удаления ВСЕХ атрибутов type, но также имеет резервный вариант на случай, если плагин не установлен или не активирован. Резервный вариант работает нормально, но скрипты и таблицы стилей, загружаемые через плагины, не будут отфильтрованы. Я не знаю другого способа их отфильтровать, кроме как через функционал Autoptimize.

/* ==========================================
   Удаление атрибута type у JS/CSS
   (требует плагин Autoptimize и включенную опцию "Оптимизировать HTML")
   но с резервным вариантом на всякий случай
========================================== */

// Если Autoptimize установлен и активирован, удаляем атрибуты type для всего 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 {

    // Резервный вариант для удаления атрибутов type, кроме загружаемых через плагины
    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"); // Запускаем буферизацию вывода с callback-функцией
}

add_action('shutdown', 'prefix_output_buffer_end');
function prefix_output_buffer_end() { 
    ob_end_flush(); // Завершаем буферизацию и выводим содержимое
}

function prefix_output_callback($buffer) {
    // Удаляем атрибуты type="text/javascript" и type="text/css" из HTML
    return preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
}

Вы можете использовать приведенные ниже функции для удаления атрибутов type из тегов link и script.

Вставьте следующую функцию в functions.php для удаления атрибута type='text/css' из тегов link

/* Удаляет атрибут " 'type=text/css' " из стилей */
function wpse51581_hide_type($src) {
    return str_replace("type='text/css'", '', $src);
}
add_filter('style_loader_tag', 'wpse51581_hide_type');

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

Вставьте следующую функцию в functions.php для удаления атрибута type='text/javascript' из тегов script

// Удаляет атрибут type из тегов script и 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 );
}

Ну, потому что я перепробовал кучу других кодов и тех, что упомянуты здесь, но следы text/javascript все равно остаются в файлах ядра WordPress, а также в других плагинах и встроенных javascript-кодах. После тестирования этого кода проблема была полностью решена:

// Удаление предупреждения валидатора w3 касательно "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 );
}

Надеюсь, это кому-то поможет :)

Спасибо

Если вы столкнулись с этой проблемой в WP Fastest Cache, вы можете вручную удалить атрибут type в PHP-скрипте плагина. Этот метод должен работать и с другими плагинами, но я не знаю точных файлов, где они добавляют атрибут type. Для WP Fastest Cache вам нужно перейти в папку wp-content/plugins/wp-fastest-cache/inc и открыть файл js-utilities.php, затем найти text/javascript и удалить его вместе с атрибутом. У меня было это предупреждение в W3 Validator, и я исправил его таким способом. Также учтите, что при обновлении плагина это изменение может быть отменено. Чтобы отключить обновления плагина, вы можете отредактировать wpFastestCache и изменить версию плагина на что-то вроде 10.0.8.7.7.

Вы можете оптимизировать HTML-код вашего сайта по своему усмотрению в 2 шага:

• Установите этот плагин: https://wordpress.org/plugins/autoptimize/
• Включите в настройках плагина опцию 'Optimize HTML Code?'

• В файле functions.php вашей текущей темы WordPress добавьте следующий код:

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

  и не забудьте заменить $site_url на ссылку вашего сайта без слеша в конце