كيفية تضمين محرك البحث المخصص من Google (CSE) في موقع WordPress بدون البرنامج المساعد (طريقتان مختلفتان)

نشرت: 2016-03-16

بحث Google المخصص لموقع WordPress

أهمية وظيفة البحث ولماذا يجب علينا استخدام بحث Google المخصص على WordPress؟

جوجل أو بنج؟ لا شك في ذلك. جوجل هو أفضل محرك بحث ورائد البحث في العالم. لا يوجد سبب يمنعك من استخدام بحث Google المخصص في مدونة WordPress الخاصة بك. سيعطي أفضل تجربة بحث لقراء مدونتك أيضًا. سننتقل في هذا البرنامج التعليمي إلى خطوات بسيطة لإتاحة البحث المخصص لموقع WordPress الخاص بك.

تحت مظلة Alphabet ( https://abc.xyz ) ، تعد Google شركة بحث قائمة بذاتها. إذن ، ماذا يعني ذلك لجميع المستهلكين؟ حسنًا ، أعتقد أنه لن يكون هناك أي تغيير بالنسبة لنا ، باستثناء تغيير هيكل التقارير وبالتأكيد اسم أسهم بورصة نيويورك.

لماذا نحتاج إلى محرك البحث المخصص (CSE)؟

من الأهمية بمكان توفير وظائف بحث أفضل في الموقع. عادةً ما تحتوي الصفحة الرئيسية على منشور أقل من 10 ولكن في معظم الحالات ، قد يحصل مستخدمو مدونتك على أفضل المقالات ذات الصلة من البحث فقط.

بالإضافة إلى الكثير من نتائج البحث الأسرع من بحث WordPress الافتراضي + جيد لتحسين محركات البحث لموقعك حيث يعرف Google قائمة النتائج هذه من استعلام البحث ولا يضيفها إلى قائمة المحتوى المكررة.

هناك two ways يمكنك من خلالهما تكوين بحث Google المخصص:

  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 - محرك بحث مخصص - الإعداد الأساسي

الخطوه 3

قم بتعديل الخيارات أدناه حسب حاجتك

  • قناة مخصصة
  • نمط مربع البحث
  • نمط CSS للإعلان

الخطوة 4

ضمن خيار نتائج البحث ، تأكد من صحة الإعدادات أدناه

  • نتائج البحث: 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 حسب حاجتك. إليك 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 محرك بحث

إضافة بحث مخصص نصائح Crunchify

الخطوة 2

  • أدخل عنوان URL لموقعك
  • انقر فوق إضافة

إعداد محرك البحث المخصص Crunchify

الخطوه 3

  • انقر فوق محرك البحث الذي تم إنشاؤه حديثًا
  • انتقل إلى قسم Look and feel
  • انتقل إلى علامة التبويب Layout
  • حدد Two Page
  • انقر فوق Save and Get Code

الخطوة 4

  • الحصول على رمز لمربع البحث
    • ضعه في الشريط الجانبي
  • الحصول على رمز لنتيجة البحث
    • إنشاء الصفحة http: // <yourblog.com> / search
    • ضع الكود في هذه الصفحة

الخطوة 5

جرب البحث عن كلمات رئيسية مثل تطبيقات Google وسترى نتيجة مثل هذه.

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 .

ماذا بعد؟

يرجى التأكد من تحديث عنوان URL JSON-LD Schema الخاص بمربع بحث روابط أقسام الموقع من Google.

تحقق من صحة WordPress Sitelinks Search Box JSON-LD Schema.org عنوان URL لترميز