Namen des Menüs

Ich arbeite unter WP 5.1 mit dem Theme Twenty Sixteen. Das primäre Menü ist bei diesem Theme standardmäßig oben rechts im Header platziert. Ich möchte ein zusätzliches Menü unterhalb des Header-Bildes haben.

Um dies zu erreichen, habe ich mir die header.php angesehen und als relevanten Code das Folgende identifiziert:

<div class="site-header-main">
[...]
               <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
                   <button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>


                   <div id="site-header-menu" class="site-header-menu">
                       <?php if ( has_nav_menu( 'primary' ) ) : ?>
                           <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
                               <?php
                                   wp_nav_menu(
                                       array(
                                           'theme_location' => 'primary',
                                           'menu_class' => 'primary-menu',
                                       )
                                   );
                               ?>
                           </nav><!-- .main-navigation -->
                       <?php endif; ?>
[...]
                   </div><!-- .site-header-menu -->
               <?php endif; ?>
           </div><!-- .site-header-main -->

Diesen Code habe ich - ohne die beiden hiesigen Auslassungszeichen im Code - am Ende meiner single.php vor

</header><!-- .site-header -->
       <div id="content" class="site-content">

eingefügt.

Das führt erwartungsgemäß dazu, daß das Menü, das ohnehin schon oben rechts im Header war, nun unterhalb des Header-Bildes wiederholt wird:

http://peter-nowak-journalist.de/

Ich möchte dort nun allerdings nicht das gleiche Menü wiederholen, sondern ein anderes Menü plazieren.

Ich gehe davon, daß ich an den drei Stellen im zusätzlichen Code, wo "( 'primary' )" steht, statt "primary" den Namen des von mir gewünschten Menüs nennen muß.

Ich habe ausprobiert, was passiert, wenn ich "primary" durch "veranstaltungen" ("Veranstaltungen" ist der von mir selbst gewählte Name für eines meiner Menüs) ersetze: Es wird nichts angezeigt...

Wie kann ich herausfinden, was quasi der 'System-Name' meiner Menüs ist, den ich in meinem zusätzlichen Code verwenden muß?

PS.:

Vermutlich muß ich auch noch bei

array(
                                          'theme_location' => 'primary',
                                          'menu_class' => 'primary-menu',
                                      )

etwas ändern, oder? Und falls ja: Was muß ich da austauschen?

Danke. :)

Ich habe in meine child functions.php eingefügt:

// This theme uses wp_nav_menu() in three locations.
   register_nav_menus( array(
       'primary' => __( 'Primary Menu', 'twentysixteen' ),
       'secondary'  => __( 'secondary', 'twentysixteen' ),
       'social'  => __( 'Social Links Menu', 'twentysixteen' ),
   ) );

Dadurch erscheint im back end die Möglichkeit, bei "Design / Menüs / Positionen verwalten" einem beliebigen Menü die Position "secondary" zuzuweisen.

Und in meiner child header.php heißt die relevante Passage jetzt:

<div class="site-header-main">
               <?php if ( has_nav_menu( 'secondary' ) || has_nav_menu( 'social' ) ) : ?>
                   <button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>


                   <div id="site-header-menu" class="site-header-menu">
                       <?php if ( has_nav_menu( 'secondary' ) ) : ?>
                           <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'secondary', 'twentysixteen' ); ?>">
                               <?php
                                   wp_nav_menu(
                                       array(
                                           'theme_location' => 'secondary',
                                           'menu_class' => 'secondary-menu',
                                       )
                                   );
                               ?>
                           </nav><!-- .main-navigation -->
                       <?php endif; ?>

Es sieht jetzt so erst einmal so aus:

http://peter-nowak-journalist.de/

Ich werde gleich noch ausprobieren, ob ich "|| has_nav_menu( 'social')" wegstreichen kann. - Und dann muß ich noch das Menü zusammenstellen, das eigentlich - statt der Veranstaltungen - dahin soll und dem die Position "secondary" zuweisen.

"|| has_nav_menu( 'social')" kann für meinen Zweck in der Einfügung tatsächlich weg. -

Ist es eigentlich korrekt, daß ich in in meinen child-Datei "twentysixteen" stehen lasse oder müßte daher eher so etwas wie "dgschild" stehen?

Jetzt fällt mir - abgesehen von dem, was ich eh noch ändern muß - auf: Wieso sind denn die Menüpunkte meines secondary-Menüs untereinander angeordnet, obwohl das Menü in die gleichen div-Klassen eingeschlossen ist, wie das primäre Menü?

Zu 1.:

Ja, Danke. Funktioniert. - Dann muß ich jetzt noch nach den oberen Rändern gucken oder vllt. untere Ränder hinzufügen. - Das finde ich vllt. selber heraus.

Zu 2.:

Ja, das kommt daher, daß für das Primäre Menü (oben rechts) in Zeile 59 der Original Twenty Sixteen header.php das Folgende steht:

<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>

und ich die fragliche Passage ja zunächst einmal nur verdoppelt hatte, sodaß jetzt in Zeile 109 meiner child header.php das gleiche steht.

Was müßte da statt dessen stehen? - Und was ist mit den anderen error-Meldungen, die Dein Link anzeigt? Sollte ich mich um die ebenfalls kümmern?

Quote from Sailor56

In dem Fall mit dem mit de Menü könnten das solche Dinge sein, wie die Umschaltung auf das Hamburger-Icon bei kleineren Bildschirmen... oder das Öffnen des Menüs beim kicken auf den Hamburger... oder ... oder ... oder...! Das müsstest du testen und schauen, welche Auswirkungen tatsächlich dran hängen.

Das hast Du richtig vermutet: Wenn ich die Umbenennung in menu-toggle-2 vornehme und dann im Costumizer ausprobiere, wie es mit anderen Bildschirm-Größen ist, dann läßt sich zwar das Menü oben rechts, aber nicht mein zusätzliches Menü öffnen... -

Was mache ich nun?

OFF-TOPIC

zu den anderen Fehlern:

1.

Quote

Element style not allowed as child of element section in this context. (Suppressing further errors from this subtree.)

From line 652, column 1; to line 652, column 7

ren</h2>↩↩<style>↩<!--↩

Contexts in which element style may be used:
Where metadata content is expected.
In a noscript element that is a child of a head element.
Content model for element section:
Flow content.

Wenn ich mir den Quelltext der Seite ansehe, dann ist Zeile 652:

<a class="next page-numbers" href="http://peter-nowak-journalist.de/page/2/">Nächste Seite</a></div>

Habe ich die richtige Stelle identifiziert? Falls ja, was müßte da nun gemacht werden?

2.

Quote

Stray start tag span.

From line 920, column 89; to line 920, column 106

. Betrieb <span class="amp">&amp;<

Im Quellcode der Seite lauten die Zeilen 919 bis 921:

</li>
                                            <li>
                    <a href="http://peter-nowak-journalist.de/2019/02/18/weltordnung-in-scherben/">Weltordnung in Scherben</a>

Das scheint nicht die gemeinte Stelle zu sein, oder?

Wenn ich statt dessen im Quellcode nach "Betrieb" suche, stoße ich auf Zeile 931:

<option class="level-2" value="12659">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rez. Betrieb <span class="amp">&amp;</span> Gewerkschaften / Arbeit&nbsp;&nbsp;(12)</option>

Das ist der Name einer Unterkategorie, die ich gestern angelegt hatte: "Rez. Betrieb & Gewerkschaften / Arbeit". span usw. habe ich dabei nicht verwendet; das wurde automatisch erzeugt.

zurück zu

1.:

Wenn ich nach dieser Erfahrung im Quellcode nach "ren</h2>" suche, finde ich in Zeile 658 bis 663:

<aside id="secondary" class="sidebar widget-area" role="complementary">
        <section id="ai1ec_agenda_widget-2" class="widget widget_ai1ec_agenda_widget">
    <h2 class="widget-title">Gelegenheiten, mich zu sehen und zu hören</h2>
<style>

Das ist mein zweites sidebar widget:

So könnte ich das weiter durchgehen. - Aber: Ist das das, was ich machen soll?

Quote from Sailor56

Muss denn überhaupt das zweite Menü, das ist ja ziemlich klein und passt wohl auch schon so auf kleinere Bildschirme, diese Funktion vorhanden sein, dass sich das Menü ausblendet und durch einen Button 'Menü' ersetzt wird?

Das Menü soll schon noch etwas länger werden; aber meinetwegen muß sich das nicht unbedingt ausblenden.

Quote from maxe

Es steht überall bei, was falsch ist. 1. das style, 2. das span (darf nicht in option).

Schön und gut. - Aber wie ist es dahin gekommen und wie bekomme ich es weg?

Wenn ich meinen child-Ordner rausnehme, zeigt der Validator auch lauter Fehler an:

https://validator.w3.org/nu/?doc=http://peter-nowak-journalist.de/

PS.:

Das war voreilig; irgendwie hatte ich den Ordner gerade nicht richtig bzw. nicht vollständig verschoben. Moment.

PPS.:

So - das Theme mußte ich natürlich noch zurück von meinem child auf Twenty Sixteen ändern; aber die Fehlermeldung des Validators bleiben trotzdem.

Und die Twenty Sixteen-Dateien sind auch alle vom 24.2. - also frisch und nicht nachträglich von mir geändert.

Das child hatte ich schon raus; zusätzliches Costumizer-CSS habe nicht, da ich ja eh meine eigene child css.style habe; jetzt habe ich noch alle Plugins deaktiviert; nun sind es zwar weniger Fehler aber immer noch eine ganze Reihe.

Die kann ich noch mal durchgehen. - Bliebe ansonsten noch die Frage, was mit den Fehlern ist, die anscheinend von den Plugins verursacht werden - sind die denn ein ernsthaftes Problem, solange mir und anderen Leuten die Seite so angezeigt wird, wie sie angezeigt werden soll?

Die meisten verbliebenen Fehlermeldungen ergaben sich daraus, daß ich in meinem html-Widget die small-tags ganz an den Anfang und ganz ans Ende gesetzt hatte, statt sie jeweils innerhalb der p-tags zu plazieren.

Jetzt gibt es - ohne Plugins und ohne child - noch drei Probleme mit dem Video in der sidebar; den code dafür habe ich von der Seite, von der das Video stammt:

https://de.labournet.tv/video/6703/solidaritaetskundgebung-fuer-eine-gefangenen-gewerkschaft#
(siehe "EMB"-Button).

Ich habe jetzt mein child-Theme wieder reingeschoben; dadurch sind die Video-Fehler merkwürdigerweise verschwunden - und ein paar andere hinzugekommen.

Die werde ich gleich noch mal durchgehen.

PS.:

Abgesehen von den Fehlermeldungen funktioniert jetzt auch die Anzeige der Seite nicht. Aber das liegt anscheinend daran, daß Zeile 13 meiner content.php das ACF-Plugin erfodert:

<div class="sticky-post"><?php the_field( 'dachzeile' ) ?></div>

So, jetzt habe ich das ACF-Plugin wieder aktiviert - mit der Folge, daß die Seite wieder angezeigt wird und die drei Fehlermeldungen zu dem Video wieder da sind -

außerdem noch zwei Fehlermeldungen wegen der Doppelung von "<div id="site-header-menu" class="site-header-menu">↩ " in meiner child header.php.

Dazu probiere ich gleich noch, was passiert, wenn ich die id in "site-header-menu-2" ändere. -

Und was soll ich mit den Video-Fehlermeldungen machen?

1.

Quote from Am Ende des Lateins

Dazu probiere ich gleich noch, was passiert, wenn ich die id in "site-header-menu-2" ändere.

Das verursacht mit meinem großen Display erst einmal keinen sichtbaren Schaden. Soll ich trotzdem vielleicht in meiner style.css

.site-header-menu {
   display: none;
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
   margin: 0.875em 0;
}

um dasselbe für .site-header-menu-2 ergänzen?

2.

Quote

Muss denn überhaupt das zweite Menü, das ist ja ziemlich klein und passt wohl auch schon so auf kleinere Bildschirme, diese Funktion vorhanden sein, dass sich das Menü ausblendet und durch einen Button 'Menü' ersetzt wird?

Ich habe jetzt mal probiert, was passiert, wenn ich die Zeile

<button id="menu-toggle-2" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>

einfach streiche: Dann verschwindet das Menü bei kleinem Display ersatzlos - das ist natürlich nicht erwünscht. Wie kann ich das vermeiden?

3.

Quote

Das dürfte allerdings auch ohne die Umbenennung der ID (2) genau das Problem sein.

Ja, der Button für kleine Displays funktioniert auch dann nicht, wenn ich "menu-toggle" (ohne "-2") stehen lasse. - Ergibt sich also die Frage:

(Wie) kann ich erzwingen, das auch bei kleinen Displays das eigentlich Menü statt des Buttons angezeigt wird?

Ich habe mir jetzt Folgendes überlegt:

A.

1.

Ich habe den Link zum Impressum in das untere Header-Menü verschoben. Damit sind oben rechts ohnehin nur noch externe Links. - Wenn diese von Smartphone- und Tablet-UserInnen nicht erreicht werden, ist das ja nicht so tragisch.

2.

Daher habe ich mich entschlossen,

• nun unten den Original-Twenty Sixteen Code mit "menu-toggle" und "site-header-menu" zu verwenden

und

• oben den modifizierten Code

sowie

• demgemäß nun mein neues Menü die Position "primary" zuzuweisen und dem alten die Position "secondary".

3.

Für das - nun obige - secondary-Menü habe ich den Code in folgender Weise modifiziert:

• Die Zeile

<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>

• habe ich einfach herausgenommen, sodaß das obige Menü nun Leuten mit kleinen Displays gar nicht erst angezeigt wird,

und

• statt "site-header-menu" schreibe ich dort "site-header-menu-2".

4. a)

Damit lautet meine komplette child header.php nun:

<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */


?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="profile" href="http://gmpg.org/xfn/11">
   <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
   <link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
   <?php endif; ?>
   <?php wp_head(); ?>
</head>


<body <?php
$old = "2019-03-01 01:00:00";
if(($post->post_modified) < $old)  echo 'id="old" ';
body_class(); ?>>
<div id="page" class="site">
   <div class="site-inner">
       <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentysixteen' ); ?></a>


       <header id="masthead" class="site-header" role="banner">
           <div class="site-header-main">
               <div class="site-branding">
                   <?php twentysixteen_the_custom_logo(); ?>


                   <?php if ( is_front_page() && is_home() ) : ?>
                       <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                   <?php else : ?>
                       <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                       <?php
                   endif;


                   $description = get_bloginfo( 'description', 'display' );
                   if ( $description || is_customize_preview() ) :
                       ?>
                       <p class="site-description"><?php echo $description; ?></p>
                   <?php endif; ?>
               </div><!-- .site-branding -->


               <?php if ( has_nav_menu( 'secondary' ) || has_nav_menu( 'social' ) ) : ?>


                   <div id="site-header-menu-2" class="site-header-menu">
                       <?php if ( has_nav_menu( 'primary' ) ) : ?>
                           <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Secondary Menu', 'twentysixteen' ); ?>">
                               <?php
                                   wp_nav_menu(
                                       array(
                                           'theme_location' => 'secondary',
                                           'menu_class' => 'secondary-menu',
                                       )
                                   );
                               ?>
                           </nav><!-- .main-navigation -->
                       <?php endif; ?>


                       <?php if ( has_nav_menu( 'social' ) ) : ?>
                           <nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?>">
                               <?php
                                   wp_nav_menu(
                                       array(
                                           'theme_location' => 'social',
                                           'menu_class'  => 'social-links-menu',
                                           'depth'       => 1,
                                           'link_before' => '<span class="screen-reader-text">',
                                           'link_after'  => '</span>',
                                       )
                                   );
                               ?>
                           </nav><!-- .social-navigation -->
                       <?php endif; ?>
                   </div><!-- .site-header-menu -->
               <?php endif; ?>
           </div><!-- .site-header-main -->


           <?php if ( get_header_image() ) : ?>
               <?php
                   /**
                    * Filter the default twentysixteen custom header sizes attribute.
                    *
                    * @since Twenty Sixteen 1.0
                    *
                    * @param string $custom_header_sizes sizes attribute
                    * for Custom Header. Default '(max-width: 709px) 85vw,
                    * (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.
                    */
                   $custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );
               ?>
               <div class="header-image">
                   <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                       <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                   </a>
               </div><!-- .header-image -->
           <?php endif; // End header image check. ?>


           <div class="site-header-main">
               <?php if ( has_nav_menu( 'primary' ) ) : ?>
                   <button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>


                   <div id="site-header-menu" class="site-header-menu">
                       <?php if ( has_nav_menu( 'primary' ) ) : ?>
                           <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
                               <?php
                                   wp_nav_menu(
                                       array(
                                           'theme_location' => 'primary',
                                           'menu_class' => 'primary-menu',
                                       )
                                   );
                               ?>
                           </nav><!-- .main-navigation -->
                       <?php endif; ?>


                   </div><!-- .site-header-menu -->
               <?php endif; ?>
           </div><!-- .site-header-main -->


       </header><!-- .site-header -->
       <div id="content" class="site-content">

b) Und in meiner style.css habe ich:

#menu-sub-header-bild li {
    display: inline-block;
   border-bottom: 1px solid #d1d1d1;
    background: #F5F5F5;
}


#site-header-menu-2 li {
    display: inline-block;
    border: 0;
}

c) Besonders hübsch sieht es in der Smartphone-Darstellung des Customizers nicht aus - aber ich selbst und der content-Produzent besitzen eh keine Smartphones... ;)

B.

Wegen der Fehlermeldungen zu dem Video in der sidebar werde ich einen neuen Thread beginnen; das hat ja hiermit nichts zu tun.

C.

Dann bleiben für hier eigentlich nur noch die beiden Fragen:

• Spricht etwas grundlegend gegen meine sub A. dargestellte - zugegebenermaßen: Not- - Lösung?

• Soll ich das, was von Hause für "site-header-menu" in meiner style.css steht, vorsichtshalber auch entsprechend für "site-header-menu-2" reinschreiben oder ist das überflüssig?

D.

Wenn ich jetzt noch mal alle meine Plugins, außer ACF deaktiviere, spuckt der Validator - außer den drei Fehlermeldungen wegen des Videos in der sidebar - noch die beiden folgenden (zusammenhängenden) Fehlermeldungen aus:

Quote

1. Warning: The navigation role is unnecessary for element nav.
   

   From line 87, column 14; to line 87, column 109

   <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Secondary Menu">↩

   
   

2. Error: Duplicate ID site-navigation.
   

   From line 109, column 14; to line 109, column 108

   <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primäres Menü">↩