Usando wp_add_inline_style sem uma folha de estilo


18

Preciso adicionar estilos embutidos personalizados ao cabeçalho de um tema personalizado que estou criando. Eu me deparei com a wp_add_inline_style()função, que funciona, mas realmente não combina comigo, pois depende de uma folha de estilo específica. Eu precisaria adicionar estilos embutidos no final da tag head sem uma dependência da folha de estilo.

Tentei definir a folha de estilo do tema ou uma inexistente. Nos dois casos, ele funciona, mas é um IMO de invasão suja (carregue a folha de estilo do tema duas vezes ou consulte um arquivo fantasma ...). Existe uma maneira adequada de adicionar estilos embutidos no cabeçalho sem depender de uma folha de estilo?

Claro, eu poderia adicioná-los diretamente no arquivo header.php, mas gostaria de evitar isso.

Respostas:


24

Você só precisa adicionar os estilos diretamente ao cabeçalho da página. A melhor maneira de fazer isso é usar o gancho de ação 'wp_head', supondo que você esteja usando um tema que possua o gancho. Igual a:

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

Confira o codex WP para saber mais sobre ganchos de ação.


Sem problemas! Ainda bem que pude ajudar.
SkyShab

Se (como eu) você deseja adicionar CSS embutido personalizado às páginas do painel, você pode usar a admin_headação.
Aquele cara brasileiro

16

Você pode simplesmente usar um identificador "fictício":

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

Eu realmente gosto dessa solução porque meu estilo tem um identificador e é enfileirado como se estivesse incluído em um arquivo .css.
Dev_masta 7/11

Usando falsa como a fonte de wp_register_style também não é permitido pela documentação codex.wordpress.org/Function_Reference/...
16patsle

3

Seu tema certamente tem uma folha de estilo padrão (caso contrário, nem seria carregada como um tema). Basta usar essa mesma folha de estilo como manipulador do seu CSS embutido. Um exemplo pode ser encontrado no functions.php do tema TwentyFifteen (código ignorado por questões de brevidade):

function twentyfifteen_scripts() {
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}

1
O OP solicitou especificamente um método diferente de usar wp_add_inline_style (). Ambos os métodos funcionam e não encontrei nenhum motivo convincente para usar wp_add_inline_style (). Se você souber de uma razão, eu gostaria de saber sobre isso.
SkyShab

Sua solução funciona, mas ainda é "hacky" de acordo com algo que ouvi de alguém da equipe do WP uma vez (se não me engano); não é exatamente a minha opinião . Acho que o OP estava pensando que não havia como fazer isso sem carregar a folha de estilos duas vezes ou usando um gancho fantasma. De qualquer forma, se eles não estão criando um plug-in, sempre há uma folha de estilos do tema. Também estou editando minha resposta, pois sua solução está documentada no Codex. :)
Casper

Eu brinquei com wp_add_inline_style (), e foi isso que encontrei. O benefício de anexar os estilos a uma folha de estilo é que, se houver desenfileiramento, os estilos não serão impressos. Mas qualquer um dos métodos os imprime na cabeça. Então, diga que você é um desenvolvedor de plug-ins e seus estilos são impressos na cabeça. Isso não tem nada a ver com os estilos de tema e, se um tema filho desenfileirar os estilos de tema principais para usá-lo, agora seus estilos de plug-in não serão exibidos. Portanto, o OP pode ter especificado essa parte da solicitação por esse motivo.
SkyShab
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.