Erweitertes Menü-Theming in Drupal 7

Ich bin durch das Web gekreuzt und es ist überhaupt nicht offensichtlich, wie man benutzerdefinierte Menüs thematisiert. Ich habe stundenlang gesucht und keinen einzigen Beitrag gefunden, der den gesamten Prozess der Erstellung eines Menüs und der Anpassung der Ausgabe veranschaulicht. Es scheint, dass dies ein mehrstufiger Prozess ist:

1. Erstellen Sie das Menü über die Drupal-Oberfläche.
2. Erstellen Sie eine Themenfunktion in Ihrer template.phpDatei, um die Ausgabe zu thematisieren.
3. Setzen Sie dieses Menü (irgendwie) einer Vorlagendatei aus, indem Sie es als Variable hinzufügen.
4. Rufen Sie die themeFunktion im Menü der Vorlagendatei auf.

1 ist einfach genug, die Probleme, auf die ich stoße, sind 2, 3 und 4. Wenn ich mir die Standardseitenvorlage ansehe, sehe ich, dass das Hauptmenü in der Variablen angezeigt wird $main_menu. Später auf der Seite sehen Sie die Funktion theme('links__system_main_menu', array('links' => $main_menu.... Das bedeutet, dass Sie irgendwo nach einer entsprechend benannten Themenfunktion suchen und diese verwenden, um die Ausgabe zu generieren.

Ich weiß, wenn ich function theme_links__system_main_menu(&$variables) {...}in meine template.php-Datei platziere, wird Drupal diese Funktion im Gegensatz zu verwenden function theme_menu_links(&$variables) {...}.

Was ich nicht weiß, ist, wie Drupal das benutzerdefinierte Menü, das ich mit dieser Funktion erstellt habe, verknüpft. Nehmen wir zum Beispiel an, ich habe ein Menü namens erstellt My Menu. Könnte ich die folgende Funktion in meiner template.phpDatei erstellen und die Ausgabe für dieses Menü thematisieren?function theme_links__system_my_menu(&$variables) {...}

Wie stellt man dieses benutzerdefinierte Menü auch einer Vorlagendatei zur Verfügung? Wie macht Drupal die $main_menuVariable page.tpl.php zugänglich?

Ich denke, der Schlüssel, den ich hier vermisse, ist, wie man die Variable, die mein benutzerdefiniertes Menü darstellt, in eine Vorlagenseite einbettet. Meistens habe ich jedoch keine Ahnung, was ich tun soll, nachdem ich das Menü erstellt habe.

Danke für die Hilfe.

EDIT: Sollte wohl posten, was ich mache. Gemäß meinem Kommentar zu BetaRide unten muss ich benutzerdefiniertes HTML in die <li>Elemente der Menüelemente einfügen . Insbesondere füge ich Twitter Bootstrap-Symbole hinzu.

Drupals Implementierung von Menüs ist etwas Besonderes. Es funktioniert nicht immer so, wie es scheint.

Sie können einen Blick auf die Kernimplementierung von template_preprocess_page () werfen, um zu erfahren , wie die Hauptmenü-Links als Variable zur Seitenvorlage hinzugefügt werden. Sie müssen in den API-Dokumenten einen Drilldown durchführen, aber die Funktion, die Sie in Ihrer Implementierung von theme_preprocess_page () aufrufen möchten, ist menu_navigation_links () , die eine Reihe von Links im Menü zurückgibt .

In Zeile 106 der page.tpl.php- Datei von Drupal core können Sie sehen, wie die Hauptmenü-Links in der Vorlage thematisiert sind, indem Sie die theme ( ) -Funktion mit einem Haken von 'links__system_main_menu' aufrufen.

Theoretisch sollte diese Implementierung mit einem benutzerdefinierten Menü dupliziert werden können, indem die Standardbenennungskonventionen befolgt werden. In template.php könnten Sie also Folgendes haben:

function THEMENAME_preprocess_page(&$variables){
  $variables['custom_menu'] = menu_navigation_links('menu-custom-menu');
}

function THEMENAME_links__menu_custom_menu(&$variables){
 //custom theme function here
}

und in page.tpl.php würden Sie so etwas hinzufügen:

<?php print theme('links__menu_custom_menu', array('links' => $custom_menu, 'attributes' => array('id' => 'custom-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Custom menu'))); ?>

Das Hinzufügen des benutzerdefinierten Menüs als Variable zu Ihrer Seitenvorlage ist jedoch nicht erforderlich. Sie können den Block des benutzerdefinierten Menüs einfach über die Drupal-Verwaltungsoberfläche in eine gewünschte Region platzieren. Sie können auch die Einstellungen der Site für die Hauptmenüquelle ändern und so die Standardvariable $ main_menu in page.tpl.php durch Ihr benutzerdefiniertes Menü ersetzen.

BEARBEITEN: Ich sehe gerade, dass Ihr Ziel darin besteht, den Menüelementen für Symbole nur benutzerdefiniertes HTML hinzuzufügen. Abhängig davon, wie Sie diese Symbole hinzufügen, gibt es verschiedene Optionen für das Drupal-Modul.

Menüsymbole - Ermöglicht das Hochladen eines Bilds über die Einstellungen des Menüelements und das automatische Generieren von CSS (anpassbar über eine Vorlage), mit dem das Bild als Hintergrund für das Menüelement hinzugefügt wird.

Menüattribute - Ermöglicht das Hinzufügen einer benutzerdefinierten Klasse zu jedem Menüelement über die Einstellungen im Administrator. Sobald jedem Menüelement eine eindeutige Klasse hinzugefügt wurde, können Sie mit CSS ein Symbol zum Menüelement hinzufügen oder mit Javascript den zusätzlichen HTML-Code in das Menüelement einfügen.

Vielleicht möchten Sie sich das Nice Menus- Modul ansehen . Hier ist ein Zitat darüber (von der Projektseite des Moduls):

... aktiviert erweiterbare Dropdown- / Rechts- / Links-Menüs. Für die meisten Browser wird nur CSS verwendet, für IE6 nur minimales Javascript. (Version 2 verwendet das Superfish jQuery-Plugin für alle Browser, mit der Option, JS zu deaktivieren, und greift für Browser, die damit umgehen können, auf CSS zurück.)

Derzeit sind drei Arten von Menüs möglich: horizontal, Dropdown-Menüs; vertikal, Menüs fliegen nach links; vertikal, Menüs fliegen nach rechts. Es gibt eine Handbuchseite mit einer Liste von Sites, die Nice-Menüs verwenden .

Nice Menus erstellt Blöcke, die mit jedem vorhandenen Site-Menü verknüpft werden können und überall dort platziert werden können, wo normale Blöcke in einem Thema platziert werden können. Für Themes ist es auch möglich, ein Menü mit den bereitgestellten Theme-Funktionen direkt als Nizza-Menü zu gestalten, sodass kein Block erforderlich ist. Eine spezielle Themenfunktion für das Menü "Primäre Links" ist verfügbar. Mit den Themenfunktionen kann ein Entwickler auch einen benutzerdefinierten Menübaum übergeben (dh kein Drupal-Menü verwenden). Weitere Informationen zur Verwendung der Themenfunktionen finden Sie in der Dokumentation .

Das Modul verfügt über ein einfaches, allgemeines Farbschema, das vollständig überschrieben werden kann, indem entweder das Überschreibungs-CSS zum normalen Stylesheet des Themas hinzugefügt wird oder indem eine Nice Menus-CSS-Datei erstellt und Nice Menus angewiesen wird, diese anstelle der eigenen Standard-CSS-Datei global zu verwenden Themenkonfiguration. In der mitgelieferten Datei README.txt und im Handbuch finden Sie einige Beispiele für CSS-Überschreibungen .

Je nachdem, was Sie anpassen möchten, ist Ihr Ansatz viel zu schwierig. Normalerweise erstelle ich das Menü über die Drupal-Oberfläche, wie Sie es vorgeschlagen haben. Mit dem Theme Developer Modul und Firebug finde ich heraus, welche Templates, Hooks und CSS-Direktiven ich überschreiben muss, um sie an meine Bedürfnisse anzupassen.

Es lohnt sich, ein Unterthema für das verwendete Basisthema zu erstellen, bevor Sie mit der Optimierung beginnen. Auf diese Weise können Sie Ihr Basisthema viel einfacher aktualisieren.

Hier ist ein intelligenter Code, der auf alle Menüelemente für Level 2 oder 3 oder mehr zugreifen kann

Platzieren Sie diesen Code in Ihrer tpl-Datei. Vergessen Sie nicht, die letzten Versionen von Boostrap js und CSS aufzurufen:

<!-- menu -->  

        <?php 

          # get menu with all levels 
          menu_tree_all_data('main-menu');
          $menu = menu_build_tree('main-menu');


          # help function for listing submenus for each link     
          function sub_menu_links($var){
           $submenu ='<ul class="dropdown-menu">';

              foreach ($var as $sub) {

                $path = str_replace("<front>",'' ,$sub["link"]["link_path"]);

                 if(count($sub["below"]) > 0 ){
                      $submenu .= '<li class="dropdown-submenu" ><a href="javascript:void(0);" >'.$sub["link"]["link_title"].'</a>';
                      $submenu .=  sub_menu_links($sub["below"]);
                      $submenu .= '</li>'; 
                  }else{
                      $submenu .= '<li><a href="'.$path.'">'.$sub["link"]["link_title"].'</a>'; 
                      $submenu .= '</li>'; 
                   }

              }
            $submenu .= ' </ul>';

            return $submenu;

          }


          # help function for more than 2 levels
          function menu_links($menu){

             $links = '<ul class="nav navbar-nav">';
             foreach ($menu as $link) {

              if(count($link["below"]) > 0 ){ 

                $path = str_replace("<front>",'' ,$link["link"]["link_path"]);

                $links .=  '<li class="dropdown ">';
                $links .= '<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">'.$link["link"]["link_title"].'</a>';
                      /* print "<pre>";
                      var_dump( $link["below"]);
                       print "</pre>";*/
                $links .= sub_menu_links($link["below"]); 


                $links .= '</li>' ;

              }else{
                  $links .= '<li>';
                  $links .= '<a href="'.$path.'">'.$link["link"]["link_title"].'</a>'; 
                  $links .= '</li>' ;
              }



              } 
              $links .= '</ul>';
              return  $links ;
          } 


          print menu_links($menu);


           ?>

Dieser Code gibt das Menü für CSS-Klassen zurück, die Sie selbst verwenden können. Ich verwende Bootstrap mit einigen benutzerdefinierten CSS

Dieser Code ist nach harter Arbeit eine Zeitersparnis. Er wurde auf Drupal 7.x getestet und funktioniert gut für das Hauptmenü. Sie können das Menü nach Belieben ändern