README

描述

通过 AWS Lambda 生成模板的关键样式表。另请参阅 AWS Lambda Critical CSS。

安装

• 首选方式是使用 Composer

  composer require innocode-digital/wp-critical-css-aws-lambda
  

  默认情况下，它将被安装为 必须使用插件。您可以使用 composer.json 中的 extra.installer-paths 进行控制。

• 另一种方式是将此仓库克隆到 wp-content/mu-plugins/ 或 wp-content/plugins/

  cd wp-content/plugins/
  git clone git@github.com:innocode-digital/wp-critical-css-aws-lambda.git
  cd wp-critical-css-aws-lambda/
  composer install
  

如果插件作为常规插件安装，请从插件页面激活 AWS Lambda Critical CSS 或使用 WP-CLI: wp plugin activate wp-critical-css-aws-lambda。

用法

将以下常量添加到 wp-config.php

define( 'AWS_LAMBDA_CRITICAL_CSS_KEY', '' );
define( 'AWS_LAMBDA_CRITICAL_CSS_SECRET', '' );
define( 'AWS_LAMBDA_CRITICAL_CSS_REGION', '' ); // e.g. eu-west-1

define( 'AWS_LAMBDA_CRITICAL_CSS_FUNCTION', '' ); // Optional, default value is "critical-css-production-processor"

在你的服务上创建无服务器函数。预期默认名称为 critical-css-production-processor，但您可以使用任何其他名称。有一个已准备好的函数 AWS Lambda Critical CSS。

用法

从队列样式生成关键 CSS

add_filter( 'innocode_critical_css_styles', function () {
    return [
        // List of enqueued styles. 
        // Specify styles which you think are needed for critical CSS.
    ];
} );

注意事项

• 样式表中自定义字体或图像的相对路径应更改为绝对路径

add_filter( 'innocode_critical_css_stylesheet', function ( $stylesheet ) {
    $stylesheet = str_replace(
        '../fonts/',
        get_template_directory_uri() . '/path/to/fonts/',
        $stylesheet
    );
    $stylesheet = str_replace(
        '../images/',
        get_template_directory_uri() . '/path/to/images/',
        $stylesheet
    );

    return $stylesheet;
} );

• 此插件仅用于生成和渲染关键 CSS，要延迟加载 CSS 文件，您可以使用 延迟加载。

• 如果使用页面缓存，则可能需要在缓存键中添加来自 cookie 的变量值。例如，对于 Batcache，可以在包含 advanced-cache.php 文件之前使用以下代码。

foreach ( array_keys( $_COOKIE ) as $name ) {
    if ( strpos( $name, 'innocode_critical_css_' ) === 0 ) {
        $GLOBALS['batcache']['unique']['innocode_critical_css'] = substr( $name, strlen( 'innocode_critical_css_' ) );
    }
}