Как прописать rel="preload" к определенному стилю через функции WP?

Question

[thanos_universe]

В сети гуляет такой код:

function add_rel_preload($html, $handle, $href, $media) {

	if (is_admin())
		return $html;
	 $html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />
EOT;
	return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

Он добавляет в <link>

rel='preload' as='style' и onload="this.onload=null;this.rel='stylesheet'"

ко всем стилям сайта

Как его прописать у отдельных стилей (например, style.css или bootstrap.css), но оставить функцию wp_enqueue_style, через которую они выведены?

Comments

[Владимир Брумер]

add_filter('style_loader_tag',

if(!function_exists('add_rel_attribute_style')){function add_rel_attribute_style($tag,$handle){
  $handles=array('mobile','mydashicons');//рабочие имена поключаемых файлов wp_enqueue_style('mydashicons',
  foreach($handles as $defer_script){if($defer_script===$handle){
    return str_replace('rel','rel="preload prefetch" rel',$tag);//то, что хотите прописать в атрибуте rel="preload prefetch"
  }}return $tag;}}
add_filter('style_loader_tag','add_rel_attribute_style',10,2);

[Владимир Брумер]

вот только как и написал Алекс

В большинстве случаев (и в вашем скорее всего тоже) со стилями он ничего не даст вообще

я не увидел от этого толку...

[Владимир Брумер]

тут ещё пример полного варианта функции

add_filter( 'style_loader_tag',  'remove_https_http', 10, 4 );
function remove_https_styles( $html, $handle, $href, $media ){

[thanos_universe]

Владимир Брумер, rel="stylesheet" остается и вся верстка едет... по идее ведь должен заменять?

[thanos_universe]

Владимир Брумер, и этих атрибутов нет: as='style' и onload="this.onload=null;this.rel='stylesheet'". Буду сильно признателен за уточнение кода...

[thanos_universe]

Владимир Брумер, смысл в том, чтобы важному файлу выставить приоритет... и не блокировать отрисовку html.

[Владимир Брумер]

thanos_universe,

if(!function_exists('add_rel_attribute_style')){function add_rel_attribute_style($tag,$handle){
  $handles=array('mydashicons');
  foreach($handles as $defer_script){if($defer_script===$handle){
    return str_replace('rel','rel="preload prefetch" as="style" onload="this.onload=null;this.rel=\'stylesheet\'" rel',$tag);
  }}return $tag;}}
add_filter('style_loader_tag','add_rel_attribute_style',10,2);

[Владимир Брумер]

thanos_universe, но у меня иконки тоже отъежают(в фаирфоксе. в остальных браузерах норм)
зато в консоли то что надо

[Владимир Брумер]

люди подключают ручками в хеадере

<link rel="preload prefetch" as="style" onload="this.onload=null;this.rel='stylesheet'".......

а в функциональном файле wp_enqueue_style('mydashicons',
получается 2 подключения и получают резульат... вопрос не так давно человек задавал... но кроме как костыля не придумали вроди ни чего...

[thanos_universe]

Владимир Брумер, у меня почему-то rel="stylesheet" остается... и id не появляется как у вас...хм...

[Владимир Брумер]

thanos_universe, вот откровенно - я сильно не задавался этим вопросом...ньюансов не знаю погуглите фильтр. где-то вроди и на вордпрес орг обсуждалось
я лиш его использовал для асинхронности скриптов

if(!function_exists('VAB_add_async_attribute')){function VAB_add_async_attribute($tag,$handle){
	$handles=array('tabs','click','lightbox','fresco','RadiVo');
	foreach($handles as $defer_script){if($defer_script===$handle){return str_replace('src','async="async" src',$tag);}}return $tag;}}
add_filter('script_loader_tag','VAB_add_async_attribute',10,2);

в остальных случаях, тоже криво работало.. почему у Вас так отображается у меня нет ответа
вариантов куча
потестируйте...

[Владимир Брумер]

у меня почему-то rel="stylesheet" остается... и id не появляется как у вас...хм...

попробуйте на стантартных темах без плагинов....

[thanos_universe]

Владимир Брумер, попробовал на голом и свежем WP. Если так прописать в functions, то stylesheet всегда будет... странно что у вас его нет (и значок event появляется)

[Владимир Брумер]

thanos_universe, ну для начала скажем у меня в мозиле все едет, а в других браузерах нормально отображается, но в них нет rel="preload". думаю поэтому Мы и видим в мозиле

<link rel="preload" as="style" onload="this.rel='stylesheet'"

ибо не работает как надо
теперь вопрос что делает onload="this.rel='stylesheet'" ?

Событие onload используется как указатель, что веб-страница полностью загружена, включая содержание, изображения, стилевые файлы и внешние скрипты.

иными словами, когда страница загрузилась полностью, то rel="preload" меняется rel="stylesheet" , таблицы подключаются и все корректно отображается...думаю в этом и смысл трюка

Answer 1

[Alex]

Разберитесь для чего нужен этот тег. В большинстве случаев (и в вашем скорее всего тоже) со стилями он ничего не даст вообще.

Касательно вашего вопроса: если вы заранее знаете какие файлы вам нужны — просто добавьте этот тег в вашу тему через хук wp_head

Comments

[thanos_universe]

Я прекрасно понимаю, что именно он делает, и какой там КПД от использования. Вопрос ведь технического характера. "просто добавьте этот тег в вашу тему через wp_head" - для style.css к примеру как вы предлагаете это реализовать? "просто добавьте" - если бы все было просто, то я бы не задавал вопрос.

[Alex]

Просто "напечатейте" тег:

add_action('wp_head', function () {
  echo "<link rel='preload' as='style' href=''>";
})

[thanos_universe]

Alex, а с кодом wp enqueue style что делать? стили уже прописаны. он заменит или добавит дубль? судя по всему сделает дубль (echo).

[thanos_universe]

Alex, в моем примере из вопроса, все добавляется к существующим стилям с выводом через "wp enqueue style".

[Alex]

thanos_universe, Как я и написал с самого начала, ваш пример бессмысленный. Но если очень надо:
Посмотрите как работает WP_Styles::do_item() и на хуки которые он вызывает (style_loader_tag) и какие параметры в него передаются.
В нем вам достаточно через регулярку или ещё как изменять теги так как пожелаете