Как добавить параметры CSS в свой плагин без использования встроенных стилей?
Недавно я выпустил плагин WP Coda Slider, который использует короткие коды для добавления слайдера jQuery к любому сообщению или странице. Я добавляю страницу параметров в следующей версии, и я хотел бы включить некоторые параметры CSS, но я не хочу, чтобы плагин добавлял варианты стилей в качестве встроенного CSS. Я хочу, чтобы варианты динамически добавлялись в файл CSS при его вызове.
Я также хотел бы избежать использования fopen или записи в файл из-за проблем с безопасностью.
Является что-то подобное легко выполнить, или мне было бы лучше просто добавить выбор стиля непосредственно на страницу?
5 answers
Использовать wp_register_style и wp_enqueue_style чтобы добавить таблицу стилей. НЕ просто добавляйте ссылку на таблицу стилей в wp_head. Стили очереди позволяют другим плагинам или темам изменять таблицу стилей при необходимости.
Ваша таблица стилей может быть файлом .php:
wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');
My-stylesheet.php будет выглядеть так:
<?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; ?>;
}
Динамическое создание CSS-файла и его последующая загрузка добавляет ОГРОМНУЮ нагрузку на производительность к тому, что должно быть связано с очень низкой пропускной способностью при добавлении CSS-файла, особенно если в CSS есть переменные, которые будут обрабатываться через WP. Поскольку для загрузки одной страницы создаются два разных файла, WP запускается дважды и дважды выполняет все запросы к БД, и это большой беспорядок.
Если ваш слайдер будет находиться только на одной странице, и вы хотите, чтобы стили задавались динамически, то лучше всего добавить блок стиля в заголовок.
В порядке выполнения:
- Добавьте небольшой блок стилей в заголовок, динамически создаваемый - Очень быстро
- Добавьте нединамическую таблицу стилей через wp_enqueue_style - Среду
- Добавьте динамическую таблицу стилей через wp_enqueue_style - Очень медленно
Вот как я обычно это делаю:
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' );
У меня возникли трудности со всеми рекомендациями такого рода - может быть, я немного туповат, или, может быть, участники потеряли общий язык.
Я остановился на кодировании этого в файле php плагина:-
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'/>";
Кажется, это работает. Он загружается только на те страницы, которые используют плагин. Он загружается после тега h1, что меня вполне устраивает. Я не вижу, как это может быть более эффективным или более понятным.
....но, возможно, я ошибаюсь - я действительно сказал, что был немного туповат.
Обновление с Wordpress 3.3
Существует функция под названием wp_add_inline_style, которую можно использовать для динамического добавления стилей на основе параметров темы/плагина. Это можно использовать для добавления небольшого css-файла в голову, который должен быть быстрым и эффективным.
<?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' );