Cum să creezi o imagine de antet responsive pe toată lățimea pentru fiecare pagină în WordPress

John, există multe modalități de a face acest lucru, în funcție de ceea ce dorești exact și de câtă experiență ai cu html/php/css (sau cât timp ai vrea să înveți).

Există o mulțime de plugin-uri WordPress care ar putea realiza acest lucru. Poți încerca câteva dintre ele:

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

Dacă dorești ceva gata făcut, se pare că acesta este o opțiune bună, deși opțiunile se schimbă în backend, nu în personalizatorul de widget-uri. Alte plugin-uri care ar putea realiza ceva similar sunt Revolution Slider sau Visual Composer, deși nici ele nu permit utilizarea directă a personalizatorului.

Dacă te hotărăști să mergi pe ruta widget-ului de imagine, am încercat majoritatea celor evaluate în directorul de plugin-uri și funcționează destul de bine. Totuși, nu sunt sigur dacă vreunul suportă imagini de fundal. Dacă găsești unul care are, folosește-l și apoi creează un șablon personalizat cu o nouă zonă de widget-uri pentru a afișa bannerul tău.

Exemplu de creare a unei zone de widget-uri personalizate și a unui șablon de pagină în twenty-fifteen:

<?php

/* include în functions.php */

function register_banner_widget_area() {

    $args = array(
        'id'            => 'custom-banner-area',
        'name'          => __( 'După Antet - (Zonă Banner Personalizat)', 'my-theme' ),
        'description'   => __( 'Aceasta este o zonă pentru un banner personalizat',  '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');

Apoi duplică page.php din tema twenty fifteen și redenumește-l la ceva de genul "template_header-image.php". În interiorul fișierului, include noul tău hook care va adăuga suport pentru o zonă de widget-uri personalizată chiar deasupra conținutului (presupunând că asta dorești).

 <?php
  /**
   * Nume Șablon: Zonă Antet Personalizat
   * Descriere: Un Șablon Care Permite Zone de Antet Personalizate
   */

 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;
        // Sfârșitul buclei.
        endwhile;
        ?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
<?php get_footer(); ?>

Dacă nu găsești un widget de imagine sau dorești să creezi un CMS cu adevărat "personalizat" cu câmpuri ușor de editat și ai ceva experiență în css și html, Advanced Custom Fields este de mult timp favoritul multora și probabil cel mai bogat în funcții dintre plugin-urile de câmpuri personalizate. Are o mulțime de documentație și suport și îți permite să creezi cu ușurință backend-uri personalizate pentru șabloanele tale de site.

Iată un exemplu pe care l-am pregătit pentru a selecta o imagine pe fiecare pagină (acest exemplu este pentru editarea în backend, deși poți folosi ACF pentru a crea câmpuri personalizate de widget-uri dacă dorești.)

1. Instalează Advanced Custom Fields
2. Pe site-ul tău, navighează la http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export și încarcă acf-banner-import.json.
3. Adaugă page_banner-header.php în folderul temei active. În cele din urmă, adaugă o pagină nouă la (http://example.com/wp-admin/post-new.php?post_type=page) și alege noul tău șablon numit "Banner Antet".
4. Acum editează simplu câmpurile care apar și publică pagina ta.

Sper că ceva de aici funcționează pentru tine... Evident, va trebui probabil să editezi css-ul pentru a-l adapta la preferințele tale.

ACTUALIZARE:

Uită-te aici cum WordPress adaugă fundaluri personalizate de antet (prin css) în tema twenty fifteen.

twentyfifteen/inc/custom-header.php#L141

twentyfifteen/inc/custom-header.php#L157

Deci, dacă ai vrea să editezi asta, ai putea să comentezi/ștergi imaginile de fundal curente sau pur și simplu să le extinzi adăugând în aceeași secțiune din fișierul custom-header.php.

Exemplu:

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

Pentru a edita acest lucru direct pe site-ul tău, schimbă yoursite.com în linkul de mai jos cu numele tău de site (trebuie să fii autentificat în backend-ul WordPress) și te va duce direct unde editezi css-ul antetului pentru tema implicită twenty fifteen.

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

Sincer, atâta timp cât un plugin nu are recenzii groaznice, ar trebui să fii în regulă folosind oricare dintre cele care pretind că adaugă antete personalizate. Dacă folosești twenty fifteen, majoritatea plugin-urilor de antet personalizat le vor adăuga ca imagini de fundal pentru că așa funcționează tema implicit.

Încearcă unul dintre acestea. Ar trebui să funcționeze bine ambele.

Custom Headers Extended

Unique Headers

Actualizare 2: Metoda ACF

Acesta este un răspuns la ultima ta actualizare despre Advanced Custom Fields. Dacă pui asta într-un șablon simplu de pagină/post, nu ar trebui să ai nevoie de acel meta_key și cod WP_Query din ultima ta actualizare.

Doar acest lucru ar trebui să funcționeze:

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

Dacă vrei să fii mai ordonat, poți încadra într-o declarație if pentru a nu afișa html inutil când nu este selectată nicio imagine:

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