• Gelöst chgabriel

    (@chgabriel)


    Hallo Gemeinde,

    ich bin neu im Kreise der WordPress-Nutzenden und arbeite gerade an einer Seite im Theme „fruitful“. Ihr findet sie unter:

    http://agwald.gabkompr.de

    Da ich ein einspaltiges Layout ohne Seitenleisten bevorzuge suche ich nun nach einer alternativen Möglichkeit eine Seitensuche einzubinden, was das Theme „out-of-the-box“ aber nicht zulässt.

    Nun meine Frage: Gibt es eine Möglichkeit den Header der Seite unterhalb der Navigation um eine Spalte in voller Breite nach unten zu erweitern und dort das Suche-Widget einzubinden? Wenn ja, wie mache ich das? Und falls nicht: Ist es Möglich einen zweiten „Header“ unter dem eigentlichen zu platzieren und dort die Suche einzubinden.

    Ich freu mich über Eure Hilfe und bedanke mich bereits vorab ganz herzlich dafür.

    Gruß

    Christian

    • Dieses Thema wurde geändert vor 8 Jahren von chgabriel.
Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Moderator Bego Mario Garde

    (@pixolin)

    Ui, da hast du dir was vorgenommen. Hast du schon ein bisschen Erfahrungen mit Programmierung? Mit reinem Drag&Drop oder der Auswahl von Theme-Optionen kommst du hier leider nicht weit; das gibt das Theme nicht her.

    Wenn du bisher wenig Erfahrung mit eigenem Code hast, solltest du dir erst einmal eine eigene Entwicklungsumgebung einrichten, um Sachen in Ruhe austesten zu können. Du bekommst dann auch nicht gleich Panik, wenn etwas nicht auf Anhieb klappt oder eine Fehlermeldung dich aussperrt.

    Da Änderungen im Theme beim nächsten Update überschrieben werden, fängst du am beseten damit an, ein Child Theme anzulegen. Dabei handelt es sich um eine Ergänzung des Themes Fruitful, in dem du aber nur die Templates hinzufügst, die du ändern möchtest. Wie du ein Child Theme erstellst, ist im Web hinreichend erläutert (z.B. hier). Ich spare mir deshalb dazu eine weitschweifige Ausführung.

    Damit du möglichst wenig am Theme änderst, würde ich dann erst einmal einen eigenen Widget-Bereich definieren. Vielleicht kommst du ja doch irgendwann auf die Idee, die Sidebar zu nutzen und dann wäre es ja schade, wenn wir das unnötigerweise geändert hätten.

    Um den eigenen Widgetbereich zu definieren, legst du in deinem Child Theme eine Datei functions.php an und fügst dort folgendes hinzu:

    <?php
    add_action( 'widgets_init', 'meine_header_sidebar' );
    
    function meine_header_sidebar() {
        register_sidebar( array(
          'name' => 'Header',
          'id' => 'header-sidebar',
          'description' => 'Widgetbereich im Header',
          'before_widget' => '<aside id="%1$s" class="widget %2$s">',
          'after_widget' => '</aside>',
          'before_title' => '<h3 class="widget-title">',
          'after_title' => '</h3>',
        ) );
    }

    Das Ergebnis sollte sein, dass du im Menü Design > Widgets einen neuen Widgetbereich „Header“ findest. Du brauchst dort aber noch kein Widget platzieren – es würde eh nicht angezeigt, weil wir im Theme noch nicht definiert haben, wo es erscheinen soll.

    Um im Theme festzulegen, wo diese Widgets angezeigt werden sollen, müssen wir eine „dynamic sidebar“ anlegen. (Der Begriff „sidebar“ ist hier etwas irreführend. Er wurde gewählt, weil üblicherweise Widgets in einer Sidebar angezeigt werden, auch wenn wir das jetzt im Header platzieren möchten.)

    Da wir den Code an zwei verschiedenen Stellen benötigen werden (mehr dazu später), packen wir ihn in eine weitere Funktion in die Datei functions.php:

    
    function mein_header_widgetbereich() {
      if ( is_active_sidebar( 'header-sidebar' ) ) {
        echo '<div id="header-sidebar" class="widget-area">';
        dynamic_sidebar( 'header-sidebar' );
        echo '</div><!-- #header-sidebar -->';
      } else {
      echo '<h2>Hier sollen die Widgets hin!</h2>';
      }
    }

    Einfacher ausgedrückt besagt dieser Code „Wenn der Widgetbereich header-sidebar schon genutzt wird, dann zeige seine Widgets an, sonst zeige erst einmal nur den Text Hier sollen die Widgets hin! an.

    Diese Funktion müssen wir jetzt an geeigneter Stelle unterbringen. Dazu kopieren wir aus dem Parent-Theme Fruitful das Template header.php und werfen einen Blick hinein. Oh je, der Header ist leider ein wenig komplizierter als üblich. Die verschiedenen Theme-Optionen (Darstellung responsive oder fix?) müssen schließlich abgebildet werden. Der Code für das Navigationsmenü ist deshalb in ein if-Statement verschachtelt, dass mit if ( !$is_responsive || ( $is_responsive && … anfängt. Hier suchst du die Stelle heraus, an der das Navigationsmenü und der Header enden:

        <nav role="navigation" class="site-navigation main-navigation">
          <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- .site-navigation .main-navigation -->
      </div>
    </header><!-- #masthead .site-header -->

    An den beiden Stellen (!) fügen wir nun unsere Funktion ein:

        <nav role="navigation" class="site-navigation main-navigation">
          <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- .site-navigation .main-navigation -->
      </div>
    <?php mein_header_widgetbereich(); ?>
    </header><!-- #masthead .site-header -->

    Wenn bis hier alles geklappt hat, solltest du in deiner Website unterhalb des Headers den Hinweis Hier sollen die Widgets hin! sehen. Nun brauchst du eigentlich nur noch unter Design > Widgets das Widget Suche in den neuen Widget-Bereich Header ziehen. Als Ergebnis siehst du jetzt im Header das Suchformular, allerdings nicht gerade an der optimalen Stelle.

    Um das auch noch in den Griff zu bekommen, fügen wir unserem Stylesheet style.css noch zwei Regeln hinzu:

    div#header-sidebar {
        clear: both;
        text-align: center;
        padding: 20px 0 0 0;
    }
    
    #header-sidebar #searchform:after {
        top: auto;
        font-size: 15px;
        border: none;
        position: relative;
    }
    

    Jetzt sollte alles anständig aussehen. 👍

    Wenn du dann alles getestet hast, überträgst du per FTP dein Child Theme auf deinen Webserver und aktivierst es im Backend. Da wir ein Child Theme verwendet haben, sind die Änderungen auch leichter nachvollziehbar. Wenn etwas schief gehen sollte, löschst du das Child Theme wieder per FTP.

    Meine Antwort ist diesmal etwas ausführlicher geraten und normalerweise sprengt so etwas hier auch den Rahmen. Aber vielleicht hilft es dir ja weiter – oder du entscheidest dich für ein ganz anderes Theme, das deinen Vorstellungen mehr entspricht und sich auch ohne Programmierung an deine Wünsche anpassen lässt. Keiner erwartet, dass jeder WordPress-Nutzer programmieren kann. Dafür gibt es schließlich fertige Themes.

    Viel Erfolg.

    Flower33

    (@flower33)

    @pixolin
    Wow, sehr schönes und nützliches Tutorial, da sag ich doch mal danke, obwohl ich nicht der Fragesteller bin! 🙂

    Moderator Bego Mario Garde

    (@pixolin)

    Der @flower33 wieder … ♥️

    Ist schön, wenn sich mal jemand bedankt.

    Thread-Starter chgabriel

    (@chgabriel)

    Hallo!

    wow, Bego Mario Garde, ganz herzlichen Dank für Deine Antwort oder besser gesagt das ausführliche Tutorial.

    Da ich keine E-Mail-Benachrichtigung bekommen hatte, war ich davon ausgegangen, dass meine Frage gefloppt ist. Umso größer ist nun mein Erstaunen beim erneuten Login. Nun habe ich dann auch die Checkbox gefunden, mit der man die E-Mailbenachrichtigung aktivieren kann *facepalm.

    Danke, Danke, Danke und beste Grüße

    Christian

    • Diese Antwort wurde geändert vor 8 Jahren von chgabriel.
Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Das Thema „Header erweitern oder „Subheader“ hinzufügen“ ist für neue Antworten geschlossen.