it-swarm.com.de

Erstellen Sie ein responsives Header-Bild in voller Breite pro Seite

Ich bin neu in Wordpress und erstelle derzeit eine Website mit einigen Seiten (Startseite, Künstler, Verlauf, Videos).

Jede dieser Seiten benötigt einen benutzerdefinierten Header mit einem reaktionsfähigen Bild in voller Breite (das Bild wird im CSS als Hintergrundbild verwendet).

Ich möchte dieses CMS benutzerfreundlich gestalten und den Redakteuren erlauben, das Header-Bild (idealerweise 2 Bilder, Desktop und Handy) aus dem Widget-Bereich (aus dem Seitenbereich) auszuwählen und hochzuladen.

Wie würden Sie das angehen?

info: (Ich verwende ein Thema für fünfundzwanzig).

Vielen Dank

UPDATE

Ich habe ein benutzerdefiniertes Feld für die Seite erstellt - header_imge - (Feldtyp -> Bild)

Dann setze ich das Hintergrundbild (mit dem Wert meines benutzerdefinierten Feldes) aus dem Tag. Der Rest wird über CSS verwaltet.

    <?php   
        $args = array(
            'meta_key' => 'header_image'
        );
        $the_query = new WP_Query( $args );
    ?>  

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

Dies ist die bisher schnellste und einfachste Lösung. Das Hinzufügen des Inline-Stils & PHP fühlt sich allerdings etwas hackig an.

1
John

John, es gibt viele Möglichkeiten, dies zu tun, abhängig davon, was Sie genau wollen und wie viel Erfahrung Sie mit HTML/PHP/CSS haben (oder wie viel Zeit Sie mit Lernen verbringen möchten).

Es gibt viele Plugins auf WordPress, die dies erreichen könnten. Vielleicht möchten Sie einfach einige davon ausprobieren:

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

Wenn Sie etwas direkt von der Stange haben möchten, sieht es so aus: dies ist eine gute Option, obwohl die Optionen im Backend und nicht im Widget-Customizer geändert werden. Andere Plugins wie Revolution Slider oder Visual Composer können ebenfalls so etwas bewirken. Sie lassen jedoch nicht zu, dass Sie den Customizer direkt verwenden.

Wenn Sie sich wirklich für die Route image widget entscheiden, habe ich die meisten der bewerteten im Plugin-Verzeichnis ausprobiert und sie funktionieren alle ziemlich gut. Ich bin mir jedoch nicht sicher, ob Hintergrundbilder unterstützt werden. Wenn Sie eine finden, die dies tut, erstellen Sie einfach eine benutzerdefinierte Vorlage mit einem neuen Widget-Bereich, um Ihr Banner anzuzeigen.

Beispiel für das Erstellen eines benutzerdefinierten Widget-Bereichs und einer Seitenvorlage in fünfundzwanzig:

<?php

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

Dupliziere als nächstes page.php aus dem fünfundzwanzigsten Thema und benenne es in "template_header-image.php" um. Fügen Sie in die Datei Ihren neu erstellten Hook ein, der die Unterstützung für einen benutzerdefinierten Widget-Bereich direkt über dem Inhalt hinzufügt (vorausgesetzt, Sie möchten dies).

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

Wenn Sie kein Bild-Widget finden oder ein wirklich "benutzerdefiniertes" CMS mit einfach zu bearbeitenden Feldern erstellen möchten und Erfahrung mit CSS und HTML haben, ist Erweiterte benutzerdefinierte Felder von vielen schon seit langem als Favorit angesehen worden und ist wahrscheinlich das funktionsreichste der benutzerdefinierten Feld-Plugins. Es bietet jede Menge Dokumentation und Support und damit können Sie problemlos benutzerdefinierte Backends für Ihre Websitevorlagen erstellen.

Hier ist ein Beispiel, das ich zusammengestellt habe, mit dem Sie auf jeder Seite ein Bild auswählen können (dieses Beispiel ist für die Bearbeitung des Backends gedacht, Sie können jedoch auch ACF verwenden, um benutzerdefinierte Widgetfelder zu erstellen, wenn Sie möchten.)

  1. Installieren Erweiterte benutzerdefinierte Felder
  2. Navigieren Sie auf Ihrer Website zu http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export und laden Sie acf-banner-import.json .
  3. Fügen Sie page_banner-header.php zu Ihrem aktiven Themenordner hinzu. Fügen Sie zuletzt eine neue Seite unter ( http://example.com/wp-admin/post-new.php?post_type=page ) hinzu und wählen Sie Ihre neue Vorlage mit dem Namen "Banner Header".
  4. Bearbeiten Sie nun einfach die angezeigten Felder und veröffentlichen Sie Ihre Seite.

Hoffentlich funktioniert hier etwas für Sie ... Sie müssen wahrscheinlich die CSS-Datei bearbeiten, um sie nach Ihren Wünschen zu gestalten.


UPDATE:

Sehen Sie sich hier an, wie WordPress dem fünfundzwanzigsten Thema benutzerdefinierte Header-Hintergründe (über CSS) hinzufügt.

fünfundzwanzig/inc/custom-header.php # L141

fünfundzwanzig/inc/custom-header.php # L157

Wenn Sie also das bearbeiten würden, würden Sie einfach die aktuellen Hintergrundbilder auskommentieren/löschen oder sie erweitern, indem Sie denselben Abschnitt in der custom-header.php-Datei hinzufügen.

Beispiel:

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

Um dies direkt auf Ihrer Site zu bearbeiten, ändern Sie yoursite.com in dem unten stehenden Link in Ihren Site-Namen (Sie müssen im WordPress-Backend angemeldet sein). Dadurch gelangen Sie direkt zu der Stelle, an der Sie das Header-CSS für das Standardthema 25 bearbeiten.

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

Um ehrlich zu sein, sollte es Ihnen nichts ausmachen, wenn ein Plugin keine schlechten Bewertungen hat und Sie behaupten, benutzerdefinierte Header hinzugefügt zu haben. Wenn Sie 25 verwenden, werden die meisten benutzerdefinierten Header-Plug-ins als Hintergrundbilder hinzugefügt, da das Design standardmäßig so funktioniert.

Probieren Sie eines davon aus. Das sollte beides gut funktionieren.

Benutzerdefinierte Header erweitert

Eindeutige Header


Update 2: ACF-Methode

Dies ist eine Antwort auf Ihr letztes Update für erweiterte benutzerdefinierte Felder. Wenn Sie eine einfache Seiten-/Post-Vorlage einfügen, sollten Sie diesen meta_key- und WP_Query-Code in Ihrem letzten Update nicht benötigen.

Das alleine sollte funktionieren:

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

Wenn Sie diesbezüglich sauberer sein möchten, können Sie eine if-Anweisung einschließen, damit kein unnötiger HTML-Code ausgegeben wird, wenn kein Bild ausgewählt ist:

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