Temi di menu avanzati in Drupal 7

Ho navigato sul web e non è affatto ovvio come tema menu personalizzati. Ho cercato ore e non ho trovato un singolo post che illustri il processo, dall'inizio alla fine, della creazione di un menu e della personalizzazione del suo output. Sembra che questo sia un processo in più fasi:

1. Crea il menu tramite l'interfaccia Drupal.
2. Crea una funzione tema nel tuo template.phpfile per tema l'output.
3. Esporre questo menu a un file modello (in qualche modo) aggiungendolo come variabile.
4. Chiamare la themefunzione nel menu nel file modello.

1 è abbastanza facile da fare, i problemi che incontro sono con 2, 3 e 4. Osservando il modello di pagina predefinito, vedo che espone il menu principale nella variabile $main_menu. Più avanti nella pagina puoi vedere la funzione theme('links__system_main_menu', array('links' => $main_menu..., il che significa che sta cercando da qualche parte una funzione tema con un nome appropriato e la utilizza per generare l'output.

So che inserisco function theme_links__system_main_menu(&$variables) {...}nel mio file template.php Drupal userà quella funzione al contrario function theme_menu_links(&$variables) {...}.

Quello che non so è come Drupal collega il menu personalizzato che ho creato con quella funzione. Diciamo ad esempio che ho creato un menu chiamato My Menu. Potrei creare la seguente funzione nel mio template.phpfile e tema l'output per quel menu?function theme_links__system_my_menu(&$variables) {...}

Inoltre, come si può rendere quel menu personalizzato disponibile per un file modello? In che modo Drupal espone la $main_menuvariabile a page.tpl.php?

Penso che la chiave che mi manca qui sia come incorporare la variabile che rappresenta il mio menu personalizzato in una pagina di modello. Per la maggior parte però mi sono completamente perso con cosa fare dopo aver creato il menu.

Grazie per l'aiuto.

EDIT: Probabilmente dovrebbe pubblicare quello che sto facendo. Per il mio commento a BetaRide di seguito, devo inserire codice HTML personalizzato negli <li>elementi delle voci di menu. In particolare, sto aggiungendo le icone Twitter Bootstrap.

L'implementazione dei menu di Drupal è un po 'speciale, non sempre funziona come dovrebbe.

Puoi dare un'occhiata all'implementazione principale di template_preprocess_page () su come i collegamenti al menu principale vengono aggiunti come variabili al modello di pagina. Devi approfondire un po 'i documenti API, ma la funzione che vuoi chiamare nella tua implementazione di theme_preprocess_page () è menu_navigation_links () , che restituirà una matrice di collegamenti nel menu.

Guardando la linea 106 del file page.tpl.php del core di Drupal , puoi vedere come i collegamenti del menu principale sono a tema nel modello chiamando la funzione theme ( ) con un hook di 'links__system_main_menu'.

Teoricamente, questa implementazione dovrebbe poter essere duplicata con un menu personalizzato seguendo le convenzioni di denominazione standard. Quindi, in template.php, potresti avere:

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
}

e in page.tpl.php, dovresti aggiungere qualcosa del genere:

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

Tuttavia, non è necessario aggiungere il menu personalizzato come variabile nel modello di pagina. È possibile posizionare facilmente il blocco del menu personalizzato in un'area desiderata tramite l'interfaccia di amministrazione Drupal. Inoltre, è possibile modificare le impostazioni del sito per l' origine del menu principale , sostituendo efficacemente la variabile $ main_menu predefinita in page.tpl.php con il menu personalizzato.

EDIT: sto solo vedendo la tua aggiunta sul tuo obiettivo finale è quello di aggiungere un po 'di HTML personalizzato alle voci di menu per le icone. A seconda di come stai aggiungendo queste icone, ci sono un paio di diverse opzioni del modulo Drupal.

Icone del menu : consente di caricare un'immagine tramite le impostazioni della voce di menu e genera automaticamente CSS (personalizzabile tramite un modello) che aggiunge l'immagine come sfondo alla voce di menu.

Attributi del menu : consente di aggiungere una classe personalizzata a ciascuna voce di menu tramite le relative impostazioni nell'amministratore. Dopo aver aggiunto una classe univoca a ciascuna voce di menu, è possibile utilizzare CSS per aggiungere un'icona alla voce di menu o utilizzare javascript per iniettare l'HTML aggiuntivo nella voce di menu.

Potresti voler esaminare il modulo dei menu di Nizza . Ecco una citazione al riguardo (dalla pagina del progetto del modulo):

... abilita i menu espandibili a discesa / destra / sinistra. Utilizza solo CSS per la maggior parte dei browser, con Javascript minimo per IE6. (La versione 2 utilizza il plug-in SuperQuery jQuery per tutti i browser, con un'opzione per disabilitare JS, e ricade su CSS solo per i browser che possono gestirlo.)

Sono attualmente possibili tre stili / tipi di menu: orizzontale, menu a discesa; verticale, i menu volano a sinistra; verticale, i menu volano verso destra. C'è una pagina del manuale che fornisce un elenco di siti che utilizzano i menu di Nizza .

Nice Menu crea blocchi che possono essere associati a qualsiasi menu del sito esistente e che possono essere posizionati ovunque i blocchi normali possano essere inseriti in un tema. Per i tematici, è anche possibile assegnare un tema a un menu come un menu di Nizza direttamente utilizzando le funzioni del tema fornite, quindi non è necessario un blocco. È disponibile una funzione tema specifica per il menu Collegamenti principali. Le funzioni del tema consentono inoltre a uno sviluppatore di passare in una struttura di menu personalizzata di sua creazione (ovvero non utilizzare un menu Drupal). Ulteriori informazioni su come utilizzare le funzioni del tema nella documentazione .

Il modulo viene fornito con una combinazione di colori semplice e generica che può essere completamente ignorata aggiungendo il CSS di override al normale foglio di stile del tema o creando un file CSS di Nice Menus e dicendo a Nice Menus di utilizzare quello anziché il proprio predefinito attraverso il globale configurazione del tema. Diversi esempi di sovrascrittura CSS sono forniti nel file README.txt incluso e nel manuale .

A seconda di ciò che desideri personalizzare, il tuo approccio è molto arduo. Di solito creo il menu attraverso l'interfaccia Drupal come hai suggerito. Prendo il modulo sviluppatore del tema e Firebug per scoprire quali modelli, hook e direttive CSS devo sovrascrivere per modificarlo in base alle mie esigenze.

Vale la pena prendere in considerazione la creazione di un sottotema del tema di base che si sta utilizzando prima di iniziare a modificare. Ciò semplifica notevolmente l'aggiornamento del tema di base.

ecco un codice intelligente che può accedere a tutte le voci di menu per qualsiasi livello 2 o 3 o più

inserisci questo codice nel tuo file tpl non dimenticare di chiamare boostrap js e css ultime versioni:

<!-- 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);


           ?>

questo codice restituirà il menu per le classi CSS che è possibile utilizzare il proprio sto usando bootstrap con alcuni CSS personalizzati

questo codice è dopo un duro lavoro può farti risparmiare tempo ed è testato su Drupal 7.xe funziona perfettamente con il menu principale, puoi cambiare il menu come preferisci