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 在開發過程中如何避免快取？