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 服務要注意的地方
使用 Algolia 搜尋服務雖然能加快搜尋速度,但也要注意效能最佳化和成本管理
隨時監控使用量
Algolia 的免費方案有 API 呼叫次數限制,建議定期檢查使用量,避免超過限制而產生額外費用。
索引的取捨
確保只索引必要的資料,過多的字段會增加儲存空間並影響搜尋速度。
小結
通過 WP Search with Algolia 外掛,我們可以將 Algolia 的強大搜尋功能整合到 WordPress 中,有興趣的朋友可以試試看。
如果對文章內容有任何問題,歡迎在下方留言,我會盡快為你解答。