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


26

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

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

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


@Chris_O : я думал о том же самом. То, что я хочу, - это способ вызова wp_enqueue_style()wp_enqueue_script()) с именем функции вместо имени файла, и чтобы моя функция генерировала CSS (или JS), но все же в конечном итоге включала его через связанную таблицу стилей. Насколько я знаю, это невозможно с wp_equeue_*()функциями. Может быть, мы должны представить трак билет?
Майк Шинкель

@MikeSchinkel: Это был бы очень логичный способ использовать функции wp_enqueue. Я бы добавил поддержку этого билета.
Chris_O

@Chris_O: Я только что видел ответ @ Дуга; Я сделал неверное предположение, что вы уже знали это. Если бы я понял, что это не тот случай, я бы указал вам здесь: wordpress.stackexchange.com/questions/556/#562
MikeSchinkel

@MikeSchinkel Я знал о wp_register и wp_enqueue. Я искал способ построить таблицу стилей на основе значений на странице настроек плагина.
Chris_O

@Chris_O : Ах. Мне нравится думать о себе как о ком-то, кто все еще может видеть то, чего не хватает другим в решении, даже после того, как я изучу решение (то есть большинство экспертов не являются хорошими учителями, и хотя я не лучший эксперт, я вообще хороший учитель. ) OTOH, это тот, который я пропустил, извините. :)
MikeSchinkel

Ответы:


27

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

3
Кроме того, поскольку значения меняются только при изменении значений на странице параметров, вы можете создать файл CSS при сохранении. Вы также можете хранить CSS-файлы в каталоге плагинов, так что это немного эффективнее, чем запускать PHP-файл для каждого CSS-запроса с использованием include и т. Д.
Хакре

1
Благодарность! работал хорошо. Но я получил фатальную ошибку get_option () ... не определено. Затем я загрузил файл wp-config.php и затем исправил проблему.
Сумит Харшан

Сумит, не могли бы вы объяснить, как вы использовали get_option внутри пользовательского файла CSS? Большое спасибо!
Антонио Петричка

10

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

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

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

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

@ Дэн-Гейл Очень хорошая мысль. Плагин можно использовать более чем на одной странице, а некоторые пользователи используют его на 2 или 3 страницах. Он ставит в очередь только текущую статическую таблицу стилей и js на страницах, которые имеют шорткод.
Chris_O

Я согласен с Дэном Гейлом, хотя вы проголосовали за мой ответ. Добавление небольшого блока CSS в wp_head было бы намного эффективнее с точки зрения производительности, чем необходимость загрузки отдельной таблицы стилей при каждом просмотре страницы (даже если она ограничена несколькими публикациями / страницами с шорткодом). Во-первых, единственная причина использования отдельных таблиц стилей заключается в том, что они могут кэшироваться браузером . Динамические таблицы стилей не могут быть кэшированы.
Дуг

2
Это все еще правильный путь?
Дейв Кисс

2

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

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

1

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

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

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


Вы должны загружать только <link>элементы в
заголовке

Yerss. Это было бы потому, что ваш CSS хочет повлиять на все, начиная с верхней части страницы и вниз. Я с удовольствием влияю только на то, что идет после тега h1. Я не смог заставить ни один из примеров работать (я думаю, что они могут быть плохо объяснены). Попробуйте сами на некотором тестовом HTML. Если я ошибаюсь, скажите мне :)
chazza

@chazza Это не единственная причина. Когда браузер обнаруживает какие-либо стили после записи тега body, он останавливает все, что он делает, пока этот стиль не будет загружен и применен, что отрицательно сказывается на производительности и приводит к перекомпоновке экрана и вспышкам текста без стилей. Однако, если это не имеет значения, добавьте эти CSS-файлы, как вы сказали. Я делаю это все время, и в конце дня это нормально. Не оптимально, но хорошо.
Дэн Гэйл

0

Обновление с 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' );
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.