Як додати просте пошукове вікно Google, Yahoo! або Bing на ваш сайт WordPress

1. Стандартне вікно пошуку Google
2. Вікно пошуку Google з кнопками-перемикачами
3. Пошукове вікно Bing з кнопками-перемикачами
4. Пошукове вікно Yahoo з флагової кнопкою

Наша взаимовыгодная связь https://banwar.org/

Пошук - це найбільш часто використовувана і істотна функція Інтернету. Засіб Пошуку щодня обробляють мільярди пошукових запитів, але все ще є сайти і блоги, яким тільки належить додати цю важливу функцію.

Не дивлячись на те, що оброблені реалізації пошукового вікна пропонуються різними бізнес-компаніями, я вважаю за краще використовувати тільки основні пошукові движки: Google, Yahoo! або Bing. Багато комерційні пропозиції надають пробний період, для того щоб зацікавити клієнтів. Такі пробні версії часто включають розміщену на помітному місці рекламу, що може відлякати частину відвідувачів сайту.

Давайте додамо вікно пошуку на ваш сайт WordPress.

Стандартне вікно пошуку Google

Якщо для вашого сайту або блогу важливо вільний простір, Ви можете легко розмістити маленьке пошукове вікно Google, яке задовольнить ваші потреби. Код є комбінацією HTML і Javascript:

<Form method = "get" action = "http://www.google.com/search"> <div style = "padding: 4px; width: 15em;"> <table border = "0" align = "center" cellpadding = "0"> <tr> <td> <input type = "text" name = "q" size = "25" style = "color: # 808080;" maxlength = "255" value = "Google site search" onfocus = "if (this.value == this.defaultValue) this.value = ''; this.style.color = 'black';" onblur = "if (this.value == '') this.value = this.defaultValue;" /> <input type = "submit" value = "Go!" /> <Input type = "hidden" name = "sitesearch" value = "yoursite.com" /> </ td> </ tr> </ table> </ div> </ form>

Ви можете вставити цей код, наприклад, в Текстовий віджет (Text widget) в розділі Зовнішній вигляд> Віджети (Appearance> Widgets) вашої адмін панелі WordPress.

Це пошукове вікно майже відразу готовий до роботи. Просто змініть «yoursite.com» в третин з кінця рядку на ваш домен. Інші настройки, такі як ширина рядка, відступ перед осередком, і повідомлення, яке відображається перед полем пошуку, можна легко змінити перед завантаженням вашого скрипта на сайт.

Вікно пошуку Google з кнопками-перемикачами

Вище описане пошукове вікно дозволяє знайти вміст на зазначеному сайті. Однак, деякі власники сайтів хочуть дати користувачам сайту можливість виконувати пошук за ключовими словами і у всій мережі Інтернет.

В цьому випадку, найпростішим рішенням є розміщення пошукового вікна з двома кнопками-перемикачами: одна для Інтернету і друга для сайту, як це показано нижче:

Код для такого пошукового вікна виглядає наступним чином:

<Form method = "get" action = "http://www.google.com/search"> <div style = "border: 1px solid black; padding: 4px; width: 20em;"> <table border = "0 "align =" center "cellpadding =" 0 "> <tr> <td> <input type =" text "name =" q "size =" 25 "maxlength =" 255 "value =" "/> <input type = "submit" value = "Google Search" /> </ td> </ tr> <tr> <td align = "center" style = "font-size: 75%"> <input type = "radio" name = " sitesearch "value =" "/> The Web <input type =" radio "name =" sitesearch "value =" yoursite.com "checked /> Only Your Site <br /> </ td> </ tr> </ table > </ div> </ form>

Як і в попередньому прикладі, просто змініть "yoursite.com" на ваше доменне ім'я, і ​​пошукове вікно буде готове до роботи. Зверніть увагу, що за замовчуванням обраний пошук по сайту.

Пошукове вікно Bing з кнопками-перемикачами

Для того щоб додати на сайт таке ж пошукове вікно, але з використанням пошукового движка Bing, використовуйте наступні рядки коду:

<Form method = "get" action = "http://www.bing.com/search"> <div style = "border: 1px solid black; padding: 4px; width: 20em;"> <table border = "0 "align =" center "cellpadding =" 0 "> <tr> <td> <input type =" text "name =" q "size =" 25 "maxlength =" 255 "value =" "/> <input type = "submit" value = "Bing Search" /> </ td> </ tr> <tr> <td align = "center" style = "font-size: 75%"> <input type = "radio" name = " q1 "value =" "/> The Web <input type =" radio "name =" q1 "value =" site: yoursite.com "/> Only Your Site <br /> </ td> </ tr> </ table> </ div> </ form>

У цьому інтерфейсі не вибрана жодна з кнопок-перемикачів. Якщо гість сайту вводить слово або фразу в пошукове вікно, він за замовчуванням отримає результати з мережі Інтернет.

Пошукове вікно Yahoo з флагової кнопкою

Останнє просте пошукове вікно досить цікаве - воно містить одну флаговую кнопку, а не дві кнопки:

За умовчанням вибраний пошук в зазначеному домені. Коли користувач прибирає галочку з флагової кнопки, виконується пошук по вказано ключовим словом або фразою в мережі Інтернет.

От і все. Прості способи додавання вікна пошуку, описані в цій статті, готові до використання і прості в додаванні в практично будь-який сайт. З огляду на невелику різницю у функціях, Ви можете взяти те, що потрібно з одного стилю і застосувати до іншого.

Якщо Ви хочете ознайомитися з великою кількістю шаблонів, ознайомтеся з нашою великою колекцією шаблонів WordPress !