[wordpress插件] Awesome Instant Search很棒的即时搜索

wordpress 插件 文章 2020-02-26 23:00 565 0 全屏看文

AI助手支持GPT4.0

评分
0
描述

Awesome Instant Search integrate Instant Search to ANY wordpress website using CSS seletors.

真棒即时搜索使用CSS选择器将即时搜索集成到任何wordpress网站。

If you are familiar with CSS already, you should have no problem setting this up.

如果您已经熟悉CSS,那么设置它应该没有问题。

The less experienced can use my full tutorial to set up in 15-20 minutes.<

经验不足的人可以在15至20分钟内使用我的完整教程进行设置。

/p>

/ p>

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.

如果您正在使用TwentyThirteen主题,则该插件应该可以立即使用。

TwentyTwelve and TwentyTen can be applied instantly as well.

TwentyTwelve和TwentyTen也可以立即应用。

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.

转到上述插件设置页面,然后在“常规设置”下使用“主题快速设置”旁边的下拉菜单在23,二十二和二十一之间选择。

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.<

对于那些不熟悉简单HTML和CSS概念的人,请参阅我的完整教程。<

/p>

/ p>

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.

    如果您非常了解 HTML ,请执行以下操作:将搜索字段选择器分配给网站中搜索字段的类别或ID。

    The default input[name="s"] should work for any website.

    默认的 input [name =“ s”] 应该适用于任何网站。

    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 <

    页面内容选择器分配给您要在其中显示搜索结果的元素的ID。请记住,使用句点(。)或井号(#)就像使用<

    code>CSS selector.

    code> CSS 选择器。

    So for example #content.

    因此,例如 #content

    Just like with CSS you can be more specific when you need to, e.g., #main #content .container and so on.

    就像使用CSS一样,您可以在需要时更加具体,例如 #main #content .container 等。

    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.

    在大约99%的网站中,这将与在其中添加.hentry的内容选择器相同。

    For example, if you assigned #content as your Page Content Selector, you would use #content .hentry as your Search Result Selector

    例如,如果您将 #content 分配为页面内容选择器,则可以使用 #content .hentry 作为搜索结果选择器

    .

    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.

    搜索URL 是显示搜索结果的位置。

    This is your wordpress website’s domain with the letters ?=s appended to it — e.g., http://www.example.com?=s

    这是您的wordpress网站的域,其域名后附加了?= s 字母-例如,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.

    该值接受逗号分隔的 CSS 选择器,并在搜索时用于隐藏注释,页面导航和其他无关的元素。

    Before Instant Results is HTML to appear before the Instant Search results.

    即时结果之前 HTML ,显示在即时搜索结果之前。

    Use the tag %%SEARCH_TERM%% to print the search term, eg,

    Search results for: "%%SEARCH_TERM%%"

    might show up as

    使用标签%% SEARCH_TERM %%打印搜索词,例如,

    “ %% SEARCH_TERM %%” 的搜索结果可能显示为

    >Search results for: "Contact Info"

    on your page.

    >在页面上搜索“联系人信息” 的结果。

    Theme Quick Settings Quickly access default settings for twentyten, twentytwelve, and twentythirteen.

    主题快速设置,快速访问二十,十二和十三的默认设置。

    Translation

    翻译

安装步骤

    1. Upload awesome-instant-search folder to the /wp-content/plugins/ directory
    2. awesome-instant-search 文件夹上载到 / wp-content / plugins / 目录

    3. Activate the plugin through the ‘Plugins’ menu in WordPress
    4. 通过WordPress中的“插件”菜单激活插件

    5. Navigate to the Settings Page
    6. 导航到“设置”页面

    7. Navigate to the Awesome Instant Search page under settings
    8. 在设置下导航至“真棒即时搜索”页面

    9. Set up settings for your theme (see my tutorial)
    10. 设置主题设置(请参阅我的教程

    11. Activate the plugin under the General Settings tab on the plugin settings page
    12. 在插件设置页面的“常规设置”标签下激活插件

下载地址
https://downloads.wordpress.org/plugin/awesome-instant-search.1.1.2.zip
-EOF-

AI助手支持GPT4.0