Crea un'immagine di intestazione responsive a larghezza intera per pagina

John ci sono molti modi per farlo, a seconda di ciò che vuoi esattamente e di quanta esperienza hai con html/php/css (o quanto tempo vorresti dedicare all'apprendimento).

Ci sono molti plugin su WordPress che potrebbero raggiungere questo obiettivo. Potresti voler provarne alcuni:

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

Se vuoi qualcosa già pronto, sembra che questo sia una buona opzione, anche se le opzioni vengono modificate nel backend e non nel personalizzatore di widget. Altri plugin che potrebbero anche ottenere qualcosa di simile sono Revolution Slider o Visual Composer, anche se non permettono di utilizzare direttamente il personalizzatore.

Se decidi di voler seguire la strada del widget per immagini, ho provato la maggior parte di quelli valutati nella directory dei plugin e funzionano tutti abbastanza bene. Tuttavia, non sono sicuro se qualcuno di essi supporti le immagini di sfondo. Se ne trovi uno che lo fa, usalo e poi crea semplicemente un template personalizzato con una nuova area widget per visualizzare il tuo banner.

Esempio di come creare un'area widget personalizzata e un template di pagina in twenty-fifteen:

<?php

/* includi in 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');

Successivamente duplica page.php dal tema twenty fifteen e rinominalo in qualcos'altro come "template_header-image.php". All'interno del file includi il tuo nuovo hook che aggiungerà il supporto per un'area widget personalizzata appena sopra il contenuto (supponendo che sia ciò che volevi).

 <?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(); ?>

Se non riesci a trovare un widget per immagini o stai cercando di creare un vero e proprio CMS "personalizzato" con campi facilmente modificabili, e hai un po' di esperienza in css e html, Advanced Custom Fields è da tempo un preferito da molti ed è probabilmente il più ricco di funzionalità tra i plugin per campi personalizzati. Ha tonnellate di documentazione e supporto e ti permette facilmente di creare backend personalizzati per i tuoi template del sito.

Ecco un esempio che ho messo insieme che ti permetterà di selezionare un'immagine su ogni pagina (questo esempio è per la modifica nel backend, anche se puoi anche usare ACF per creare campi widget personalizzati se lo desideri.)

1. Installa Advanced Custom Fields
2. Sul tuo sito naviga su http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export e carica acf-banner-import.json.
3. Aggiungi page_banner-header.php alla cartella del tuo tema attivo. Infine, aggiungi una nuova pagina su (http://example.com/wp-admin/post-new.php?post_type=page) e scegli il tuo nuovo template chiamato "Banner Header".
4. Ora modifica semplicemente i campi che appaiono e pubblica la tua pagina.

Spero che qualcosa qui funzioni per te... Ovviamente dovrai probabilmente modificare il css per adattarlo alle tue preferenze.

AGGIORNAMENTO:

Dai un'occhiata qui per vedere come WordPress aggiunge sfondi personalizzati all'intestazione (tramite css) al tema twenty fifteen.

twentyfifteen/inc/custom-header.php#L141

twentyfifteen/inc/custom-header.php#L157

Quindi, se volessi modificarlo, dovresti solo commentare/eliminare le immagini di sfondo attuali o semplicemente espanderle aggiungendo a quella stessa sezione nel file custom-header.php.

Esempio:

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

Per modificarlo direttamente sul tuo sito, cambia yoursite.com nel link qui sotto con il nome del tuo sito (devi essere loggato nel backend di WordPress) e questo ti porterà direttamente dove puoi modificare il css dell'intestazione per il tema predefinito twenty fifteen.

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

Ad essere onesti, fintanto che un plugin non ha recensioni terribili, dovresti stare bene usando uno qualsiasi di quelli che affermano di aggiungere intestazioni personalizzate. Se stai usando twenty fifteen, la maggior parte dei plugin per intestazioni personalizzate le aggiungerà come immagini di sfondo perché è così che funziona il tema per impostazione predefinita.

Prova uno di questi. Dovrebbero funzionare entrambi bene.

Custom Headers Extended

Unique Headers

Aggiornamento 2: Metodo ACF

Questa è una risposta al tuo ultimo aggiornamento su Advanced Custom Fields. Se stai inserendo questo in un semplice template di pagina/post, non dovresti aver bisogno di quel codice meta_key e WP_Query nel tuo ultimo aggiornamento.

Questo da solo dovrebbe funzionare:

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

Se vuoi essere più pulito, puoi racchiuderlo in un'istruzione if in modo che non generi html non necessario quando non è selezionata alcuna immagine:

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