前言介紹
- 這款 WordPress 外掛「CSS Above The Fold」是 2015-03-24 上架。
- 目前有 200 個安裝啟用數。
- 上一次更新是 2015-08-31，距離現在已有 3535 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 3.3.2 以上版本才可以安裝。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
minify | minify css | minification | optimization | minify stylesheet |
內容簡介
透過在頁面上方（頁面頂部）使用網頁內的 CSS 優化使用者體驗。
即使其餘的 CSS 也需要花費幾秒鐘的載入時間，但這些特定的 CSS 樣式會在頁首顯示，確保您的頁面快速渲染並在 Google Page Speed Insights 等測試系統中獲得更高的分數。
但您不需要維護兩個單獨的樣式表，僅需使用特殊標記從主題樣式文件中選擇特定片段來創建頁面頂部樣式，將 CSS 片段合併到頁首樣式中即可。
此外掛程式啟用特殊的開始和結束標記，您可以插入編輯 style.css 主題文件的標記以包圍程式碼片段：
[css-above-the-fold]
...您的主題 CSS 代碼片段...
[/css-above-the-fold]
但這種語法並不是標準的 CSS，因此您需要在 CSS 註釋之間包含此標記，有兩種方法可以實現：
1. 註釋整個區域
最簡單的方法，CSS 僅在頁首渲染，而不在樣式表中渲染。
此類標記不允許在片段內部使用自己的 CSS 註釋。
請注意，僅在啟用插件時使用這種方式，因為您會註釋掉主題樣式表的某些部分。
/* [css-above-the-fold]
...CSS 代碼片段...
[/css-above-the-fold] */
2. 只註解標記
這是一種不入式的方法，它允許您在片段內包含註釋，但是片段會在頁首和樣式表中渲染。
此方式不受插件的影響，您的主題樣式表在啟用或停用此插件時都會保持運行。
/* [css-above-the-fold] */
...CSS 代碼片段...
/* [/css-above-the-fold] */
您可以在 CSS 文件中結合這兩種標記方式。
介紹在標頭中引入的 CSS 片段會被縮小並縮小。
此插件僅在修改 style.css 文件時讀取它，並使用 WP 選項 API 存儲結果。
原文外掛簡介
Improve user experience by having your above-the-fold (top of the page) CSS styles in-page.
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.
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.
This plugin enables a special open and close tags that you can insert editing your style.css theme file to surround pieces of code:
[css-above-the-fold]
… Your theme CSS code fragment …
[/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:
1. Comment whole section
The easiest way, the CSS is rendered only in the head but not in the stylesheet.
This kind of markup does not allow to use your own CSS comments inside the fragment.
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 code fragment …
[/css-above-the-fold] */
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.
This way is plugin-independent, and your theme stylesheet will keep running with this plugin activated or not.
/* [css-above-the-fold] */
… CSS code fragment …
/* [/css-above-the-fold] */
You can use these two kinds of markup combined in your CSS File.
The resulting CSS fragments introduced in the header are compacted and minified.
This plugin only read the style.css file when it is modified, and stores the results using the WP options API.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「CSS Above The Fold」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Better WordPress Minify 》允許您結合和縮小 CSS 和 JS 文件以提高頁面加載速度。 這個外掛使用 PHP 庫 Minify 並且依靠 WordPress 的編輯系統而不是輸出緩存，這樣就尊重 CSS 和 JS 文...。