WordPress pretty URL:使用 rewrite rules 與 query_vars 擺脫參數網址

SEO 上我們最常被挑戰的一件事便是使用「參數網址」,由於使用參數網址可能會造成 Google 搜尋引擎所選擇的標準頁面與我們期待的頁面不同,所以如果可以的話我們要盡量避免使用參數網址來呈現不同的資料內容。程式語言的領域中,有部分人會稱沒有參數網址的網址為 pretty URL,我們可以透過 WordPress 提供的 rewrite rules 和 query_vars 功能來達成沒有參數網址的頁面製作,背後的原理是透過解析網址結構後,將網址結構轉換為 WordPress 入口 index.php 的參數 (query_var),接下來我們就來看看如何實作這個功能。

使用 add_rewrite_rules 方法

我們可以使用 add_rewrite_rules 方法為我們的 WordPress 建立一個新的入口,這個方法的第一個參數可以帶入一個正則表達式,第二個參數則是當符合正則表達式時如何解析正則表達式中的項目並帶入到 query vars 當中。

舉例來說我們想做一個動態診所的搜尋頁面,可能想要符合幾種情境:

  1. /clinic-explorer/台北市
  2. /clinic-explorer/台北市中山區
add_rewrite_rules('^clinic-explorer/([^/]+)/?', 'index.php?pagename=clinic-explorer&area=$matches[1]', 'top');

以上面的例子來說,我們可以將路徑上的「台北市」和「台北市中山區」轉為 area query vars,並在後續的程式碼中使用到它。

註冊 query_vars

雖然 WordPress 提供了像是 s 這樣的內建搜尋 query_vars,但如果你想要自訂是需要先註冊的。我們可以透過 query_vars filter hook 來進行這個操作。

function clinic_area_query_vars( $query_vars ) {
    $query_vars[] = 'area';
    return $query_vars;
}
add_filter( 'query_vars', 'clinic_area_query_vars' );

為什麼 rewrite_rules 沒有生效?

如果你發現你自定義規則的入口沒有生效,那你可以試著前往「設定 > 永久連結」裡按下「儲存設定」。這會觸發 flush_rewrite_rules 讓 WordPress 重新載入所有註冊的入口規則。