WordPress 在開發過程中如何避免緩存？

問題描述

有沒有一個簡單的方法來防止所有緩存在測試網站的更改的外觀時？我使用 WP 超級緩存。我可以使用提供的選項刪除其緩存，刪除瀏覽器的緩存，還有一些對 css 或 widgets 的更改不會刷新。我嘗試其他 work-arounds 像切換瀏覽器或電腦，但必須有一個更多的 stream-lined 工作流程，我可以確保我查看我所做的更改，而不是一些緩存的早期格式？這是最好的解決方案？

最佳解決方案

將樣式表的 filemtime()添加為版本參數。可以説，您的默認樣式表是在 css/default.css 和 css/default.min.css(不是 style.css) 。當我們在 wp_loaded(不是 init) 上註冊樣式表時，我們可以將版本作為第四個參數傳遞。這將是最後修改的時間，因此每次更改文件時都會發生更改。

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

如果您正在使用 Node.js 和 Grunt，我強烈推薦 Browsersync 。它會隨時更改文件並立即更新。它還可以在多個打開的瀏覽器中同步滾動位置，表單提交和更多。很酷。

次佳解決方案

這可能看起來過於簡單，但是在完成網站的開發部分之前，如何禁用緩存呢？打開和關閉是非常簡單的。

第三種解決方案

我知道這個問題已經得到了接受，但是我認為這個答案對於現在的問題來説還是太複雜了，根據使用者的不同，實際上可能是錯誤的，所以我以為我還是會分享當我做我的 dev(不只是 Wordpress) 時，我如何繞過緩存。

大多數現代瀏覽器都有一些稱為隱身模式的東西。在這種模式下，您的計算機中沒有任何內容被緩存，所以每次刷新都是從服務器上下載新的。在 Internet Explorer 中，按 Ctrl + Shift + P 。在 Firefox 和 Chrome 中，您按 Ctrl + Shift + N 。

如果您的瀏覽器沒有隱身模式，通常可以通過在 Firefox 和 Chrome 上按 Ctrl + F5 或 IE 或 Ctrl + Shift + R 來強制重新加載。

至於您關於 CSS 文件的問題 (實質上，所有的資源文件，如圖像和 Javascript 文件)，WP Super Cache 不會以任何方式緩存這些問題。您的設置和/或此插件的使用不會影響這些文件的投放方式。什麼是緩存這些文件是您的瀏覽器，這就是為什麼你要重新加載的原因。

插件的作用是評估 Wordpress 如何構建 HTML 文件 (通過 PHP)，並存儲副本，以便下次有人請求相同的帖子，頁面或其他內容時，它將提供副本，而不必再次重新評估 PHP-generated HTML，因此節省了一些計算時間，更快地加載您的網頁。 (我希望很清楚。)

問題在於，如果您通過 PHP 函數拍攝 CSS 文件的 URL 上的時間戳，那麼這是 HTML 對 HTML 的評估，並且將被 WP Super Cache 緩存。對同一帖子的每個請求將具有相同的時間戳，因為用户正在為原始時間戳評估的副本提供服務。 (如我錯了請糾正我。)

WP Super Cache 緩存的正確方法是在插件的設置頁面中將 Don't cache for known users 選項設置為 true 。

最後 (這是一個個人喜好，因為我是一個真正的 stickler，當涉及到編碼)，訴諸使用隱身或強制重新加載不會要求您添加不必要的標記在您的 HTML 頁面。當然，添加時間戳每個請求每個靜態文件增加大約 13 個字節，但是像我説的那樣，我是一個這樣的東西的 stickler 。仍然需要 13 個字節。

第四種方案

在尋找一個簡單的解決方案很多次後，我決定找到一些有用的東西！

所以… 在思考之後，我發現了一個偉大的方式來覆蓋緩存，而開發新的網站…(和它的容易) 。

我們需要的是告訴 wp 這是一個這樣的新的 CSS 版本…

變更前：

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

變更後：

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

這是我們添加的：

?v='.time()

説明：我們基本上添加一個動態版本號到 css 文件，強制瀏覽器加載新的 css 每次我們更新它。

完成開發後不要忘記刪除它，否則您的緩存將無法對此文件起作用，並且會一次又一次地為返回的用户加載。

這種技術適用於 css& js 文件 – 希望這有幫助;)

參考文獻

How do you avoid caching during development?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 在開發過程中如何避免緩存？