你有沒有過這種感覺？
用心經營 WordPress 網站，寫了好多文章，結果訪客想找特定資訊時，卻像大海撈針一樣困難？
傳統的分類和標籤，在資訊越來越多的今天，常常讓人「霧煞煞」，想看的找不到，真的好困擾啊！
WordPress 內建的搜尋功能，嗯… 你知道的，真的不好用。
這就是為什麼我想動手改造一下我網站的搜尋體驗，目標就是給它一個「超級大腦」。
下面這個 AI 搜尋框，就是我用現在很流行的「Vibe Coding」(讓 AI 幫忙寫程式碼，超酷！)打造出來的，歡迎大家實際玩玩看！
身為一個網站經營者，最不想看到的就是訪客因為找不到想看的內容而失望地離開。
如果網站的分類方式跟訪客想的不一樣、層次太複雜讓人眼花撩亂，或是標籤下得太多太雜、不夠精準，訪客就很容易在茫茫資訊海中迷路。
這種「明明網站裡有，但就是搜不到」的問題，不只是打擊訪客的體驗，也讓站長精心準備的內容無法發揮最大價值。
我製作的 AI 搜尋小工具
為了解決這個痛點，也享受一下自己動手做的樂趣，我就思考一下：能不能幫我自己的 WordPress 網站裝一個更聰明的搜尋大腦呢？
答案是可以的！
今天想跟大家分享透過 Gemini 2.5 Pro 幫忙做出來的一個小工具。
Gemini 2.5 Pro 目前是我最愛的模型。
這是一個結合 Google 和 ChatGPT 的雙模式 AI 搜尋框。
重點是，它完全免費，而且製作和使用的過程都蠻好玩的。
尤其是那個 AI 模式切換開關按下去的瞬間，還有自動跳轉到 Google，填寫好搜尋字詞的功能。
這些操作都讓我感覺超療癒！(可能是因為我親手打造的，有一點 IKEA 效應。)
能把自己遇到的問題，用一點點創意和現在強大的 AI 工具解決，這種感覺真的很棒。
Google + ChatGPT 雙模式搜尋
這個小小的搜尋框其實有兩種搜尋模式，就像有兩個大腦一樣，你可以自由選擇，看那個時候哪種最適合你的需求：
簡單來說，如果你想廣泛查找相關文章、影片或其他特定資源，「Google 模式」會是你的好幫手，它擅長撈出所有相關內容。
如果你想針對特定問題快速獲得一個直接的、摘要式的答案，那麼切換到「ChatGPT 模式」就能更有效率地解決你的疑問。
Google 模式：跨平台內容一把抓
當你需要地毯式搜索網站上的所有相關文章，甚至是你在 YouTube 上發佈過的相關影片時，「Google 模式」就能發揮它真正的強項！
它會用 Google 強大的搜尋引擎，精準地在網路上找出所有相關內容。
想像一個情境，訪客想找某個主題，一搜之下，除了網站文章之外，連相關教學影片都出現了，是不是很方便？
Google 模式：網站文章跟 YouTube 影片都找得到
ChatGPT： AI 模式直接給解答
那如果訪客只是想快速得到一個問題的答案，不想慢慢爬文呢？
這個時候用「ChatGPT 模式」就對了！
它會把訪客的問題，用一個我精心設計過的提示詞 (prompt)，直接丟給 ChatGPT。
就算訪客沒有 ChatGPT 帳號，也能使用喔！
AI 會嘗試根據你網站的內容，直接給出一個摘要式的回答，省去大量閱讀時間。
ChatGPT 模式：專注搜尋網站文章，直接給出解答
為什麼 AI 模式我要選用 ChatGPT？
那你可能會好奇，市面上 AI 工具這麼多，為什麼我會特別挑選 ChatGPT 當作 AI 搜尋模式的核心呢？
其實有幾個蠻實際的考量點：
第一個是普及度和信任感。
ChatGPT 是目前大家最熟悉、使用者也最多的 AI 聊天機器人，所以訪客對它的信賴感通常比較高，也比較知道怎麼跟它互動。
第二個是使用體驗的流暢度。
它可以很順暢地直接跳轉過去，而且還會自動幫訪客把想問的問題填好，這個「無縫接軌」的感覺真的很不錯。
最後一個，也是很關鍵的一點，就是免費和免註冊就能用！
就算訪客沒有 ChatGPT 帳號或沒有升級付費版 ChatGPT 也能用。
這對不想額外註冊或付費的訪客來說，真的很便利。
AI 模式優先？更快給答案！
你可能會好奇，為什麼我會把「AI 模式」設為預設呢？
我的想法是，現在大家都很忙，如果能第一時間就用 AI 快速獲得解答，那體驗肯定更好。
所以，在訪客點開搜尋框的時候，AI 就已經準備好當先鋒，直接幫忙找答案了！
當然，如果想找特定文章或影片內容，手動切回 Google 模式也很方便，完全取決於訪客那個時候的需求。
Google 模式 vs ChatGPT 模式
在一般模式，佔位符我寫了：「找內容 → Google」。
而在 AI 模式我寫了：「找解答 → ChatGPT」。
簡單來說，如果你想廣泛查找相關文章、影片或其他特定資源，「Google 模式」會是你的好幫手，它擅長撈出所有相關內容。
如果你想針對特定問題快速獲得一個直接的、摘要式的答案，那麼切換到「ChatGPT 模式」就能更有效率地解決你的疑問。
AI 搜尋框的 3 個優勢
使用我自製的 AI 搜尋框有幾個優勢想跟大家分享，這些也是我當初設計時主要考量的方向：
優點 1：零成本，免 RAG、訂閱費用
這個小工具最棒的一點就是：它完全免費！
不像市面上有些 AI 搜尋方案需要額外的 RAG 訓練成本或訂閱費用。
這個 AI 搜尋框巧妙地運用了 Google 和 ChatGPT 提供的免費服務，就能順暢地運作，讓你零成本升級網站搜尋功能。
優點 2：整合簡單，貼上就好
你不需要搞懂複雜的程式語言，只需要將包含 HTML、CSS 和 JavaScript 的程式碼片段，直接貼到 WordPress 網站的「自訂 HTML」區塊中即可，非常省事！
優點 3：AI 即戰力，還能自動升級
你不需要自己去訓練語言模型，就能讓網站訪客馬上享受到聰明的搜尋功能。
就算是對技術不太熟的「小白」，也能快速上手，讓網站馬上擁有 AI 搜尋功能。
更棒的是，如果以後 ChatGPT 或者 Google 的搜尋功能有提升，你的網站也會跟著進化！
如何使用 AI 搜尋框？
當使用 AI 模式 (預設，開關開啟)：
第 1 步
在搜尋框裡輸入你想問的問題 —— 圖片標註 ➀。
第 2 步
按下搜尋圖示 —— 圖片標註 ➁！
第 3 步
接著，畫面就會自動跳轉到 ChatGPT 的對話介面，你的問題已經都幫你填好了，直接就能開始對話並獲得解答。
當切換到 Google 模式 (開關關閉)：
當 AI 開關關掉時。
第 1 步
在搜尋框裡輸入你想找的關鍵字 —— 圖片標註 ➀。
第 2 步
按下搜尋圖示 —— 圖片標註 ➁！
第 3 步
接著，畫面就會自動跳轉到 Google 搜尋結果頁面，你的關鍵字已經都幫你填好了，直接就能看到相關內容。
是不是很棒？
AI 搜尋框程式碼分享
說了這麼多，大家一定很好奇程式碼吧？
我有把這個 AI 搜尋框所需的 HTML、CSS 和 JavaScript 程式碼，整理成一個完整的 HTML 片段分享出來，讓你可以直接拿去用！
一鍵複製，貼上 WordPress 的「自訂 HTML 區塊」就能運作了。
<style>
.search-widget-container-minimal {
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
position: relative;
}
.search-bar-container-minimal {
display: flex;
align-items: center;
background-color: #ffffff;
border: 1px solid #dfe1e5;
border-radius: 24px;
padding: 10px 20px;
box-shadow: 0 1px 18px -6px #0071e3;
transition: box-shadow 0.3s ease;
width: 100%;
box-sizing: border-box;
}
.search-bar-container-minimal:hover,
.search-bar-container-minimal:focus-within {
box-shadow: 0 2px 21px -6px #0071e3;
}
.search-widget-container-minimal #customGoogleSearchFormMinimal {
display: flex;
align-items: center;
width: 100%;
}
.search-widget-container-minimal #searchQueryInputMinimal {
flex-grow: 1;
border: none;
outline: none;
font-family: inherit;
font-size: 16px;
padding: 8px 0;
background-color: transparent;
color: #333333;
box-sizing: border-box;
min-width: 50px;
line-height: normal;
-webkit-appearance: none;
appearance: none;
}
.search-widget-container-minimal #searchQueryInputMinimal::placeholder {
color: #888888;
font-weight: normal;
font-family: inherit;
}
.ai-toggle-container {
display: flex;
align-items: center;
margin-left: 10px;
margin-right: 10px;
flex-shrink: 0;
}
.ai-label {
font-size: 14px;
color: #5f6368;
margin-right: 8px;
font-weight: 500;
line-height: 1;
user-select: none;
}
.switch {
position: relative;
display: inline-block;
width: 38px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #0071e3;
}
input:focus + .slider {
box-shadow: 0 0 1px #0071e3;
}
input:checked + .slider:before {
transform: translateX(18px);
}
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.search-widget-container-minimal .search-submit-button-minimal {
background-color: transparent !important;
border: none !important;
padding: 0 0 0 5px !important;
margin: 0 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #5f6368 !important;
box-shadow: none !important;
text-decoration: none !important;
border-radius: 0 !important;
outline: none;
line-height: 1 !important;
transition: color 0.2s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
flex-shrink: 0;
}
.search-widget-container-minimal .search-submit-button-minimal:hover,
.search-widget-container-minimal .search-submit-button-minimal:focus {
background-color: transparent !important;
border: none !important;
color: #333333 !important;
box-shadow: none !important;
text-decoration: none !important;
outline: none !important;
}
.search-widget-container-minimal .search-submit-button-minimal svg {
width: 20px;
height: 20px;
display: block;
fill: none;
stroke: currentColor;
}
.search-suggestions-popup-minimal {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background-color: #ffffff;
border: 1px solid #dfe1e5;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 1000;
max-height: 300px;
overflow-y: auto;
box-sizing: border-box;
}
.search-suggestions-popup-minimal ul {
list-style: none;
margin: 0;
padding: 8px 0;
}
.search-suggestions-popup-minimal li {
padding: 10px 20px;
cursor: pointer;
display: flex;
align-items: center;
font-size: 15px;
color: #333333;
}
.search-suggestions-popup-minimal li:hover {
background-color: #f0f0f0;
}
.search-suggestions-popup-minimal li .suggestion-icon {
width: 16px;
height: 16px;
margin-right: 12px;
stroke: #5f6368;
flex-shrink: 0;
fill: none;
}
@media (max-width: 689.98px) {
.search-widget-container-minimal .search-bar-container-minimal {
padding: 8px 15px;
}
.search-widget-container-minimal #searchQueryInputMinimal {
font-size: 16px !important;
}
.ai-label {
font-size: 13px;
margin-right: 6px;
}
.switch {
width: 34px;
height: 18px;
}
.slider:before {
height: 14px;
width: 14px;
}
input:checked + .slider:before {
transform: translateX(16px);
}
.ai-toggle-container {
margin-left: 8px;
margin-right: 8px;
}
.search-widget-container-minimal .search-submit-button-minimal svg {
width: 18px;
height: 18px;
}
.search-suggestions-popup-minimal li {
padding: 8px 15px;
font-size: 14px;
}
.search-suggestions-popup-minimal li .suggestion-icon {
width: 14px;
height: 14px;
margin-right: 10px;
}
}
</style>
<div class="search-widget-container-minimal">
<div class="search-bar-container-minimal">
<form id="customGoogleSearchFormMinimal" role="search">
<input type="text" id="searchQueryInputMinimal" name="q_custom_minimal" placeholder="找內容 → Google" aria-label="搜尋關鍵字" autocomplete="off">
<div class="ai-toggle-container">
<span class="ai-label">AI</span>
<label class="switch">
<input type="checkbox" id="aiToggleSwitch" checked>
<span class="slider round"></span>
</label>
</div>
<button type="submit" class="search-submit-button-minimal" aria-label="搜尋">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</button>
</form>
</div>
<div id="searchSuggestionsPopupMinimal" class="search-suggestions-popup-minimal">
<ul>
</ul>
</div>
</div>
<script>
(function() {
const searchWidgetContainer = document.currentScript ? document.currentScript.previousElementSibling : null;
const searchFormMinimal = searchWidgetContainer ? searchWidgetContainer.querySelector('#customGoogleSearchFormMinimal') : document.getElementById('customGoogleSearchFormMinimal');
const searchInputMinimal = searchWidgetContainer ? searchWidgetContainer.querySelector('#searchQueryInputMinimal') : document.getElementById('searchQueryInputMinimal');
const suggestionsPopupMinimal = searchWidgetContainer ? searchWidgetContainer.querySelector('#searchSuggestionsPopupMinimal') : document.getElementById('searchSuggestionsPopupMinimal');
const suggestionsUlMinimal = suggestionsPopupMinimal ? suggestionsPopupMinimal.querySelector('ul') : null;
const aiToggleSwitch = searchWidgetContainer ? searchWidgetContainer.querySelector('#aiToggleSwitch') : document.getElementById('aiToggleSwitch');
if (!searchFormMinimal || !searchInputMinimal || !suggestionsPopupMinimal || !suggestionsUlMinimal || !aiToggleSwitch) {
console.error("Search components not found for minimal search widget. Ensure IDs are unique or adjust selectors if embedding multiple instances.");
return;
}
const generalModeSearches = [
"WordPress 新手教學",
"Bluehost 教學",
"Cloudways 教學",
"AI 上字幕 教學"
];
const aiModeSearches = [
"WordPress 新手要從哪裡開始？",
"有 Bluehost 主機優惠嗎？",
"如何用 Cloudways 主機架站？",
"怎麼用 AI 快速上字幕？"
];
const suggestionIconSvg = `
<svg class="suggestion-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
`;
function updatePlaceholder() {
if (aiToggleSwitch.checked) {
searchInputMinimal.placeholder = "找解答 → ChatGPT";
} else {
searchInputMinimal.placeholder = "找內容 → Google";
}
}
function performActualSearch(query) {
const trimmedQuery = query.trim();
if (trimmedQuery) {
let searchUrl;
if (aiToggleSwitch.checked) {
const aiPrompt = `請使用搜尋工具，在諾特斯網站上查找能解答使用者搜尋「${trimmedQuery}」的內容。回應時用口語化、簡單易懂的方式呈現。如果回應中引用了諾特斯網站的資料，請在最後加上「參考資料」標題，用 Markdown 連結的格式列出來源。site:notesstartup.com`;
searchUrl = `https://chatgpt.com/?q=${encodeURIComponent(aiPrompt)}`;
} else {
const finalQuery = `諾特斯 ${trimmedQuery}`;
searchUrl = `https://www.google.com/search?q=${encodeURIComponent(finalQuery)}`;
}
window.open(searchUrl, '_blank');
hideSuggestions();
} else {
searchInputMinimal.focus();
}
}
function populateSuggestions() {
suggestionsUlMinimal.innerHTML = '';
const currentSearches = aiToggleSwitch.checked ? aiModeSearches : generalModeSearches;
currentSearches.forEach(text => {
const li = document.createElement('li');
li.innerHTML = `${suggestionIconSvg}<span>${text}</span>`;
li.addEventListener('mousedown', function(event) {
event.preventDefault();
searchInputMinimal.value = text;
performActualSearch(text);
});
suggestionsUlMinimal.appendChild(li);
});
}
function showSuggestions() {
const currentSearches = aiToggleSwitch.checked ? aiModeSearches : generalModeSearches;
if (currentSearches.length > 0) {
populateSuggestions();
suggestionsPopupMinimal.style.display = 'block';
}
}
function hideSuggestions() {
suggestionsPopupMinimal.style.display = 'none';
}
searchFormMinimal.addEventListener('submit', function(event) {
event.preventDefault();
performActualSearch(searchInputMinimal.value);
});
searchInputMinimal.addEventListener('focus', function() {
showSuggestions();
});
searchInputMinimal.addEventListener('blur', function() {
setTimeout(() => {
if (suggestionsPopupMinimal.style.display === 'block' &&
document.activeElement !== searchInputMinimal &&
!suggestionsPopupMinimal.contains(document.activeElement)) {
hideSuggestions();
}
}, 150);
});
searchInputMinimal.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
hideSuggestions();
searchInputMinimal.blur();
}
});
aiToggleSwitch.addEventListener('change', function() {
updatePlaceholder();
if (suggestionsPopupMinimal.style.display === 'block') {
populateSuggestions();
}
if (document.activeElement === searchInputMinimal) {
showSuggestions();
}
});
updatePlaceholder();
})();
</script>
如果你想做一些客製化的調整，例如改改顏色、調整網站名稱，或是換成搜尋你自己的網站，但又不太會寫程式怎麼辦？
別怕！
現在的 AI 工具超強大，你可以試試看把我的程式碼貼給 Google AI Studio (使用其他 AI 工具也可以)。
然後用口語化的方式跟它說你想怎麼改，例如「幫我把這個搜尋框的藍色改成綠色」，它很有可能就能幫你改好喔！
大家可以玩玩看這種新的「與 AI 協作」的 Vibe Coding 方式，真的很有趣！
製作心得分享
老實說，從有想法、用 Vibe Coding 跟 AI 一起把功能刻出來，到現在可以在自己的網站上順暢使用這個 AI 搜尋框，整個過程真的讓我超有成就感的！
這算不上驚天動地的創新，但能親手解決一個實際問題，還能將成果免費分享，這份成就感真的難以言喻。
未來可優化的地方
目前透過 ChatGPT 進行 AI 搜尋時，對於相對單純的問題，可以直接獲得解答。
但是，如果遇到較複雜的提問，ChatGPT 免費模型 (目前是 GPT-4o) 可能較難一次搜尋就到位。
有時需要更進階的付費 AI 模型 (例如：o3 或 o4-mini )，透過更深度的理解和多次使用查詢工具，才能精準找到答案。
還有，現在沒登入的 ChatGPT 帳號有時候會無法正確使用搜尋工具 (我猜是因為使用了更低階的 GPT-4o mini)。
然而，隨著 AI 技術的飛速發展，我相信這個限制未來一定會自然被克服。
AI 工具將會越來越強大，免費版本的功能也一定會持續進化，提供更棒的使用體驗。
我的 SEO 小秘訣／ AI 共生的狂想
偷偷告訴你。
在打造這個 AI 搜尋框的過程中，除了解決問題和享受動手做的樂趣，我其實還藏了一點點「小心機」和一些有趣的「狂想」，也想跟大家分享一下！
品牌 + 關鍵字，偷偷優化 Google 排名
不知道你有沒有注意到，當你使用「Google 模式」搜尋時，它其實是用了「諾特斯 + 訪客輸入的關鍵字」這樣的組合去搜尋嗎？
這是我的一個小巧思。
我希望透過這種方式，讓大家在搜尋我的內容時，也順便讓 Google 知道，「諾特斯」這個品牌名稱和這些搜尋的關鍵字是有緊密關聯的。
久而久之，或許就能在 SEO 上產生一些正面的化學反應，讓更多人更容易找到「諾特斯」的相關內容。
這算是一個有趣的 SEO 實驗吧！
看到有好的成果的話我會再跟大家分享。
讓我的內容成為 AI 的一部分？
另一個更有趣的想法，則跟「AI 模式」有關。
當大家透過這個模式向 ChatGPT 提問，並讓它參照我網站的文章來回答時，我心裡其實有個小小的期待：如果這些互動夠多，或許我的這些內容，也能成為 ChatGPT 學習資料的一部分。
根據 OpenAI 的說明，在免費版或未登入狀態下，如果使用者沒有關閉「協助改進模型」的設定，輸入的提示和回覆可能會被用於模型訓練。
資料來源：Data usage for consumer services FAQ
想像一下，未來某一天，當其他人在向 ChatGPT 詢問相關領域的問題時，AI 可能會因為學習過我的文章，而間接或直接地引用、參考，甚至推薦我的觀點或內容。
這不只是希望自己的內容被更多人看見，更有一種奇妙的感覺 —— 好像自己的一部分想法和知識，也融入了這個龐大的人工智慧之中，成為了 AI 的一部分。
這種「與 AI 共生」的感覺，以及讓自己的創作擁有另一種形式的「生命延續」，想起來就覺得蠻酷的，不是嗎？
這次製作 AI 搜尋框的過程真的蠻開心的，所以特別寫了這個筆記跟大家分享。
如果在試用過程中遇到任何狀況或 bug，也請隨時回饋給我，謝謝！
想知道其他我推薦的好用工具，歡迎看看下面的筆記。
網路創業收藏級工具清單
