Como adiciono opções de CSS ao meu plug-in sem usar estilos embutidos?

26

Lancei recentemente um plug-in, o WP Coda Slider , que usa códigos de acesso para adicionar um controle deslizante jQuery a qualquer postagem ou página. Estou adicionando uma página de opções na próxima versão e gostaria de incluir algumas opções de CSS, mas não quero que o plug-in adicione as opções de estilo como CSS embutido. Quero que as opções sejam adicionadas dinamicamente ao arquivo CSS quando for chamado.

Também gostaria de evitar o uso de fopen ou a gravação em um arquivo por questões de segurança.

É algo fácil assim ou seria melhor adicionar as opções de estilo diretamente à página?

Chris_O
fonte
@ Chris_O : Estive pensando quase exatamente na mesma coisa. O que estou querendo é uma maneira de chamar wp_enqueue_style()(e wp_enqueue_script()) com um nome de função em vez de um nome de arquivo e fazer com que minha função gere o CSS (ou JS), mas ainda o inclua por meio de uma folha de estilo vinculada. Tanto quanto sei, isso não é possível com as wp_equeue_*()funções. Talvez devêssemos enviar um bilhete trac?
MikeSchinkel
@ MikeSchinkel: Essa seria uma maneira muito lógica de usar as funções wp_enqueue. Eu adicionaria suporte a esse ticket.
Chris_O
@ Chris_O: Acabei de ver a resposta de @ Doug; Fiz uma suposição ruim de que você já sabia disso. Se eu percebi que não era o caso, eu teria apontado você aqui: wordpress.stackexchange.com/questions/556/#562
MikeSchinkel
@ MikeSchinkel eu sabia sobre wp_register e wp_enqueue. Eu estava procurando uma maneira de criar a folha de estilos com base nos valores da página de opções do plugin.
Chris_O
@Chris_O : Ah. Eu gosto de pensar em mim como alguém que ainda pode ver o que os outros estão perdendo em uma solução, mesmo depois de aprender a solução (ou seja, a maioria dos especialistas não são bons professores e, embora eu não seja o melhor especialista, geralmente sou um bom professor). ) OTOH, este é um que eu perdi, desculpe. :)
MikeSchinkel

Respostas:

27

Use wp_register_stylee wp_enqueue_stylepara adicionar a folha de estilo. NÃO basta adicionar um link para a folha de estilo wp_head. Os estilos de enfileiramento permitem que outros plugins ou temas modifiquem a folha de estilo, se necessário.

Sua folha de estilo pode ser um arquivo .php:

wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');

my-stylesheet.php ficaria assim:

<?php
// We'll be outputting CSS
header('Content-type: text/css');

include('my-plugin-data.php');    
?>

body {
  background: <?php echo $my_background_variable; ?>;
  font-size: <?php echo $my_font_size; ?>;
}
Doug
fonte
3
Além disso - como os valores mudam apenas quando os valores na página de opções são alterados - você pode gerar o arquivo CSS ao salvar. Você também pode armazenar arquivos CSS no diretório do plug-in, portanto isso é um pouco mais eficiente do que executar um arquivo PHP em cada solicitação CSS com inclusões etc.
hakre
11
Obrigado! funcionou bem. Mas eu recebi o erro fatal get_option () ... é indefinido. Depois carreguei o arquivo wp-config.php e corrigi o problema.
Sumith Harshan
Sumith, você poderia explicar como usou a opção get_ dentro do arquivo CSS personalizado? Muito Obrigado!
Antonio Petricca 9/09/15
10

Criar dinamicamente um arquivo CSS e carregá-lo adiciona uma ENORME carga de desempenho ao que deveria ser uma oferta de largura de banda muito baixa para adicionar um arquivo CSS, especialmente se houver variáveis ​​no CSS que serão processadas pelo WP. Como são criados dois arquivos diferentes para o carregamento de uma página, o WP inicia duas vezes e executa todas as consultas do banco de dados duas vezes, e é uma grande bagunça.

Se o controle deslizante estiver em apenas uma página e você desejar definir os estilos dinamicamente, sua melhor aposta será adicionar um bloco de estilo ao cabeçalho.

Em ordem de desempenho:

  1. Adicione um pequeno bloco de estilos no cabeçalho, criado dinamicamente - Muito rápido
  2. Adicionar uma folha de estilo não dinâmica via wp_enqueue_style - Médio
  3. Adicione uma folha de estilo dinâmica via wp_enqueue_style - Muito lenta
Dan Gayle
fonte
@ Dan-gayle Muito bom ponto. O plug-in pode ser usado em mais de uma página e alguns usuários o estão usando em 2 ou 3 páginas. Enfileira apenas a folha de estilos estática atual e js nas páginas que possuem o código abreviado.
Chris_O
Eu concordo com Dan Gayle, mesmo que você tenha votado na minha resposta. Adicionar um pequeno bloco CSS ao wp_head seria muito melhor em termos de desempenho do que exigir que uma folha de estilo separada fosse baixada em todas as visualizações de página (mesmo que restritas às poucas postagens / páginas com o código abreviado). O único motivo para usar folhas de estilo separadas em primeiro lugar é que elas podem ser armazenadas em cache pelo navegador . As folhas de estilo dinâmicas não podem ser armazenadas em cache.
Doug
2
Ainda é o caminho certo a seguir?
Dave Kiss
2

É assim que eu costumo fazer:

function build_stylesheet_url() {
    echo '<link rel="stylesheet" href="' . $url . 'stylesheetname.css?build=' . date( "Ymd", strtotime( '-24 days' ) ) . '" type="text/css" media="screen" />';
}

function build_stylesheet_content() {
    if( isset( $_GET['build'] ) && addslashes( $_GET['build'] ) == date( "Ymd", strtotime( '-24 days' ) ) ) {
        header("Content-type: text/css");
        echo "/* Something */";
        define( 'DONOTCACHEPAGE', 1 ); // don't let wp-super-cache cache this page.
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );
sorich87
fonte
1

Eu tive dificuldades com todas as recomendações deste tipo - talvez eu seja um pouco grossa, ou talvez os colaboradores tenham perdido o toque comum.

Eu decidi codificar isso no arquivo php do plug-in: -

echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/css.css' type='text/css' rel='stylesheet' />";
echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/public.css' rel='stylesheet' type='text/css'/>";

Parece funcionar. Ele é carregado apenas nas páginas que usam o plugin. Carrega após a tag h1, o que é bom para mim. Não vejo como isso poderia ser mais eficiente ou mais claro.

.... mas talvez eu esteja errado - eu disse que estava um pouco grossa.

chazza
fonte
Você só deve carregar <link>elementos no cabeçalho da página
shea
Yerss. Isso seria porque seu CSS quer afetar tudo, desde o topo da página para baixo. Fico feliz em afetar apenas o que vem após a tag h1. Não consegui fazer nenhum dos exemplos funcionar (acho que eles podem ser mal explicados). Experimente você mesmo em algum pedaço de teste html. Se eu estiver errado dizer-me :)
chazza
@chazza Essa não é a única razão. Quando um navegador detecta qualquer estilo depois que a tag body é gravada, ele para o que estiver fazendo até que o estilo seja carregado e aplicado, o que é ruim para o desempenho e leva a reflexos na tela e flashes de texto sem estilo. No entanto, se isso realmente não importa, jogue esses arquivos CSS como você disse. Eu faço isso o tempo todo, e no final do dia está tudo bem. Não é o ideal, mas é bom.
Dan Gayle
0

Atualização desde o Wordpress 3.3

Existe uma função chamada wp_add_inline_style que pode ser usada para adicionar estilos dinamicamente com base nas opções de tema / plugin. Isso pode ser usado para adicionar um pequeno arquivo css na cabeça, que deve ser rápido e eficiente.

<?php
function myprefix_scripts() {

    wp_enqueue_style('name-of-style-css', plugin_dir_path(__FILE__) . '/css/ccsfilename.css');

    $css = get_option( 'loader_css', 'default css goes here for when there is no value' );

    //or for Example
    $color = get_option( 'custom_plugin_color', 'red' ); //red is default value if value is not set
    $css = ".mycolor{
                background: {$color};
           }";

    wp_add_inline_style('name-of-style-css', $css);

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );
Lyle Bennett
fonte