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.

terzag
fonte

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.

SkyShab
fonte
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; }' );
Flix
fonte
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 );
}
Casper
fonte
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