it-swarm-ru.tech

Как добавить опции CSS в мой плагин без использования встроенных стилей?

Недавно я выпустил плагин WP Coda Slider , который использует шорткоды для добавления ползунка jQuery к любому сообщению или странице. Я добавляю страницу параметров в следующей версии, и я хотел бы включить некоторые параметры CSS, но я не хочу, чтобы плагин добавлял варианты стилей как встроенный CSS. Я хочу, чтобы варианты выбора динамически добавлялись в файл CSS при его вызове.

Я также хотел бы избежать использования fopen или записи в файл из-за проблем безопасности.

Легко ли выполнить что-то подобное, или мне лучше добавить стили непосредственно на страницу?

25
Chris_O

Используйте 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; ?>;
}
27
Doug

Динамическое создание файла CSS и его загрузка добавляет ОГРОМНУЮ нагрузку на производительность при добавлении файла CSS с очень низкой пропускной способностью, особенно если в CSS есть переменные, которые будут обрабатываться через WP. Поскольку для одной загрузки страницы создаются два разных файла, WP запускается дважды и выполняет все запросы к БД дважды, и это большой беспорядок.

Если ваш слайдер будет только на одной странице, и вы хотите, чтобы стили устанавливались динамически, тогда вам лучше всего добавить блок стиля в заголовок.

В порядке исполнения:

  1. Добавить небольшой блок стилей в заголовок, динамически создаваемый - очень быстро
  2. Добавить нединамическую таблицу стилей с помощью wp_enqueue_style - Medium
  3. Добавить динамическую таблицу стилей с помощью wp_enqueue_style - очень медленно
10
Dan Gayle

Вот как я обычно это делаю:

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

У меня были трудности со всеми рекомендациями этого рода - возможно, я немного толстый, или, возможно, участники потеряли общий контакт.

Я остановился на кодировании этого в 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, что хорошо для меня. Я не вижу, как это может быть более эффективным или более ясным.

.... но, возможно, я ошибаюсь - я сказал, что был немного толстым.

1
chazza