[WordPress] 外掛分享： Awesome Instant Search

前言介紹

  • 這款 WordPress 外掛「Awesome Instant Search」是 2013-09-13 上架。
  • 目前有 10 個安裝啟用數。
  • 上一次更新是 2014-01-12，距離現在已有 4129 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 3.0.1 以上版本才可以安裝。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

jameelbokhari |

外掛標籤

ajax | search | autocomplete | instant search | Google Instant search |

內容簡介

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%% 可以列印搜尋關鍵字。例如，

Search results for: "%%SEARCH_TERM%%"

可以顯示為

Search results for: "Contact Info"

。
-「快速主題設定」：快速訪問 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.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Awesome Instant Search」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.1.0 | 1.1.1 | 1.1.2 | trunk |

延伸相關外掛（你可能也想知道）

  • SearchWP Live Ajax Search 》此 WordPress 外掛不需要SearchWP，但如果有的話就會使用它。在 searchwp.com 可以找到完整文檔。, 歡迎在 GitHub 上貢獻您的力量！https://github.com/jchri...。
  • AJAX Thumbnail Rebuild 》AJAX Thumbnail Rebuild 可讓您重新建立網站上的所有縮圖。儘管已經有一些插件可供使用，但它們有一個共同點：所有縮圖都會在單一步驟中重新建立。如果您的網...。
  • WordPress File Upload 》這個外掛讓你或其他使用者可以從任何頁面、文章或側邊欄輕鬆、安全地上傳檔案到你的網站。, 只需要在任何 WordPress 頁面/文章中加入簡碼 [wordpress_file_up...。
  • WPC AJAX Add to Cart for WooCommerce 》WPC AJAX Add to Cart for WooCommerce 是一款高效的外掛，能幫助線上商店削減網站載入時間、改善用戶體驗並增加銷售額。此外掛允許用戶加入商品至購物車而不...。
  • Entry Views 》Entry Views 會記錄每篇文章/頁面（或任何文章類型）的瀏覽次數。 它附帶一個小工具，可顯示最受歡迎的文章，一個短代碼可顯示文章的瀏覽次數，以及方便的佈...。
  • Ajax Cart AutoUpdate for WooCommerce 》這是一個輕巧的外掛程式，在產品數量更改時自動更新購物車頁面和迷你購物車。同時移除了預設的「更新購物車」按鈕，並可以選擇關閉購物車頁面提示訊息。, 特...。
  • WooCommerce Ajax Cart Plugin 》WooCommerce AJAX Cart 是一款 WordPress 插件，可以更改 WooCommerte 購物車頁面的默認行為，讓買家在更改產品數量時即時查看總價格計算，無需手動點擊 "更...。
  • pageMash > Page Management 》使用此簡單的 AJAX 拖放管理介面，自訂頁面的排序，並管理父頁面結構，還有可選擇隱藏輸出頁面的選項。是一個快速重排頁面選單的好工具。, 查看範例頁面：htt...。
  • Load More Anything 》Commerce Products, Custom Div or Anything, , 這款插件能幫助您在 WordPress 網站上載入更多內容。您可以在博客文章、評論、頁面、類別、最新文章、側邊欄...。
  • Enable CORS 》外掛會收集網站 URL 與啟用的外掛列表，以提供支援。但不會分享給第三方。本外掛可幫助解決CORS問題，讓您輕鬆存取跨域資源。只需幾個簡單點擊，就能在網站上...。
  • Relevanssi Live Ajax Search 》Relevanssi Live Ajax Search 可以讓你的搜尋表單使用 ajax 即時搜尋。它不會淹沒你的設定，通常不需要做任何修改即可正常運作。如果你想自訂它，你可以完全...。
  • Infinite-Scroll 》無限捲動（Infinite scroll）也被稱為自動分頁、取消分頁、無限頁面等等。基本上，它是預先從下一個頁面取得內容，並直接將它添加到用戶當前的頁面。, 當用戶...。
  • Dave's WordPress Live Search 》Dave's WordPress Live Search 可在您的 WordPress 站點中加入「即時搜尋」功能。當訪客在 WordPress 站點的搜尋框中輸入字詞時，該外掛會持續查詢 WordPress...。
  • Filter & Grids 》使用 AJAX 篩選自定義分類 / 分類標籤來篩選文章或自定義文章類型，無需重新載入頁面，並支持不同的分頁類型。這款外掛允許解決顯示網站頁面上的文章的各種任...。
  • Ajaxify Comments – Ajax and Lazy Loading Comments 》尋找新的外掛程式維護者 👀, 請注意，此外掛程式已不再維護或支援，我們正在尋找新的外掛程式維護者（請參閱我們的公告 這裡）。 , 介紹, 預設情況下，當使用...。

文章
Filter
Apply Filters
Close
Mastodon