[wordpress插件] CSS Above The Fold折叠式CSS

wordpress 插件 文章 2020-04-06 00:40 470 0 全屏看文

AI助手支持GPT4.0

评分
100
描述

Improve user experience by having your above-the-fold (top of the page) CSS styles in-page.

通过在页面上方显示折叠式CSS样式来改善用户体验。

Even if the rest of the CSS files take a seconds to load, these specific CSS styles displayed from the head section ensure a quick rendering of your page and better score in testing systems like Google Page Speed Insights.

即使其余CSS文件需要花费一秒钟的时间来加载,从顶部显示的这些特定CSS样式也可以确保快速呈现您的页面,并在Google Page Speed Insights等测试系统中获得更高的评分。

But you do not need to maintain two separate stylesheets, just select specific fragments of your theme style file with a special markup to create an above-the-fold styles joining the CSS fragments in the head section.

但是您不需要维护两个单独的样式表,只需选择主题样式文件中带有特定标记的特定片段即可创建首尾样式,从而将CSS片段连接到头部。

This plugin enables a special open and close tags that you can insert editing your style.css theme file to surround pieces of code:

此插件启用特殊的打开和关闭标签,您可以在其中插入编辑您的style.css主题文件以包围代码段:

[css-above-the-fold]

[css-above-the-fold]

… Your theme CSS code fragment …

…您的主题CSS代码片段…

[/css-above-the-fold]

[/ css-above-the-fold]

But this syntax is not an standard CSS, so you need to include this tags between CSS comments, there are two ways to do it:

但是此语法不是标准的CSS,因此您需要在CSS注释之间包含此标记,有两种方法可以实现:

1.

1。

Comment whole section

评论整个部分

The easiest way, the CSS is rendered only in the head but not in the stylesheet.

最简单的方法是,仅在头部显示CSS,而不在样式表中呈现。

This kind of markup does not allow to use your own CSS comments inside the fragment.

这种标记不允许在片段中使用您自己的CSS注释。

Take care to use this way only when the plugin is active, because you are commenting some parts of your theme stylesheet.

请仅在插件处于活动状态时使用这种方式,因为您正在注释主题样式表的某些部分。

/* [css-above-the-fold]

/ * [css-above-the-fold]

… CSS code fragment …

…CSS代码片段…

[/css-above-the-fold] */

[/ css-above-the-fold] * /

2.

2。

Comment only the tags

仅评论标签

The unobtrusive way, it allows you to include comments inside fragments, but the fragments are rendered both in the head section and the CSS file.

一种不显眼的方法,它允许您在片段中包含注释,但是片段会在头部和CSS文件中呈现。

This way is plugin-independent, and your theme stylesheet will keep running with this plugin activated or not.

这种方式与插件无关,并且您的主题样式表将在不激活此插件的情况下继续运行。

/* [css-above-the-fold] */

/ * [css-above-the-fold] * /

… CSS code fragment …

…CSS代码片段…

/* [/css-above-the-fold] */

/ * [/ css-above-the-fold] * /

You can use these two kinds of markup combined in your CSS File.

您可以在CSS文件中结合使用这两种标记。

The resulting CSS fragments introduced in the header are compacted and minified.

压缩并最小化标题中引入的CSS片段。

This plugin only read the style.css file when it is modified, and stores the results using the WP options API.

此插件仅在修改style.css文件后读取,并使用WP选项API存储结果。

安装步骤

    1. Download the plugin from WordPress plugin repository
    2. 从WordPress插件存储库下载插件

    3. Unzip and upload css-above-the-fold folder to the /wp-content/plugins/ directory
    4. 将css-above-the-fold文件夹解压缩并上传到 / wp-content / plugins / 目录

    5. Activate the plugin through the ‘Plugins’ menu in WordPress
    6. 通过WordPress中的“插件”菜单激活插件

    7. Edit your theme CSS file style.css following the instructions above
    8. 按照上面的说明编辑主题CSS文件style.css

下载地址
https://downloads.wordpress.org/plugin/css-above-the-fold.1.0.zip
-EOF-

AI助手支持GPT4.0