Вопрос или проблема
Я использую тему WordPress HitMag. На сайте регистрация и вход отображаются в боковой панели (виджеты). Но я хочу, чтобы регистрация и вход были показаны в виде кнопок в верхнем правом углу. Я хочу отобразить это так, как на https://i.sstatic.net/pbJpW.png.
Вот мой код header.php: https://pastebin.com/n4tund6Z.
Может кто-нибудь подскажет, как отобразить кнопки?
ОБНОВЛЕНО:
В header.php у вас есть следующие строки:
</div><!-- .hm-site-title -->
</div><!-- .site-branding-content -->
Вам нужно поместить тег div для кнопок регистрации и входа между ними:
</div><!-- .hm-site-title -->
<div class="hm-custom-login-btns">
<?php
$c_user = wp_get_current_user();
if( !is_user_logged_in( $c_user->ID ) ) :
echo '<a href="' . esc_url( wp_login_url() ) . '" alt="' . esc_attr_e( 'Login', 'textdomain' ) . '">';
echo _e( 'Login', 'textdomain' );
echo '</a>';
wp_register('', '');
else :
echo 'Здравствуйте ' . $c_user->display_name;
endif;
?>
</div>
</div><!-- .site-branding-content -->
Затем вам нужно будет поработать с CSS, чтобы всё правильно расположить. Вам, вероятно, нужно будет настроить ширину контейнера и либо расположить элементы по левую и правую стороны, либо использовать display:flex и связанные свойства для их разметки.
Код PHP для генерации ссылки входа и регистрации можно найти здесь:
https://developer.wordpress.org/reference/functions/wp_login_url/
https://developer.wordpress.org/reference/functions/wp_register/
А вот как вы получаете отображаемое имя пользователя и другую информацию:
https://developer.wordpress.org/reference/functions/wp_get_current_user/
Ответ или решение
Для реализации вашей цели по добавлению кнопок "Регистрация" и "Вход" в верхнем правом углу вашей темы HitMag, вам необходимо внести некоторые изменения в файл header.php, а затем доработать CSS для правильного отображения кнопок.
Шаг 1: Изменения в header.php
Откройте файл header.php, который вы предоставили в ссылке на pastebin. Найдите следующий участок кода:
</div><!-- .hm-site-title -->
</div><!-- .site-branding-content -->Здесь вы должны вставить код для кнопок "Вход" и "Регистрация". Обновленный код будет выглядеть следующим образом:
</div><!-- .hm-site-title -->
<div class="hm-custom-login-btns">
<?php
$c_user = wp_get_current_user();
if( !is_user_logged_in( $c_user->ID ) ) :
echo '<a href="' . esc_url( wp_login_url() ) . '" alt="' . esc_attr_e( 'Login', 'textdomain' ) . '">';
echo esc_html__( 'Login', 'textdomain' );
echo '</a>';
echo '<a href="' . esc_url( wp_registration_url() ) . '" alt="' . esc_attr_e( 'Register', 'textdomain' ) . '">';
echo esc_html__( 'Register', 'textdomain' );
echo '</a>';
else :
echo 'Здравствуйте, ' . esc_html( $c_user->display_name );
endif;
?>
</div>
</div><!-- .site-branding-content -->Объяснение кода
- Проверка на вход: Сначала мы проверяем, вошел ли пользователь в систему с помощью
is_user_logged_in(). Если нет, мы генерируем ссылки для "Входа" и "Регистрации". - Вывод имени пользователя: Если пользователь уже вошел, отображается его имя.
- Экранирование данных: Используйте функции
esc_url()иesc_html__()для обеспечения безопасности и корректного вывода.
Шаг 2: CSS для кнопок
После внесения изменений в header.php, необходимо добавить стили для новых кнопок. Добавьте следующий CSS в файл стилей вашей темы (style.css):
.hm-custom-login-btns {
position: absolute; /* Или fixed, если необходимо */
top: 20px; /* Настройте по вашему усмотрению */
right: 20px; /* Настройте по вашему усмотрению */
display: flex;
gap: 10px; /* Промежуток между кнопками */
}
.hm-custom-login-btns a {
padding: 10px 15px; /* Отступы для кнопок */
background-color: #0073aa; /* Фоновый цвет кнопок */
color: white; /* Цвет текста */
text-decoration: none; /* Убираем подчеркивание */
border-radius: 5px; /* Скругление углов */
transition: background-color 0.3s ease; /* Анимация при наведении */
}
.hm-custom-login-btns a:hover {
background-color: #005177; /* Цвет при наведении */
}Шаг 3: Проверка изменений
После выполнения всех вышеуказанных шагов рекомендуется проверить изменения на сайте. Перезагрузите страницу и убедитесь, что кнопки "Регистрация" и "Вход" корректно отображаются в верхнем правом углу сайта и стильно выглядят.
Заключение
При правильной реализации указанных шагов, кнопки "Регистрация" и "Вход" будут успешно отображаться в верхней части вашего сайта, улучшая пользовательский опыт и интерфейс. Если у вас возникнут дополнительные вопросы или необходима помощь с дальнейшими настройками, не стесняйтесь обратиться за поддержкой.