Меняем стандартный поиск 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 — это простой способ улучшить пользовательский интерфейс вашего сайта. С помощью небольшого количества кода вы можете создать более привлекательную и функциональную форму поиска, которая будет соответствовать вашему уникальному стилю. Не бойтесь экспериментировать с дизайном и функциональностью, чтобы сделать ваш сайт более удобным и привлекательным для пользователей.

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

Метки: вордпресс, меняем поиск