Thèmes « HowTos »
Afficher des images aléatoires
Date du document en anglais : 26 Août 2009 - 23h08 - http://drupal.org/node/29522
On peut le faire grâce à un script, nommé rotate.php, trouvé sur alistapart.com.
Procédure :
- Créer un dossier sous le dossier racine du serveur web. Je l'ai placé dans mon dossier de thème.
- Remplir ce dossier avec des images.
- Télécharger le script et stockez-le à l'abri.
- Modifiez les script pour qu'il puisse trouver votre dossier image. Si vous ne voulez pas toucher au script, enregistrez-le dans le même dossier que les images.
- Dans votre configuration de thème, pour le logo personnalisé, indiquez le chemin vers le script plutôt que le chemin vers le logo.
- C'est tout.
Ajouter des classes « first » et « last » aux blocs
Date du document en anglais : 4 Mars 2010 - 23h29 - http://drupal.org/node/293188
Parfois, le premier ou le dernier bloc d'une région doit être d'un style différent des autres blocs. Pour avoir une classe « First » ou « Last » sur les premiers et derniers blocs d'une région, vous devez surcharger deux fonctions de thème : theme_block() et theme_blocks().
- Surcharger theme_blocks() :
<?php
function phptemplate_blocks($region) {
$output = '';
if ($list = block_list($region)) {
$blockcounter = 1; // il y a au moins un bloc dans cette région
foreach ($list as $key => $block) {
// $key == <i>module</i>_<i>delta</i>
$block->extraclass = ''; // ajout de la clé 'extraclass' à l'objet $block
if ($blockcounter == 1){ // est-ce le premier bloc de la région ?
$block->extraclass .= ' first';
}
if ($blockcounter == count($list)){ // est-ce le dernier bloc de la région ?
$block->extraclass .= ' last';
}
$output .= theme('block', $block);
$blockcounter++;
}
}
// Ajout d'un contenu attribué à cette région via un appel à drupal_set_content()
$output .= drupal_get_content($region);
return $output;
}
?> - Surcharger theme_block() :
<?php
function phptemplate_block($block) {
// dans cette ligne, l'extraclasse est ajoutée en tant que classe
$output = "<div class=\"block block-$block->module $block->extraclass\"
id=\"block-$block->module-$block->delta\">\n";
$output .= " <h2 class=\"title\">$block->subject</h2>\n";
$output .= " <div class=\"content\">$block->content</div>\n";
$output .= "</div>\n";
return $output;
}
?>
C'est tout !
Ajouter des classes « first » et « last » aux blocs menu
Date du document en anglais : 23 Août 2009 - 15h23 - http://drupal.org/node/138656 Drupal 5.x
Cet article est spécifique à Drupal 5.x. Drupal 6 utilise des theme_links au lieu de menu_item_link, et ajoute automatiquement les classes « First » et « Last » aux items de menus.
On veut souvent styliser le premier et le dernier élément de menu différemment des autres. CSS 2 fournit un simple sélecteur pour le faire dynamiquement mais il n'est malheureusement pas pris en compte par Internet Explorer, aussi, beaucoup de concepteurs de thèmes ajoutent une classe « First » et « Last » aux éléments des listes, pour qu'ils puissent être ciblés par les styles CSS.
Drupal 5 ajoute automatiquement les classes « first » et « last » aux primary et secondary links, mais ne le fait malheureusement pas pour les menus affichés dans des blocs. Heureusement, le système des thèmes nous permettra d'y remédier.
Le menu est généré par la fonction menu_tree(), qui n'est pas surchargeable par le thème. Quoiqu'il en soit, cette fonction est elle-même appelée par une fonction de thème, nous pourrons la surcharger par ce biais. Pour cela, copiez-collez le code suivant dans votre fichier template.php :
<?php
function phptemplate_menu_tree($pid = 1) {
if ($tree = phptemplate_menu_tree_improved($pid)) {
return "\n<ul class=\"menu\">\n". $tree ."\n</ul>\n";
}
}
function phptemplate_menu_tree_improved($pid = 1) {
$menu = menu_get_menu();
$output = '';
if (isset($menu['visible'][$pid]) && $menu['visible'][$pid]['children']) {
$num_children = count($menu['visible'][$pid]['children']);
for ($i=0; $i < $num_children; ++$i) {
$mid = $menu['visible'][$pid]['children'][$i];
$type = isset($menu['visible'][$mid]['type']) ? $menu['visible'][$mid]['type'] : NULL;
$children = isset($menu['visible'][$mid]['children']) ? $menu['visible'][$mid]['children'] : NULL;
$extraclass = $i == 0 ? 'first' : ($i == $num_children-1 ? 'last' : '');
$output .= theme('menu_item', $mid, menu_in_active_trail($mid)
|| ($type & MENU_EXPANDED) ? theme('menu_tree', $mid) : '', count($children) == 0, $extraclass);
}
}
return $output;
}
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE, $extraclass = '') {
return '<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) . ($extraclass ? ' ' . $extraclass : '')
. '">'. menu_item_link($mid, TRUE, $extraclass) . $children ."</li>\n";
}
?>
Cette fonction diffère de la fonction par défaut par le fait qu'elle dirige le système vers la version alternative de menu_tree(), phptemplate_menu_tree_improved().
Cette fonction fonctionne exactement comme celle du core sauf qu'elle passe une extraclass à la fonction menu item alternative. (Oui, on peut ajouter des paramètres à une fonction de thème surchargée). phptemplate_menu_item() pose juste l'extraclasse si elle est spécifiée, ou ne fait rien si elle ne l'est pas. Voilà ainsi les classes « first » et « last » dans tout menu d'un bloc.
Notez que ce code ajoute ces classes à l'élément de la liste, pas au lien lui-même.
Voici comment Drupal gère habituellement ces classes, et permet à une règle CSS de cibler soit l'élément de la liste soit le lien, selon les besoins. Si on mettait la classe sur l'élément <a> lui-même, cela ne ferait que styliser le lien et non l'élément affiché.
Élément de menu isolé
Parfois, vous avez un (sous-)menu avec un seul élément. Le code précédent ajoute la classe « first » à un élément de menu, sans se soucier s'il est le premier parmi une multitude ou s'il est le premier et aussi le seul élément du menu. Cela pouvant vicier un thème, il y a deux façons de pallier à la présence d'un seule élément de menu :
Façon n° 1 :
Ajoutez ce code :
<?php
$extraclass .= $num_children == 1 ? ' last' : '';
?>après
<?php
$extraclass = $i == 0 ? 'first' : ($i == $num_children-1 ? 'last' : '');
?>Cela ajoutera juste une classe « Last », vous aurez ainsi un élément de menu avec la classe « first last ».
Façon n° 2 :
Ajoutez ce code :
<?php
$extraclass = $num_children == 1 ? 'single-item' : $extraclass;
?>après
<?php
$extraclass = $i == 0 ? 'first' : ($i == $num_children-1 ? 'last' : '');
?>Cela ajoutera une classe « single-item » au lieu de « first ».
Isoler un élément de menu spécifique avec $mid
Date du document en anglais : 26 Août 2009 - 23h52 - http://drupal.org/node/198634
On a parfois besoin de styliser un élément de menu en particulier (pour lui donner une couleur différente par exemple). En ajoutant $mid dans la classe de chaque élément de menu, on les contrôle entièrement avec les CSS.
La fonction modifiée ressemblera à ceci :
<?php
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE, $extraclass = '') {
return '<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) . ($extraclass ? ' ' . $extraclass : '') .
' mid-' . $mid . '">'. menu_item_link($mid, TRUE, $extraclass) . $children ."</li>\n";
}
?>
Je n'ai fait qu'ajouter ". ' mid-' . $mid", sans me préoccuper de tests conditionnels puisque $mid est toujours déclaré.
Dans les CSS, j'utilise un sélecteur tel que #header .mid-123 pour atteindre l'élément de menu utilisé dans l'en-tête, etc. Ça marche très bien.
Ajouter des classes « first » et « last » aux listes LI
Date du document en anglais : 23 Août 2009 - 15h34 - http://drupal.org/node/213711
Comme dans le billet précédent, mais appliqué aux listes LI.
Le traitement des listes s'effectue dans les fonctions theme_item_list($items = array(), $title = NULL, $type = 'ul', $attributes = NULL)> qui peuvent être surchargées dans le fichier template.php. Il n'y a que quelques petits changements à effectuer pour que cela fonctionne (ajouter $item_key au foreach et vérifier le décompte pour déterminer si la class s'applique).
Copiez le code ci-dessous dans votre fichier template.php et ce sera tout :
<?php
function phptemplate_item_list($items = array(), $title = NULL, $type = 'ul', $attributes = NULL) {
$output = '<div class="item-list">';
if (isset($title)) {
$output .= '<h3>'. $title .'</h3>';
}
if (!empty($items)) {
$output .= "<$type" . drupal_attributes($attributes) . '>';
foreach ($items as $item_key=>$item) {
$attributes = array();
$children = array();
if (is_array($item)) {
foreach ($item as $key => $value) {
if ($key == 'data') {
$data = $value;
}
elseif ($key == 'children') {
$children = $value;
}
else {
$attributes[$key] = $value;
}
}
}
else {
$data = $item;
}
if (count($children) > 0) {
$data .= theme_item_list($children, NULL, $type, $attributes); // Render nested list
}
if($item_key == 0) {
$attributes['class'] = (isset($attributes['class'])? $attributes['class'] .= ' first' : 'first');
}
elseif($item_key == count($items)-1){
$attributes['class'] = (isset($attributes['class'])? $attributes['class'] .= ' last' : 'last');
}
$output .= '<li' . drupal_attributes($attributes) . '>'. $data .'</li>';
}/* end foreach */
$output .= "</$type>";
}
$output .= '</div>';
return $output;
}
?> Bonus : zebra
Pour ajouter une classe zebra qui alternera les items de la liste (pas les balises php); ajoutez ce qui suit avant le $output .= '<li' . drupal_attributes($attributes) . '>'. $data .'</li>'; :
<?php
if ($item_key % 2) {
$attributes['class'] = (
isset($attributes['class'])
? $attributes['class'] .= ' zebra'
: $attributes['class'] = 'zebra'
);
}
?> Ajouter des régions à la page d'accueil
Date du document en anglais : 25 Août 2009 - 02h43 http://drupal.org/node/65064
Pour Drupal 6.x, reportez-vous à Attribution de contenu aux régions.
Ce qui suit concerne l'utilisation de thèmes avec PHPTemplate (le moteur de thèmes par défaut de Drupal). La page suivante concerne les thèmes PHP seulement.
Dans cet exemple nous avons un thème personnalisé, appelé montheme, et nous allons ajouter trois régions à la page d'accueil. Nous les appelerons frontpage top, frontpage center et frontpage bottom.
Remplacez toutes les occurences de montheme par le nom de votre thème.- Dans le fichier themes/montheme/template.php
(créez-le s'il n'éxiste pas), ajoutez le code suivant :
<?php
/** Define the regions **/
function mytheme_regions() {
return array(
'left' => t('left sidebar'),
'right' => t('right sidebar'),
'content' => t('content'),
'header' => t('header'),
'footer' => t('footer'),
'frontpage_top' => t('frontpage top'),
'frontpage_center' => t('frontpage center'),
'frontpage_bottom' => t('frontpage bottom'),
);
}
?> -
Maintenant que les régions sont déclarées, allez dans le fichier page.tpl.php (qui se trouve dans le dossier de votre thème).
Placez le code suivant à l'endroit où vous souhaitez que les régions soient affichées :
<?php if ($is_front || strstr($_GET['q'], 'admin/block')) :
?>
<div id="frontpage_top" class="frontpage">
<?php print $frontpage_top ?>
</div>
<?php endif; ?> Répétez cette procédure pour les trois régions de la page d'accueil. Pour améliorer les performances, vous pouvez combiner deux régions avec une seule instruction if().
-
Pour ajouter des blocs à ces nouvelles régions, il suffit d'aller dans Administration » Construction du site » Blocs.
Désormais, avec des tableaux HTML ou des CSS, vous pouvez placer ces régions où vous le souhaitez dans votre page d'accueil, les rendre plus attractives, etc.
Si vous ne voulez pas que le contenu par défaut s'affiche sur la page d'accueil, vous devez entourer le <?php print $content ?> avec un if (!$is_front).
Allez voir blocks repository pour de jolis blocs, ou créez-en avec views que vous pourrez disposer sur votre page d'accueil.
Blocs en page d'accueil et thèmes plain PHP
Date du document en anglais : 27 Août 2009 - 00h01 - http://drupal.org/node/205396
J'ai pu ajouter un bloc en page d'accueil en éditant le fichier thème drupal de mon thème plain PHP. Ce qui veut dire que si vous utilisez un clone de Chameleon, tout ce que vous avez à faire est ajouter les références des nouveaux blocs à la fonction yourtheme_regions(), ajouter la référence du bloc de thème à votre fonction yourtheme_page :
<?php // Get blocks before so that they can alter the header (JavaScript, Stylesheets etc.)
$blocks_left = theme_blocks('left');
$blocks_right = theme_blocks('right');
$blocks_home_center = theme_blocks('home_center');
?>puis ajouter le code suivant à l'endroit où vous voulez que votre bloc apparaisse :
<?php $output .= "n<!-- begin content -->n";
if ( $show_blocks && !empty($blocks_home_center) && drupal_is_front_page() ){
$output .= ".$blocks_home_center."; }
?>Comme vous pouvez le voir, j'ai mis le mien juste après la balise de début de contenu. Pour les blocs gauche et droit, les zones dans le fichier thème sont clairement repérées.
S'il s'agit du bloc central, vous pouvez aussi ajoutez une ligne après .block dans le fichier common.css :
width: 180px;
}
#block-block-11{
width: 100%;
}
Vous aurez besoin de publier le bloc, ou de le survoler de la souris dans l'administration des blocs, pour obtenir son numéro.
Ajouter un menu par défaut aux nodes sans menus
Date du document original en anglais : 23 Août 2009 - 19h17 - http://drupal.org/node/369854
Quand il s'agit de gérer des nodes il y en a toujours qui ne peuvent être rattachés à aucun des items du menu principal. Ainsi, pour le site sur lequel je travaille actuellement (ce n'est pas kolossaldrupal qui parle, c'est l'auteur de l'article en anglais. NDT), certains nodes ont besoin d'un menu par défaut même s'ils ne font pas partie des liens de menus principaux qui sont affichés sur la plupart des nodes.
Voici l'idée
- D'abord contrôlez la table menu_links pour voir s'il existe une ligne pour le chemin en cours (par exemple « node/1 »)
- Ensuite, si rien n'a été trouvé, cherchez le chemin du menu par défaut que l'on veut utiliser
- Paramétrez le menu par défaut comme item de menu courant (menu_set_item)
C'est tout.
<?php
/**
* La toute-puissante fonction de pré-traitement, si commode
* Paramétrez le nouvel item ici pour être sûr qu'il soit
disponible pour l'affichage.
*/
function mysite_preprocess_node(&$variables) {
$node = $variables['node'];
// paramétrer le menu par défaut si besoin.
_set_default_menu($node->nid);
}
/**
* Un menu est défini pour la plupart des items. Mais nous
* devons en définir un pour ceux qui n'en ont pas.
*/
function _set_default_menu($nid){
if (!node_has_menu("node/$nid")) {
$menu = _find_default_menu($nid);
}
}
// le node a-t-il un menu ?
function node_has_menu($path) {
$sql = "SELECT 'TRUE' FROM drupal_menu_links ";
$sql .= "WHERE menu_name IN ('primary-links') AND ";
$sql .= "link_path = '%s'";
$result = db_result(db_query($sql, $path));
return $result;
}
/**
* Ici, le menu par défaut existe. Vous pouvez trouver votre
* menu par défaut de différentes façons,
* par l'utilisation d'une taxonomy existante appliquée à un
* node ou par n'importe quel autre champ appliqué au node, ou
* même par une variable par défaut.
*/
function _find_default_menu($nid) {
$sql = "SELECT link_path FROM drupal_menu_links WHERE plid = 0 AND ";
$sql .= "menu_name IN ('primary-links') AND link_title = '%s'";
$link = db_result(db_query($sql, 'Some Menu'));
$router_item = menu_get_item($link);
// ne pas paramétrer si router_item est vide
if($router_item) {
menu_set_item("node/$nid", $router_item);
}
}
?>Cacher le titre d'un node sur une page (6.x)
Date du document en anglais : 27 Août 2009 - 00h22 http://drupal.org/node/426482
Vous pouvez cacher les titres des nodes de certains types de contenus en ajoutant du code dans votre fichier template.php.
Cet exemple omet le titre des nodes dont le type de contenu est page ou article. Il sauvegarde également le titre dans une variable, pour qu'il puisse être utilisé ailleurs dans dpage.tpl.php.
Notez également que ces instructions concernent la situation pour laquelle la fonction n'existe pas. Si vous obtenez une erreur "cannot redeclare function...", vous devrez ajouter ce code à la fonction existante.
Enfin, pour que ces modifications prennent effet, vous devrez aller dans Administrer » Construction du site » Thèmes et sauvegarder la configuration pour reconstruire le registre de thèmes.
<?php
function THEMENAME_preprocess_page(&$vars) {
// Titres omis selon le type de contenu lorsque leur affichage n'est pas souhaité
// dans la mise en page.
$vars['original_title'] = $vars['title'];
if (!empty($vars['node']) && in_array($vars['node']->type,
array('page', 'story'))) {
$vars['title'] = '';
}
}
?>
Pour utiliser ce code, remplacez page ou story avec le type de node dont vous ne voulez pas afficher le titre, et remplacez THEMENAME avec le nom de votre thème. Par exemple, si votre thème s'appelle foo, la fonction s'appellera foo_preprocess_page. Si votre fichier template.php a déjà une fonction THEMENAME_preprocess_page, il suffit de lui ajouter ces lignes de code.
Cacher le titre du node dans la page d'accueil
Voici un exemple sur la façon de cacher le titre d'un node uniquement sur la page d'accueil. Comme pour l'exemple précédent, ce code doit être placé dans le fichier template.php de votre thème.
<?php
function THEMENAME_preprocess_page(&$vars) {
// Titres ignorés dans la page d'accueil
$vars['original_title'] = $vars['title'];
if ($vars['is_front']) {
$vars['title'] = '';
}
}
?>
Pour utiliser ce code, remplacez page ou story avec le type de node dont vous ne voulez pas afficher le titre, et remplacez THEMENAME avec le nom de votre thème. Par exemple, si votre thème s'appelle foo, la fonction s'appellera foo_preprocess_page. Si votre fichier template.php a déjà une fonction THEMENAME_preprocess_page, il suffit de lui ajouter ces lignes de code.
Cacher le titre du nœud sur une page (5.x)
Date du document en anglais : 27 Août 2009 - 00h23 http://drupal.org/node/138910
Vous pouvez cacher les titres des nodes sur le critère de leur type de contenu, en ajoutant un peu de code dans votre fichier template.php.
Cet exemple omet le titre de tout node dont le type de contenu est page ou article. Notez qu'il sauvegarde également le titre dans une variable, pour qu'il puisse, si besoin, être utilisé dans un fil d'ariane.
<?php
// Titles are ignored by content type when they are not desired in the design.
$vars['breadcrumb_title'] = $vars['title'];
if (arg(0) == 'node' && is_numeric(arg(1))) {
$node = node_load(arg(1));
if (in_array($node->type, array('page', 'story'))) {
$vars['title'] = '';
}
}
?>
C'est ici que le code s'insère dans la fonction _phptemplate_variables() :
<?php
function _phptemplate_variables($hook, $vars = array()) {
switch ($hook) {
case 'page':
// Titles are ignored by content type when they are not desired in the design.
$vars['breadcrumb_title'] = $vars['title'];
if (arg(0) == 'node' && is_numeric(arg(1))) {
$node = node_load(arg(1));
if (in_array($node->type, array('page', 'story'))) {
$vars['title'] = '';
}
}
break;
}
return $vars;
}
?>
Cacher le titre du node dans la page d'accueil
Voici un exemple sur la façon de cacher le titre d'un node sur la page d'accueil. Encadrez la balise H1 de votre fichier page.tpl.php avec la première et la troisième ligne de ce code-exemple. La deuxième ligne est un exemple de ce qui publierait votre titre dans page.tpl.php.
<?php if ($title && !$is_front): ?>
<h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>
Remplacer le titre du nœud par une image
Date du document en anglais : 27 Août 2009 - 00h07 - http://drupal.org/node/221854
J'ai repris plus d'un site, conçus avec Dreamweaver. Le design et la mise en page étaient très beaux, et l'une des tâches dans la conversion du site vers Drupal était de conserver autant que possible son attrait visuel. L'un des éléments graphiques consistait en titres sous forme d'images. C'est ainsi que commença ma recherche sur la façon de remplacer des titres Drupal par des images. J'ai essayé plusieurs méthodes avant d'arriver à celle décrite dans le précédent article, qui m'a donné l'idée qui suit.
Vue d'ensemble : les concepts de base
Un nœud de votre site a un titre, tel que « Kolossal et Danaïdes même combat ! » et vous voulez afficher une image « kolosall_danaides_meme_combat.gif » au lieu du titre en texte. De plus, vous voulez que le titre original soit le alt text de l'image, et vous voulez une « graceful degradation » pour que le titre original en texte soit affiché si le fichier image du titre n'existe pas.
What this does is essentially make the Title field of the nodes into an special image selector - if you use a title with an associated image, the image will appear, otherwise, the text title will appear - sweet!
Exigences :
- vous utilisez un gabarit de thème
- vous n'êtes pas réfractaire à un peu de PHP (en fait, juste un nuage de PHP dans votre thème)
Tout le code sera placé dans votre fichier template.php.
Note : ignorez les balises d'ouverture et de fermeture de PHP. Elles ne sont là que pour des raisons d'affichage et ne doivent pas être ajoutées à votre fichier.
Pour plus d'infos sur template.php et les variables de fonctions phptemplate_variables, reportez-vous à :
-
template.php : surcharge des fonctions de thème :
http://drupal.org/node/11811 -
Ajout d'appel à _phptemplate_variables :
http://drupal.org/node/207841 -
Fusionner plusieurs fonctions _phptemplate_variables :
http://drupal.org/node/152426
Étape 1 : convertir le titre en fichier
<?php
// Apprête un titre texte pour son usage en tant que nom de fichier.
// Ote les caractères HTML spéciaux, les espaces,
// convertit en minuscules, remplace les espaces par des
// signes souligné.
function clean_title($string)
{
$cleanString = htmlspecialchars_decode( strtolower(trim($string)), ENT_QUOTES );
$cleanString = str_replace(array("& ", "'"), '', $cleanString);
return str_replace(' ', '_', $cleanString );;
}
?>Cette chouette petite fonction prend un titre tel que « KolossalDrupal & Danaïdes même combat ! » et le transforme en nom de fichier « kolossaldrupal_danades_meme_combat ». Puisque Drupal convertira les guillemets et l'esperluette en « caractères spéciaux » (par exemple, $#039; ou $amp) il les extraira en premier. Puis il s'en débarrassera (car ils sont très courants dans les titres) et remplacera les espaces résultants par des signes souligné.
Cette fonction peut être modifiée pour personnaliser comme il vous convient les titres en noms de fichier. Selon les titres utilisés dans votre site, vous voudrez peut-être élargir les substitutions réalisées ici. En utilisant par exemple des expressions rationnelles pour repérer et modifier des motifs (telle que preg_replace("/[^a-zA-Z0-9]/", "", $string) ), c'est un peu moins rapide mais d'usage plus large.
Étape 2 : faire les substitutions - code snippets
Nous avons besoin du file system path (pour vérifier si le fichier existe) et de l'URL (pour créer la balise image) pour l'image titre.
Note : indiquez la bonne extension de fichier et le bon chemin pour vos images titres - les miennes sont .gif, qui se trouvent dans files/images/titles.
<?php
// convertit un titre en nom de fichier utilisable et
// obtient l'URL et le file system path .
$titleFile = clean_title($vars['title']) . '.gif';
$titleImage = base_path() . "files/images/titles/" . $titleFile;
$titleURL = "http://" . $_SERVER['SERVER_NAME'] . $titleImage;
$titlePath = $_SERVER['DOCUMENT_ROOT'] . $titleImage;
?>N'effectuez la substitution que si l'image appropriée peut être trouvée. Utilisez $vars['title'] comme texte alternatif de la balise image, et mettez cette balise dans $vars['title'] :
<?php
// Vérifie si une image titre existe et fait la
// substitution
if ( file_exists($titlePath) ) {
$newTitle = '<img alt=\'' . $vars['title'] .'\' src=\'' . $titleURL .'\' />';
$vars['title'] = $newTitle;
}
}
?>Quelques améliorations :
Restreignez la portée des substitutions - voir l'article précédent qui l'explique en détail :
<?php
// Ne substitue les titres que pour les nodes...
if (arg(0) == 'node' && is_numeric(arg(1))) {
$node = node_load(arg(1));
// ... d'un type listé.
if (in_array($node->type, array('page'))) {
// convertit un titre en nom de fichier utilisable et
// obtient l'URL et le file system path .
...
?>Sauvegardez le titre original pour l'utiliser dans le head et le fil d'ariane :
<?php
$vars['breadcrumb_title'] = $vars['title'];
$vars['head_title'] = $vars['title'];
?>Étape 3 : tout rassembler
Dans Drupal 5 :
<?php
function _phptemplate_variables($hook, $vars = array()) {
switch ($hook) {
case 'page':
// substitute node title with an image, if a suitable replacement can be found.
// save original title text for use in head and breadcrumb.
$vars['breadcrumb_title'] = $vars['title'];
$vars['head_title'] = $vars['title'];
// Substitute title only for nodes...
if (arg(0) == 'node' && is_numeric(arg(1))) {
$node = node_load(arg(1)); // (expensive, unless arg(1) is already loaded, which is should be at this point.)
// ... of one of the listed types - add node types to process to the array.
if (in_array($node->type, array('page'))) {
// convert title to suitable filename and derive both file system path and URL.
$titleFile = clean_title($vars['title']) . '.gif';
$titleImage = base_path() . "files/images/titles/" . $titleFile;
$titleURL = "http://" . $_SERVER['SERVER_NAME'] . $titleImage;
$titlePath = $_SERVER['DOCUMENT_ROOT'] . $titleImage;
// $vars['title'] = $titleURL; // DEBUG - see what's being produced
// Determine if a suitable replacement image for title can be found, and make substitution.
if ( file_exists($titlePath) ) {
$newTitle = '<img alt=\'' . $vars['title'] .'\' src=\'' . $titleURL .'\' />';
$vars['title'] = $newTitle;
}
}
}
break;
}
return $vars;
}
?>Dans Drupal 6 :
<?php
// afc/template.php
// Prepare some general title text for use as a file name.
// Remove special HTML characters, trim whitespace, convert to lower-case
// repace spaces with underscores.
function clean_title($string)
{
$replace_chars = array("&", ":", ",", "'");
$cleanString = htmlspecialchars_decode( strtolower(trim($string)), ENT_QUOTES );
$cleanString = str_replace($replace_chars, "", $cleanString);
return str_replace(' ', '_', $cleanString );;
}
function mytheme_preprocess_page(&$variables) {
// substitute node title with an image, if a suitable replacement can be found.
// save original title text for use in head and breadcrumb.
$variables['breadcrumb_title'] = $variables['title'];
$variables['head_title'] = $variables['title'];
// Substitute title only for nodes...
$titleFile = clean_title($variables['title']) . '.png';
$titleImage = base_path() . path_to_theme() . "/images/titles/" . $titleFile;
$titleURL = "http://" . $_SERVER['SERVER_NAME'] . $titleImage;
$titlePath = $_SERVER['DOCUMENT_ROOT'] . $titleImage;
//$variables['title'] = $titleURL; // DEBUG - see what's being produced
// Determine if a suitable replacement image for title can be found, and make substitution.
if ( file_exists($titlePath) ) {
$newTitle = '<img alt="' . $variables['title'] .'" src="' . $titleURL .'" />';
$variables['title'] = $newTitle;
}
}
?>Comment ajouter une liste des billets de blog récents à une page Utilisateur ?
Référence en anglais sur drupal.org : http://drupal.org/node/755174
28 Mars 2010 - 02h59
J'ai rassemblé plusieurs morceaux de code (c'est l'auteur sur drupal.org qui parle. NdK) pour créer une liste des billets de blog récents d'un utilisateur, sans utiliser Views. Vous pouvez utiliser ce qui suit sans avoir à utiliser Views ou un module quelconque. C'est plutôt simple. Et à utiliser dans votre fichier gabarit surchargé user-profile.tpl.php. Vous pouvez coller le code directement à la fin du fichier.
<?php
$nlimit = 5;
$query= "SELECT n.created, n.title, n.nid, n.created FROM {node} n WHERE n.uid = %d AND n.type = 'blog' AND n.status = 1 ORDER BY n.created DESC";
$result = db_query_range(db_rewrite_sql($query), $account->uid, 0, $nlimit);
while ($node = db_fetch_object($result)) {
print '<div><ul><a href="';
print '../' . drupal_get_path_alias('node/'.$node -> nid);
print '">' . $node->title . "</a>\n - ";
print date('F d,y', $node->created) . '</ul></div>';
}
?>Dans ce code, j'interroge la base de données sur tout le contenu pour lequel l'utilisateur dont on affiche la page est l'auteur. Puis je trie sur la date, par ordre descendant, ce qui place les billets récents en tête de liste.
Je restreins ensuite le nombre de billets affichés au nombre indiqué dans la variable $nlimits, initialisée en début de code. Là j'ai mis 5, vous pouvez modifier cette valeur avec celle qui vous convient.
Ensuite, j'affiche les champs désirés du contenu de chaque billet, dans le cas présent un titre en lien vers le billet de blog - en utilisant l'alias d'URl au lieu de l'ID du node, les deux fonctionnent mais cette façon est plus élégante - et la date de création, qui est mise en forme.
Cela m'a pris quelque temps de trouver le code correct pour arriver à ce résultat. Je voulais le partager car plusieurs personnes recherchaient comment faire, moi y compris. Après de multiples recherches je suis tombé par hasard sur quelques choses qui marchaient à peu près comme je voulais. J'ai tout rassemblé et voilà !
C'est très facile à implémenter, même si vous n'avez pas personnalisé votre fichier user-profile.tpl.php, collez simplement ce code à la fin de votre fichier et ça marche. Il n'y a pas de champs personnalisés à modifier ou quelque soit d'autre. Si vous le voulez, vous pouvez modifier la mise en page à votre guise. Celle-ci me convient à moi.
Voici un exemple du rendu final : http://www.flickr.com/photos/48785425@N07/4468915462.
Convertir n'importe quel gabarit ou design de site en thème Drupal - facilement !
Date du document en anglais : 29 Mars 2010 - 12h08 - http://drupal.org/node/313510
La création de thèmes Drupal n'est pas aussi compliquée que vous pourriez le penser. Il y a certes des domaines plus pointus que d'autres, qui seront peut-être nécessaires, selon les besoins de votre site, ou des défauts mineurs que vous voudrez corriger (sur lesquels vous vous pencherez le moment venu). Créer le thème global de votre site est très simple.
Un thème Drupal n'est rien d'autre qu'une mise en page de site web standard, avec un peu de code PHP ajouté par-ci par-là, que vous pouvez d'ailleurs copier-coller dans les endroits où vous appellerez le contenu et les fonctions dynamiques de Drupal.
Si vous apprenez mieux par l'image, une vidéo portant sur les informations développées ici est disponible là : Static Theme Conversion.
Les thèmes « contributifs » sont plus complexes que votre thème n'a besoin de l'être
Vous avez peut-être examiné plusieurs thèmes pré-fabriqués livrés avec le core Drupal, ou disponibles en téléchargement, et vous avez poussé un soupir de frustration devant l'aspect obscur de leurs code-source.
Ces thèmes-là ont été créés pour répondre à tous les scénarios de travail possibles, pour vous permettre d'agir dynamiquement sur la mise en page du thème, tel l'ajout de colonnes, et acceptent la personnalisation de fonctions ou de modules dont vous n'aurez peut-être pas besoin pour votre site. Ils disposent généralement d'une grande quantité de code PHP dont le but est simplement de dire « si ce paramètre est à vrai, alors montre cette partie de cette façon-ci, sinon montre ça ». Le thème est ainsi très souple, mais aussi très complexe.
Quoi qu'il en soit, votre thème n'a pas besoin de fonctionner avec tous les sites de la galaxie Drupal. Il a juste besoin de faire ce dont votre site a besoin, et rien de plus. Tout ce qu'il vous faut ce sont des petits bouts de code PHP, que vous copierez dans votre gabarit HTML, qui diront à Drupal de charger le contenu dynamique à ces endroits.
Vous pourrez également trouver utile de jeter un œil aux gabarits du core Drupal plus élémentaires (ceux utilisés lorsqu'un thème ne fournit pas de gabarits alternatifs pouvant être surchargés). Pour examiner ces gabarits élémentaires, regardez dans le dossier /modules/system de votre installation Drupal (et notamment les gabarits page.tpl.php et node.tpl.php).
Il ne faut que quelques éléments de base pour fabriquer un thème Drupal
Le gabarit principal de Drupal est appelé page.tpl.php. Faites une copie du gabarit de votre site et appelez-la page.tpl.php. Ensuite, copiez le code suivant dans votre mise en page, aux endroits signalés (tout le code mentionné dans cette leçon sera placé dans le fichier page.tpl.php).
La section Head de votre site
La barre latérale ou les colonnes de votre mise en page
Beaucoup de sites ont une barre latérale, à gauche ou à droite de la page, placée à côté de la zone de contenu principale. Ces barres latérales affichent différentes fonctions ou informations (par exemple, la form de connexion, les menus de navigation, les commentaires récents, etc).
Dans Drupal, ces zones sont appelées blocs et vous pouvez les personnaliser en allant dans le menu Administrer » Constructions du site » Blocs. Pour que Drupal sache où afficher ces blocs, vous devez ajouter des placeholders dans votre thème (Drupal appelle ces placeholders des régions). Il y a plus d'un placeholders disponible ( et vous pouvez aussi créer les vôtres) mais il est important d'ajouter en premier lieu la barre latérale, puisque le menu d'administration y est affiché. Ajoutez les régions suivantes à votre barre latérale :
Si vous utilisez Drupal 5 :
<?php print $sidebar_left; ?>
...et/ou...
<?php print $sidebar_right; ?>
Si vous utilisez Drupal 6 :
<?php print $left; ?>
...et/ou...
<?php print $right; ?>
Menu système / Navigation
Dans Drupal, le menu de navigation par défaut de votre site s'appelle Primary Links. Il y a également un menu Secondary Links qui peut amener aux sous-pages tributaires du menu Primary. Lorsqu'il est dépouillé de toutes ses images et de ses styles, un menu Drupal n'est rien de plus qu'une imbrication de listes non ordonnées, en HTML brut, avec un lien pour chaque élément de la liste. Vous pouvez utiliser les CSS pour personnaliser un menu à votre façon; modifier son apparence, sa disposition, horizontale, comme des onglets, ou verticale, etc.
Pour afficher dans votre site les liens de menu Primary,ou Secondary, collez le code suivant soit dans la partie supérieure de votre thème (par exemple, si votre menu est stylisé en tant qu'onglets ou boutons), soit dans la barre latérale (dans le cas où vous souhaitez y afficher votre menu verticalement).
Au plus simple :
Voici la façon la plus simple de procéder, si vous êtes certains de vouloir utiliser les liens Primary et Secondary (ou avoir la possibilité d'effacer la partie Secondary Links si vous n'en avez plus besoin).
Une façon plus souple :
Si vous hésitez à afficher les deux types de liens, Primary et Secondary, vous pouvez utiliser le code suivant à la place (c'est le même, mais il vérifie si les menus sont activés, et ne les affiche que s'ils le sont) :
Le contenu principal et dynamique de la page
A ce stade, vous avez ajouté tout le cadre (framework) de mise en page de tout votre site. Il est temps maintenant d'inclure la zone du gabarit où le contenu courant sera affiché (un contenu différent selon la page vue).
Localisez simplement l'endroit de votre gabarit où le contenu principal doit être affiché (habituellement, il s'agit du centre de la page, après l'en-tête et entre les barres latérales) et copiez-y le code suivant (vous pouvez réorganiser ce code si vous le souhaitez, sinon recopiez-le tel quel) :
<?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>
<div id="content">
<?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
<?php if ($messages): print $messages; endif; ?>
<?php if ($help): print $help; endif; ?>
<?php print $content; ?>
</div>
Pied de page : ajouter un pied de page et un texte en pied de page
Pour ajouter une région Pied de page et le texte paramétré dans la partie administration, vous pouvez mettre le code suivant :
Ajouter la balise Final au bas de votre thème
Collez le code suivant à la fin de votre gabarit page.tpl.php. Vous devez placer cette balise en bas de page, elle inclura dynamiquement tout script devant apparaître en bas de page et elle fermera toute balise qui aurait été laissée ouverte :
Pour Drupal 6 : créer votre fichier NomDeMonTheme.info
En dernier lieu, dans Drupal 6, vous devrez créer un fichier NomDeMonTheme.info (où NomDeMonTheme est le nom de votre thème, sans espaces).
Créez simplement un fichier texte vierge et collez-y le code suivant, personnalisez-le ensuite avec le nom et la descriptions appropriés, et sauvegardez-le dans le même dossier que celui contenant vos fichiers gabarits :
description = Description of YourTheme
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
Si du texte ci-dessus apparaît colorisé, n'en tenez pas compte, c'est une fantaisie du module de coloration syntaxique
La section « regions » après style.css déclare toutes les régions normalisées de Drupal, c'est recommandé pour que vous puissiez ôter les régions dont vous ne voulez pas, ou pour ajouter les vôtres.
Si vous ajoutez des régions personnalisées, vous devez inclure à la main les régions par défaut à conserver sinon elles disparaîtront de votre thème (copiez-collez-les depuis cette page ou depuis un autre thème).
Si vous voulez ajouter une région personnalisée, copiez l'une des lignes regions[] ci-dessus et renommez-là.
C'est tout. Collez les code-source précédents dans n'importe quel gabarit ou mise en page de site et vous obtiendrez une thème Drupal élémentaire et fonctionnel.
En apprendre davantage sur les thèmes Drupal
Il y a bien des choses utilisables dans votre thème si vous le souhaitez. Voici quelques excellentes sources d'apprentissage pour approfondir les thèmes Drupal :
- La conception de thèmes Drupal 6.x. Excellentissime ouvrage et traduction en français, non encore chahutée à ce jour, des pages de Drupal.org concernant la conception de thèmes Drupal 6.x
- Listing de toutes les variables de thèmes Drupal 5, à utiliser dans le fichier page.tpl.php.
- Listing de toutes les variables de thèmes Drupal 6, à utiliser dans le fichier page.tpl.php.
- Drupal theming for designers un fantastique article (en anglais), avec des vrais copies d'écrans et d'authentiques diagrammes pour vous aider à comprendre aisément comment fonctionne le système de thèmes Drupal.
- Theme Guide (Drupal 6) Guide officiel de Drupal.org sur la conception de thèmes (voir premier item de la liste pour la traduction non-officielle en français)
Framework / Base / Thèmes de départ
Il existe différents thèmes Frameworks (également appelés Base ou Starter thèmes). Leur but est de servir de thème vierge sur lequel vous construirez le vôtre. Beaucoup de ces thèmes sont débarrassés de tous les styles superflus et ne comprennent que les fichiers gabarits tpl.php de base, sans fioritures.
Beaucoup incorporent également des paramétrages utiles dans leurs fichiers gabarits tpl.php, pour les corrections et ajustements les plus courantes. Vous les aurez ainsi à disposition avant même de réaliser que vous pourriez en avoir besoin.
Quelques-uns ajoutent des fonctionnalités supplémentaires qui n'existent pas par défaut dans Drupal.
Vous pouvez utiliser ces thèmes comme une base de départ propre et fonctionnelle pour la création de vos propres thèmes, ou, si vous préférez, vous pouvez les étudier pour voir comment incorporer les fonctionnalités de Drupal dans un thème que vous créerez de toutes pièces.
Puisque ces thèmes sont propres et très légers côté styles, il est aisé de travailler avec, comparativement à des thèmes nettement plus personnalisés.
Voici une liste de quelques thèmes frameworks (il peut y en avoir d'autres) :
Créer un sous-thème, vite fait mal fait (Quick and dirty)
Référence en anglais sur drupal.org : 23 Août 2009 - 21h18
http://drupal.org/node/441088
Comment styliser et restructurer votre site avec un minimum d'efforts
Cet article est plus une anti-sèche un peu développée qu'un guide approfondi, il vous servira d'aide-mémoire pour une personnalisation rapide du look-and-feel de votre site Drupal 6.x plutôt que pour le restructurer en profondeur. Cet article n'est pas un cours HTML, CSS ou sur les hooks Drupal - mais un minimum de connaissances est supposé.
Mettons les mains dans le cambouis. Accordez-vous quelques secondes pour créer un sous-thème. Pourquoi un sous-thème plutôt qu'un thème ? Parce qu'un thème oblige à spécifier ce que vous voulez obtenir, alors qu'un sous-thème vous permet de ne spécifier que ce que vous voulez de différent. Les sous-thèmes héritent de toutes les feuilles de style, de tous le javascript et de tous les gabarits (fichiers .tpl.php) du thème sur lequel ils sont basés. Ce qui vous permet de le utiliser rapidement et proprement - et tout cela sans avoir à hacker le code existant du thème, ce qui signifie que lorsqu'une nouvelle version du thème est publiée, le vôtre hérite automatiquement de toutes ses améliorations !
Inventez un nom pour votre sous-thème. À partir de maintenant nous nous y référerons avec <subthemename>. Ensuite, dans /sites/all/themes,créez un dossier qui porte le nom de votre thème (ne créez pas ce dossier dans /themes !)
Dans ce dossier, créez un fichier nommé <subthemename>.info qui contiendra les lignes suivantes :
name = <le nom de votre thème en clair>
description = <ce qui vous arrange>
core = 6.x
base theme = <nom du dossier de n'importe quel thème ou sous-thème, du core ou contribué, par ex. bluemarine>
stylesheets[all][] = <subthemename>.cssToujours dans le dossier de votre sous-thème, créez un fichier vide nommé <subthemename>.css
À l'inverse de tout le reste, le logo du thème de base n'est pas hérité par le sous-thème. Aussi, pour remplir le vide dans le coin haut à gauche de votre site, vous voudrez peut-être copier le fichier logo.png du dossier du thème de base vers le dossier de votre sous-thème; Ou vous pouvez créer votre propre fichier logo.png. Drupal l'utilisera automagiquement.
Et voilà ! Avec le dossier de votre sous-thème et ces trois fichiers, vous avez jeté les base de vos futurs développements de thème.
Allez dans Administrer » Construction du site » Thèmes pour activer votre theme. Sélectionnez-le dans la liste en cochant le bouton-radio Par défaut puis cliquez sur Enregistrer la configuration.
Voila qui est fait. Vous êtes maintenant prêt à personnaliser et restructurer les éléments des pages tels que menus, onglets, tableaux, blocs. Cela ne vous aura pas pris plus d'une minute - vous le dire ne vous aura pas fait de mal !
En dernier lieu, allez dans Administrer » Configuration du site » Thème de l'administration, sélectionnez Thème par défaut de l'administration (plutôt que Garland) et enregistrez la configuration. N'utiliser qu'un seul thème partout (à partir de maintenant) rendra la plupart des modifications immédiatement visibles.
Remarque : si vous le voulez, vous pouvez créer un screenshot.png (150 x 90 pixels) et le mettre dans le dossier de votre sous-thème. Si vous le faites, il sera affiché dans la page Administrer » Construction du site » Thème, sinon c'est le screenshot.png du thème de base qui sera hérité et affiché dans cette page.
Maintenant, allons droit au but avec quatre exemples simples qui couvrent chacun une technique de sous-theming différente :
- Exemple 1 : surcharger un style
- Exemple 2 : surcharger un gabarit (.tpl.php)
- Exemple 3 : surcharger un theme_hook() avec une fonction
- Exemple 4 : surcharger un theme_hook() avec un gabarit (template)
Restyliser vs. Restructurer ou : CSS vs. gabarits (templates)
J'utilise le mot restylisation lorsqu'il s'agit de modifier les couleurs, les attributs de texte, etc à l'aide de feuilles de style (fichiers .css). J'utilise le mot restructuration lorsqu'il s'agit de redisposer la mise en page des blocs, des tableaux, des fils d'Ariane, sous-menus, et tous ces sortes de choses. Il ne s'agit pas de redisposer ces éléments vis à vis d'autres éléments de la page - cela relève de la conception de thème plutôt que des sous-thèmes (bien qu'il n'y ait pas de différence vraiment flagrante)
Pour restyliser votre site, vous modifiez le fichier .css du dossier de votre sous-thème.
Exemple 1a : surcharger un style (global)
Pour modifier l'aspect de (la plupart des) tableaux de votre site, ajoutez cette ligne à votre fichier .css :
background-color: pink;
}
La modification sera aussitôt visible sur des pages comme Administrer » Gestion du contenu » Contenu ou
Si vous voulez baliser des éléments HTML en particulier dans des pages données, vous devrez compter sur le développeur qui a associé les classes CSS et/ou les ID à ces éléments HTML, par exemple <table class="table-nodes">.... Vous pouvez déterminer le CSS responsable de l'aspect d'un élément HTML en analysant le code-source de la page dans votre navigateur, en comprenant l'éventuelle complexité hiérarchique des sélecteurs CSS impliqués. Des outils plus pratiques, comme Firebug (pour Firefox) vous montrent la hiérarchie complète des styles CSS appliqués à un élément HTML en le survolant de la souris (chouette!).
Exemple 1b : surcharger un style (spécifique)
Si le module Search (du core) est activé et qu'un bloc est paramétré pour contenir le formulaire de recherche (via Administrer » Construction du site » Blocs), ajouter les lignes suivantes dans votre fichier .css le fera vraiment ressortir :
background-color: lightblue;
border: 1px solid blue;
}
Les CSS sont puissantes mais peuvent s'avérer complexes, surtout si vous avez un grand nombre d'éléments HTML imbriqués. Une explication approfondie dépasse le cadre de cet article, mais il y a quelques liens sympas (avec des tutoriels) qui peuvent aider : w3schools.com/css, http://css.maxdesign.com.au/, OpenWeb (français). Voir aussi HTML and CSS techniques and tools. (ici la traduction française sur KolossalDrupal).
Faisons un peu de restructuration... Si votre page est correctement templated, les éléments que vous souhaitez changer sont rendus par des fichiers .tpl.php qui se trouvent, euh... quelque part. Les endroits où regarder sont le sous-dossier /modules du module qui pourrait avoir affaire avec la page affichée et le dossier /themes du thème utilisé.
Il y a aussi un bel outil Drupal : le module Devel. Semblable à Firebug, il conseille des endroits où chercher des templates qui s'appliquent à la zone de l'écran que vous survolez de la souris.
Une fois le gabarit trouvé, comment le surcharger ? C'est très simple : copiez le fichier .tpl.php dans le dossier de votre sous-thème (ne lui changez pas son nom) et modifiez-le à votre guise.
Remarque : pour que la surcharge du gabarit fonctionne, votre thème de base doit être piloté par un moteur de template (vérifiez le fichier .info du thème de base). Ainsi, Chameleon et Marvin ne répondront pas aux surcharges de gabarits, bien que vous puissiez surcharger leurs styles comme indiqué à l'exemple 1a.
Exemple 2 : surcharger un gabarit (.tpl.php)
Supposons que vous voulez alléger la présentation des résultats de recherche en affichant le titre et le résultat mais sans les données concernant le type, l'auteur et la date de modifications des articles trouvés. Chaque élément individuel dans la liste des résultats est mis en forme via un gabarit : modules/search/search-result.tpl.php. Copiez simplement ce gabarit dans le dossier /sites/all/themes de votre thème puis modifiez-le à votre guise. Par exemple, effacez les trois lignes qui précèdent la balise </dd>. Rafraîchissez le cache du thème, en allant par exemple dans Administrer » Construction du site » Thèmes et en cliquant sur le bouton Enregistrer la configuration. Effectuez une recherche et regardez les résultats.
Une fois que le fichier se trouve dans le dossier de votre sous-thème, toutes ses modifications seront immédiatement prises en compte, vous n'avez pas besoin de rafraîchir les cache à nouveau.
Gabarits vs. fonctions theme_hook()
Les gabarits et les fonctions theme_hook() renvoient tous deux aux theme hooks et ont la même fonction : entourer l'HTML de contenu généré dynamiquement. Les Web designers préfèrent les gabarits puisqu'ils sont essentiellement composé d'HTML, avec très peu de code PHP. Du point de vue d'un web designer, un theme_hook() est une fonction PHP qui veut être un gabarit (fichier .tpl.php).
Pourquoi les thèmes (et sous-thèmes) ne se font-ils pas entièrement via des gabarits ?
- les fonctions theme_hook() s'exécutent plus rapidement (bien que cela ne se remarque pas côté utilisateur)
- certains programmeurs préfèrent écrire une seule fonction plutôt que repartir le code dans un gabarit "alimenté" par une fonction de pré-traitement qui initialise les données ($variable) affichées par le gabarit; cette dernière approche paraissant, à première vue, un poil plus compliquée - nous la montrerons dans l'exemple 4.
Exemple 3 : surcharger un theme_hook() avec une fonction
Pour cela, créez un fichier template.php dans le dossier de votre sous-thème, avec une ligne <?php vide au début. Puis identifiez la fonction theme_hook() en charge du rendu du HTML que vous souhaitez modifier. Disons que vous voulez appuyer davantage l'accentuation rendu par les placeholders du theme. theme_placeholder() se trouve dans le fichier includes/theme.inc. Copiez le code dans votre fichier template.php, modifiez le nom de la fonction en subthemename_placeholder() et modifiez le corps en ce que vous souhaitez, par exemple :
Rafraîchissez le cache du thème, en allant dans Administrer » Construction du site » Thèmes et en cliquant sur le bouton Enregistrer la configuration. Maintenant, rendez-vous, disons, dans l'onglet Révisions (.../node/%/revisions) et vous verrez que le titre et version en cours sont fortement accentués (à supposer que le node ait plus d'une version)
Comme pour les autres fichiers du dossier de votre sous-thème, les modifications futures des fonctions existantes de template.php prennent effet immédiatement, vous n'avez pas à modifier le cache à nouveau.
Nous avons indiqué que les gabarits sont généralement préférés aux fonctions theme_hook(). Voyons si le vilain petit canard theme_hook() peut être transformé en gabarit...
Exemple 4 : surcharger un theme_hook() avec un gabarit
La partie facile ressemble beaucoup à l'exemple 2 et se base sur la règle que chaque fichier <theme>.tpl.php dans le dossier de votre sous-thème surcharge automatiquement tout hook de thème existant, indépendamment de l'endroit où il est implémenté, que ce soit dans par une fonction ou un gabarit. Aussi, pour surcharger la fonction theme_user-name() (/includes/theme.inc) et rendre le HTML plus designer-friendly, vous n'avez qu'à créer un fichier nommé username.tpl.php dans le dossier de votre sous-thème. Donnez-lui le contenu suivant et rafraîchissez le cache :
Vous n'aurez pas à aller loin pour voir le résultat de cette modification, Administrer » Gestion du contenu » Contenu.
Maintenant le plus dur... récupérer le nom de l'auteur à partir du contexte PHP dans lequel le hook de thème username est utilisé et le placer dans le code HTML précédent.
C'est là que les fonctions de pré-traitement entrent en jeu. Ajoutez le code suivant à votre fichier template.php (n'oubliez pas de changer le préfixe subthemename pour qu'il corresponde à votre sous-thème).
* Implémentation de <subthemename>_preprocess_hook().
* Surcharge /includes/theme.inc/theme_username($object).
* Appelé avant la mise en forme par le gabarit, ce qui nous permet
* d'initialiser les variables utilisées dans le gabarit.
*
* @param $variables, contient l'objet utilisateur à mettre en forme
* @return rien
*/
function subthemename_preprocess_username(&$variables) {
$user = $variables['object'];
// … autre code et initialisations de variables si besoin
$variables['username'] = check_plain($user->name);
}
Les dernières lignes rendent la variable $username disponible dans le gabarit, vous pouvez donc en tirer parti dans votre fichier username.tpl.php comme indiqué ci-dessous :
Rafraîchissez le cache à nouveau (Administrer » Construction du site » Thèmes) et revenez à la page Contenus. Ou, pour changer, visitez la page Gestion des utilisateurs » Utilisateurs.
Et voilà. Le theme_hook() qui amalgamait, dans une seule fonction difficile à décrypter, le traitement des données et leur présentation, est maintenant divisé en plusieurs fichiers PHP et HTML, qui peuvent être maintenus séparément par des concepteurs de thèmes et des programmeurs.
Créer un zone de connexion Utilisateur personnalisée
Date du document en anglais : 26 Août 2009 - 01h20 - http://drupal.org/node/92657
Dans ce « How to » vous apprendrez à créer une barre utilisateur qui :
- Affichera une form de connexion sur une seule ligne,
- Affichera un message de bienvenue lorsque l'utilisateur sera connecté ainsi qu'une paire de liens utiles.
Voici à quoi cela ressemblera une fois terminé :
Comme vous pouvez le voir, ce how-to est écrit pour le thème Garland, qui est le thème par défaut pour Drupal 5. Mais vous pouvez tout aussi bien l'appliquer pour un autre thème.
Décider l'approche
Drupal est très puissant, il est si souple que vous pouvez utiliser plusieurs approches pour vos réalisations. Voilà pourquoi 5 minutes de réflexion ne seront pas de trop avant de mettre les mains dans le cambouis.
La solution à laquelle je pense ressemble à ceci :
- Nous écrirons une fonction indépendante qui appellera garland_user_bar(). Avec le code approprié, elle retournera, selon le contexte, le code HTML de connexion ou le message de bienvenue.
- Dans le fichier page.tpl.php, nous placerons un appel à cette fonction qui l'affichera en haut de page.
- Cette fonction, si elle doit afficher la form de connexion, effacera la form de connexion par défaut, nous ne créerons pas la nôtre. Pourquoi ? Parce que l'examen de son code-source indique qu'en modifiant simplement les styles CSS nous pouvons l'afficher à notre façon sans réécrire le code de la form elle-même.
- Si l'utilisateur est déjà connecté, la fonction retournera un chouette message de bienvenue et quelques liens utiles.
- Nous connaissons maintenant la logique, reste à écrire les CSS pour changer l'apparence de la form
Oh ! Plaçons d'abord la fonction dans page.tpl.php
Commençons par là, mettons déjà l'appel à garland_user_bar()(même si elle n'existe pas encore), ainsi, tant que nous travaillerons avec garland_user_bar(), nous n'aurons qu'à rafraichir la page dans notre navigateur pour voir le résultat.
-
Ouvrez themes/garland/page.tpl.php , vers la ligne 16 vous trouverez :
Ce <div> est le conteneur pour la barre du haut du thème Garland. Mettons-y l'appel à notre fonction garland_user_bar() :
Ecrire la fonction garland_user_bar()
Avant de vous livrer le code entier, je vais vous expliquer comment nous allons l'écrire.
-
Ouvrez themes/garland/template.php, écrivons une fonction vide à la fin du fichier, nous lui ajouterons le code par la suite :
<?php
function garland_user_bar() {
}
?> -
Nous devons accéder à la variable globale $user, qui nous dira si l'utilisateur est connecté ou pas. La première ligne de la fonction sera donc :
<?php
global $user;
?> -
Je déclarerai aussi une nouvelle variable nommé $output, pour pouvoir lui ajouter ce que je voudrais. A la fin elle renverra son contenu à l'endroit où nous avons placé notre fonction dans page.tpl.php. Écrivons cette ligne :
<?php
$output = '';
?> -
Je veux vérifier si l'utilisateur est connecté ou pas. Ça se fait en vérifiant si la variable $user->uid existe ou pas puisque lorsque Drupal connecte un utilisateur, il modifie automatiquement $user->uid pour refléter l'ID utilisateur, toujours supérieur à zéro.
Voici ce que nous devons ajouter :
Notez le ! qui signifie NON, le code indique if not $user->id, ce qui signifie si l'utilisateur n'est pas connecté<?php
if (!$user->uid) { // if user is NOT logged in..
?> -
Alors... Si l'utilisateur n'est pas connecté, on fait quoi ?... On affiche la login form ! Et comme je l'ai dit plus haut, puisque la login form de Drupal nous convient parfaitement, qu'elle a juste besoin que l'on modifie ses CSS, nous n'avons pas besoin d'écrire la nôtre.
Voici comment appeler la login form :
drupal_get_form() est une fonction très pratique : vous lui donnez le nom de la fiche et elle vous la renvoie, prête à l'emploi.<?php
$output .= drupal_get_form('user_login_block');
?> -
Nous avons géré le cas de l'utilisateur non connecté. Mais que faire s'il est déjà connecté ?
Ajoutons le code pour gérer cette situation :
<?php
} else {
?> -
Si l'utilisateur est connecté, nous voulons lui afficher un message de bienvenue et quelques liens utiles. Voyons le message :
la fonction t() encapsule la totalité du message, qui peut ainsi être traduit. Pour afficher les noms utilisateurs, vous devriez toujours utiliser theme('username', $user).
<?php
$output .= t(
'<p class="user-info">Salut !user, bienvenue.</p>',
array(
'!user' => theme(
'username',
$user
)
)
);
?> -
Les liens maintenant... Je veux deux liens : « Votre compte » et « Déconnexion ». Drupal a une fonction appelée theme_item_list() à laquelle vous pouvez donner une liste d'items et qui vous les retournera dans une liste <ul> HTML.
« Votre compte »est lié à ?q=user/<uid> et « Déconnexion » a ?q=logout. Ce sont des URL standards dans Drupal. Voici le code :
Oh ! Une nouvelle fonction ! l() génère des liens. Vous lui passez le titre et l'URL et elle vous retourne un lien <a href="..." title="..">....</a> en bonne et due forme.<?php
$output .= theme('item_list', array(
l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
l(t('Sign out'), 'logout')));
?> -
Il reste une dernière chose avant d'obtenir l'affichage. Je veux tout encapsuler dans un <div id="user-bar">...</div>. Pourquoi ? Parce qu'il sera plus simple d'écrire les CSS s'appliquant à cette barre. Comment ? En utilisant l'opérateur . (dot). Comme ceci :
<?php
$output = '<div id="user-bar">' . $output . '</div>';
?> -
Maintenant que tout est prêt, il ne reste qu'à renvoyer le code HTML ainsi généré :
<?php
return $output;
?>
La fonction complète aura donc ce code :
<?php
function garland_user_bar() {
global $user;
$output = '';
if (!$user->uid) {
$output .= drupal_get_form('user_login_block');
}
else {
$output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username', $user)));
$output .= theme('item_list', array(
l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
l(t('Sign out'), 'logout')));
}
$output = '<div id="user-bar">'.$output.'</div>';
return $output;
}
?>
Personnalisation des styles !
Maintenant que la form de connexion et les messages de bienvenue sont correctement affichés aux utilsiateurs, il reste à personnaliser leur apparence. C'est le boulot des CSS.
-
D'abord, créons un nouveau fichier CSS dans lequel nous écrirons les styles de la nouvelle user-bar :
themes/garland/user_bar.css. - Ce fichier CSS existe désormais mais personne ne le connait... Nous allons modifier page.tpl.php pour l'inclure dans la page. Comment ? En ouvrant themes/garland/page.tpl.php et en ajoutant ce code APRES la ligne 11 : Ce code ajoutera la feuille de style à la page.
-
Écrivons maintenant les règles CSS kivonbien. Rassurez-vous, ce n'est pas très long à faire, ce sont juste les commentaires qui prennent de la place :P
/*
this will expand the default garland bar, make it bigger so our form and message can fit in.
*/
#navigation {
height: 3em;
}
/*
by default, the default form adds some surrounding space, this cancels it
*/
#navigation div.form-item,
#navigation div.content {
margin: 0;
padding: 0;
}
/*
this adds some space in top and bottom, so anything inside can look vertically
centered
*/
#user-bar {
padding: .65em 0;
}
/*
by default, fields labels tries to reserve a whole line for itself, this
cancels that and and sends it to the left.
it also adds some space on the right and left of the label to look easy on
the eye.
*/
#user-bar label {
float: left;
margin-left: 10px;
margin-right: 2px;
}
/*
inputs too, they try to reserve a whole line for itself, this
cancels that and sends it to the left
*/
#user-bar input {
float: left;
}
/*
I don't like the required * (asterisks), so I hide them.
*/
#user-bar span.form-required {
display: none;
}
/*
the form submit button, it's so tight so we expand it a bit, and give it some
free space around.
*/
#user-bar input.form-submit {
margin-top: -1px;
margin-left: 10px;
padding: 0 .5em;
}
/*
now this is for the links list, lists by default tries to reserve a whole line
also they add space surrounding them. we cancel all that and send the list
to the right
*/
#user-bar div.item-list ul {
float: right;
margin: 0; padding: 0;
margin-right: 10px;
}
/*
remember, stylign above was for the whole list, now for each item,
we all know each item in the list by default exists on a separate line, also
has that bullet on the left. we cancel all that. and makes all items sit beside
each other
*/
#user-bar div.item-list ul li {
float: left;
background: none;
margin: 0 5px;
padding: 0 10px;
border: 1px solid #b8d3e5;
}
/*
this is the "Hi user, welcome back message".
by default <p> tries to exist on a separate line, we cancel that.
also by default <p> has some surrounding space, we cancel that too, and give it
only space on the left.
*/
#user-bar p.user-info {
float: left;
padding: 0;
margin: 0 0 0 10px;
}
Et voilà !
Une solution qui marche et qui n'a pas demandé de surcharger le moindre code existant. Et comme nous n'avons pas codé de HTML en dur, nous n'aurons pas besoin de maintenir le code au fil des mises à jour de Drupal.
Emuler les fonctions de pré-traitement de thème dans Drupal 5
Date du document en anglais : 22 Avril 2010 - 22h44 - http://drupal.org/node/201587
Drupal 6 a apporté le concept des fonctions de pré-traitement de thèmes. En résumé, ces fonctions permettent aux thèmes, aux moteurs de thèmes, et même aux modules de s'insérer dans le traitement du thème et de manipuler les variables envoyées aux thèmes. Cela remplace la vieille fonction _phptemplate_variables() du moteur de thème de Drupal 5 tout en effectuant le même travail.
Bien que nous ne puissions importer cette nouvelle fonctionnalité dans Drupal 5, il est possible de simplifier _phptemplate_variables() pour qu'elle ressemble à ce qui se fait dans Drupal 6. Plus précisément, nous pouvons diviser _phptemplate_variables()en plusieurs fonctions qui agiront comme les fonctions de pré-traitement de thème de Drupal 6.
Pour obtenir cette simplification, spécifiez la fonction _phptemplate_variables() dans le fichier template.php comme ceci :
<?php
function _phptemplate_variables($hook, $vars) {
$function = 'phptemplate_preprocess_'. str_replace('-', '_', $hook);
if (function_exists($function)) {
$function($vars);
}
return $vars;
}
?>
En premier lieu, nous nous assurons que le theme hook est d'un format pouvant être utilisé comme une partie de nom de fonction, et nous construisons son nom comme il sera appelé par la fonction de pré-traitement. Puis, s'il existe, nous l'appelons avec le tableau $vars. Vous remarquerez la fonction de pré-traitement ne retourne pas de valeur. A la place nous passons le paramètre par référence, comme ceci :
<?php
function phptemplate_preprocess_page(&$vars) {
// Manipulate the $vars array here.
}
?>
Dans le thème, nous pouvons maintenant manipuler n'importe quelle variable du fichier gabarit, ajouter, enlever ou modifier les variables envoyées au gabarit juste en déclarant la fonction adéquate. Bien que cela ne nous apporte aucune nouvelle fonctionnalité, cela reste plus facile à lire et à actualiser qu'une énorme instruction switch, et cela facilitera également une migration ultérieure vers Drupal 6.
Des fichiers variables distincts lorsque la fonction de thème devient ingérable
Lorsque la fonction de gabarit grossit au point de devenir ingérable, on peut la séparer en plusieurs fichiers variable :
<?php
/**
* Intercept template variables
*
* @param $hook
* The name of the theme function being executed
* @param $vars
* A sequential array of variables passed to the theme function.
*/
function _phptemplate_variables($hook, $vars = array()) {
global $user;
$vars['user'] = $user;
$vars['path'] = base_path() . path_to_theme() .'/';
$vars['admin'] = $user->roles[3] || $user->uid == 1 ? TRUE : FALSE;
$vars['moderator'] = $user->roles[4] ? TRUE : FALSE;
$vars['editor'] = $user->roles[5] ? TRUE : FALSE;
$vars['authenticated'] = $user->uid ? TRUE : FALSE;
$vars['theme'] = 'my_theme_name';
// Include broad variables for each hook.
if (file_exists($vars['directory'] .'/'. $hook .'.vars.php')) {
include_once $vars['directory'] .'/'. $hook .'.vars.php';
$function = $vars['theme'] .'_variables_'. str_replace('-', '_', $hook);
$vars = $function($vars);
}
// Specific variables for node types.
if ($hook == 'node') {
if (file_exists($vars['directory'] .'/node-'. $vars['node']->type .'.vars.php')) {
include_once $vars['directory'] .'/node-'. $vars['node']->type .'.vars.php';
$function = $vars['theme'] .'_variables_node_'. $vars['node']->type;
$vars = $function($vars);
}
}
return $vars;
}
?>
Autres améliorations
Ajoutons-lui une commodité supplémentaire :
<?php
function phptemplate_preprocess_node(&$vars) {
$node = $vars['node'];
$type = $node->type;
// general node variables processing
// preprocess by node type
if (function_exists($function = "phptemplate_preprocess_node_$type")) {
$function($node, $vars);
}
}
?>
ce qui nous donne une fonction de pré-traitement différente par type de node, par exemple :
<?php
function phptemplate_preprocess_node_story($node, &$vars) {
// specific story variable processing
}
?>
Fusionner plusieurs fonctions _phptemplate_variables
Date du document en anglais : 11 Mars 2009 - 06:36 - http://drupal.org/node/152426 Drupal 5.x
Plusieurs bouts de code de thèmes PHPTemplate, et quelques modules contributifs , auront besoin que vous ajoutiez des fonctions _phptemplate_variables à vos fichiers template.php. Malheureusement, si vous voulez utiliser plus d'un module ou plus d'un de ces bouts de code, ou si votre thème possède déjà une fonction _phptemplate_variables, vous ne pourrez pas en ajouter de nouvelles, vous devrez fusionner les deux fonctions. Si vous ne connaissez pas suffisamment le PHP, cela vous semblera une tâche redoutable.
Voici une technique simple pour fusionner plusieurs de ces fonctions en une seule. Vous n'avez pas besoin de connaître le PHP, contentez-vous de copier et de coller, et changez aussi quelques noms comme indiqué ci-après.
- Placez toutes les fonctions _phptemplate_variables dans votre fichier template.php, et modifiez tous leurs noms, de _phptemplate_variables à quelque chose d'autre. Par exemple _phptemplate_variables_taxonomy_snippets, _phptemplate_variables_page_title_module, etc. S'il y a déjà une fonction _phptemplate_variables dans le thème, changez-lui aussi son nom, par exemple _phptemplate_variables_garland_theme. Assurez-vous qu'il n'y ait pas deux fonctions avec le même nom.
- Créez une nouvelle fonction _phptemplate_variables. Elle sera la fonction maîtresse qui combinera toutes les variables des autres fonctions. Voici à quoi elel devrait ressembler :
- Copiez ce code dans votre fichier template.php et changez les nom des fonctions pour ceux que vous utilisez.
<?php
/**
* Appeler notre fonction_phptemplate_variables_*
personnalisée et fusionner le résultat dans un seul tableau.
*/
function _phptemplate_variables($hook, $vars) {
$funcs = array(
// Voici les noms de nos fonctions
personnalisées. Ajoutez-en d'autres si besoin.
'_phptemplate_variables_taxonomy_snippet',
'_phptemplate_variables_page_title_module',
'_phptemplate_variables_garland_theme,
);
foreach ($funcs as $func) {
$vars = array_merge($vars, $func($hook,
$vars));
}
return $vars;
}
?>
Ensuite, si vous voulez ajouter d'autres fonctions _phptemplate_variables vous pourrez le faire facilement en lui donnant un nouveau nom et en ajoutant son nom à la liste.
Des coins arrondis dans Drupal 7 (jquery corner)
Traduction de la page
http://drupal.org/node/1030144
publiée / actualisée sur drupal.org le 24 Janvier 2011
Voici une façon rapide pour arrondir les angles de vos DIV dans Drupal 7.
- Téléchargez la dernière version de jquery-corner depuis http://jquery.malsup.com/corner/.
- Sauvegardez-là dans le dossier de votre thème, sous le nom VOTRETHEME/js/jquery.corner.js
- Dans le même dossier, créez un fichier vide VOTRETHEME_corner.js
- Dans votre fichier .info existant (VOTRETHEME.info), ajoutez les lignes scripts[] = js/jquery.corner.js et scripts[] = js/VOTRETHEME_corner.js
- Videz votre cache ! ! ! ! !
- et suivez les instructions ci-dessous
Dans votre fichier VOTRETHEME_corner.js, ajoutez ce qui suit :
Drupal.behaviors.YOUTHEME = {
attach: function(context, settings) {
// list every element that you would like to adorn with corners below
$("#block-user-login h2").corner("tl tr 4px"); // this is just an example, customize as you'd like, tl = top left
}
}
})(jQuery);
Et voilà ! Pour toutes questions, conntactez l'auteur à www.ZUROSS.com.
Et maintenant, en CSS3
(par wjaspers)
/* Chrome and Safari */
-webkit-border-radius: 5px;
/* Firefox */
-moz-border-radius: 5px;
/* Opera */
-o-border-radius: 5px;
/* W3C standard--when adopted across the board */
border-radius: 5px;
/**
* You can optionally specify the shape of all, opposite, or each corner
* with the following:
* border-radius: 5px 10px; /* All corners will be 5px round tall and stretched 10px long*/
* border-radius: 5px 10px / 3px 5px; /* Top left and bottom right will be 5x10. Top right and bottom left will be 3x5. */
* border-radius: top-left / top-right / bottom-right / bottom-left; /* Where each corner gets its own dimensions */
**/
}
Images d'en-tête dynamiques correspondant à la Taxonomie
Traduction de la page
http://drupal.org/node/882852
publiée / actualisée sur drupal.org le 14 Août 2010
Pour créer les images d'en-tête de pages, vous utilisez probablement plusieurs blocs contenant des images que vous ne rendez visibles que sur certains chemins (path).
Il y a une autre façon de faire, plus facile, qui consiste à créer un seul bloc avec un filtre php activé et paramétré comme suit. L'avantage est évident, vous n'avez qu'un bloc à créer et il sera plus facile d'ajouter des catégories et des images que si vous aviez plusieurs blocs. Car, que se passerait-il si vous aviez des centaines de catégories, vous ne voudriez pas créer des centaines de blocs, n'est-ce pas ?
Étape 1
Supposons que vous ayez les catégories suivantes dans votre blog (créées avec la taxonomie pour figurer dans vos billets de blog) :
- Animaux
- Technologie
- Famille
- Drupal
Étape 2
Avec le module Pathauto installé, paramétrez les chemins de votre blog comme ceci : blog/[term-raw]/[title-raw], vos URL devrait ressembler à ceci lorsque vous créez vos billets :
- /blog/animaux/mon-chaton-mignon
- /blog/technologie/les-derniers-fournisseurs-cloud
- blog/famille/vacances-en-Espagne
- blog/drupal/ces-modules-indispensables
Étape 3
Mettez vos images dans un dossier (par exemple, /sites/default/files/headers/) et nommez-les comme ci-dessous :
- animaux_header.jpg
- technologie_header.jpg
- famille_header.jpg
- drupal_header.jpg
Étape 4
Placez ce code dans un bloc (qui deviendra le contenu de vote en-tête) avec le filtre php activé :
<?php
// cette ligne fournit le path, comme /blog/animaux/mon-chaton-mignon
$termp = $_SERVER['REQUEST_URI'];
// cette ligne convertit le path en tableau (array)
// comme : array('blog','animaux','mon-chaton-mignon')
$categ = explode('/',$termp);
// inverser le tableau et le second terme sera toujours
// la catégorie comme dans array('mon-chaton-mignon','animaux','blog')
$categrev = array_reverse($categ);
// on peut initialiser une variable avec le deuxième terme
$categ1 = $categrev[1];
// ajout d'une instruction conditionnelle pour vérifier si l'image existe
// si elle existe, alors on charge l'image
(file_exists('/sites/default/files/headers/' . $categ1 . '_header.jpg')) ? print '<img src="/sites/default/files/headers/' . $categ1 . '_header.jpg" alt="' . $categ1 . '"/>': '';
?>Maintenant, si vous avez plusieurs termes dans une hiérarchie et que vous voulez afficher chaque terme avec une image en en-tête, il vous suffit de modifier le tableau des termes et l'instruction conditionnelle.
A la suite de cet article, un lecteur a indiqué en commentaire que le module Taxonomie Image permet d'obtenir le même résultat.
Ce à quoi il a été répondu (par l'auteur ? ) que ce bout de code permettait de résoudre simplement l'ajout d'images relatives aux paths. Et que la compréhension de ce code permettait également de résoudre des problèmes simples relatifs aux paths, comme la mise en forme des menus, des blocs, des pages, selon leurs paths.
Look and feel
Les articles qui suivent traitent de la modification du look and feel de votre site par l'utilisation des styles et du javascript.
CSS, trucs, astuces et techniques
Date du document en anglais : 5 Juin 2008 - 00:49 http://drupal.org/node/124416Cette section présente quelques techniques CSS permettant d'enjoliver les sites.
Elle est alimentée par les utilisateurs, je n'ai traduit que les articles estampillés « Drupal 6.x » ou sans précisions de version.
Block quotes
Date du document en anglais : 31 Mai 2007 00:22 http://drupal.org/node/148153
Si vous voulez afficher plusieurs paragraphes de citations avec des caractères guillemets de citation (anglais) plutôt que des images, vous pourriez utiliser ce qui suit :
content: open-quote;
}
blockquote p::after {
content: close-quote;
visibility: hidden;
}
blockquote p:last-child::after {
visibility: visible;
}
Bien sûr, vous pouvez indenter le texte comme il se doit.
Le balisage est simple :
<p>paragraph one</p>
<p>paragraph two</p>
<p>paragraph three</p>
<p>paragraph four</p>
</blockquote>
Uniquement testé sur Firefox.
Commentaires conditionnels avec IE
Date du document en anglais : 30 Octobre 2008 - 13h57 http://drupal.org/node/134569
L'utilisation de JavaScript pour la détection du navigateur est un sujet délicat.
Le paramétrage des polices d'IE pour qu'elle correspondent à celles des autres navigateurs n'est pas chose aisée. Beaucoup de concepteurs de thèmes ressentent le besoin de restreindre leur tendance à l'embonpoint, ou utilisent des hacks CSS pour forcer IE à respecter les normes.
Hélas pour les utilisateurs de Palm pilot, Blackberries, screen readers, de vieilles versions d'Opéra, utiliser JavaScript pour détecter le navigateur est une mauvaise solution. Il y a tellement de navigateurs, de résolutions différentes qu'il est impossible de satisfaire tout un chacun avec une seule feuille de style.
Les designers avertis se diront « Pourquoi ne pas untiliser une seule feuille de style pour tous les navigateurs, et utiliser JavaScript pour fournir les paramètres propres à IE ? ». Bonne question, mais il y a mieux à faire que de coder un script pour cela.
Microsoft a permis aux designers de spécifier des règles CSS propres à IE en utilisant une balise de commentaire HTML modifiée.
Ce commentaire n'est pas valable selon les normes HTML, c'est juste un commentaire. Tous les navigateurs l'ignoreront mais IE en tiendra compte et suivra toutes les instructions qu'il contiendra. Ce Commentaire Conditionnel est encadré d'une balise <link> qui contiendra la feuille de style spécifique à IE. Voici à quoi il ressemble :
<link href="screenStyle4IE.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
Comme d'habitude avec Drupal, il y a plusieurs façons de placer cette modification en début de chaque page HTML. La meilleure façon consiste sans doute à utiliser le module Conditional Styles et à modifier le fichier .info de votre thème pour incorporer des styles conditionnels :
conditional-stylesheets[if lt IE 7][all][] = ie6-and-below.css
conditional-stylesheets[if IE 7][all][] = ie7.css
Remarque : Ce module ne joue que sur la façon dont le registre de thèmes est construit. Vous devrez effacer le registre de thème pour pouvoir constater les changements.
Une autre façon de faire est de placer cette balise dans la section <head> seulement. Une fois que la balise <link> est interprétée par IE, toute règle CSS qu'elle contiendra sera prioritaire. N'oubliez pas que les CSS s'appliquent en cascade, aussi, toute surcharge de règles antérieures doivent venir impérativement prendre place après le lien d'inclusion CSS normal.
Ajoutez un Commentaire Conditionnel au fichier page.tpl.php de Garland comme ceci :
<title><?php php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style>
style type="text/css" media="screen">@import "<?php print base_path() . path_to_theme() ?>/screen.css";</style>
style type="text/css" media="handheld">@import "<?php print base_path() . path_to_theme() ?>/handheld.css";</style>
<!--[if lt IE 7]>
<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie-layout.css";</style>
<![endif]-->
<!--[if IE ]>
<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie-font-sizes.css";</style>
<![endif]-->
</head>
La souplesse est ahurissante ! Il est désormais possible de fournir une classe div pour tous les navigateurs, puis de préciser la taille, le z-index, les float, ou les margins de cette div uniquement pour IE.
La taille des polices, disiez-vous ? Bien sûr ! Les polices de IE ont toutes une taille plus grande que celles des autres navigateurs. Personnalisez-les dans un fichier fix-ie-font-sizes.css, en spécifiant des tailles de polices juste inférieures à celles de la feuille de style normale. Par exemple, si vous avez p{font-size:normal}, mettez p{font-size:small}. Cela vous permet une certaine homogénéité entre les navigateurs sans que vous ayez à vous embarraser de hacks composés de pourcentages de taille.
Oh, et si vous voulez affiner jusqu'à préciser des styles pour chaque version de IE, regardez l'exemple précédent : <!--[if lt IE 7]> signifie « toutes les version de IE sauf IE7». Pour plus d'infos sur « lt IE6 » et « lt IE7 », voyez les pages chez Microsoft.
Vous pouvez aussi créer des styles et des fichiers JS qui seront lus par tous les navigateurs sauf par IE, en modifiant légèrement la structure du code car, dans ce cas-là, les déclarations doivent être à l'extérieur des commentaires :
Remarque : l'utilisation de feuilles de styles internal ou inline peut causer des problèmes avec certains navigateurs (notamment Opera et Safari) car ils n'ignorent pas toujours les CSS disposées à l'intérieur des commentaires. Utiliser des feuilles de styles externes, comme décrit ci-dessus, semble résoudre ce problème.
Changer la taille d'un champ de saisie CCK
Date du document en anglais : 10 Septembre 2008 - 20h19 http://drupal.org/node/186019
Surcharger la largeur par défaut d'un champ de saisie CCK se fait mieux dans un module personnalisé. Utilisez la fonction hook_form_alter() pour cibler l'ID de votre formulaire. Si vous ne connaissez pas cet ID, utilisez un <?php print($form_id); ?> au début de votre module personnalisé et Drupal vous indiquera tous les ID des formulaires utilisés.
Maintenant que vous connaissez l'ID du formulaire, utilisez form_alter pour modifier le #size de votre champ CCK :
<?php
function nameOfYourModuleGoesHere_form_alter($form_id, &$form) {
if ($form_id == 'idOfYourFormGoesHere') {
$form['nameOfYourCCKfieldGroup']['nameOfYourCCKinputField']['#size'] = 40;
}
}
?>
Utilisez <?php print($form); ?> si vous avez besoin de voir les noms des CCKfieldGroup ou des CCKinputField.
Modifier le paramètre #size du champ de cette façon est plus pertinent que de le faire en surchargeant les styles CSS des classes de saisie car les CSS ne cibleront pas les file fields à cause des restrictions de sécurité des navigateurs..
Cette méthode form_alter présente l'avantage de pouvoir travailler sur les formulaires même quand les CSS sont désactivés, comme c'est le cas sur les premiers ordinateurs de poche.
Pour le thème Zen
Ajoutez ceci au fichier template.tpl.php de votre sous-thème :
<?php
function zen_file($element) {
_form_set_class($element, array('form-file'));
return theme('form_element', $element, '<input type="file" name="'. $element['#name'] .'"'. ($element['#attributes'] ? ' '. drupal_attributes($element['#attributes']) : '') .' id="'. $element['#id'] .'" size=\"40\"' ."\" />\n");
}
?>
Comment changer l'encodage des caractères de Drupal (UTF-8 et Unicode) ?
Date du document en anglais : 5 Janvier 2008 - 17h08 http://drupal.org/node/8408
Plusieurs personnes demandent comment paramétrer l'encodage de caractères que Drupal utilise. La réponse est simple : vous ne pouvez pas, car vous n'avez pas besoin de le faire.
Drupal utilise UTF-8 pour encoder toutes ses données. C'est un encodage Unicode, il peut donc contenir des données dans toutes les langues. Vous n'avez plus besoin de vous préoccuper des particularités d'encodages pour votre site (tels que Big5, GB2312, Windows-1251 ou 1256, etc).
De même, lorsque Drupal importe des données XML externes (telles que RSS ou XML-RPC), elles sont automatiquement converties en UTF-8 (le support iconv pour PHP est requis pour la plupart des encodages).
Si vous voulez réellement modifier l'encodage de Drupal, vous rencontrerez énormément de problèmes, à cause des différentes façons dont Drupal reçoit et envoit des données (web, e-mail, RSS, XML-RPC, etc).
Enlever le message « Connectez-vous pour laisser un commentaire » des sites Drupal 6
Date du document en anglais : 6 Avril 2009 - 22h51 http://drupal.org/node/232310 Drupal 6.xL'approche Commentaires
Par défaut, Drupal ajoute ce texte à la fin de chaque article : « Vous devez vous connecter pour poster des commentaires ». Pour enlever ce texte, autorisez les commentaires pour les visiteurs anonymes, ou désactiver le module Comments.
Surcharge des paramètres
Vous pouvez utiliser des textes personnalisés en ajoutant quelque chose comme ceci au fichier /sites/default/settings.php :
<?php
$conf['locale_custom_strings_en'] = array(
'Add new comment' => 'Discuss',
'<a href="@login">Login</a> to post comments' => '',
);
?>Surcharge de l'Utilisateur Anonyme
Si vous voulez ne laisser la possibilité de commentaires qu'aux utilisateurs connectés et enlever le texte d'invitation des utilisateurs anonymes, vous pouvez ajouter le code suivant à la fin du fichier template.php de votre thème :
<?php
function phptemplate_links($links, $attributes = array()) {
global $user;
if (!$user->uid) {
unset($links['comment_forbidden']);
}
return theme_links($links, $attributes);
}
?>Pour plus d'infos, reportez-vous à http://drupal.org/node/425332
Mettre $tabs dans une nouvelle région -- facilement
Traduction de la page
http://drupal.org/node/1097946
publiée / actualisée sur drupal.org le 27 Mars 2011
J'utilise Drupal 6.x avec un thème Zen personnalisé (c'est l'auteur de l'article sur drupal.org qui parle, pas Kolossaldrupal).
L'autre jour, il 'ma été demandé : « Est-il possible de déplacer ces affreux onglets sur la colonne latérale et leur donner un aspect de liens ? ». j'ai répondu bien sûr mais je n'avais pas idée de ce qui m'attendait. Je suis tombé sur un tas de conseils sur la mise en forme des onglets dans un bloc, sur la création de module, sur le déplacement des onglets avec les CSS et quelques autres tuyaux. Déplacer les onglets avec les CSS marche jusqu'à un certain point, mais comme d'autres parties de mon site partageaient le même espace, j'avais vraiment besoin de placer $tabs dans un div de ma région personnalisée.
Ma première idée fut de déplacer le dans de mon page.tpl.php à l'endroit où je le voulais. Je le déplaçais pour qu'il s'affiche dans ma région personnalisée $right. Rien ne s'afficha. En fait, le seul endroit de ma page où l'on pouvait mettre les onglets mis en forme était dans content-top du div content-header.
Bref, j'ai résolu le problème en mettant $tabs dans une variable et en affichant cette variable où je le voulais dans la page. Comme ceci :
<?php
if ($breadcrumb || $title || $tabs || $help || $messages): ?>
<div id="content-header">
<?php print $breadcrumb; ?>
<?php print $messages; ?>
<?php if ($tabs): ?>
<?php $newTabs="<div class='tabs'>".$tabs."</div>"; ?>
<?php endif; ?>
<?php print $help; ?>
</div> <!-- /#content-header -->
<?php endif;
?>et donc :
<?php
print $right; ?>
<div id="sidebar-right-page">
<div id="sidebar-right-inner" class="region region-right">
<?php print $right; ?>
<?php print $newTabs;?>
</div>
</div>
<?php endif;
?>J'ai enlevé les "tab" graphiques et formaté les onglets comme souhaité en modifiant le fichier tabs.css.
Espérant que cela rende service à ceux confrontés au même problème.
Replier par défaut des groupes de champs : ordonner les paramètres formulaires du thème
Traduction de la page
http://drupal.org/node/733198
publiée / actualisée sur drupal.org le 5 Octobre 2010
Par défaut, les paramètres formulaire des thèmes ont tous les groupes de champs (fieldsets) du noyau dépliés, même s'ils ne contiennent pas de champs requis. Et notamment, lorsque vous dépliez les paramètres de thème avec vos propres éléments de formulaires, les groupes de champs du noyau dépliés créent une vue désorganisée.
La solution réside dans une surcharge de thème placée dans votre fichier template.php (voir Overriding themable ouput pour un aperçu des surcharges et de la localisation de ce code) :
<?php
// Surcharge des paramètres de thème formulaires
// pour replier les groupes de champs "Logo" et "Icone".
// Remplacez "yourthemename" par le nom de votre thème.
function yourthemename_system_settings_form($form) {
// Replier les groupes de champs
$form_elements = element_children($form);
foreach ($form_elements as $element) {
if ($form[$element]['#type'] == 'fieldset') {
//Identifier le groupe de champs et le replier
$form[$element]['#collapsible'] = TRUE;
$form[$element]['#collapsed'] = TRUE;
}
}
return drupal_render($form);
}
?>
Views - Créer une liste d'événements, groupés par mois
Date du document en anglais : 23 Février 2010 - 02h47 - http://drupal.org/node/388140
Views dispose d'une fonctionnalité appelée regroupement. Elle vous permet de regrouper les données d'une liste en différentes catégories. En d'autres termes, si plusieurs éléments font partie d'une même catégorie, ils sont regroupés et forment alors leur propre liste. Pour que ce regroupement fonctionne, vous devez avoir des champs actifs et présents, fort heureusement vous pouvez utiliser n'importe quel champ disponible pour créer des catégories.
Illustration 1: copie d'écran prise sur l'article de Drupal.org. Non, non. Je ne l'ai pas francisée.
Modules utilisés :
Créer un type de contenu pour vos événements
Avec CCK :
- Créez un nouveau contenu (Administrer » Gestion du contenu » Type de contenu » Bouton Ajouter)
- Appelez-le Événement
- Ajoutez un nouveau champ appelé Date et choisissez date comme type.
- Configurez le champ selon vos souhaits.
Créez ensuite quelques contenus pour ce nouveau type Événement dont certains avec la même date.
Créer une nouvelle vue
Avec Views, ajoutez une nouvelle vue appelée Événements.
Choisissez un style pour la vue, de préférence Table.
Ajoutez les champs Node : Titre et Contenu : Date. Ce sont les champs qui seront visibles, paramétrez-les de sorte qu'ils soient présentables.
Nous venons d'ajouter le champ date, mais nous devons l'ajouter une deuxième fois pour qu'il soit utilisable dans le regroupement. Cette fois-ci il ne devra pas être affiché à côté du premier, pour cela cochez « Exclure de l'affichage » et n'indiquez rien dans l'étiquette.
La raison pour laquelle nous avons besoin d'un deuxième champ pour la date est que nous allons modifier sa présentation pour n'afficher que le mois et l'année.
Maintenant, dans le cadre Paramètres de base, en face de l'option Style, cliquez sur le bouton « Rouage » et sous Champ de regroupement, sélectionnez le champ date caché puis cliquez sur Mise à jour.
Vous pouvez aussi ajouter un filtre pour Node : Publié = oui et Node : Type = événement.
Si vous faites un aperçu de la vue, vous remarquerez que chaque node a été placé dans son propre groupe, et chaque groupe a une date unique comme en-tête. Puisque toutes les dates sont uniques nous avons pour l'instant un groupe par date.
Nous devons maintenant modifier le champ date caché pour qu'il ne retourne que le mois et l'année.
Assurez-vous que votre vue ait un type d'affichage page ou bloc et sauvegardez-la.
Surcharger l'affichage du champ date
Pour trouver le fichier à copier pour personnaliser notre champ, nous devons cliquer sur le lien Thème : informations (situé dans le bloc Paramètres de base, tout en bas du bloc), cela nous donne la liste des fichiers possibles pour chaque partie de la vue. De cette liste, trouvez l'identifiant du champ caché et regardez la deuxième suggestion de nom de fichier (la première suggestion est en gras), dans mon cas il s'appelle views-view-field--field-date-value-1.tpl.php. Le nom du vôtre peut être différent.
Pour utiliser ce fichier, nous devons copier celui appelé views-view-field.tpl.php du dossier sites/all/modules/views/theme pour le coller dans le dossier de votre thème. Renommez-le en suivant avec le nom suggéré plus haut ( views-view-field--field-date-value-1.tpl.php, dans cet exemple), y compris avec les traits d'union.
Ouvrez le nouveau fichier et remplacez <?php print $output ?> avec :
<?php
print date('F Y', srttotime($row->node_data_field_date_field_date_value));
?>
F = Mois
Y = Année
Dans le code ci_dessus, remplacez node_data_field_date_field_date_value par le nom de votre champ (qui sera trouvé dans la requête SQL, après l'instruction AS)
Maintenant, lorsque vous chargerez la vue finale vous devriez obtenir une liste semblable à celle de la copie d'écran.
Personnalisations
Comment personnaliser l'affichage de la date : http://php.net/manual/fr/function.date.php.
Comment modifier l'apparence du texte : http://v1.reinspire.net/blog/2005/09/15/css_font_styling/ (en anglais).
Mise en garde
Si vous vous demandez pourquoi les données de votre listing ne sont pas correctement groupées, désactivez Theme developper et voyez si ça marche mieux.
Dans le but de vous éviter d'éventuels casse-tête, voici une remarque au sujet de cet exemple :
La raison pour laquelle vous écrivez un gabarit est que le champ de regroupement fait ses comparaisons à partir de la sortie des données et non sur les données elles-mêmes. Cette voie a été choisie pour faciliter l'implémentation de propriétés telles que la granularité sur les dates.
Un des effets de bord de tout ceci est que tout outil qui se plante avec les sorties dira... THEME DEVELOPPER... provoque des différences sur des chaînes dates apparemment égales. Plus précisément, la sortie sera enveloppé d'un tag qui comporte un attribut thmr dont la valeur augmente
One BIG side effect of this is that any tools that monkey with the output, say... THEME DEVELOPER ... will cause what seem like equivalent date strings to be different. More specifically, the output will be wrapped in a tag, that includes a thmr attribute that increments.
Modifier le FavIcon
Date du document original en anglais : 26 Août 2009 - 00h43 - http://drupal.org/node/362265
Dans un développement web, vous pouvez placer un petit logo affiché près de la barre d'adresse et dans les marque-pages du navigateur de votre internaute. Ce logo s'appelle favicon. Drupal en fournit un par défaut, qui est une goutte d'eau tombante.
Utiliser le favicon de Drupal n'est pas plus mal, mais si vous voulez vraiment faire ressortir votre site, vous devriez afficher le vôtre. Les fichiers favicon sont au format .ico et de très petites dimensions. Le favicon de Drupal fait 32 pixels de côté. Ceci étant dû au fait que les favicon sont affichés dans la barre d'adresse, endroit qui ne dispose pas de beaucoup de place libre. Tout favicon que vous créerez devra être de cette taille.
Modifier le favicon
- Ouvrez le dossier d'installation de Drupal
- Ouvrez le dossier misc.
- Si votre favicon n'est pas déjà nommé favicon, renommez-le ainsi. Les gabarits par défaut de Drupal ne reconnaissent que le format ICO, assurez-vous que votre favicon soit bien enregistré dans ce format.
- Placez votre favicon dans le dossier misc et remplacez celui fourni par Drupal.
Le changement n'apparaîtra pas immédiatement dans le navigateur, vous devrez vider son cache et recharger la page. De même, si vous avez bookmarqué votre site, vous devrez effacer le marque-page et le recréer pour voir le nouvel favicon.
Astuces pour la création du favicon
- Quand vous créez un favicon de toutes pièces, faites-le de dimension carrée et de grande taille. Cela en facilitera son dessin (à moins que vous ne soyez un as en Pixel Art).
- Les favicons devraient respecter les codes couleur du site.
- Placez un symbole caractéristique (comme, par exemple, la goutte qui tombe de Drupal, le W de Wikipédia, le G de Google, le K de KolossalDrupal, etc).
Saines lectures
Pour plus d'informations sur les favicons, rendez-vous dans les pages Favicon de Wikipedia ou celles du W3C.
Il y a plusieurs sites qui pourront vous aider à créer des favicons, par exemple : favicon.cc.
Personnalisation complète de votre page d'accueil
Date du document en anglais : 23 Août 2009 - 15h28 - http://drupal.org/node/317461 Drupal 5.x Drupal 6.x
Si vous voulez que la mise en page de votre page d'accueil soit totalement différente du reste de votre site, vous pouvez définir un gabarit complet à cette fin.
Vous pourriez le faire parce que vous avez
- une page d'accueil très graphique,
- une maquette en provenance d'un designer qui ne peut pas être vraiment modifiée,
- une intro en flash en guise de page d'accueil,
- un « splash screen » ou toute autre nécessité.
... et parce que faire tout ça dans un thème Drupal générique serait malcommode.
N'importe quelle page Drupal peut être personnalisée, par le biais des template-suggestions utilisées dans le moteur phptemplate. Cette solution est puissante, apprenez-la.
Dans sa forme la plus simple, vous pouvez :
- dans votre dossier de thème, créer une page appelée page-front.tpl.php
- y copier du code source HTML statique, avec les corrections de chemins d'accès appropriées.
- C'est terminé !
Notez que les chemins relatifs vers les images (ou vers des swf) directement depuis la page ne marcheront pas pour trouver les images enregistrées près du dossier de votre thème. Enregistrer ces images dans le dossier de votre thème est la bonne façon de procéder, mais vous devrez reécrire tout votre code HTML pour utiliser soit
(qui est correct mais mauvais)
soit
(qui est beaucoup plus correct - $directory renvoie toujours le chemin du thème en cours d'utilisation)
Pour faire une page d'accueil relativement unique mais qui se marie bien avec Drupal, vous pouvez :
- dans votre dossier de thème, créer une page appelée page-front.tpl.php,
- y copier du code source HTML statique, avec les corrections de chemins d'accès appropriées.
- Comparer votre page avec la page de thème page.tpl.php «normale» et en copier les balises de code comme leur logique dans votre nouvelle page, aux bons endroits.
- Vous pouvez placer $content au milieu, des barres latérales aux endroits appropriés pour y placer des blocs ensuite, et $footer dans votre pied de page, etc. Essayez d'en reprendre autant que possible - cela s'avérera utile, c'est aussi pour cette raison qu'on utilise un CMS.
Sous Drupal 6, les nouveaux gabarits ne seront pas forcément pris en compte dès leur création. Allez dans la page d'administration des thèmes et validez-la pour rafraîchir le cache des thèmes, refaites-le à chaque fois que vous ajoutez un fichier *.tpl.php.
Il y a également différents modules qui sont conçus pour vous permettre un contrôle avancé d'une page sans avoir trop de travail de mise en page, comme Panels ou peut-être Node style.
Reportez-vous aux tutoriaux pour des conseils sur la façon de modifier le contenu de la page d'accueil.
Edit de kolossaldrupal : allez jeter un œil sur la traduction de l'article de Michael Anello Blueprint CSS pour apprendre à réaliser un gabarit de page Drupal en moins de deux :-). Les références à l'article original se trouvent sur la page.
Personnaliser la page « Résultat de recherche »
Date du document en anglais : 26 Août 2009 - 02h26 - http://drupal.org/node/175013
Avez-vous besoin de modifier la présentation d'un résultat de recherche Drupal ? Vous devez impérativement le faire à la façon Drupal, et pour comprendre comment faire, il n'y a rien de mieux que de le faire (sauf que KolossalDrupal, traducteur, n'a pas poussé le dévouement jusqu'à installer un Drupal 5.x pour vérifier tout ça. NDT). L'exemple qui suit vous montrera non seulement l'aspect technique mais aussi la façon de penser pour y arriver. La même démarche pourra être appliquée quand vous aurez à modifier des composants de Drupal.
La première étape consiste à repérer ce qui pilote la recherche Drupal. Dans les dossier des modules vous trouverez le dossier search, ce qui laisse augurer que c'est dedans que se trouvent les scripts de recherche (quelle pertinence ! NDT). Ouvrez ce dossier pour voir ce qu'il contient et ce qu'il y a à personnaliser, tout en gardant à l'esprit que vous ne devez pas modifier quoi que ce soit aux fichiers du module de recherche eux-mêmes.
Dans le module search, vous trouverez les fichiers standards .info, .install, .module et un fichier .css. Dans ce cas précis vous regardez le module search lui-même. Ce que vous devez chercher c'est quelque chose que vous pourrez hameçonner (hook) ou styliser. Les fonctions que vous cherchez sont les fonctions de thème, dans le module search vous trouverez theme_search_form, theme_search_block_form, theme_search_item et theme_search_page. Vous pourrez personnaliser ces fonctions de façon à ne pas toucher au core Drupal. Génial !
Dans cet exemple vous allez modifier l'aspect et le comportement de la page de résultat de recherches (également nommé spr par les gourous SEO). Nous allons ôter la ligne de .info qui indique qui écrit le nud, quand il a été écrit, commentaires, etc. A première vue, il semble correct que la fonction theme_search_page soit celle à personnaliser dans mon thème. Pour cette exemple nous utiliserons le thème Zen, qui doit être enregistré dans le dossier sites/all/themes/zen. Voici le code de theme-search_page, abondamment commenté, ce qui vous indiquera les paramètres et l'objet de cette fonction :
<?php
/**
* Formate la page résultat d'une requête de recherche.
*
* Les modules peuvent implémenter hook_search_page() pour surcharger cette fonction par défaut
* pour afficher les résultats de la recherche. Dans ce cas, il est attendu qu'ils fournissent leurs propres fonctions
de personnalisation de thème.
*
* @param $results
* Le résultat de la recherche retourné par hook_search().
* @param $type
* Le type de donné trouvée, tel que "user" ou "node".
*
* @ingroup themeable
*/
function theme_search_page($results, $type) {
$output = '<dl class="search-results">';
foreach ($results as $entry) {
$output .= theme('search_item', $entry, $type);
}
$output .= '</dl>';
$output .= theme('pager', NULL, 10, 0);
return $output;
}
?> Après examen plus attentif, vous remarquerez que cette fonction appelle la fonction theme_search_items via theme('search_item', $entry, $type), ce qui indique que c'est cette fonction qui est à modifier. Cette fonction ressemble à ceci :
<?php
function theme_search_item($item, $type) {
$output = '<dt class="title"><a href="'. check_url($item['link']) .'">'.
check_plain($item['title']) .'</a></dt>';
$info = array();
if ($item['type']) {
$info[] = check_plain($item['type']);
}
if ($item['user']) {
$info[] = $item['user'];
}
if ($item['date']) {
$info[] = format_date($item['date'], 'small');
}
if (is_array($item['extra'])) {
$info = array_merge($info, $item['extra']);
}
$output .= ' <dd>'. ($item['snippet'] ? '<p>'. $item['snippet'] .'</p>' : '') .
'<p class="search-info">'. implode(' - ', $info) .'</p></dd>';
return $output;
}
?>Ce que vous devez faire c'est copier toutes les fonctions précédentes dans votre fichier template.php qui se trouve dans le dossier sites/all/themes/zen. C'est ce fichier template.php que vous devez utiliser pour manipuler, indirectement, le core Drupal. Pas seulement pour les recherches, mais aussi pour tous les modules du core. Modifiez le nom de la fonction theme_search_item($item, $type) en zen_search_item($item, $type). Après sauvegarde du fichier, Drupal n'appellera plus les fonctions du module de recherche mais celles nouvellement créées dans zen_search_item($item, $type). C'est tout simplement très chouette, et désormais, si vous effectuez une mise à jour du core Drupal, les modifications dans votre thème ne seront pas écrasées par la mise à jour du module search.
N'oubliez pas de changer le nom de votre fonction template.php pour éviter le message d'erreur : « Fatal error : Cannot redeclare theme_search_item() (previously declared in....)». Je dis ça en passant... Ça ne m'est pas arrivé ;-)
Maintenant voyons le truc vraiment sympa. Comme cette nouvelle fonction zen_search_item() se trouve dans votre thème, vous êtes libre d'en faire ce que vous voulez pour obtenir les résultats que vous voulez. Ainsi, les petits changements qui enlèveront les données citées précédemment peuvent être effectués en enlevant le code qui les contient.
Votre nouvelle fonction du fichier template.php devient :
<?php
function zen_search_item($item, $type) {
$output = ' <dt class="title"><a href="'. check_url($item['link']) .'">'.
check_plain($item['title']) .'</a></dt>';
$output .= ' <dd>'. ($item['snippet'] ? '<p>'. $item['snippet'] .'</p>' : '');
return $output;
}
?>Vous pouvez voir que vous avez enlevé pas mal d'infos, mais vous pouvez aussi faire l'inverse et ajouter du contenu, changer les éléments ou faire ce que vous voulez, sans toucher au core Drupal !
Personnaliser le style des listes UL
Date du document en anglais : 26 Août 2009 - 01h53 - http://drupal.org/node/263979
Niveau de difficulté : intermédiaire à avancé.
Exemple 1 : les bases
Pour cet exemple, nous créerons une liste non-ordonnée (ul) qui montrera des puces à côté d'une liste li dans une zone précise, et qui les cachera dans le reste du site.
Vous pouvez choisir quelle liste vous voulez personnaliser dans votre site.
Remarque :
Ne faites tout ceci que dans un site de développement, et ayez toujours une sauvegarde des fichiers sur lesquels vous allez travailler.
Nous allons prendre un div et l'appeler « content ». Le nom de votre div peut être différent. Dans ce div, nous placerons la liste ul à personnaliser :
Dans votre feuille de style, vous indiquerez :
list-style-type:none
}
#content ul.unordered_list_in_content {
list-style-type: disc
}
Vous devriez maintenant avoir une liste à puces dans la zone que vous avez choisi et pas dans le reste du site.
Exemple 2 : amusons-nous avec les styles de listes
Pour désactiver tous les styles des listes dans un thème, tapez :
au lieu de :
Vous pouvez faire quelque chose comme :
au lieu de
Aussi, votre feuille de style finale devrait ressembler à :
list-style:none
}
#content ul.unordered_list_in_content {
list-style: disc inside
}
Remarque : si vous avez plus d'une feuille de style dans votre thème, vous devrez vous assurer qu'il n'y a pas de styles de liste surchargeant vos CSS, autrement elle ne s'afficheront pas.
Positionner autour des floats avec class="clear-block"
Date du document original en anglais : 25 Août 2009 - 03h04 - http://drupal.org/node/380906
De nombreuses mises en page HTML ont besoin d'une indication de positionnement des éléments flottants pour qu'ils n'interfèrent pas avec l'affichage des éléments environnants. Cela se fait en paramétrant la propriété clear de l'élément concerné, mais lorsque l'élément environnant est inconnu on utilise un élément DIV vide avec sa propriété clear paramétrée.
Il y a cependant une façon plus simple de procéder. Le système des feuilles de style Drupal dispose d'une classe très utile : clear-block. C'est une implémentation de la technique décrite dans Position is everything.
( voir aussi : Flux et position relative et Position float chez openweb.eu.org. C'est en bon français, ça ne fait pas de mal :-). NDT)
Pour utiliser la méthode de Position is everything, attribuez simplement la classe clear-block à l'élément qui contient les flottants.
Ainsi, si vous avez une galerie d'images flottantes sous forme de LI, attribuez une 'class="clear-block"' aux UL.
Le core Drupal regorge de nombreux exemples, comme les liens de nodes.
Prototypage XHTML/CSS avec Drupal
Date du document en anglais : 11 Mars 2009 - 06h41 - http://drupal.org/node/268911
Le prototypage XHTML/CSS constitue une approche professionnelle pour résoudre les questions concernant l'affichage des données côté client et leur séparation de la logique applicative. Cela peut notamment se faire en employant des fichiers statiques. Puisque la création de ces fichiers puis leur conversion en prototype dans un thème Drupal peut également se faire, il serait plus pertinent d'intégrer ces deux étapes l'une dans l'autre. Ce « Howto » expose quelques trucs et paramètres sur le prototypage XHTML/CSS avec Drupal.
En règle générale, pour effectuer un prototypage avec un thème CSS (comme ZEN-CSS), vous devez saisir le contenu XHTML sans filtrage. Avec le paramétrage standard des filtres, Drupal filtre les sorties en ajoutant des éléments XHTML et en supprimant d'autres. Comme ce comportement est indésirable dans le cas présent, Drupal doit être configuré pour permettre à l'utilisateur de saisir du XHTML qui ne sera pas filtré.
Ajouter le format d'entrée HTML TEL QUEL
Cet objectif peut être obtenu en ajoutant un nouveau format d'entrée, appelé AS-IS HTML qui ne filtrera plus les sorties :
- Connectez-vous en tant qu'administrateur
- Allez dans Administration » Configuration du site » Format d'entrées
- Cliquez sur Ajouter un format d'entrée.
- Vous êtes maintenant sur la page Ajouter un format d'entrée
- Indiquez AS-IS HTML dans le champ Nom
- Assurez-vous qu'il n'y ait aucune case cochée dans chacun des cadres Roles et Filtres.
- Validez le formulaire en cliquant sur le bouton Enregistrer la configuration.
Utiliser du XHTML non filtré dans les thèmes
Ce nouveau format d'entrée peut être désormais utilisé pour restituer le XHTML requis, afin qu'il puisse être utilisé dans la création d'un thème. Vous pourrez l'utiliser dans différents types de contenus et vous pourrez l'utiliser dans l'ajout de blocs. La seule chose que vous aurez besoin de faire sera de permettre l'usage de ce filtre à l'utilisateur en charge du thème.
Tout utilisateur autorisé à administrer les filtres peut utiliser tous les filtres sans restriction, à plus forte raison l'administrateur lui-même. Si vous créez un utilisateur uniquement pour le prototypage XHTML/CSS, vous devrez ajouter cette permission à son rôle.
Prototyper
Désormais, l'utilisateur en charge du prototypage peut créer des contenus et des blocs avec ce filtre et s'occuper de la réalisation du thème. Cela devrait accélérer cette réalisation tout en la dissociant du développement. Accessoirement, ce raccourci aidera les développeurs et les concepteurs de thème à comprendre les shortcommings (Lacunes ? Manques ? Omissions ?).
Styliser un bloc de connexion horizontal dans le pied de page
Date du document en anglais : 4 Avril 2009 - 10h49 - http://drupal.org/node/259609
Styliser le bloc de connexion utilisateur pour qu'il apparaisse sur une seule ligne est assez simple. Vous pouvez ainsi le placer dans votre pied de page, comme sur les sites pour lesquels les utilisateurs n'ont pas besoin de (ou ne peuvent pas) se connecter.
Voici les règles pour votre feuille de style :
* bloc de connexion utilisateur dans le peid de page
*/
#block-user-0 {
margin: 2em 0 1em;
}
#block-user-0 *
{
display: inline;
color: white; /* ici, indiquez la couleur du texte dans votre thème */
}
#edit-user-login-block {
display:none; /* recacher les éléments cachés du formulaire */
}
#block-user-0 h2 {
font-size: 92%; /* correspond à .content font size... modifiez-le avec les valeurs de votre thème */
}
#block-user-0 .form-item {
margin-left: 1em;
}
Styliser un formulaire de saisie CCK
Date du document en anglais : 8 Septembre 2009 - 08h42 - http://drupal.org/node/101092
La raison qui m'a amené à écrire ce tuto sur la personnalisation des formulaires est que j'ai travaillé avec des contenus créés avec CCK et que j'ai essayé de comprendre comment changer l'ordre des champs du formulaire. Ce que j'ai trouvé dans les forums était très technique (pointeurs vers l'API pour parler comme des développeurs) ou incomplet, ou même ne concernait pas les formulaires de saisie. Il y avait plus de tuyaux pour les personnes cherchant à modifier ou à personnaliser les affichages, mais rien de clair et précis en ce qui concernait la stylisation des formulaires de saisie.
Aussi, en tant que non-programmeur, à moitié technicien et plutôt orienté marketing et buziness, je me suis mis en chemin pour découvrir comment styliser mes formulaires de saisie. (A tous les développeurs et autres personnes mieux informées que moi, n'hésitez pas à me corriger si je me trompe !).
(NDT : c'est pas KolossalDrupal qui parle, c'est l'auteur de l'article de Drupal.org. Veuillez aiguiller correctement les jets de tomates en représailles aux lourdeurs de style et à la fausse modestie).
Il y a au moins deux façons de styliser les formulaires de saisie :
- En utilisant l'API Form (en créant un nouveau fichier .module écrit en PHP et en utilisant des choses comme hook_form_alter)
- En créant des fichiers tpl.php.
J'ai trouvé que la deuxième façon était la plus facile (Feignasse ! NDT). Il y aura quand même un peu plus à faire que de créer un fichier tpl.php personnalisé. Il faudra modifier le fichier template.php, ce qui implique quelques connaissances en PHP, et travailler avec les feuilles de style (soit en modifier une existante, soit en créer une qui sera liée à votre thème).
Tout d'abord, il y a un couple de personnes qui sont responsables de la majeure partie du tuto et méritent d'en être crédités :
- Lyal (http://www.harostreetmedia.com), merci de m'avoir e-mailé le bout de code au milieu de la nuit.
- Dublin Drupaller (http://www.dublindrupaller.com), merci pour le profond savoir que vous partagez dans les forums, où j'ai pu glaner de nombreuses informations.
- Jghyde, qui en a aidé d'autres partageant les même recherches.
- Nick Lewis (http://www.nicklewis.org) dont le site web regorge d'informations utiles et intéressantes sur Drupal.
Et maintenant, que la fête commence !
Comment styliser un formulaire de saisie CCK ?
Pré-requis :
- Vous comprenez un peu le CSS (comment ça marche, comment utiliser les class et id dans le balisage HTML pour styliser les sorties)
- Vous comprenez un peu le PHP (pas à fond, juste pour comprendre ce que fait un code PHP, pour pouvoir le copier ou le modifier un peu)
- Vous avez installé le module CCK et vous savez comment créer des contenus avec (bien que je me réfère aux formulaires de saisie CCK dans ce didacticiel, je suis presque sûr que c'est la même démarche pour n'importe quel type de node).
Les étapes
- Étape 1 : créer un type de contenu avec CCK
- Étape 2 : créer le fichier [moncontenu].tpl.php
- Étape 3 : modifier template.php
- Étape 4 : modifier style.css
Avec cette méthode vous devriez pouvoir modifier le formulaire de saisie. Dans cet exemple, je vais faire ce qui suit : ne pas montrer certains des champs « location » qui sont automatiquement générés (j'ai le module « Location » installé et activé pour mes contenus CCK), puis créer mes propres groupes « pliables » et mettre les éléments que je veux dans ces groupes, et placer mes champs de saisie côte à côte au lieu de les placer un par ligne.
Même avec la méthode que j'utilise, il y a différentes façons d'accomplir le même travail; par exemple, j'utilise tpl.php pour ordonner les champs et .css pour les styliser. Je pense que je pourrais n'utiliser que le CSS pour faire le tout (mais je ne suis pas un gourou du CSS) et n'utiliser le fichier tpl.php pour attribuer les nouveaux <div>
Étape 1 : créer le type de contenu avec CCK
Créez un type de contenu CCK appelé « event_listing » et ajoutez-lui quelques champs. J'ai ajouté des infos contact, localisation, des champs d'information d'événement, etc.
Créez au moins un node (créez une liste d'événements avec votre nouveau type de contenu)
Étape 2 : créer le fichier [moncontenu].tpl.php
Maintenant créez un fichier texte appelé event_listing_edit.tpl.php et mettez-le dans le dossier de votre thème (qui se trouve dans le dossier /theme/). On pourrait l'appeler n'importe comment, mais ce sera plus clair et simple à gérer si vous l'appelez ainsi.
Maintenant, ajoutez le code PHP suivant dans le fichier tpl.php. C'est un petit texte pour vérifier que votre prochaine étape (modifier template.php) marche :
<?php
print("Youpi ! Ça marche !");
?>
Étape 3 : modifier template.php
Maintenant le plus dur : vous devez ouvrir et modifier le fichier template.php qui se trouve dans le dossier de votre thème.
Vous devrez lui ajouter deux fonctions distinctes, une pour appeler votre fichier event_listing_edit.tpl.php personnalisé lorsque le formulaire sera édité et une autre pour l'appeler lorsqu'un NOUVEAU node sera sur le point d'être créé (vous n'aurez besoin que d'un seul fichier tpl.php, mais comme les modifications du fichier template.php surchargent les fonctionnalités par défaut, il est nécessaire d'indiquer à Drupal d'utiliser le fichier personnalisé pour chaque cas).
À la fin du fichier template.php, ajoutez le code suivant, ce sont deux fonctions différentes :
<?php
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
function phptemplate_node_form($form) {
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
// Add Form End
// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
$node = node_load(array('nid' => arg(1)));
function phptemplate_node_form($form) {
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
// Edit Form End
?>
Vous pouvez voir dans le code les personnes qui l'ont écrit (bien que j'ai légèrement modifié le code original). Merci à jghyde et Dublin Drupaller (http://drupal.org/node/85908)
(NDT : je suis étonné qu'il n'ait pas encore remercié sa femme. Mais l'auteur est peut-être un geek : « c'est quoi une femme ? »)
Maintenant, essayer de modifier votre nœud event_listing, vous devriez voir le texte « Youpi ! Ça marche ! », comme sur la copie d'écran. Dans le cas contraire, il y a deux suspects à chercher : vérifiez la convention de nommage dans le fichier template.php, j'ai parfois mal référencé mon fichier tpl.php.
Dans l'étape suivante vous allez ajouter tous les champs dont vous avez besoin dans le formulaire de saisie. Vous pouvez trouver les champs disponibles pour votre formulaire en mettant le code suivant dans votre fichier tpl.php personnalisé (astuce de goose2000 pour afficher les données joliment)
<?php
print("yahoo, it works!<br>");
print("<pre>");
print_r(array_values($form));
print("</pre>");
?>
Vous allez voir une longue liste de données décrivant les champs disponibles pour votre formulaire de saisie, la section qui vous intéresse ressemble à ceci (il y a une section similaire pour chaque champ et chaque objet du formulaire) :
<?php[field_website] => Array
(
[0] => Array
(
[value] => Array
(
[link] => janze.com
[title] => Janze.com
[attributes] =>
)
)
)
?>Dans cet exemple, si je veux faire référence à l'URL du site, je le ferai comme ceci :
<?php
['field_website']['0']['value']['link']
?>
Aussi, si je veux ajouter l'URL du site à mon formulaire de saisie, j'ajouterai cette ligne à mon fichier tpl.php :
(j'ai entouré la ligne dans un 'div id=' balise pour pouvoir la styliser en CSS)
Maintenant, je modifie mon nœud event_listing, j'obtiendrai quelque chose comme ceci :
N'oubliez pas d'effacer la ligne « Youpi ! Ça marche ! ».
Maintenant, avançons et ajoutons le reste des champs souhaités au formulaire.
Si vous voulez faire un groupe de champs qui se déplient/replient, tout ce que vous avez à faire et entourer ces champs avec <fieldset class="collapsible"></fieldset> et si vous voulez que le groupe porte un nom ajoutez juste <legend>Contact Info</legend> après le fieldset d'ouverture. Comme dans cet exemple :
<fieldset class=" collapsible">
<legend>Contact Info</legend>
<div id="jpj8"><?php print form_render($form['field_name']); ?></div>
<div id="jpj8a"><?php print form_render($form['field_email']); ?></div>
<div id="jpj8b"><?php print form_render($form['field_phone_0']); ?></div>
<div id="jpj8c"><?php print form_render($form['field_website']['0']['value']['link']); ?></div>
<div id="jpj8e"><?php print form_render($form['field_description']); ?></div>
</fieldset>
</div>
Ce qui donnera ceci :
Interestings bits
C'est un peu bizarre/curieux/étrange/fantasque/singulier/surprenant mais à la fin de votre fichier tpl.php mettez cette ligne
<?php
print form_render($form);
?>
qui affichera tous les objets du formulaire restants (champs et boutons) qui n'auront pas été préalablement référencés. Cela veut dire que tous les champs qui n'étaient pas explicitement ajoutés par le code précédent seront maintenant affichés. Mais si vous êtes comme moi, la raison pour laquelle vous ne les avez pas explicitement ajoutés c'est que vous n'en vouliez pas !
Aussi, pour se débarrasser de ces champs indésirables, j'ai trouvé deux méthodes, une qui marche pour moi (et dont je suis sûr qu'elle est mauvaise car elle n'est pas très élégante) (NDT : Ah l'élégance en programmation...) et une autre qui est très élégante, mais qui ne marche pas avec moi. J'aimerais bien utiliser la voie élégante en premier... qui est de surcharger explicitement les champs indésirables dans votre fichier template.php. Par exemple, si je ne veux pas afficher le site, je mets ceci :
<?php
$form['field_website'] = '';
?>
dans le fichier template.php., à l'intérieur de votre fonction surchargée (avant le callback). La lecture de cette ligne de code nous montre que nous identifions le champ du formulaire et initialisons sa valeur à rien. Voici à quoi ressemblerait la fonction :
<?php
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
function phptemplate_node_form($form) {
$form['field_website'] = '';
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
// Add Form End
// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
$node = node_load(array('nid' => arg(1)));
if ($node->type == 'content_event_listing'){
function phptemplate_node_form($form) {
$form['field_website'] = '';
return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
}
}
}
// Edit Form End
?>
Notez que je dois mettre le bout de code à la fois dans les sections « Add form » et « Edit form » nouvellement ajoutées.
L'inélégante façon de faire est d'ajouter les champs indésirables à votre fichier tpl.php, tout comme ceux qui sont souhaités, et d'ajouter un CSS display:none pour les styliser.
Étape 4 : modifier style.css
Bien ! Vous avez maintenant un formulaire avec tous les champs souhaités, aucun de eux indésirables et vous en avez peut-être même groupés quelques-uns dans un groupe repliable/dépliable. Et qu'est-ce qu'on fait maintenant ?
Vous pouvez maintenant styliser chacun de ces éléments avec des CSS. Je ne suis pas un gourou du CSS, alors ici je ne ferais que des choses simples :
- je montrerai un exemple de CSS pour cacher un champ
- je mettrais aussi deux champs côte à côte.
Pour cacher un champ avec les CSS, identifiez le div avec l'ID du champ que vous voulez cacher puis créez un style dans votre style.css pour ce div (ou dans votre feuille de style personnalisée. Je pense qu'il est recommandé d'utiliser sa propre feuille de style pour toute modification qui doit persister après une mise à jour).
Voici un exemple :
display: none;
}
Pour mettre des champs côte à côte avec des CSS, vous devez les entourer avec des balises <span> au lieu de balises <div>, comme ceci :
Puis créez les styles flottants comme ceci :
float: left;
}
Maintenant mes champs s'afficheront côte à côte. Je vous laisse améliorer la présentation, c'était juste la tambouille pour que ça marche !
Informations supplémentaires
FYI, pour ceux qui jouent avec Drupal 5.x, remplacez form_render() avec drupal_render() - merci à ericelbow.
Si vous souhaitez cacher les infos de révisions, quelques solutions peuvent être trouvées à http://drupal.org/node/117148.
(Il n'a pas remercié sa femme. C'est un geek ! NDT)
1. Évidemment, «couple», dans ce contexte, ne signifie pas couple mais quelques. Mais bon, comment j'aurais fait une vanne sinon ? :-) retour
2. Merci à vous, lecteurs, d'avoir supporté ces mauvaises blagues.
Styliser un formulaire de saisie CCK pour CCK2
Référence en anglais sur drupal.org : 12 octobre 2009
http://drupal.org/node/601646
J'ai passé plusieurs jours à chercher comment styliser un formulaire de saisie avec CCK2 dans Drupal 6, j'espère que ce qui suit vous aidera et vous fera gagner du temps.
(c'est l'auteur de l'article qui parle, pas le traducteur)
Pour styliser un formulaire CCK2, vous avez simplement besoin de :
- Modifier le fichier template.php
- créer un fichier node-type_de_contenu-edit.tpl.php
- Supprimez les données du cache avant d'afficher le résultat : Administrer » Configuration du Site » Performance » Supprimer les données du cache.
Exemple
Supposons que vous ayez un type de contenu nommé account_registration et que votre thème est bluemarine.
Modifiez le fichier template.php. Ajoutez ce qui suit :
function bluemarine_theme($existing, $type, $theme, $path) {
return array(
'account_registration_node_form' => array(
'arguments' => array('form' => NULL),
'template' => 'node-account_registration-edit',
),
);
}Créez un fichier nommé node-account_registration-edit.tpl.php:
//Pour supprimer le champ Titre
<?php unset($form['title']); ?>
<fieldset class=" collapsible">
<legend>Company Data</legend>
<?php
//REMARQUE: si vous n'avez pas de Groupe de champs, indiquez simplement :
// print drupal_render($form['field_accreg_company_name']['0']['value']);
print drupal_render($form['group_company']['field_company']['0']['value']);
print drupal_render($form['group_company']['field_street']['0']['value']);
?>
</fieldset>
<?php print drupal_render($form); ?>
<?php
// print_r($form); //Activez ceci pour afficher toutes les variables Array du formulaire
?>
Comment...
Restituer / rendre un seul champ :
<?php
print drupal_render($form['group_company']['field_street']['0']['value']);
?>Restituer un groupe de champs:
Vous n'avez pas besoin de restituer les champs un par un, mais simplement de saisir ce code pour restituer tous les champs dans un groupe :
print drupal_render($form['group_company']);Restituer une liste de sélection :
Presque la même opération que pour un TEXTFIELD, mais en omettant ['0']['value'] à la fin
<?php
print drupal_render($form['group_company']['field_region']);
?>-
Supprimer un champ de saisie
Vous voudrez peut-être désactiver un formulaire, habituellement on a besoin de supprimer le Titre comme ceci :
<?php
unset($form['title']);
?> -
Cacher un champ de saisie (différent de supprimer ! ):
Vous voudrez peut-être activer un formulaire mais aurez besoin de l'en empêcher :
<?php
$form['title']['#access'] = FALSE;
?> -
Afficher toutes les variables d'un formulaire :
Vous voudrez peut-être connaître quelles sont les variables disponibles :
<?php
print_r($form);
?> -
Afficher les boutons:
<?php
print drupal_render($form['buttons']);
?> Réorganiser l'affichage
Utilisez ['#weight'] pour modifier l'ordre d'affichage :
$form['buttons']['#weight'] = -50; // boutons en débutRenommer les boutons
Pourquoi "Submit" ? Vous voudrez peut-être indiquer « Sauvegarder maintenant !», non ?
$form['buttons']['submit']['#value'] = 'Sauvegarder dans la base de données';
Styliser des champs CCK dans un type contenu
Référence en anglais sur drupal.org : http://drupal.org/node/807330
8 Juin 2010 - 06h56
Fichiers gabarits (Template files)
Tous les thèmes disposent d'un fichier node.tpl.php qui est le fichier gabarit standard (ou fichier maquette de mise en page) . Si le votre ne l'a pas, vous pouvez le copier depuis le module node qui se trouve dans le dossier modules/node de votre installation Drupal. Le noyau Drupal vous permet l'utilisation du variant suivant pour chaque type de contenu que vous avez créé dans votre site :
node-<NOM_DU_TYPE_DE_CONTENU>.tpl.php
Par exemple : node-chronique.tpl.php sera utilisé pour styliser un node de type chronique.
Important : lorsque vous ajoutez un nouveau modèle de mise en page, vous devez reconstruire le registre de thème, sinon le nouveau modèle ne sera pas détecté par le moteur de thème. Pour reconstruire ce registre :
- rendez-vous dans les pages d'administration des modules (/admin/build/modules)
- ou utilisez le lien « clear cache » du module Devel.
Variables gabarits
CCK met les variables suivantes à disposition à votre disposition pour leur utilisation dans les mises en pages :
- $<NOM_DU_CHAMP>_rendered
Contient le rendu HTML du champ, y compris le libellé et toutes les valeurs du champ, selon le paramétrage défini dans l'onglet Afficher les champs.
- $<NOM_DU_GROUPE>_rendered
Contient le rendu HTML du groupe de champs (s'il existe), y compris le libellé et tous les groupes de champs, selon le paramétrage défini dans l'onglet Afficher les champs.
Cette variable contient également le code HTML contenu dans toutes les variables $
_rendered du groupe de champs.- $NOM_DU_CHAMP
Contient les valeurs brutes des champs, dans le format tableau habituellement utilisé en interne par CCK. Ce que vous trouverez là dépendra du type du champ.
Chaque valeur contient également un élément « view », qui renferme la valeur mise en forme et prête à afficher. Par exemple :
array(
0 => array(
'nid' => 5,
'view' => '<a href="node/5">Titre du node 5</a>',
),
);Les données brutes (raw) ne sont pas assainies pour l'affichage, il est donc déconseillé de les utiliser telles quelles. Utilisez la valeur « view » ou passez-la via la fonction content_format().
Exclure des champs de la variable $content
Par défaut, la variable $content des gabarits de node contient le rendu HTML de tout le node : les champs et groupes de champs CCK, mais aussi le corps, les fichiers joints, les widgets...
Si vous voulez utiliser les variables plus précises décrites ci-dessus, vous pouvez utiliser les cases à cocher Exclure de l'écran Afficher les champs afin que l'affichage des champs soient omis dans la variable $content.
Notez qu'il y a des cases à cocher Exclure pour le teaser comme pour le node complet. Si l'affichage de votre écran est limité, il se peut que vous ne puissiez voir la colonne Exclure qui se trouve complètement à droite de la page.
En utilisant les variables $
Astuce avancée
Les cases à cocher Exclure affectent tous les thèmes actifs. Toutefois, sur les sites ayant plusieurs thèmes, la liste des champs à exclure de $content peut être différente selon les thèmes, en fonction de la structure des gabarits de nodes.
Un thème peut outrepasser ces paramètres en surchargeant la fonction theme_content_exclude() pour spécifier la liste des champs à exclure pour ce thème (voir le PHPDoc de la fonction pour plus d'infos).
Cas particuliers : les nodes dans les champs nodereference
En plus de ce qui précède, les suggestions suivantes seront prioritairement recherchées pour les nodes affichés en tant que valeurs de champs nodereference utilisant les formateurs « teaser » ou « full node » :
- node-nodereference-<REFERRING_FIELD_NAME>-<TYPE_NAME>.tpl.php
- exemple : fichier gabarit "suggestion" node-nodereference-field_noderef-chronique.tpl.php - S'il est présent, il sera utilisé pour la mise en forme d'un node de type « chronique » lorsqu'il est référencé dans le champ « field_noderef ».
- node-nodereference-<TYPE_NAME>.tpl.php
- exemple : fichier gabarit "suggestion" node-nodereference-chronique.tpl.php - S'il est présent, il sera utilisé pour la mise en forme d'un node de type « chronique » lorsqu'il est référencé dans n'importe quel champ de type nodereference.
- node-nodereference-<REFERRING_FIELD_NAME>.tpl.php
- exemple : fichier gabarit "suggestion" node-nodereference-field_noderef.tpl.php - S'il est présent, il sera utilisé pour la mise en forme d'un node référencé dans le champ « field_noderef ».
- node-nodereference.tpl.php
- S'il est présent, il sera utilisé pour la mise en forme de nodes référencés dans un champ de type nodereference.
Les variables supplémentaires suivantes sont disponibles dans les gabarits pour les nodes référencés :
- $referring_field
- Le champ de type nodereference qui référence le node en cours.
- $referring_node
- Le node qui référence le node en cours.
Surcharger les gabarits de thème dans Drupal 6
Date du document en anglais : 3 Février 2009 - 21h36 - http://drupal.org/node/337022 Drupal 6.x
Ajouter des fonctions de pré-traitement supplémentaires à l'intérieur de fonctions de pré-traitement existantes.
Vous pourriez avoir besoin d'ajouter des fonctions de pré-traitement supplémentaires à l'intérieur de vos fonctions de pré-traitement de thèmes ou de vos fonctions preprocess_hook pour créer différentes variables dans différents contextes. Par exemple, si vous voulez un gabarit de type node (node-story.tpl.php) vous pourriez créer une fonction appelée MONTHEME_preprocess_node_story(), dans laquelle vous initialiseriez des variables propres au contenu story. Le nom de la fonction n'est pas appelée par les API de thème, vous pouvez ainsi l'appeler quand vous le souhaitez, mais cela vous permettra de paramétrer vote propre API pour appeler tout gabarit de type node avec quelques lignes de code seulement.
<?php
function MYTHEME_preprocess_node(&$vars, $hook) {
// les variables disponibles pour chaque node sont déclarées ici
// Ici, la déclaration des variables spécifiques à un type de node se fait
// en appelant leurs propres fonctions de pré-traitement
// (si elles existent)
$function = 'MYTHEME_preprocess_node'.'_'.$vars['node']->type;
if (function_exists($function)) {
$function(&$vars);
}
}
?>