內容目錄
內容簡介
Awesome Instant Search 是一個能夠使用 CSS 選擇器將即時搜尋整合到任何 WordPress 網站的插件。如果您已經熟悉 CSS，設定應該不成問題。缺乏經驗的使用者可以使用我的完整教學在 15-20 分鐘內設定完成。
安裝插件後，前往您的管理面板中的「設定」->「Awesome Instant Search」。在第一個標籤「一般設定」中，您可以啟用插件，但最好先進行設定。
如果您使用的是 TwentyThirteen 主題，插件應該可以直接使用。
TwentyTwelve 和 TwentyTen 也可以立即應用。前往上述的插件設定頁面，在「一般設定」下使用「主題快速設定」旁的下拉選單選擇 twentythirteen、twentytwelve、twentyeleven 即可。同樣地，如果您未使用這些主題，您必須將插件設定為適合您特定主題的樣式。不幸的是，目前我不知道有沒有一種方式可以讓這個插件僅需安裝就可以直接使用！
對於簡單的 HTML 和 CSS 概念不太熟悉的使用者，請參閱我的完整教學，或閱讀下面的快速教學。
所需的設定主要有三項：
1. 搜尋欄位選擇器
2. 頁面內容選擇器
3. 搜尋結果選擇器
如果您已經相當熟悉 HTML，以下是設定步驟：將「搜尋欄位選擇器」指派給您網站中搜尋欄位的類別或 ID。對於任何網站，預設值 input[name="s"] 都應該可以使用。將「頁面內容選擇器」指派給您想要搜尋結果出現的元素 ID。請務必使用一個句號 (.) 或是井字號 (#)，就像您使用 CSS 選擇器一樣。例如，#content。只要和 CSS 一樣需要更具體時，您就可以使用 #main #content .container 等特定的選擇器。請注意，此內容將在進行搜尋的當前頁面上被隱藏。
接著，以相同方式指派「搜尋結果選擇器」。大約有 99％ 的網站都會與內容選擇器相同，只是在裡面加入 .hentry 。例如，如果您將「#content」指定為「頁面內容選擇器」，那麼您的「搜尋結果選擇器」將使用「#content .hentry」。
這是最重要的三個設定。完成這些後，可以開始進行測試，或進一步了解其他設定。
其他設定：
-「搜尋 URL」是顯示搜尋結果的網址。這是您的 WordPress 網站域名（domain）加上「?=s」的字元，例如 http://www.example.com?=s （通常不需要更改）。
-「隱藏這些元素」：如果您希望在搜尋時隱藏其他元素，可以使用此選項。這些元素將會在搜尋取消時再次顯示。此值接受以逗號分隔的 CSS 選擇器，請使用它以在搜尋時隱藏評論、頁面導覽和其他多餘元素。
-「在即時搜尋結果之前」：在即時搜尋結果之前加入HTML。使用標籤 %%SEARCH_TERM%% 可以列印搜尋關鍵字。例如，<h3>Search results for: "%%SEARCH_TERM%%"</h3> 可以顯示為 <h3>Search results for: "Contact Info"</h3>。
-「快速主題設定」：快速訪問 twentyten、twentytwelve 和 twentythirteen 的預設設定。
翻譯：
- Español: Maria
外掛標籤
開發者團隊
原文外掛簡介
Awesome Instant Search integrate Instant Search to ANY wordpress website using CSS seletors. If you are familiar with CSS already, you should have no problem setting this up. The less experienced can use my full tutorial to set up in 15-20 minutes.
After installing the plugin, go to Settings->Awesome Instant Search in your admin panel. On the first tab, General Settings, you can activate the plugin, but you should probably set it up first.
If you are working with the TwentyThirteen theme, the plugin should work out of the box.
TwentyTwelve and TwentyTen can be applied instantly as well. Go to the plugin settings page described above, and under the General Settings use the dropdown next to Theme Quick Settings to select between twentythirteen, twentytwelve and twentyeleven. Again, if you are not using these themes you have to set the plugin up to fit your particular theme. Unfortunately there’s not a way (that I know of) that will get this plugin working out of the box!
For the quick tutorial, see below. For those of you unfamiliar with simple HTML and CSS concepts, see my full tutorial.
The Essentials
Essentially, you need to configure three settings.
Search Field Selector
Page Content Selector
Search result selector
If you know your HTML pretty well, here’s what to do: Assign Search Field Selector to the class or ID of your search field(s) in your website. The default input[name="s"] should work for any website.
Assign Page Content Selector to the ID of the element you want your search results to appear in. Remember to use a period (.) or hash sign (#) just like you would with a CSS selector. So for example #content. Just like with CSS you can be more specific when you need to, e.g., #main #content .container and so on. Keep in mind, this content will be hidden on the current page where the search is performed.
Next, in the same fashion, assign a selector for the search results. In about 99% of websites, this is going to be the same as the content selector with .hentry added in there. For example, if you assigned #content as your Page Content Selector, you would use #content .hentry as your Search Result Selector.
These are the three most important settings. After you get these, go ahead and test it out or play with the other settings.
Other Settings
Search URL is where the search results appear. This is your wordpress website’s domain with the letters ?=s appended to it — e.g., http://www.example.com?=s
This shouldn’t need to be changed but is there just in case you ever need to change it.
Hide These Elements If you want additional elements to be hidden when performing a search, use this option. These elements will be revealed again when the search is cleared. This value accepts comma separated CSS selectors, use it to hide comments, page navigation and other extraneous elements when searching.
Before Instant Results is HTML to appear before the Instant Search results. Use the tag %%SEARCH_TERM%% to print the search term, e.g.,
Search results for: "%%SEARCH_TERM%%"
might show up as
Search results for: "Contact Info"
on your page.
Theme Quick Settings Quickly access default settings for twentyten, twentytwelve, and twentythirteen.
Translation
Español Maria Romos with Web Hosting Hub.