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

Question

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

7 сент. 2010 г., 07:11:12

Просмотры: 28.6K

Голосов: 27

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

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

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

Chris_O

20.6K

разработка плагинов css настройки

Комментарии

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

MikeSchinkel

7 сент. 2010 г. 09:44:51

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

Chris_O

7 сент. 2010 г. 10:24:01

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

MikeSchinkel

8 сент. 2010 г. 03:12:01

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

Chris_O

8 сент. 2010 г. 03:37:36

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

MikeSchinkel

8 сент. 2010 г. 03:40:57

Все ответы на вопрос

Комментарии

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

hakre

8 сент. 2010 г. 00:44:26

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

Sumith Harshan

2 янв. 2014 г. 15:43:03

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

Antonio Petricca

9 сент. 2015 г. 14:50:33

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

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

По возрастанию влияния на производительность:

Добавить небольшой блок стилей в заголовок, динамически сгенерированный — Очень быстро
Добавить статическую таблицу стилей через wp_enqueue_style — Средняя скорость
Добавить динамическую таблицу стилей через wp_enqueue_style — Очень медленно

Dan Gayle

6.15K

7 сент. 2010 г. 20:10:37

Комментарии

@Dan-gayle Очень хорошее замечание. Плагин можно использовать на нескольких страницах, и некоторые пользователи применяют его на 2 или 3 страницах. Он подключает статические таблицы стилей и JS только на страницах, где есть шорткод.

Chris_O

7 сент. 2010 г. 20:25:05

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

Doug

7 сент. 2010 г. 20:56:49

Это всё ещё правильный подход?

Dave Kiss

21 мая 2013 г. 17:26:11

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

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 "/* Что-то */";
        define( 'DONOTCACHEPAGE', 1 ); // не позволить wp-super-cache кешировать эту страницу
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );

sorich87

7.96K

7 сент. 2010 г. 10:55:17

У меня были трудности со всеми рекомендациями подобного рода — возможно, я немного туповат, или, может быть, авторы утратили простоту изложения.

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

...хотя, возможно, я ошибаюсь — я же говорил, что немного туповат.

chazza

11

18 янв. 2013 г. 17:47:39

Комментарии

Элементы <link> следует загружать только в разделе head страницы

shea

18 янв. 2013 г. 22:37:04

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

chazza

19 янв. 2013 г. 20:56:00

@chazza Это не единственная причина. Когда браузер обнаруживает стили после открытия тега body, он останавливает все текущие процессы, пока эти стили не загрузятся и не применятся, что плохо сказывается на производительности и приводит к перерисовке экрана и "миганию" нестилизованного текста.

Однако если это не критично, можно просто добавить CSS-файлы, как вы сказали. Я сам так часто делаю, и в конечном итоге все работает. Не оптимально, но работает.

Dan Gayle

1 февр. 2016 г. 21:40:02

Обновление начиная с WordPress 3.3

Существует функция под названием wp_add_inline_style, которую можно использовать для динамического добавления стилей на основе настроек темы/плагина. Это можно использовать для добавления небольшого CSS-файла в раздел head, что должно быть быстрым и эффективным.

<?php
function myprefix_scripts() {

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

    $css = get_option( 'loader_css', 'значение CSS по умолчанию, если нет установленного значения' );

    //или, например
    $color = get_option( 'custom_plugin_color', 'red' ); //red - значение по умолчанию, если значение не установлено
    $css = ".mycolor{
                background: {$color};
           }";

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

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );

Lyle Bennett

73

19 июл. 2019 г. 13:21:00

Doug 1.05K · Accepted Answer · 2010-09-07T17:46:01Z

Используйте wp_register_style и wp_enqueue_style для добавления таблицы стилей. НЕ добавляйте просто ссылку на таблицу стилей в wp_head. Очередь стилей позволяет другим плагинам или темам при необходимости изменять таблицу стилей.

Ваша таблица стилей может быть файлом .php:

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

my-stylesheet.php будет выглядеть так:

<?php
// Будем выводить 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

1.05K

7 сент. 2010 г. 17:46:01