Как вывести изображение в шапке сайта на WordPress

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

Способ первый — редактируем файл header.php

Чтобы вставить изображение в качестве шапки сайта (header) на WordPress между горизонтальным меню и основным контентом, можно использовать следующий код. Для начала надо убедиться в том, что есть доступ к редактированию темы или доступно использование Child Theme, дабы не потерять изменения при обновлениях.

Вот шаги для вставки изображения:

Найдите файлы вашей темы: Обычно это header.php, который содержит код для шапки сайта.
Редактируйте файл header.php:
Вам нужно будет добавить код после навигационного меню. Откройте файл header.php и найдите часть кода, которая отвечает за отображение навигации. Это может выглядеть так:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

1

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

Добавьте код для изображения:
После этого кода добавьте следующий HTML-код:

<div class="header-image" style="text-align: center; margin: 20px 0;">
       <img src="<?php echo get_template_directory_uri(); ?>/images/your-image.jpg" alt="Header Image" style="max-width: 100%; height: auto;">
   </div>

<img src="<?php echo get_template_directory_uri(); ?>/images/your-image.jpg" alt="Header Image" style="max-width: 100%; height: auto;">

</div>

Обратите внимание на your-image.jpg, это должно быть название вашего изображения. Убедитесь, что изображение загружено в соответствующую папку темы либо используйте URL, если оно загружено в медиа библиотеку.

Стилизация (по желанию):
Вы можете добавить дополнительные CSS-стили в файл стилей вашей темы (обычно style.css), чтобы настроить изображение в соответствии с вашим дизайном.

.header-image img {
       max-width: 100%; /* Ограничение по ширине изображения */
       height: auto;    /* Автоматическая высота */
   }

.header-image img {

max-width: 100%; /* Ограничение по ширине изображения */

height: auto; /* Автоматическая высота */

}

Сохраните изменения:
После того как вы внесете изменения, сохраните файл и загрузите его обратно на сервер, если редактировали локально.
Проверьте результат:
Перейдите на ваш сайт, чтобы убедиться, что изображение отображается между горизонтальным меню и основным контентом.

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

Способ второй — при помощи PHP

Кроме того, можно добавить изображение в шапку сайта без изменения файла header.php, используя functions.php или создав кастомный плагин функций. Для этого можно использовать хуки WordPress, чтобы вставить код в нужное место.

Добавление через файл functions.php

Просто добавим следующий код в файл functions.php рабочей темы:

function add_custom_header_image() {
    if (is_front_page() || is_home()) { // Опционально: показывать только на главной странице
        echo '
        <div class="header-image" style="text-align: center; margin: 20px 0;">
            <img src="' . get_template_directory_uri() . '/images/your-image.jpg" alt="Header Image" style="max-width: 100%; height: auto;">
        </div>
        ';
    }
}
add_action('wp_head', 'add_custom_header_image');

function add_custom_header_image() {

if (is_front_page() || is_home()) { // Опционально: показывать только на главной странице

echo '

</div>

}

add_action('wp_head', 'add_custom_header_image');

Этот код добавляет блок с изображением в секцию head HTML, которая сгенерирована WordPress, что фактически не задействует header.php, но добавляет изображение на сайте.

Создание кастомного плагина

Если вы хотите более чистое решение, которое не зависит от темы (это поможет, если вы когда-нибудь смените тему), можете создать кастомный плагин:

Создайте папку для плагина в директории wp-content/plugins/, например custom-header-image.

В этой папке создайте файл custom-header-image.php с содержимым:

<?php
/**
 * Plugin Name: Custom Header Image
 * Description: Добавляет изображение в шапку сайта.
 */

function add_custom_header_image() {
    echo '
    <div class="header-image" style="text-align: center; margin: 20px 0;">
        <img src="' . plugin_dir_url(__FILE__) . 'images/your-image.jpg" alt="Header Image" style="max-width: 100%; height: auto;">
    </div>
    ';
}
add_action('wp_head', 'add_custom_header_image');
?>

<?php

/**

* Plugin Name: Custom Header Image

* Description: Добавляет изображение в шапку сайта.

function add_custom_header_image() {

echo '

</div>

}

add_action('wp_head', 'add_custom_header_image');

Не забудьте создать папку images внутри вашей папки плагина и загрузить туда ваше изображение your-image.jpg.
Затем активируйте плагин через панель администрирования WordPress (в разделе «Плагины»).

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