Drupal 7의 고급 메뉴 테마

나는 웹을 순회했으며 사용자 정의 메뉴를 테마로하는 방법은 전혀 분명하지 않습니다. 몇 시간 동안 살펴본 결과 메뉴를 만들고 출력을 사용자 지정하는 과정을 처음부터 끝까지 보여주는 단일 게시물을 찾지 못했습니다. 이것이 다단계 프로세스 인 것 같습니다.

1. Drupal 인터페이스를 통해 메뉴를 만듭니다.
2. template.php파일에 테마 기능을 작성 하여 출력을 테마하십시오.
3. 이 메뉴를 템플릿 파일에 변수로 추가하여 노출시킵니다 (어떻게 든).
4. theme템플릿 파일의 메뉴에서 함수를 호출 하십시오.

1은 수행하기 쉽고, 내가 겪는 문제는 2, 3 및 4에 있습니다. 기본 페이지 템플릿을 보면 기본 메뉴가 변수에 노출되어 있음을 알 수 $main_menu있습니다. 페이지 아래에서 함수를 볼 수 있습니다. 즉 theme('links__system_main_menu', array('links' => $main_menu..., 어딘가에 적절하게 명명 된 테마 함수를 찾고이를 사용하여 출력을 생성 함을 의미합니다.

내가 function theme_links__system_main_menu(&$variables) {...}template.php 파일에 넣으면 Drupal은 그 기능을 반대로 사용할 것입니다 function theme_menu_links(&$variables) {...}.

내가 모르는 것은 Drupal이 내가 만든 사용자 정의 메뉴를 해당 기능과 어떻게 연결하는지입니다. 예를 들어이라는 메뉴를 만들었다 고 가정 해 봅시다 My Menu. template.php파일에 다음 기능을 만들고 해당 메뉴의 출력을 테마로 지정할 수 있습니까?function theme_links__system_my_menu(&$variables) {...}

또한 템플릿 파일에 해당 사용자 정의 메뉴를 제공하는 방법은 무엇입니까? Drupal은 어떻게 $main_menu변수를 page.tpl.php에 노출 합니까?

내가 생각하는 내가 여기에 누락 키 템플릿 페이지에 내 사용자 지정 메뉴를 나타내는 변수를 포함하는 방법이다. 대부분의 경우 메뉴를 만든 후에해야 할 일이 완전히 없어졌습니다.

도와 주셔서 감사합니다.

편집 : 아마 내가하고있는 일을 게시해야합니다. 아래 BetaRide에 대한 의견 <li>에 따라 메뉴 항목 의 요소에 사용자 정의 된 HTML을 주입해야 합니다. 특히 Twitter Bootstrap 아이콘을 추가하고 있습니다.

드루팔의 메뉴 구현은 약간 특별하다. 그것이 항상 원하는대로 작동하는 것은 아니다.

기본 메뉴 링크가 페이지 템플리트에 변수로 추가되는 방식 에 template_preprocess_page () 의 핵심 구현을 살펴볼 수 있습니다 . API 문서에서 약간을 드릴 다운해야하지만 theme_preprocess_page () 구현에서 호출하려는 함수는 menu_navigation_links () 이며 메뉴에 링크 배열을 반환합니다.

Drupal core page.tpl.php 파일 의 106 행을 살펴보면 'links__system_main_menu'의 후크를 사용 하여 theme ( ) 함수를 호출하여 템플릿에서 메인 메뉴 링크가 어떻게 테마 화되는지 확인할 수 있습니다 .

이론적으로이 구현은 표준 명명 규칙에 따라 사용자 정의 메뉴로 복제 할 수 있어야합니다. 따라서 template.php에서 다음을 수행 할 수 있습니다.

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
}

그리고 page.tpl.php에서 다음과 같이 추가하십시오 :

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

그러나 페이지 템플리트에서 사용자 정의 메뉴를 변수로 추가 할 필요는 없습니다. Drupal 관리 인터페이스를 통해 사용자 정의 메뉴 블록을 원하는 영역에 쉽게 배치 할 수 있습니다. 또한 기본 메뉴 소스에 대한 사이트 설정을 변경하여 page.tpl.php의 기본 $ main_menu 변수를 사용자 정의 메뉴로 효과적으로 대체 할 수 있습니다.

편집 : 최종 목표에 대한 추가 내용을 아이콘의 메뉴 항목에 사용자 정의 HTML을 추가하는 것만 봅니다. 이 아이콘을 추가하는 방법에 따라 몇 가지 다른 Drupal 모듈 옵션이 있습니다.

메뉴 아이콘 -메뉴 항목 설정을 통해 이미지를 업로드하고 메뉴 항목의 배경으로 이미지를 추가하는 CSS (템플릿을 통해 사용자 정의 가능)를 자동으로 생성 할 수 있습니다.

메뉴 속성 -관리자의 설정을 통해 각 메뉴 항목에 사용자 정의 클래스를 추가 할 수 있습니다. 고유 한 클래스가 각 메뉴 항목에 추가되면 CSS를 사용하여 메뉴 항목에 아이콘을 추가하거나 javascript를 사용하여 추가 HTML을 메뉴 항목에 삽입 할 수 있습니다.

Nice Menus 모듈 을 살펴볼 수 있습니다 . 다음은 모듈의 프로젝트 페이지에서 이에 대한 인용입니다.

... 드롭 다운 / 오른쪽 / 왼쪽 확장 가능 메뉴를 활성화합니다. IE6에 대한 최소한의 Javascript와 함께 대부분의 브라우저에 CSS 만 사용합니다. (버전 2는 모든 브라우저에서 Superfish jQuery 플러그인을 사용하며 JS를 비활성화하는 옵션이 있으며이를 처리 할 수있는 브라우저에서는 CSS 전용으로 돌아갑니다.)

세 가지 스타일 / 종류의 메뉴가 현재 가능합니다 : 수평, 메뉴 드롭 다운; 수직 메뉴는 왼쪽으로 날아갑니다. 세로로 이동하면 메뉴가 오른쪽으로 날아갑니다. 니스 메뉴를 사용하는 사이트 목록 을 제공하는 핸드북 페이지 가 있습니다 .

Nice Menus는 기존 블록 메뉴와 연관 될 수있는 블록을 생성하며, 이는 테마에 일반 블록을 배치 할 수있는 위치에 배치 할 수 있습니다. 이들을 위해 제공된 테마 기능을 사용하여 메뉴를 직접 니스 메뉴로 테마 지정할 수 있으므로 블록이 필요하지 않습니다. 기본 링크 메뉴에 대한 특정 테마 기능을 사용할 수 있습니다. 테마 기능을 통해 개발자는 제작 메뉴 (예 : Drupal 메뉴를 사용하지 않음)를 사용자 정의 메뉴 트리에 전달할 수 있습니다. 설명서 에서 테마 기능을 사용하는 방법에 대한 자세한 정보가 있습니다 .

이 모듈에는 테마의 일반 스타일 시트에 재정의 CSS를 추가하거나 Nice Menus CSS 파일을 생성하고 Nice Menus가 전역을 통해 기본 값 대신 사용하도록 Nice Menus에 지시하여 완전히 재정의 할 수있는 단순하고 일반적인 색 구성표가 제공됩니다. 테마 구성. 포함 된 README.txt 파일 및 핸드북에 여러 CSS 대체 예제가 제공됩니다 .

사용자 정의하려는 항목에 따라 접근 방식이 크게 달라집니다. 일반적으로 나는 당신이 Sugest로 Drupal 인터페이스를 통해 메뉴를 만듭니다. 나는 테마 개발자 모듈 과 Firebug 를 사용하여 필요에 맞게 수정 해야하는 템플릿, 후크 및 CSS 지시문을 찾습니다.

조정을 시작하기 전에 사용중인 기본 테마의 하위 테마를 작성하는 것이 좋습니다. 이렇게하면 기본 테마를 훨씬 쉽게 업데이트 할 수 있습니다.

다음은 레벨 2 또는 3 이상의 모든 메뉴 항목에 액세스 할 수있는 스마트 코드입니다.

이 코드를 tpl 파일 안에 넣으십시오. boostrap js 및 css 최신 버전을 호출하는 것을 잊지 마십시오.

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


           ?>

이 코드는 CSS 클래스의 메뉴를 반환합니다. 사용자 정의 CSS와 함께 부트 스트랩을 사용하고 있습니다.

이 코드는 열심히 노력한 후 시간을 절약 할 수 있으며 drupal 7.x에서 테스트되었으며 기본 메뉴에서 잘 작동하여 원하는대로 메뉴를 변경할 수 있습니다