Liens de menu en ligne dans Drupal 7
Aujourd’hui j'avais une de ces taches d’intégration Drupal qui semble constamment resurgir: celle de transformer un bloc du module menu d'une liste html a un jeu de liens en ligne. En images je devais me rendre
de ça: à ça:
Comme d'habitude je fait surtout du développement de modules et des taches semblables chez Koumbit, j'étais conscient que Drupal avait déjà une classe pour des listes contenant des liens en ligne, "lists inline", mais je ne savais pas comment changé ces valeurs au niveau du thème. Donc j'ai visité la page API de theme_menu_tree()
pour y trouver de l'inspiration, ce que j'ai trouvé dans un commentaire de wgsimon. Un thème Drupal peut supplanter la fonction de thème d'un menu précis dans Drupal avec la pattern THEME_menu_tree__MENU_NAME()
.
J'ai ajouté le code suivant au template.php de mon thème, pour rendre le menu d'usager standard de Drupal ainsi que notre menu pour les visiteurs avec le style Drupal de liens en ligne:
/** * Afficher le menu d'usager en ligne */ function customtheme_menu_tree__user_menu($variables) { return '<ul class="links inline clearfix">' . $variables['tree'] . '</ul>'; } /** * Afficher le menu d'usager anonyme en ligne */ function customtheme_menu_tree__menu_user_menu_anonymous_($variables) { return '<ul class="links inline clearfix">' . $variables['tree'] . '</ul>'; }
Vous n'avez qu'à remplacer le mot customtheme avec le nom de votre thème et ensuite changer les noms des menus pour utiliser ça sur n'importe quel menu.
Pour le changeur de langage j'ai fait quelque-chose de semblable, après avoir consulter locale_block_view()
dans le API. J'ai vue que le bloc du changeur de langue utilise theme('links__locale_block', $variables);
pour fournir son contenu. J'ai supplanter cette fonction dans template.php:
/** * Afficher les liens du changeur de langue en ligne */ function customtheme_links__locale_block($variables) { array_push($variables['attributes']['class'], 'links', 'inline', 'clearfix'); return theme('links', $variables); }
J'ai donc découvert que la pattern theme_function__object_name
marche pour n'importe quel fonction thème appeler de cette manière. Je suis sur que ceci est précisé quelque-part dans la documentation de l'API de Drupal.
Mes menus ressemblais maintenant à ceci:
La dernière étape varie selon le thème. Dans mon cas j'ai déplacé &lt;div class="region region-header"&gt;
et son contenu à avant le logo, dans page.tpl.php
, et j'ai inséré le CSS suivant dans les fichiers appropriés:
.region-header .block { display: inline-block; margin-bottom: 0; } .region-header { text-align: right; }
Le résultat:
Il reste évidement à finir l'intégration, mais mon soucis principal jusqu'à présent c'était d'éviter de charger mon CSS avec du code déjà présent dans Drupal.