Мне нужно сгенерировать CSS для моего плагина из функции, как мне сопоставить запрос с функцией в интерфейсе?


Я генерирую свой CSS динамически в функции, используя ссылку, подобную этой

<link id="www-core-css" rel="stylesheet" href="http://wordpress/myplugin/theme-css-loader.php?v=1" /> 

И мне было интересно, какой подход выбрать. Я мог бы либо указать href на файл, например http://wordpress/myplugin/theme-css-loader.php?v=1, либо я мог бы попытаться сопоставить запрос с функцией http://mysite.com/wordpress/?requested_page=myplugin_theme_css_loader&v=1, но я не знаю, как это сделать во внешнем интерфейсе (в бэкэнде я бы добавил страницу с add_menu_page, а затем удалил страницу с remove_menu_page, и URL-адрес все равно был бы вызываемым. Знаете ли вы, как я мог бы сопоставить URL-запрос с функция и имеет ли это смысл? Требование файла, похоже, имеет для меня гораздо меньше накладных расходов

Author: Nicola Peluchetti, 2012-07-19

2 answers

Это ответвление от чего-то, что я написал для аналогичного требования.

empty( $_GET['my-css-var'] ) || add_action( 'plugins_loaded', 'wpse_59089_css' );
function wpse_59089_css()
{       
    header( 'Content-Type: text/css' );

    // Aggressive caching to save future requests from the same client.
    $etag = '"' . md5( __FILE__ . $_GET['my-css-var'] ) . '"';

    header( 'ETag: ' . $etag );
    header( 'Expires: ' . gmdate( 'D, d M Y H:i:s', time() + 31536000 ) . ' GMT' );
    header( 'Cache-Control: public, max-age=31536000' );

    if ( empty( $_SERVER['HTTP_IF_NONE_MATCH'] ) || $etag != stripslashes( $_SERVER['HTTP_IF_NONE_MATCH'] ) ) {
        // Set all your variables here.
        $my_height = 100;

        // Render your CSS with a heredoc!
        $content = <<<CSS
#my_id {
    height: $my_height;
}
CSS;

        header( 'Content-Length: ' . strlen( $content ) );
        echo $content;

    } else {
        // Not modified!
        status_header( 304 );
    }

    // We're done!
    exit;
}

И ссылка на ресурс будет просто:

Http://example.com/?my-css-var=20120719_or_static_hash.css

Всякий раз, когда CSS был изменен (обычно после обновления настроек), измените метку даты/хэш в URL-адресе на принудительное обновление.

Если вы отключили etags на уровне сервера, вам нужно будет прибегнуть к отправке и проверке "последнее изменение". вместо.

Обновление:

Не используйте ссылку. Дополнительные http-запросы - это зло. Поместите свой динамический CSS в строку. Действительно. Даже Google рекомендует это.

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

Но агрессивно кэшированная внешняя таблица стилей вызовет запрос только при первом доступе (для подавляющего большинства клиентов*).

Каждый новый посетителю сайта так или иначе придется загрузить CSS. Но встроенные стили отправляются для каждого последующего представления, в то время как внешний будет попадать в локальный кэш.

Возьмите 1000 посетителей, по 10 просмотров на каждого, 500 байт CSS. Встроенный увеличит пропускную способность еще на ~4 МБ**. Может показаться, что это немного, но увеличьте размер CSS или количество просмотров на одного посетителя, и он будет продолжать расти.

Как я и говорил с самого начала, все зависит от обстоятельств! Насколько велик CSS? Где он используется? У вас есть высокое соотношение новых и постоянных посетителей? (*Большая часть вашей аудитории находится за прокси-сервером?) (**Вы внедряете "Не измененный" в свой HTML?)

Я полагаю, что я хочу сказать, что "HTTP-запросы - это зло" - это не Евангелие, даже если оно было извергнуто из уст Google;)

Я по-прежнему придерживаюсь мнения, что все, что больше нескольких строк, относится к внешней таблице стилей в сочетании с жестким набором правил кэширования, но это подходит мне, а не всем!

 1
Author: TheDeadMedic, 2012-07-20 03:33:38

Я генерирую свой CSS динамически в функции...

Если так, то отлично! Вам просто нужно подключить вывод этой функции к крючку действия 'wp_print_scripts', например:

function wpse59089_dynamic_css() {
    ?>
<style type="text/css">
<?php
// Dynamic CSS goes here
?>
</style>
    <?php
}
add_action( 'wp_print_scripts', 'wpse59089_dynamic_css' );
 3
Author: Chip Bennett, 2012-07-20 00:43:57