Добавьте HTML-тег ввода в навигацию сайта.

На чтение 4 мин Опубликовано 07.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Модификация файла header.php
Шаг 2: Добавление CSS в файл style.css
Пояснение
Заключение

Вопрос или проблема

Я создаю сайт с использованием темы twentytwelve. Мне нужно добавить текстовое поле ввода, расположенное крайним левом углу навигационной панели меню. Вот HTML из Header.php и CSS из style.css.

HTML

<nav id="site-navigation" class="main-navigation" role="navigation">

        <h3 class="menu-toggle"><?php _e( 'Меню', 'twentytwelve' ); ?></h3>

        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Перейти к содержимому', 'twentytwelve' ); ?>"><?php _e( 'Перейти к содержимому', 'twentytwelve' ); ?></a>

        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

    </nav><!-- #site-navigation --

CSS:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    background-color: #000000;
    text-align: right;
    font-size: 50%;
    position: relative;
}
.main-navigation ul {
    margin: 0;
    text-indent: 0;

}
.main-navigation li a,
.main-navigation li {
    display: inline-block;
    text-decoration: none;

}
.main-navigation li a {
    font-size: 120%;
    font-family: 'calibri';
    border-bottom: 0;
    color: #ffffff;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;

}

Может кто-нибудь помочь мне вставить текстовое поле ввода и форму в навигационную панель? Я буду использовать это, чтобы клиенты могли оставить свой адрес электронной почты.

Поместите тег ввода текста и навигацию WordPress в один div и установите им float left и float right соответственно. Если это работает, то хорошо, иначе попробуйте отрегулировать ширину.

Ответ или решение

Чтобы добавить текстовое поле ввода в навигационную панель сайта, использующего тему twentytwelve, мы можем изменить файл header.php и внести коррективы в файл стилей style.css. Следуя этому процессу, мы создадим удобное решение для сбора адресов электронной почты от пользователей.

Шаг 1: Модификация файла `header.php`

Вам нужно добавить элемент input прямо в секцию навигации. Ознакомьтесь с обновленным HTML-кодом:

<nav id="site-navigation" class="main-navigation" role="navigation">
    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>

    <div class="nav-wrapper">
        <form action="#" method="post" class="email-form">
            <input type="email" placeholder="Ваш e-mail" name="email" required>
            <button type="submit">Подписаться</button>
        </form>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </div>
</nav><!-- #site-navigation -->

Шаг 2: Добавление CSS в файл `style.css`

Чтобы правильно отобразить новое поле ввода и кнопку, вам нужно будет добавить соответствующие стили. Вот пример стилей:

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.email-form {
    display: flex;
    align-items: center;
}

.email-form input[type="email"] {
    padding: 8px;
    margin-right: 5px;
    border: 1px solid #ffffff;
    border-radius: 4px;
}

.email-form button {
    padding: 8px 12px;
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.email-form button:hover {
    background-color: #cccccc;
}

Пояснение

Структура HTML: Мы обернули форму и меню в один контейнер с классом nav-wrapper, используя display: flex; для обеспечения размещения элементов в одну линию. Поле для ввода email находится с левой стороны, тогда как меню остается на правой.
Форма: Поле ввода и кнопка позволяют пользователю легко вводить адрес электронной почты, и форма отправляется с помощью метода POST (вы можете дополнительно настроить обработчик этого метода на своем сервере).
Стили CSS: Указанные стили обеспечивают простое и чистое оформление поля ввода и кнопки. Мы также добавили эффект наведения, чтобы улучшить взаимодействие с пользователем.

Заключение

После всех изменений вы получите навигационную панель, которая включает в себя текстовое поле для ввода email в левом углу, а навигационное меню сохраняется на правой стороне. Это не только улучшит пользовательский интерфейс вашего сайта, но и позволит вам эффективно собирать данные от посетителей. Не забудьте протестировать изменения в разных браузерах, чтобы гарантировать их корректное отображение.