1PROMTAI.RU | Меняем стандартный поиск WP

Меняем Стандартный Поиск в WordPress: Как Создать Кастомную Форму Поиска

WordPress предоставляет удобный функционал для создания и управления сайтами, но стандартная форма поиска может не всегда соответствовать вашим требованиям по дизайну и функциональности. В этой статье мы рассмотрим, как можно изменить стандартную форму поиска в WordPress, добавив кастомную иконку и стилизовав её под ваши нужды.

Почему Стоит Изменить Стандартный Поиск?

Стандартная форма поиска в WordPress может быть функциональной, но она часто проста и не всегда соответствует уникальному дизайну вашего сайта. Кастомизация формы поиска позволяет:

— Улучшить визуальную привлекательность.
— Добавить функциональность, например, иконки или анимации.
— Улучшить пользовательский опыт, сделав поиск более интуитивным.

Шаги по Изменению Формы Поиска

1. Создание Кастомной Функции Поиска

Мы начнем с создания функции, которая заменит стандартную форму поиска на нашу кастомную. В этой функции мы будем использовать PHP для генерации HTML и CSS для стилизации.

Функции темы (functions.php), добавляем код:

//-------------- ** форма поиска **---------------------------------------------------------
function custom_search_form($form) { $form = ' <style> .custom-search-form { position: relative; max-width: 100%; /* Задайте нужную ширину формы */ } .custom-search-form .search-field { width: 100%; padding-right: 30px; /* Отступ для кнопки */ } .custom-search-form .search-submit { position: absolute; right: 0; top: 0; height: 100%; background: none; border: none; cursor: pointer; padding: 0 10px; } </style> <form role="search" method="get" class="search-form custom-search-form" action="' . home_url('/') . '"> <label> <span class="screen-reader-text">' . _x('Search for:', 'label') . '</span> <input type="search" class="search-field" placeholder="' . esc_attr_x('Начните искать здесь …', 'placeholder') . '" value="' . get_search_query() . '" name="s" /> </label> <button type="submit" class="search-submit" id="searchButton">&#128269;</button> </form> <script> document.addEventListener("DOMContentLoaded", function() { function replaceSearchIcon() { var searchButton = document.getElementById("searchButton"); var newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg"); newIcon.setAttribute("width", "16"); newIcon.setAttribute("height", "16"); newIcon.setAttribute("fill", "currentColor"); newIcon.setAttribute("class", "bi bi-new-icon"); newIcon.setAttribute("viewBox", "0 0 16 16"); var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", "M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"); newIcon.appendChild(path); searchButton.innerHTML = ""; searchButton.appendChild(newIcon); } replaceSearchIcon(); }); </script>'; return $form;
}
add_filter('get_search_form', 'custom_search_form');

2. Стилизация Формы

Встроенный CSS позволяет нам позиционировать иконку поиска справа от поля ввода. Мы используем абсолютное позиционирование для кнопки и добавляем отступы, чтобы текст не пересекался с кнопкой.

3. Добавление Кастомной Иконки

Мы используем JavaScript для замены стандартной иконки на SVG-иконку. Это позволяет легко изменять иконку без необходимости редактирования изображений.

Добавим стили в style.css

/* --------------------------------------------------------------------------------------------- */
.custom-search-form { background-color: #232325; border-radius: 8px; /* Закругленные углы */ padding: 12px; /* Внутренний отступ */ display: flex; /* Для выравнивания элементов */ align-items: center; /* Вертикальное выравнивание */
}
.custom-search-form .search-field { background-color: transparent; /* Прозрачный фон для поля ввода */ color: #ffffff; /* Белый цвет текста */ border: none; /* Убираем границу */ outline: none; /* Убираем обводку при фокусе */ margin-right: 10px; /* Отступ справа */ flex-grow: 1; /* Чтобы поле занимало доступное пространство */
}
.custom-search-form .search-submit { background: none; /* Без фона */ border: none; /* Без границы */ color: #232325 !important; /* Серый цвет иконки с важностью */ font-size: 20px; /* Размер иконки */ cursor: pointer; /* Курсор указателя */
}
.custom-search-form .search-submit:hover { color: #bbb !important; /* Более светлый серый при наведении */
}
.custom-search-form .search-submit { background: none; /* Без фона */ border: none; /* Без границы */ color: #fff !important; /* Белый цвет иконки с важностью */ font-size: 20px; /* Размер иконки */ cursor: pointer; /* Курсор указателя */
}
.custom-search-form .search-submit:hover { color: #ddd !important; /* Более светлый белый при наведении */
}

Берём виджет поиска и вставляем в любое место где находятся у вас сайдбары.

Изменение стандартной формы поиска в WordPress — это простой способ улучшить пользовательский интерфейс вашего сайта. С помощью небольшого количества кода вы можете создать более привлекательную и функциональную форму поиска, которая будет соответствовать вашему уникальному стилю. Не бойтесь экспериментировать с дизайном и функциональностью, чтобы сделать ваш сайт более удобным и привлекательным для пользователей.

Коды написаны с помощью ИИ и работает поиск на моём сайте.