Como inserir corretamente uma folha de estilo no wp_head

Estou gerando CSS crítico para cada página e categoria. No momento, estou inserindo a folha de estilo através de functions.php assim usando o echo .

 function criticalCSS_wp_head() { if (is_front_page() ){ echo ''; include get_stylesheet_directory() . '/css/critical/ccss-index.min.css'; echo ''; } elseif (is_category('orange') ){ echo ''; include get_stylesheet_directory() . '/css/critical/ccss-orange.min.css'; echo ''; } elseif (is_page('hello-world') ){ echo ''; include get_stylesheet_directory() . '/css/critical/ccss-hello-world.min.css'; echo ''; } elseif (is_single() ){ echo ''; include get_stylesheet_directory() . '/css/critical/ccss-single.min.css'; echo ''; } } add_action( 'wp_head', 'criticalCSS_wp_head' ); 
  1. Qual seria a melhor maneira de include essas folhas de estilo no que diz respeito ao estilo de codificação de melhores práticas e à velocidade implacável pura , o que significa evitar chamadas PHP, chamadas de database e assim por diante.
  2. É melhor codificar diretamente o CSS crítico no modelo de página, talvez, como escrito nesta publicação (# 10) vinculado a partir da documentação oficial do WordPress Optimization ?

editar Uma vez que esta questão foi respondida, esqueci de mencionar que o CSS crítico precisa ser incorporado no DOM e não estar vinculado como um arquivo para evitar o bloqueio de renderização. Então eu ainda estou procurando uma maneira de usar o CSS crítico com wp_enqueue_scripts . Talvez armazene o conteúdo do arquivo em uma variável e wp_enqueue_scripts que quando wp_enqueue_scripts pede?

Solutions Collecting From Web of "Como inserir corretamente uma folha de estilo no wp_head"

Você pode fazê-lo assim, coloque-o em suas functions.php :

Esta é a maneira correta de fazê-lo “o caminho WordPress”.

 < ?php // Check if function exisits if (!function_exists('rg_templateScriptSetup')) { // if not, create one function rg_templateScriptSetup() { // Register styles in WordPress wp_register_style('prefix-basic-css', get_template_directory_uri(). '/css/basic-style.css'); // Register styles in WordPress wp_register_style('first-css', get_template_directory_uri(). '/css/first-style.css'); // Register styles in WordPress wp_register_style('second-css', get_template_directory_uri(). '/css/second-style.css'); if (is_page('your_page_name') { // enqueue your first style wp_enqueue_style('first-css'); } else if(is_page('your_other_page_name')) { // enqueue your second style wp_enqueue_style('second-css'); } etc... } // End of Stylesheet logic / setup add_action('wp_enqueue_scripts', 'rg_templateScriptSetup'); ?> 

Por quê?

Como o WordPress oferece todas as ferramentas necessárias para alcançar esse objective.

O que exatamente acontece aqui:

  1. Primeiro, verificamos se a function já existe
  2. se não, criamos nossa function
  3. então, “registramos nossos estilos”, basicamente dizendo o WordPress: aqui, pegue esses CSS ‘, então … WordPress possui nossas folhas de estilo no bolso, mas não as usa ainda
  4. então usamos a function native WordPress is_page em combinação com uma instrução if (se (is_page (‘your-page-name’))
  5. no caso de se a declaração if retornar bool ‘true’ ativamos o css de acordo com nossa condição (no seu caso, o nome da página).

Espero que isso ajude.

Caso essa resposta o tenha ajudado, marque-o como correto, e não apenas pegue o código, obrigado.

Pergunta pessoal: o que você quer dizer com crítica? Muito importante!

A maneira correta e geralmente aceita de adicionar o CSS ou o JS é para enqueue-os. Dessa forma, se você diz um tema + 2 plugins que todos querem enqueage jQuery, você acabou com 1 cópia carregada – não 3.

Em functions.php:

 add_action('wp_enqueue_scripts', 'my_enqueues'); function my_enqueues() { if(is_front_page()) { wp_enqueue_style('front-page', get_stylesheet_directory() . '/css/critical/ccss-index.min.css', array(), '', 'screen'); } elseif(is_category('orange')) { wp_enqueue_style('orange', get_stylesheet_directory() . '/css/critical/ccss-orange.min.css', array(), '', 'screen'); } } 

Se seus estilos por página são curtos, você pode realmente enqueue os estilos inline, para que o navegador da Web não esteja solicitando um recurso separado.

 add_action('wp_enqueue_scripts', 'my_inline_enqueues'); function my_inline_enqueues() { wp_add_inline_style('front-page', '.myfrontpageclass { font-size:6em; }' ); } 

Sugestão final: não conheço o conteúdo das suas folhas de estilo, mas sugeriria que seja mais fácil e simples carregar essas páginas se você include apenas todos os CSS no arquivo style.css do tema. Use body_class para atingir o que você precisa e mantenha tudo em um arquivo minificado.