web-development-kb-pt.site

Como adiciono opções CSS ao meu plugin sem usar estilos inline?

Eu lancei recentemente um plugin, WP Coda Slider , que usa códigos de acesso para adicionar um controle deslizante jQuery a qualquer post 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 inline. Eu quero que as opções sejam adicionadas dinamicamente ao arquivo CSS quando ele é chamado.

Também gostaria de evitar usar fopen ou gravar em um arquivo por questões de segurança.

É algo tão fácil de realizar ou seria melhor adicionar as opções de estilo diretamente na página?

plugin-developmentcssoptions
25
Chris_O

Use wp_register_style e wp_enqueue_style para adicionar a folha de estilo. NÃO basta adicionar um link de folha de estilo para wp_head. Os estilos de enfileiramento permitem que outros plug-ins ou temas modifiquem a folha de estilo, se necessário.

Sua folha de estilos 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; ?>;
}
27
Doug

Construir dinamicamente um arquivo CSS e, em seguida, carregá-lo adiciona uma enorme carga de desempenho ao que deve ser um lance muito baixo de largura de banda de adicionar um arquivo CSS, especialmente se houver variáveis ​​no CSS que serão processadas pelo WP. Como são dois arquivos diferentes sendo criados para um carregamento de página, WP inicia duas vezes e executa todas as consultas DB duas vezes, e é uma grande bagunça.

Se o controle deslizante estiver apenas em uma página e você quiser que os estilos sejam definidos dinamicamente, sua melhor opção é adicionar um bloco de estilo ao cabeçalho.

Em ordem de desempenho:

  1. Adicione um pequeno bloco de estilos no cabeçalho, dinamicamente criado - muito rápido
  2. Adicione uma folha de estilos não dinâmica por meio de wp_enqueue_style - Medium
  3. Adicione uma folha de estilo dinâmica via wp_enqueue_style - Muito lento
10
Dan Gayle

É assim que costumo fazer isso:

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' );
2
sorich87

Eu tive dificuldade com todas as recomendações deste tipo - talvez eu seja um pouco grosso, 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. Só carrega nas páginas que usam o plugin. Ele 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 era um pouco grosso.

1
chazza