• 主页
  • 文章
  • 一般的
  • 如何在没有插件的情况下将 Google 自定义搜索引擎 (CSE) 包含到 WordPress 网站（两种不同的方法）

如何在没有插件的情况下将 Google 自定义搜索引擎 (CSE) 包含到 WordPress 网站（两种不同的方法）

已发表: 2016-03-16

Google 自定义搜索 WordPress 网站

搜索功能的意义以及为什么我们应该在 WordPress 上使用 Google 自定义搜索？

谷歌还是必应？ 毫无疑问。 谷歌是全球最好的搜索引擎和搜索先驱。 您没有理由不应该在您的 WordPress 博客上使用 Google 自定义搜索。 它也将为您的博客读者提供最佳的搜索体验。 在本教程中，我们将通过简单的步骤为您的 WordPress 网站提供自定义搜索。

在 Alphabet ( https://abc.xyz ) 旗下，Google 是一家独立的搜索公司。 那么，这对所有消费者意味着什么？ 好吧，我相信我们不会有任何改变，除了报告结构发生了变化，而且肯定是纽约证券交易所的股票名称。

为什么我们需要 CSE（自定义搜索引擎）？

在站点上提供更好的搜索功能非常关键。 通常主页包含少于 10 个帖子，但在大多数情况下，您的博客用户可能仅从搜索中获得最佳相关文章。

加上比默认 WordPress 搜索更快的搜索结果 + 有利于您网站的 SEO，因为 Google 从搜索查询中知道此结果列表，并且不会将其添加到重复内容列表中。

您可以通过two ways配置 Google 自定义搜索：

  1. 来自 Google Adsense 控制台（在 Crunchify 上，我们正在使用this approach ）
  2. 来自 Google 自定义搜索面板

Configuration Approach-1. 从 Google Adsense 控制台

第1步

  • 转到Adsense
  • 点击My ads标签
  • 点击Search -> Custom search engines
  • 点击New Custom Search engine

创建新的自定义搜索引擎 - Google Adsense

第2步

  • 提供Name 。 它是自由格式文本
  • Only sites I select
  • 指定您的网站名称

Google Adsense - CSE - 基本设置

第三步

根据需要修改以下选项

  • 自定义频道
  • 搜索框样式
  • 广告 CSS 样式

第四步

在搜索结果选项下，确保以下设置正确

  • 搜索结果： on my website
  • 显示搜索结果的 URL：您博客的search page

Crunchify 设置 Google 自定义搜索引擎的提示

第 5 步

单击保存并获取两个代码

  • 搜索Box Code
  • 搜索Result Code

Adsense 搜索结果和搜索框代码

第 6 步

转到您的站点并创建/search页面

WordPress 创建搜索页面

第 7 步

在HTML部分下粘贴search result code ，然后单击保存。

步骤 8

转到Appearance -> Widgets部分并粘贴search box code ，然后单击保存。 根据需要修改搜索框 CSS。 这是我在 Crunchify 上使用的自定义 CSS。

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - search {
     width : 76 % ! important ;
     padding : 9px 6px 7px 6px ! important ;
     max - width : 275px ;
     margin : 10px 0px 0px 0px ! important ;
}
 
input [ type = "submit" ] {
     background - color : #dd7127;
     border : none ;
     box - shadow : none ;
     color : #fff;
     cursor : pointer ;
     font - family : 'Oswald' , sans - serif ;
     font - size : 14px ;
     font - weight : 400 ;
     letter - spacing : 1px ;
     padding : 6px 10px ;
     width : auto ;
    - webkit - font - smoothing : antialiased ;
     border - radius : 3px ;
}

你都准备好了。 尝试搜索关键字，您应该会在/search页面上看到 google 搜索结果。

Configuration Approach-2 。 来自 Google 自定义搜索面板

第1步

  • 转到 https://cse.google.com/cse/all
  • 点击Add搜索引擎

添加-自定义-搜索-Crunchify-提示

第2步

  • 提供您的网站网址
  • 点击添加

Crunchify-Google-自定义-搜索-引擎-设置

第三步

  • 单击您新创建的搜索引擎
  • 转到Look and feel部分
  • 转到Layout选项卡
  • 选择Two Page
  • 单击Save and Get Code

第四步

  • 获取搜索框代码
    • 放到侧边栏
  • 获取搜索结果代码
    • 创建页面 http://<yourblog.com>/search
    • 将代码放入此页面

第 5 步

尝试搜索 Google Apps 之类的关键字，您应该会看到这样的结果。

谷歌-自定义-搜索-结果-Crunchify

结果面板：

谷歌-CSE-搜索-结果-Crunchify

第 6 步

一段时间后在Crunchify上，我们使用以下自定义 CSS 修改了结果：

Stylish Google Custom Search - Custom CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* Change Search Button Code  */
input . gsc - search - button {
     padding : 10px ! important ;
     height : 35px ! important ;
     border - color : #c12129 !important;
     background - color : #c12129 !important;
     color : #fff !important;
}
 
/* Change Search Button Hover Color */
input . gsc - search - button : hover {
     border - color : #444 !important;
     background - color : #444 !important;
}
 
/* Change Bottom Margin after each result */
. gsc - control - cse . gsc - table - result {
     margin - bottom : 10px ! important ;
}
 
/* Hide URL from search result */
. gsc - url - top , . gsc - url - bottom {
     display : none ! important ;
}
 
/* Change input field look and feel */
input . gsc - input {
     padding : 10px ! important ;
     margin - left : 0px ;
     background - position : right center ! important ;
     background - repeat : no - repeat ! important ;
}
 
/* Hide number of result count */
. gsc - result - info {
     display : none ;
}
. gs - webResult : hover {
     background - color : #eee;
}
 
/* Change mouse hover result background change */
. gsc - cursor - page {
     font - size : 1.1em ;
     padding : 3px 7px ;
     border : 2px solid #eee;
     background - color : #eee !important;
}
 
/* Change search result heading font size change */
. gsc - result . gs - title {
     height : 2.0em ! important ;
     font - size : 16px ! important ;
}
 
. gs - result . gs - snippet {
     line - height : 19px ! important ;
}
 
/* Remove Clear cross image and CSS adjustment - below 3 CSS prop changes */
div . gsc - clear - button {
     display : none ! important ;
}
td . gsc - clear - button {
     width : 0px ! important ;
}
td . gsc - input {
     padding - right : 1px ! important ;
}

现在让我们看看这两个查询：

Approach-1 ：

  • search/?cx=

Approach-2 ：

  • https://crunchify.com/search/?q =Google% search/?q （这不起作用，因为我们有 .htaccess 规则）

正如你在上面看到的——两种方法都有different query parameters 。

接下来是什么？

请确保更新 Google 的附加链接搜索框的JSON-LD Schema网址。

验证 WordPress 附加链接搜索框 JSON-LD Schema.org 标记 URL