تشرح هذه الصفحة طريقة تخصيص مظهر محرك البحث باستخدام ملف السياق، وهو عبارة عن مواصفات XML لمحرك البحث الخاص بك.
- نظرة عامّة
- العنصر
LookAndFeel
- سمات العنصر
LookAndFeel
- العناصر الثانوية في
LookAndFeel
- إضافة شعار إلى صفحة نتائج تستضيفها Google
نظرة عامة
بالإضافة إلى استخدام لوحة تحكّم "محرك البحث المبرمَج"، يمكنك التحكّم في شكل ومظهر محرك البحث عن طريق تعديل ملف XML الخاص بالسياق. (يمكنك الاطّلاع على مزيد من المعلومات حول مزايا وعيوب كل تنسيق في صفحة الأساسيات). إذا لم تكن على دراية بملفات السياق، اطّلِع على السياق: تحديد محرك بحث.
لمزيد من المرونة في طريقة عرض محرك البحث، يمكنك استخدام عنصر البحث المبرمَج الذي يتيح لك تضمين "محرك البحث المبرمَج" في صفحة الويب والتطبيقات الأخرى باستخدام JavaScript.
إذا كانت صفحات الويب الخاصة بك تتضمّن أيضًا بيانات منظَّمة، يمكنك إنشاء مقتطفات تحتوي على عرض تقديمي ومحتوى مخصّص أكثر إفادة. مزيد من المعلومات حول تخصيص مقتطفات النتائج
قبل البدء في تصميم شكل "محرك البحث المبرمَج" ومظهره، اقرأ إرشادات تنفيذ "محرك البحث المبرمَج". وهو مستند قصير يخبرك كيف يجب التعامل مع العلامة التجارية والإحالة في Google.
العنصر LookAndFeel
في ملف السياق، يتم تحديد جميع مواصفات الشكل والأسلوب من خلال العنصر LookAndFeel
ضمن CustomSearchEngine
. يحدّد هذا العنصر ما إذا كان سيتم عرض الإعلانات وطريقة عرض قسم نتائج البحث وطريقة عرض نتائج البحث الفردية. يعرض المثال التالي جميع السمات والعناصر الفرعية للعنصر LookAndFeel
.
<CustomSearchEngine ... > <Title>...</Title> <Description>...</Description> <Context> ... </Context> <LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/> <Logo /> <Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/> <Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" show_image="true" show_snippet="true" snippet_color="#330000" title_hover_color="#0000CC" title_active_color="#0000CC" /> <SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" /> <Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" /> </LookAndFeel> <AdSense /> <EnterpriseAccount /> </CustomSearchEngine>
ليست كل سمات وعناصر LookAndFeel
ذات صلة بجميع أنواع محركات البحث. على سبيل المثال، يتم استخدام السمة googlebranding
فقط لمحركات البحث التي تستضيفها Google ويتم تجاهلها إذا كان محرك البحث الخاص بك يستخدم خيار الاستضافة "عنصر البحث".
عند تنزيل ملف السياق لمحرك البحث من صفحة نظرة عامة في Control Panel (لوحة التحكّم)، ستجد قسم LookAndFeel
محدّد بالكامل. وحتى السمات والعناصر غير ذات الصلة بنوع محرك البحث الذي اخترته سيكون لها قيم محددة. هذه هي القيم التلقائية فقط، لذا عليك تجاهلها. انتبه فقط إلى العناصر والسمات التي تؤثر في نوع محرك البحث.
تناقش الأقسام التالية ما يلي:
سمات العنصر LookAndFeel
جميع سمات LookAndFeel
اختيارية. وفي حال عدم تحديدها، سيستخدم "محرك البحث المبرمَج" القيم التلقائية. على سبيل المثال، إذا لم تحدّد السمة element_layout
للعنصر LookAndFeel
، سيفسّر "محرك البحث المبرمَج" ذلك على أنّ قيمة element_layout
تساوي "1"
. ليست كل السمات ذات صلة بجميع أنواع محركات البحث.
وفقًا للطريقة التي حددت بها قيم السمات، ينشئ "محرك البحث المبرمَج" مجموعة من الرموز لمربّع البحث ونتائج البحث. يمكنك معاينة الرمز الذي تم إنشاؤه في القسم الحصول على الرمز من صفحة "نظرة عامة" بمحرك البحث. يمكنك نسخ مقتطف الرمز الذي تم إنشاؤه وإدراجه في صفحة الويب.
في ما يلي مثال على عنصر LookAndFeel
بسمات محدّدة بالكامل:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
يسرد الجدول التالي سمات CustomSearchEngine
وقيمها.
ملاحظة: حدِّد قيم السمات ذات الصلة بخيار الاستضافة الذي اخترته فقط. يطلعك عمود خيارات الاستضافة على خيارات الاستضافة التي تنطبق عليها هذه السمات.
السمة | خيارات الاستضافة | الوصف | القيمة |
---|---|---|---|
googlebranding |
تستضيفه Google | تحدِّد هذه العلامة مربّع البحث الخاص بمحرك البحث الخاص بك. | استخدِم إحدى القيم التالية:
|
element_layout |
عنصر البحث | تحدِّد هذه السمة طريقة عرض مربّع البحث ونتائج البحث في الصفحة. لمعرفة المزيد من المعلومات عن خيارات التنسيق المختلفة، يمكنك الاطّلاع على تنسيق عنصر البحث. |
استخدِم إحدى القيمتين التاليتين:
|
theme |
عنصر البحث | لتحديد نمط مربّع البحث ونتائج البحث. | استخدِم إحدى القيم التالية:
|
custom_theme |
عنصر البحث | لتخصيص المظهر لعرض ألوان مختلفة ومجموعة خطوط مختلفة عن المظهر العادي، اضبط القيمة على true . وبخلاف ذلك، يتجاهل "محرك البحث المبرمَج" التخصيص الذي يتم إجراؤه على الألوان والخطوط، والتي يتم تحديدها في العناصر الفرعية لـ LookAndFeel . |
حدِّد أيًا مما يلي:
|
text_font |
الكل | تُستخدَم لضبط مجموعة الخطوط للنص في نتائج البحث. |
على الرغم من أن لوحة التحكم تتيح لك تحديد خمس مجموعات خطوط فقط، يمكنك اختيار مجموعة أكبر من مجموعة الخطوط في ملف السياق. يمكنك استخدام قائمة مفصولة بفواصل من مجموعات الخطوط كقيمة لهذه السمة، كما في المثال التالي: text_font="Arial, sans-serif" إذا أدرجت أكثر من مجموعة خطوط واحدة، سيستخدم المتصفح الخط الأول. إذا كان المتصفح لا يتيح استخدام الخط الأول، حاوِل استخدام الخط التالي. لذا ابدأ بالخط الذي تريده وانتهِته بعائلة عامة، مثل serif أو san-serif. تتيح المجموعة العامة للمتصفح تحديد خط مشابه في المجموعة العامة عندما لا يكون أي من الخطوط التي أدرجتها متاحًا. إذا كنت تستخدم مجموعة خطوط يكون اسمها أكثر من كلمة واحدة، يجب تضمينها بين علامات الاقتباس ( |
العناصر الثانوية في LookAndFeel
ترتبط جميع العناصر الفرعية لـ LookAndFeel
، باستثناء العنصر Promotions
، بعنصر البحث فقط. تنطبق معظم سمات العنصر Promotions
على جميع أنواع محركات البحث. في الغالب، تتحكم العناصر الفرعية في ألوان المكونات المختلفة في محرك البحث الخاص بك. قيم الألوان هي رموز HTML سداسية عشرية قياسية. إذا لم تحدد سمات العنصر، يستخدم "محرك البحث المبرمَج" القيم التلقائية.
ملاحظة: إذا أردت تخصيص عنصر بحث، يجب أولاً ضبط السمة custom_theme
للعنصر LookAndFeel
على true
قبل تحديد القيم في العناصر الفرعية. إذا لم تضبط السمة custom_theme
على true
، يتجاهل "محرك البحث المبرمَج" جميع القيم التي حدّدتها في العناصر الفرعية (باستثناء Promotions
).
تتضمن LookAndFeel
العناصر الفرعية التالية.
Colors
: لتحديد ألوان عنصر البحث.Promotions
: يحدّد شكل العروض الترويجية ومضمونها. تنطبق الإعدادات على جميع أنواع محركات البحث.SearchControls
- يحدّد ألوان مكونات مربّع بحث عناصر البحث.Results
- لتحديد ألوان مكونات قسم نتائج عنصر البحث.
العنصر الفرعي Colors
يحدّد العنصر Colors
لون عنصر البحث. لتغيير ألوان المكوّنات الفرعية لعنصر البحث، مثل نتيجة بحث فردية أو عروض ترويجية، يجب ضبط القيم في عناصر تابعة أخرى.
في ما يلي مثال على عنصر Colors
بسمات محدّدة بالكامل:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
يعرض الجدول التالي السمات الاختيارية لـ Colors
وقيمها.
السمة | لون المكوِّن |
---|---|
url |
عنوان URL أسفل كل مقتطف نتيجة. |
background |
خلفية قسم النتائج بالكامل |
border |
الحد حول عنصر البحث. |
title |
تمثّل هذه السمة عناوين مقتطفات النتائج. العنوان هو السطر الأول من كل نتيجة. |
text |
النص الأساسي لمقتطف النتيجة. |
visited |
الرابط الذي يظهر بعد أن ينقر المستخدم عليه |
title_hover |
لون العنوان عندما يمرِّر المستخدم مؤشر الماوس فوق الرابط. |
title_active |
لون العنوان عندما ينقر المستخدم على الرابط. |
العنصر الفرعي Promotions
يتحكم العنصر Promotions
في ألوان العرض الترويجي، ويحدد ما إذا كان يجب عرض الصور والأوصاف أم لا. وعلى الرغم من تحديد شكل ومضمون عمليات الترويج في ملف السياق، يتم تحديد محتوى عمليات الترويج نفسها في ملف XML الخاص بالعروض الترويجية. لمزيد من المعلومات، اطّلِع على العروض الترويجية.
في ما يلي مثال على عنصر Promotions
بسمات محدّدة بالكامل:
<Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" snippet_color="#330000" show_image="true" show_snippet="true" title_hover_color="#0000CC" title_active_color="#0000CC" />
يعرض الجدول التالي السمات الاختيارية لـ Promotions
وقيمها.
السمة | لون المكوِّن |
---|---|
title_color |
عنوان كل إعلان ترويجي. |
title_visited_color |
العنوان بعد أن نقر المستخدم عليه. |
url_color |
تمثّل هذه السمة عنوان URL الذي يظهر أسفل كل عرض ترويجي. |
background_color |
لون الخلفية لقسم العروض الترويجية بالكامل |
border_color |
الحدود حول قسم العرض الترويجي بالكامل |
snippet_color |
وصف الترويج. إذا لم يتضمّن عرضك الترويجي وصفًا، لن تتغيّر الإعدادات. |
show_image |
لعرض صورة في عرضك الترويجي، اضبط هذه السمة على يتم ضبط الصورة التي سيتم عرضها في ملف العروض الترويجية. |
show_snippet |
لعرض وصف في عرضك الترويجي، اضبط هذه السمة على يتم تحديد محتوى الوصف في ملف العروض الترويجية. |
title_hover_color |
العنوان الذي يظهر عندما يمرِّر المستخدم مؤشر الماوس فوق الرابط. |
title_active_color |
العنوان عندما ينقر المستخدم على الرابط. |
العنصر الفرعي SearchControls
يتحكم العنصر SearchControls
في ألوان مربّع البحث وعلامات التبويب الخاصة بالتحسينات في عنصر البحث. إذا قمت بإنشاء تصنيفات تصفية في محرك البحث، ستظهر العلامات كعلامات تبويب في عنصر البحث. إذا لم تتوفّر لديك علامات تصفية، لن تظهر علامات التبويب، ويتجاهل "محرك البحث المبرمَج" قيم السمات.
إذا كنت تريد من "محرك البحث المبرمَج" إكمال طلبات البحث تلقائيًا، راجِع القسم الذي يصف السمة autocompletions
للعنصر CustomSearchEngine
في ملف السياق.
في ما يلي مثال على عنصر SearchControls
بسمات محدّدة بالكامل:
<SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" />
يعرض الجدول التالي السمات الاختيارية لـ SearchControls
وقيمها.
السمة | لون المكوِّن |
---|---|
input_border_color |
حد حقل الإدخال لطلبات البحث. |
button_border_color |
الحدود حول زر البحث. |
button_background_color |
زر البحث: |
tab_border_color |
الحدود حول علامات التبويب التي لا يتم التركيز عليها حاليًا (لم يتم اختيارها من قِبل المستخدم). |
tab_background_color |
علامات التبويب غير محل التركيز |
tab_selected_border_color |
علامة التبويب التي اختارها المستخدم للتو عن طريق النقر عليها. وتتخذ علامة التبويب التي نقر عليها المستخدم مؤخرًا الحالة المحدّدة. |
tab_selected_background_color |
لون علامة التبويب المحدّدة حاليًا |
العنصر الفرعي Results
يتحكم العنصر Results
في لون النتائج الفردية في عنصر البحث. تشكل كل نتيجة فردية وحدة عنوان ومقتطف نتيجة ورابط. يتيح لك تحديد هذا العنصر الفرعي تحديد النتائج الفردية أو إبراز النتائج التي يختارها المستخدمون بشكل مرئي. إذا كنت لا تريد تحديد نتائج فردية أو تمييز نتيجة، يمكنك ضبط الحدود والخلفيات لتتناسب مع لون الخلفية في قسم النتائج بأكمله.
الشكل 1: النتائج التي تتضمّن نتائج فردية محدّدة ونتيجة فردية تم تمييزها عند تمرير الماوس.
تحتوي النتائج على حالتين:
- الحالة العادية - ظهور نتيجة فردية عند عدم تمرير الماوس فوقها.
- حالة التمرير - ظهور نتيجة فردية عند تمرير مؤشر الماوس فوقها.
يتحكم هذا العنصر في لون النتائج الفردية. لتغيير الخلفية لجميع النتائج، يُرجى الاطّلاع على القسم عنصر Color Child (عنصر اللون الفرعي).
في ما يلي مثال على عنصر Results
بسمات محدّدة بالكامل:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
يعرض الجدول التالي السمات الاختيارية لـ Results
وقيمها.
السمة | لون المكوِّن |
---|---|
border_color |
وتكون حدود كل فرد في حالة طبيعية. |
border_hover_color |
حد النتيجة عند تمرير مؤشر الماوس فوقها. |
background_color |
يؤدي لون خلفية الأفراد إلى حالة طبيعية. |
background_hover_color |
خلفية النتيجة عند تمرير مؤشر الماوس فوقها. |
إضافة شعار إلى صفحة نتائج تستضيفها Google
إذا كنت تسمح لـ Google باستضافة صفحة النتائج، فيمكنك تضمين شعار أو صورة صغيرة بجوار مربع البحث في صفحة نتائج البحث مباشرةً. يجب أن تكون الصورة بتنسيق .jpg أو .png أو .gif مستضافة على موقع إلكتروني (من المفترَض أن تكون أنت أو من موقع إلكتروني لا يخضع لقيود متعلّقة بحقوق الطبع والنشر). يمكنك ربط عنوان URL بالصورة، مما يجعلها قابلة للنقر.
ملاحظة: إذا كنت تستخدم "عنصر البحث المبرمَج" لاستضافة نتائج البحث، لا يمكنك إضافة صورة باستخدام لوحة التحكّم أو ملف السياق.
في ما يلي مثال على صفحة نتائج تتضمن شعارًا.
الشكل 3: مربّع بحث مزوّد بصورة
يتم تحديد الصورة وعنوان URL الخاص بها في سمات العنصر Logo
ضمن العنصر LookAndFeel
. يعرض المثال التالي كيفية إضافة شعار إلى صفحة النتائج التي تستضيفها Google.
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
يعرض الجدول التالي سمات العنصر Logo
.
السمة | الوصف والقيمة |
---|---|
url |
عنوان URL للصورة يمكن أن يكون ملف بتنسيق .gif أو .png أو .jpg. |
destination |
إذا كنت تريد أن تكون الصورة رابطًا، حدد عنوان URL المقصود. |
height |
ارتفاع الصورة بالبكسل. الحد الأقصى للارتفاع هو 100 بكسل. ولست بحاجة إلى توفير العرض، لأنّ "محرك البحث المبرمَج" يحافظ على نسبة العرض إلى الارتفاع. لا تقلق بشأن توفير الارتفاع إلا إذا كانت الصورة كبيرة جدًا وتريد أن يخفّضها "محرك البحث المبرمَج". |