/
CATEGORY
WordPress
/
WP Search with Algolia 外掛使用介紹:在 WordPress 使用 Algolia 的搜尋服務

WP Search with Algolia 外掛使用介紹:在 WordPress 使用 Algolia 的搜尋服務

MUKI AI Summary

Algolia 是一款快速、高效且易於整合的搜尋服務,適合需要即時搜尋功能的部落格平台。WordPress 的預設搜尋功能較為陽春,而透過 WP Search with Algolia 外掛,可以將 Algolia 的搜尋服務整合到 WordPress 網站中,提供更精確的搜尋結果和更佳的使用者體驗。雖然外掛標榜開箱即用,但實際安裝後可能需要進一步設定,如 API Key 的配置和 Instantsearch.js 的客製化。

安裝步驟包括在 WordPress 後台安裝外掛、設定 Algolia API Key、同步索引及客製化搜尋頁面。使用者需注意 Algolia 的免費方案有 API 呼叫次數限制,應定期檢查使用量以避免額外費用。此外,應確保只索引必要的資料,以維持搜尋速度和效能。通過這些設置,使用者可以在 WordPress 中體驗到更強大的搜尋功能。...

Algolia 是個老牌的搜尋服務,他的特色是快速、高效且易於整合,很適合我們這種要即時搜尋功能的部落格平台。

大家都知道 WordPress 預設的搜尋功能有點陽春,而 Algolia 可以提供更精確的結果、更佳的使用者體驗,還能支援即時搜尋建議,簡單一句:好東西,不用嗎?

WordPress 有提供 WP Search with Algolia 外掛,將 Algolia 的搜尋服務整合到 WordPress 網站中,雖然外掛介紹標榜開箱即用,但我實際安裝後,發現沒有想像中的簡單,所以這篇文章會跟大家介紹啟用外掛後,可以怎麼使用 Algolia 的 InstantSearch 功能。

安裝 WP Search with Algolia 外掛

以下是 WordPress 使用 Algolia 的搜尋服務的安裝步驟:

1. 安裝外掛

  • 登入 WordPress 管理後台。
  • 前往「外掛」>「安裝外掛」,在搜尋框中輸入 「WP Search with Algolia」。
  • 點擊「立即安裝」並啟用外掛。

2. 設定 Algolia API Key

啟用外掛後,要到 Algolia 官網註冊並建立帳號。並在「Overview」-> 「API Keys」頁面取得金鑰

▼ 紅框圈起來的三個資料都需要填寫到 WP Search with Algolia 設定

▼ 回到 WordPress 後台,依序填入 Algolia 應用程式 ID 和 API 金鑰。

▼ 如果金鑰資料都填寫正確,Algolia Search 選單會多了以下這些選項

3. 同步索引 (index)

選擇「Search Page」設定該如何使用 Algolia,三個選項依序如下:

  • Do not use Algolia:完全不使用 Algolia,類似停用外掛
  • Use Algolia with the native WordPress search template:使用 Algolia 取代 WordPress 預設的搜尋模板
  • Use Algolia with Instantsearch.js:使用 Algolia 的 instantsearch.js 功能與樣式

Algolia 的核心功能是他的 instantsearch,所以請勾選這項:「Use Algolia with Instantsearch.js」,我也會以該功能為例,分享該怎麼設定。

儲存設定後,可以選擇頁面上方的「Index All Content」以及「Push Settings」同步建立文章索引。

▼ 如果建立好索引,回到 Algolia 的 Dashboard,會看到 Data sources 已經有資料了

4. 客製化搜尋頁面

使用 Instantsearch.js 需要在 WordPress 主題做設定:

▼ 開啟 header.php,在適當位置加入 CSS 以及 JavaScript 語法

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia-min.css">


<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.14.2/dist/algoliasearch-lite.umd.js" integrity="sha256-dImjLPUsG/6p3+i7gVKBiDM8EemJAhQ0VvkRK2pVsQY=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.49.1/dist/instantsearch.production.min.js" integrity="sha256-3s8yn/IU/hV+UjoqczP+9xDS1VXIpMf3QYRUi9XoG0Y=" crossorigin="anonymous"></script>

▼ 在要顯示搜尋框的地方,加入以下 HTML 語法,可以客製化樣式,但請勿刪除 id 值

<!-- 請保留 id 值:searchbox 以及 hits -->
<div class="search-container">
  <div id="searchbox"></div>
  <div id="hits"></div>
</div>

▼ 建立一份 JS 檔案,插入以下語法,我有用註解註明要修改的地方,請再仔細參考註解說明

// 記得修改金鑰與 ID
const searchClient = algoliasearch('你的 APP ID', '你的 Search API Key');

// 創建一個自定義的 searchClient
const customSearchClient = {
  ...searchClient,
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
      // 如果沒有查詢字符串,返回空結果
      return Promise.resolve({
        results: requests.map(() => ({
          hits: [],
          nbHits: 0,
          nbPages: 0,
          page: 0,
          processingTimeMS: 0,
        })),
      });
    }
    return searchClient.search(requests);
  },
};

const search = instantsearch({
  // 請根據 Algolia 的 Data sources 列表,來選擇要用哪一個 Index
  indexName: 'wp_searchable_posts',
  searchClient: customSearchClient,
});

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
    placeholder: '輸入關鍵字搜尋...',
  }),
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      empty: (results, { query }) => {
        if (query) return '沒有找到相關結果';
      },
      // 這邊的 items 使用 HTML 語法,可以自行調整,客製化你的搜尋結果
      item: `
        <div class="flex items-center">
          <div class="hit-thumbnail" {{#images.thumbnail.url}}style="background-image: url({{images.thumbnail.url}})"{{/images.thumbnail.url}}></div>
          <div class="hit-name">
            <a href="{{ permalink }}">
              {{#helpers.highlight}}{ "attribute": "post_title" }{{/helpers.highlight}}
            </a>
          </div>
        </div>
      `,
    },
  }),
]);

search.start();

小提醒:記得要在 footer.php 載入這份 JS 檔案唷

客製化語法參考

在客製化搜尋結果的欄位裡,你應該會看到像 {{ permalink }} 的語法,該如何使用呢?

我們可以在 Algolia 的 SEARCH 選單看到回傳的 Key 與 Value,以此得知該如何填寫設定

▼ 以下圖為例,使用 {{ post_title }} 會顯示文章標題

▼ 最後錄了一個影片,是我的部落格串接 WP Search with Algolia 後的搜尋畫面

Algolia Search ?

你可能會發現我現在使用的 Algolia Search 服務,跟影片長得不太一樣。
我現在使用的是 Algolia 免費的搜尋服務,如果你喜歡這個畫面與呈現效果,可以參考我的另外一篇文章:如何免費使用 Algolia Search 服務,免外掛免客製化,美觀又好用

使用 Algolia 服務要注意的地方

使用 Algolia 搜尋服務雖然能加快搜尋速度,但也要注意效能最佳化和成本管理

隨時監控使用量

Algolia 的免費方案有 API 呼叫次數限制,建議定期檢查使用量,避免超過限制而產生額外費用。

索引的取捨

確保只索引必要的資料,過多的字段會增加儲存空間並影響搜尋速度。

小結

通過 WP Search with Algolia 外掛,我們可以將 Algolia 的強大搜尋功能整合到 WordPress 中,有興趣的朋友可以試試看。

如果對文章內容有任何問題,歡迎在下方留言,我會盡快為你解答。

歡迎給我點鼓勵,讓我知道你來過 :)

MUKI says:

如果文章有幫助到你,歡迎分享給更多人知道。文章內容皆為 MUKI 本人的原創文章,我會經常更新文章以及修正錯誤內容,因此轉載時建議保留原出處,避免出現版本不一致或已過時的資訊。

本文地址:https://muki.tw/wp-search-with-algolia/ 已複製

Subscribe
Notify of
guest

0 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.