• โฮมเพจ
  • บทความ
  • ทั่วไป
  • วิธีรวม Google Custom Search Engine (CSE) เข้ากับไซต์ WordPress โดยไม่ต้องใช้ปลั๊กอิน (สองวิธีที่แตกต่างกัน)

วิธีรวม Google Custom Search Engine (CSE) เข้ากับไซต์ WordPress โดยไม่ต้องใช้ปลั๊กอิน (สองวิธีที่แตกต่างกัน)

เผยแพร่แล้ว: 2016-03-16

Google Custom Search สำหรับไซต์ WordPress

ความสำคัญของฟังก์ชันการค้นหาและทำไมเราจึงควรใช้ Google Custom Search บน WordPress?

Google หรือ Bing? ไม่ต้องสงสัยเลย Google เป็นเครื่องมือค้นหาและผู้บุกเบิกการค้นหาที่ดีที่สุดในโลก ไม่มีเหตุผลที่คุณไม่ควรใช้ Google Custom Search ในบล็อก WordPress ของคุณ มันจะให้ประสบการณ์การค้นหาที่ดีที่สุดแก่ผู้อ่านบล็อกของคุณด้วย ในบทช่วยสอนนี้ เราจะพูดถึงขั้นตอนง่ายๆ เพื่อให้มี Custom Search พร้อมใช้งานสำหรับไซต์ WordPress ของคุณ

ภายใต้ร่มอักษร ( https://abc.xyz ) Google เป็นบริษัทค้นหาแบบสแตนด์อโลน นั่นหมายถึงอะไรสำหรับผู้บริโภคทุกคน? ฉันเชื่อว่าจะไม่มีอะไรเปลี่ยนแปลงสำหรับเรา ยกเว้นโครงสร้างการรายงานที่เปลี่ยนไปและชื่อหุ้นของ NYSE แน่นอน

เหตุใดเราจึงต้องการ CSE (Custom Search Engine)

การให้ฟังก์ชันการค้นหาที่ดีขึ้นบนเว็บไซต์เป็นสิ่งสำคัญมาก โดยปกติแล้ว หน้าหลักจะมีโพสต์น้อยกว่า 10 โพสต์ แต่โดยส่วนใหญ่แล้ว ผู้ใช้บล็อกของคุณอาจได้รับบทความที่เกี่ยวข้องที่ดีที่สุดจากการค้นหาเท่านั้น

บวกกับผลการค้นหาที่เร็วกว่าการค้นหา WordPress เริ่มต้น + ดีสำหรับ SEO ของไซต์ของคุณ เนื่องจาก Google ทราบรายการผลการค้นหานี้จากคำค้นหาและไม่ได้เพิ่มลงในรายการเนื้อหาที่ซ้ำกัน

คุณสามารถกำหนดค่า Google Custom Search ได้ two ways :

  1. จาก Google Adsense Console (บน 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 - การตั้งค่าพื้นฐาน

ขั้นตอนที่ 3

แก้ไขตัวเลือกด้านล่างตามที่คุณต้องการ

  • ช่องที่กำหนดเอง
  • สไตล์ช่องค้นหา
  • สไตล์ CSS ของโฆษณา

ขั้นตอนที่ 4

ภายใต้ตัวเลือกผลการค้นหาตรวจสอบให้แน่ใจว่าการตั้งค่าด้านล่างถูกต้อง

  • ผลการค้นหา: on my website
  • URL ที่จะแสดงผลการค้นหา: search page บล็อกของคุณ

เคล็ดลับในการตั้งค่า Google Custom Search Engine

ขั้นตอนที่ -5

คลิกบันทึกและรับรหัสทั้งสอง

  • ค้นหา Box Code
  • Result Code ค้นหา

ผลการค้นหา Adsense และรหัสช่องค้นหา

ขั้นตอนที่ 6

ไปที่เว็บไซต์ของคุณแล้วสร้าง /search page

WordPress สร้างหน้าค้นหา

ขั้นตอนที่ 7

ใต้ส่วน HTML ให้วาง search result code แล้วคลิกบันทึก

ขั้นตอนที่-8

ไปที่ส่วนลักษณะที่ Appearance -> Widgets และวาง search box code แล้วคลิกบันทึก แก้ไขช่องค้นหา CSS ตามความต้องการของคุณ นี่คือ CSS ที่กำหนดเองซึ่งฉันใช้กับ Crunchify

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 ;
}

และคุณพร้อมแล้ว ลองค้นหาด้วยคีย์เวิร์ดแล้วคุณจะเห็นผลการค้นหาของ Google ในหน้า /search

Configuration Approach-2 จากแผงการค้นหาที่กำหนดเองของ Google

ขั้นตอนที่ 1

  • ไปที่ https://cse.google.com/cse/all
  • คลิกที่ Add เครื่องมือค้นหา

เพิ่ม-กำหนดเอง-ค้นหา-กระทืบ-เคล็ดลับ

ขั้นตอนที่ 2

  • ระบุ URL เว็บไซต์ของคุณ
  • คลิกเพิ่ม

Crunchify-Google-Custom-Search-Engine-Setup

ขั้นตอนที่ 3

  • คลิกที่คุณสร้างเครื่องมือค้นหาใหม่
  • ไปที่แผนก Look and feel
  • ไปที่แท็บ Layout
  • เลือก Two Page
  • คลิก Save and Get Code

ขั้นตอนที่ 4

  • รับรหัสสำหรับช่องค้นหา
    • ใส่ในแถบด้านข้าง
  • รับรหัสสำหรับผลการค้นหา
    • สร้างหน้า http://<yourblog.com>/search
    • ใส่โค้ดในเพจนี้

ขั้นตอนที่ -5

ลองค้นหาด้วยคีย์เวิร์ดเช่น Google Apps แล้วคุณจะเห็นผลลัพธ์เช่นนี้

Google-Custom-Search-Result-Crunchify

แผงผลลัพธ์:

Google-CSE-Search-Result-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 :

  • https://crunchify.com/ search/?cx= partner-pub-xxxxxxxxxxxxxxxxx%3A9846869911&cof=FORID%3A10&ie=UTF-8&q=Crunchify&sa=Search……

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps (วิธีนี้ใช้ไม่ได้เนื่องจากเรามีกฎ .htaccess อยู่แล้ว)

ดังที่คุณเห็นด้านบน ทั้งสองวิธีมี different query parameters

อะไรต่อไป?

โปรดตรวจสอบให้แน่ใจว่าได้อัปเดต JSON-LD Schema URL ของช่องค้นหาไซต์ลิงก์ของ Google

ตรวจสอบช่องค้นหาไซต์ลิงก์ของ WordPress JSON-LD Schema.org Markup URL