chris_o
  • 0
Гуру

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

  • 0

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

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

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

Share
  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.