Создание адаптивного полноразмерного изображения шапки для каждой страницы

Джон, есть множество способов сделать это, в зависимости от того, что именно тебе нужно и насколько хорошо ты знаком с html/php/css (или сколько времени ты готов потратить на изучение).

В WordPress существует множество плагинов, которые могут это реализовать. Возможно, стоит просто попробовать некоторые из них:

https://wordpress.org/plugins/search.php?q=custom+header

Если тебе нужно готовое решение, то похоже, что этот вариант достаточно хорош, хотя настройки изменяются в админке, а не в настройщике виджетов. Другие плагины, такие как Revolution Slider или Visual Composer, также могут реализовать подобное, но они тоже не позволяют использовать настройщик напрямую.

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

Пример создания пользовательской области виджетов и шаблона страницы в twenty-fifteen:

<?php

/* добавить в functions.php */

function register_banner_widget_area() {

    $args = array(
        'id'            => 'custom-banner-area',
        'name'          => __( 'After Header - (Custom Banner Area)', 'my-theme' ),
        'description'   => __( 'This is an area for a custom banner',  'my-theme'  ),
        'class'         => 'banner-area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '',
        'after_title'   => '',
    );

    register_sidebar( $args );

}
add_action('widgets_init', 'register_banner_widget_area');

function do_custom_banner_area() {
   if ( is_active_sidebar( 'custom-banner-area' ) ) {
        dynamic_sidebar( 'custom-banner-area' );
   }
}
add_action('custom_banner_widget_area', 'do_custom_banner_area');

Затем продублируй page.php из темы twenty fifteen и переименуй его, например, в "template_header-image.php". Внутри файла добавь созданный хук, который добавит поддержку пользовательской области виджетов прямо над контентом (предполагая, что это именно то, что тебе нужно).

 <?php
  /**
   * Template Name: Custom Header Area
   * Description: A Template Which Allows Custom Header Areas
   */

 get_header(); ?>
 <?php do_action( 'custom_banner_widget_area' ); ?> 
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
        while ( have_posts() ) : the_post();
            get_template_part( 'content', 'page' );
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        // End the loop.
        endwhile;
        ?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
<?php get_footer(); ?>

Если ты не смог найти подходящий виджет изображений или хочешь создать по-настоящему "кастомную" CMS с легко редактируемыми полями и имеешь некоторый опыт в css и html, Advanced Custom Fields уже давно является фаворитом многих и, вероятно, самым функциональным среди плагинов для пользовательских полей. У него масса документации и поддержки, и он позволяет легко создавать пользовательские интерфейсы для шаблонов сайта.

Вот пример, который я подготовил и который позволит тебе выбирать изображение для каждой страницы (этот пример для редактирования в админке, хотя ты можешь также использовать ACF для создания пользовательских полей виджетов, если хочешь).

1. Установи Advanced Custom Fields
2. На своем сайте перейди по http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export и загрузи acf-banner-import.json.
3. Добавь page_banner-header.php в папку активной темы. Наконец, создай новую страницу по адресу (http://example.com/wp-admin/post-new.php?post_type=page) и выбери новый шаблон под названием "Banner Header".
4. Теперь просто отредактируй появившиеся поля и опубликуй страницу.

Надеюсь, что-то из этого сработает для тебя... Тебе, конечно, может понадобиться подправить css, чтобы стилизовать все по своему вкусу.

ОБНОВЛЕНИЕ:

Посмотри, как WordPress добавляет пользовательские фоновые изображения заголовков (через css) в теме twenty fifteen.

twentyfifteen/inc/custom-header.php#L141

twentyfifteen/inc/custom-header.php#L157

Если ты захочешь это отредактировать, просто закомментируй/удали текущие фоновые изображения или расширь их, добавив в тот же раздел файла custom-header.php.

Пример:

.css-selector {
    background-image: url(<?php header_image(); ?>);
}

Чтобы отредактировать это прямо на своем сайте, замени yoursite.com в ссылке ниже на имя своего сайта (ты должен быть авторизован в админке WordPress), и это перенесет тебя прямо к редактированию css заголовка для стандартной темы twenty fifteen.

http://yoursite.com/wp-admin/theme-editor.php?file=inc%2Fcustom-header.php&theme=twentyfifteen&scrollto=2397

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

Попробуй один из этих. Они должны работать нормально.

Custom Headers Extended

Unique Headers

Обновление 2: Метод с ACF

Это ответ на твое последнее обновление про Advanced Custom Fields. Если ты добавляешь это в простой шаблон страницы/записи, тебе не понадобится тот meta_key и код WP_Query из твоего последнего обновления.

Этого должно быть достаточно:

<div class="header-banner" style="background-image:url(<?php the_field('header_image'); ?>)"></div>

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

if(get_field('header_image'))
{
    echo'<div class="header-banner" style="background-image:url(' . get_field('header_image') . ')"></div>';
}