• 主頁
  • 文章
  • 一般的
  • 如何在沒有插件的情況下將 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