Гибкая встраиваемая кнопка Войти

Многие современные темы используют контейнер .container или .site-header-inner. Мы можем добавить наш блок туда программно, но проще всего сделать следующее:

1. Откройте файл header.php вашей темы (через FTP или Файловый менеджер).
2. Найдите открывающий тег основной обертки шапки. Обычно это выглядит так:

<div class="site-header">
    <div class="container"> <!-- Или .site-header-inner -->
        ...

3. Сразу после <div class="container"> (или аналогичного внутреннего блока) добавьте этот код:

<div class="login-wrapper-flex">
    <?php if ( !is_user_logged_in() ) : ?>
        <a href="<?php echo esc_url( wp_login_url() ); ?>" class="btn-login-style">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
            <span>Войти</span>
        </a>
    <?php else : ?>
        <a href="<?php echo esc_url( wp_logout_url( home_url() ) ); ?>" class="btn-login-style btn-logout-style">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
            <span>Выйти</span>
        </a>
    <?php endif; ?>
</div>

Если вы не можете редактировать header.php, используйте плагин Insert Headers and Footers или Code Snippets, но тогда вам придется точно знать селектор вашего контейнера шапки.

Правильный CSS (Главное исправление)

Здесь мы убираем absolute и используем flex. Этот CSS заставляет кнопку быть частью строки с логотипом/меню, прижимаясь к правому краю внутри ширины сайта, а не окна браузера.

Добавьте этот код в Внешний вид → Настроить → Дополнительные стили:

/* 1. Превращаем контейнер шапки в Flexbox */
.news-goal-header-content, /* ЗАМЕНИТЕ ЭТО НА ВАШ РЕАЛЬНЫЙ КЛАСС КОНТЕЙНЕРА ШАПКИ */
.site-header .container,
.site-header-inner {
    display: flex !important;
    justify-content: space-between; /* Логотип слева, кнопка справа */
    align-items: center;            /* Вертикальное центрирование */
    width: 100%;
    max-width: 1200px;              /* Ширина как у сайта */
    margin: 0 auto;                 /* Центрируем сам контейнер */
    padding: 10px 20px;             /* Внутренние отступы */
    position: relative;
}

/* 2. Убираем старые стили float/margin-left:auto, они могут мешать */
.login-wrapper-flex {
    order: 99;                      /* Гарантированно ставим последним элементом в ряду */
    margin-left: auto;              /* Прижимает к правому краю в flex-контейнере */
    float: none !important;         /* Отключаем float, если был раньше */
    z-index: 100;
}

/* 3. Стили кнопки */
.btn-login-style {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    background-color: #0073aa;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;            /* Текст не переносится */
    transition: background 0.3s;
}

.btn-login-style:hover {
    background-color: #005177;
}

/* 4. Мобильная версия */
@media (max-width: 768px) {
    .news-goal-header-content,     /* Ваш класс */
    .site-header .container {
        flex-direction: column;    /* Столбиком */
        align-items: stretch;
        padding: 10px;
    }
    
    .login-wrapper-flex {
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }
    
    .btn-login-style {
        width: 100%;
        justify-content: center;
    }
}