Home/ Questions/Q 9843
Next
Answered
chris_o
  • 0
Гуру
Asked: 2022-03-17T02:38:46+03:00 In:

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

  • 0

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

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

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

cssoptionsplugin-development
Share

    19 ответов

    1. Гуру

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

      • 0
      • Гуру

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

        • 0
      • Гуру

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

        • 0
      • Гуру

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

        • 0
      • Гуру

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

        • 0
      • Гуру

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

        • 0
      • Новичок

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

        • 0
      • Новичок

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

        • 0
      • Гуру

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

        • 0
      • Учитель

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

        • 0
      • Новичок

        Это по-прежнему правильный подход к делу?

        • 0
      • Новичок

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

        • 0
      • Новичок

        Йесс. Это связано с тем, что ваш css должен влиять на все, начиная с верхней части страницы вниз. Я рад воздействовать только на то, что идет после тега h1. Я не смог заставить работать ни один из примеров (я думаю, они могут быть плохо объяснены). Попробуйте сами на каком-нибудь тестовом html. Если я ошибаюсь, скажи мне 🙂

        • 0
      • Мастер

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

        • 0
    2. Лучший ответ
      Учитель

      Используйте 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; ?>;
}
      • 0
    3. Мастер

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

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

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

      1. Добавить небольшой блок стилей в заголовок, динамически созданный — Очень быстро
      2. Добавить нединамическую таблицу стилей через wp_enqueue_style — Medium
      3. Добавить динамическую таблицу стилей через wp_enqueue_style — очень медленно
      • 0
    4. Гуру

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

      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' );
      • 0
    5. Новичок

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

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

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

      • 0
    6. Новичок

      Обновление с 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' );
      • 0

    Оставить ответ

    You must login to add an answer.

    Need An Account,