Как перенести логотип в теме Twenty Seventeen рядом с меню?

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

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

Я восстанавливаю свой сайт, используя тему Twenty Seventeen, и хотел бы, чтобы логотип отображался в меню, а не в центре выделенного изображения. Я нашел сайт, который имеет именно то, что я ищу. Вы можете увидеть его здесь, может кто-то сказать мне, как это сделать?

Вы можете сделать это с помощью CSS. Сайт, о котором вы говорите, использует display:table как для логотипа, так и для навигации. Я бы, вероятно, использовал display:inline-block и/или флоаты вместо этого, чтобы достичь желаемого результата.

Я настоятельно рекомендую вам использовать дочернюю тему для этого, чтобы кодовая база Twenty Seventeen оставалась нетронутой. Вы можете узнать, как использовать дочернюю тему здесь в руководстве WordPress.

Я также хотел бы порекомендовать использовать Firebug или аналогичный инструмент разработчика, чтобы заглянуть в код других сайтов.

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

Чтобы переместить логотип в тему Twenty Seventeen рядом с меню навигации, вам потребуются некоторые навыки работы с CSS. Я рекомендую вам использовать дочернюю тему, чтобы изменения не затерлись при обновлении основной темы. Ниже приведены шаги, которые помогут вам сделать это.

Создайте дочернюю тему:
- Создайте новую папку в каталоге wp-content/themes и назовите её, например, twentyseventeen-child.
- В этой папке создайте файл style.css и добавьте в него следующий код:
```
/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/

@import url("../twentyseventeen/style.css");
```
- Создайте файл functions.php и добавьте в него следующий код, чтобы подключить файл стилей родительской темы:
```
<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
```

Измените позицию логотипа с помощью CSS:

Добавьте следующий код CSS в файл style.css вашей дочерней темы:

/* Перемещение логотипа рядом с меню */
.site-branding {
    display: inline-block;
    vertical-align: middle;
}

.main-navigation {
    display: inline-block;
    vertical-align: middle;
}

.site-header {
    text-align: left; /* Выравнивает все влево */
    padding: 20px; /* Настройка отступов */
}

Настройка логотипа:
- Возможно, вам потребуется дополнительно настроить размеры или отступы для логотипа и меню, чтобы они правильно отображались рядом друг с другом. Для этого вы можете использовать инструменты разработчика в браузере (например, встроенные инструменты в Chrome или Firefox), чтобы экспериментировать с различными значениями CSS в реальном времени.
Активируйте дочернюю тему:
- После внесения всех изменений, зайдите в админку WordPress, перейдите в «Внешний вид» > «Темы» и активируйте вашу дочернюю тему.
Проверка:
- Откройте ваш сайт и посмотрите, как логотип и меню расположены на странице. Убедитесь, что всё выглядит так, как вы задумали. Возможно, вам придется внести дополнительные настройки в CSS в зависимости от дизайна.

Используя данные шаги, вы сможете переместить логотип рядом с меню навигации в теме Twenty Seventeen. Если у вас возникнут дополнительные вопросы или потребуется помощь с CSS, не стесняйтесь обращаться за дополнительной поддержкой.