Sas 01 et theme Drupal
By Mihamina Rakotomandimby on Monday 14 November 2011, 10:13 - formation - Permalink
Apprendre à faire un thème Drupal 6 puis Drupal 7.
Voici venu le temps d'apprendre à faire un thème Drupal.
Pour la beauté de l'exercice, nous allons commencer par faire le thème pour Drupal 6 puis le migrer vers Drupal 7.
Ceci, tout en conservant nos exigences sur le respect des normes, de la sémantique, l'usage de Mercurial,...
Racontez vos avancées sur le sujet, les problèmes rencontrés, les solutions trouvées.
Comments
Pour réaliser un thème avec Drupal, il faut tout simplement suivre la structure imposer et de réaliser petit à petit les modifications.Tout d'abord, il y a le fichier .info où l'on donne la description du thème, le fichier gabarit où il y a page.tpl.php (pour la mise en page globale de la page), node.tpl.php (pour tous les nodes ou les principales sections de contenu d'une page), block.tpl.php (pour les blocs, qui sont placés dans des régions), comment.tpl.php (pour les commentaires).
et les feuilles de styles.Les difficultés se résident sur l' identification des contenus du site et de les bien placer au bon endroit.
J'ai appris la création d'un thème en Drupal 6, J'ai appris énormément sur les regions, les blocks, les menus et les fichiers paga.tpl.php, box.tpl.php, block.tpl.php, comments.tpl.php ... ainsi que sur les variables de Drupal 6. La création de templates dans Drupal 6 est assez simple quand on s'y habitue, le problème se situe surtout dans les positionnement des blocks et l'affichages des contenus. C'est un vrai défi car c'est pas évident du premier coup si on veut bien faire les choses.
Aujourd'hui, on a réalisé un thème Drupal en s'inspirant a partir des "templates" déjà imbriqué dans Drupal version 6. Pour construire un thème sous Drupal il faut créer les fichiers de base suivantes: "page.tpl.php" pour la mise en page globale de la page, "node.tpl.php" pour tous les nodes ou les principales sections de contenu d'une page, "block.tpl.php" pour les blocs, qui sont placés dans des régions, "comment.tpl.php" pour tous les commentaires et enfin un fichier de même nom que le thème portant l'extension ".info" qui permettra a Drupal de connaitre le thème créé et sa configuration.
On a réussit à créer un template simple pour Drupal 6 aujourd'hui. On a essayé de reproduire la maquette qu'on a fait précédemment. Pour créer un template, il faut principalement les fichiers suivants : le fichier .info, et les .tpl.php. Le fichier .info est comme les fichiers .ini de Windows qui contient les configurations du thèmes et a comme structure (key = value); les key peuvent être : name, description, version, stylesheets[all][], engine, regions[left], features[]... et la valeur c'est la valeur correspondante à chaque clé. Les fichiers .tpl.php sont les fichiers php qui utilisent ses configurations pour appliquer les thèmes; le premier le fichier page.tpl.php qui contient le squelette du thème, le fichier block.tpl.php, même si optionnel, il contient les layout des blocks, le fichier node.tpl.php qui permet de contrôler le contenu (article, page), le fichier comment.tpl.php qui définit le format des commentaires. Enfin,il y a des variables prédéfinies qu'on peut tout de suite utiliser, comme le nom du site($site_name), le slogan($site_slogan), le fil d'ariane($breadcrumb) et tant d'autres.
Aujourd'hui, on reprend notre ancien projet appelé JSF; et on essaie de le créé sous forme template sur le CMS Drupal. En générale, la création de template est un nouveau connaissance pour nous. Maintenant donc, je connais bien comment créer un templete sur Drupal, il faut savoir au minimum quelques variables utiles de Drupal pour bien structurer les contenus dans la région convenable. Par exemple voici les quelques variables: $site_name, $site_slogan, $content, ....
Un thème est un ensemble de fichiers contenant du code HTML, du code PHP, des images, et des feuilles de styles CSS. Aujourd’hui j’ai appris à créer un thème Drupal a partir de zéro. Je sais maintenant comment personnaliser une page HTML/PHP par défaut en utilisant le fichier gabarit HTML (tpl.php) pour avoir un template. On a utilisé les “pseudo-variables” du moteur phptemplate pour afficher les différents contenus. Pour finir, j’ai découvert aussi l’existence des Starter-Kit , comme exemple « Zen ».
Aujourd'hui j'ai crée mon premier thème avec Drupal 6,j'ai su que pour qu'un thème soit considéré par Drupal il faut qu'il ait un fichier.info contenant toutes les conditions de fonctionnement ,et la description du thème, un fichier css pour lui donner du style et un fichier page.tpl.php dans lequel on définit les changements du comportement du template ,la transformation du code html avec l'utilisation des variables de drupal est très interessante et réduit le nombre de ligne à coder .dans notre travail ,des erreurs sont survenues avec drupal6-22 alors on a décidé de travailler avec la version 6.20,il est plus malin de créer un user avec la permission de choisir un thème ,et d'activer le nouveau thème qu'on crée plutôt que de configurer le nouveau thème en tant que thème par défaut pour ne pas perdre les menus d'administrations et pour pouvoir revenir dans le thème par défaut puis éviter une désinstallation à chaque erreur du test ce qui nous a un peu attardé dans notre travail
aujourd’hui, j'ai appris la première fois à créer un theme drupal6. en appuyant sur un tutoriel, j'ai pu effectué un exercice d'application en aspirant la maquette. le problème que j'ai rencontré est que lors de la configuration du nouveau theme que je vient d'installé, j'ai le choisi comme theme par defaut de mon site pour que je puisse voir son apparence, et après cela, j'ai perdu toutes les menus d'administrations!!! dans le premier temps, notre solution est de réinstaller drupal6 à chaque fois que ce problème réapparait. mais en fin j'ai pris conscience que la meilleur solution est de créer un autre utilisateur qui a la permission de changer du themes et dont son theme pardefaut est le thème que je crée. j'ai pu comprendre aussi les indications des fichiers (page.tpl.php, lefichier .info et le feuille de style)qui sont dans le dossier de chaque theme drupal et j'ai pu effectué des changements sur ces fichiers pour atteindre mon objectif.
Lors de la création d'un thème pour Drupal, il est très important de configurer votre fichier ".info" on doit y répertorier les éléments Drupal (logo, recherche, les blocs, etc ...) que l'on veut manipuler dans votre nouveau thème. Une fois que c'est bien fait, vous pouvez aisément afficher ces éléments en utilisant les variables Drupal qui sont d'ailleurs nombreuses et très intéressantes . La création d'un bon thème se joue dans les détails puisqu'on peut créer des css propres aux éléments que l'on veut manipuler (comme les commentaires, les "input", les boutons ...) Etant donné que Drupal supporte css3 et html5, on peut créer d’excellent thème avec ces technologies. Bref, on peut dire que La création de thème dans Drupal est souple et simple.
On a continué sur la création d'un thème pour Drupal 6 aujourd'hui. On a enrichit les fichiers *.tpl.php pour avoir un rendu plus professionnel. Puis, on a amélioré le tout avec du css2 et un peu de css3 pour les effets futuristes. Après, on a passé aux différents testes, comme l'ajout des nouveaux menu, de nouveaux contenus et le positionnement des blocks. Enfin, nous essayons de migrer notre template pour D7 pour demain.
Aujourd’hui on a travail sur les fichiers des gabarits du core utilisés dans notre thème. On a examiné un à un les fichiers suivants :
- page.tpl.php (pour la mise en page globale de la page)
- node.tpl.php (pour tous les nodes ou les principales sections de contenu d'une page)
- block.tpl.php (pour les blocs, qui sont placés dans des régions)
- comment.tpl.php (pour tous les commentaires de votre site).
On a modifié tous ces fichiers à notre convenance. J'ai appris énormément des choses sur la manipulation des blocks sur les différents régions.
On a continué a explorer sur la développement du thème Drupal 6 et aussi essayé de trouver une solution pour que le thème Drupal 6 soit adapté au Drupal 7. J'ai constaté que l’opération sur la migration est moins lourde puisque le template de la version 6 est similaire au version 7 excepté sur le template de thème d'administration (back-end du site). J'ai découvert aussi qu'on peut personnaliser la propriété d'une node ou une block (même le node et block créé par un développeur ) en implémentant des fonctions standard utilisé par le cœur de Drupal ( on l'appelle hook).
j'ai approfondit mes connaissances sur le sujet de theme drupal, maintenant j'ai pu comprendre mieux comment créer un theme drupal6 a partir d'une page html; le principe est de remplacer les éléments statiques en HTML par d’autres valeurs dynamiques reconnus et utilisés par Drupal6 . Ces valeurs sont appelés par Drupal au sein de notre fichier page.tpl.php qui est disons le noeud pour l’affichage d’un thème; donc ses contenus doivent etre semblables à celles de la page html mais en termes de variables drupal6; on a donc besoin de convertir notre fichier html en page.tpl.php pour pouvoir créer un theme drupal, et les autres fichiers (comme .info,..) qui sont existes dans theme existants doivent etre obligatoires pour notre nouveau theme .
Aujourd'hui,
j'avance petit à petit avec la création de thème dans Drupal6,Je comprend de mieux en mieux les principes de balisage xhtml utilisé dans les gabarits afin de transformer un code html en template,notamment,l'affichage des zones et blocs par l'intermediare des variables drupal définis dans le fichier .info et l'affichage des images .J'ai pu activer certains features pour faire des testes et créer des menus et contenus puis leur attribuer du style avec du css .J'ai su aussi que certains features tel que search ne peuvent pas être activés comme les autres mais il faut les activer dans le module de drupal, et le définir dans le fichier .info.j'ai à peu près vu quelques points communs entre drupal6 et drupal7 pour pouvoir mieux gérer la migration de drupal6 à 7 plus tard
Aujourd'hui, nous avons amélioré notre template sur Drupal 6 en l'enrichissant par la mise en page globale de la page à l'aide de l’édition du fichier appelé "page.tpl.php". Et par la suite nous essayons de contrôler tous les autres fichiers "*.tpl.php" en particuliers le fichier "node.tpl.php" qui est la responsable de tous les nodes ou les principales sections de contenu d'une page, le fichier "block.tpl.php" pour contrôler les blocs qui sont placés dans des régions de notre site, et le fichier "comment.tpl.php" qui manipule tous les commentaires de notre site. La mise en place de ces fichiers ne sont pas forcement obligatoire mais juste pour suivre le norme. Tendis que leurs noms ne peuvent pas modifier sinon ça marche pas.
<b>Approfondissement sur la création d'un thème Drupal6:</b>
Le plus simple c'est de créer immédiatement un template fait avec XHTML et CSS;ensuite créer les fichiers nécessaires (.info, .tpl.php) et récupérer les variables drupal en vue de les positionner selon l'inspiration du créateur du thème(en partant d'un tpl.php par défaut)pour ne pas être embarrasser, en front-end, utiliser le thème en phase de création et en back-end, utiliser un thème par défaut.Ce n'est qu’après avoir fini correctement le thème et tester toutes les fonctionnalités qu'on utilise le thème du côté administrateur si l'on souhaite.Du point de vue migration vers Drupal7, on a d'abord étudié la réusabilité du thème et enchainer avec la migration totale du site.
Migration de thème drupal6 vers drupal7:
Pour la migration ce n'était pas si évident que cela car il y a beaucoup de changement à faire,pour ne citer que:les noms des variables à manipuler ont changés, les nodes, blocks, pages, comments, ... ont ses CSS spécifiques et le nom de class et id sont normaliser, de nombreux régions sont inclus par défaut dans le core de drupal7. Alors pour la réalisation du thème, on a débuter avec le thème Zen qui est un thème basique et conseiller pour les créateurs de thème avec Drupal7. J'ai pu constaté que Drupal7 a beaucoup évoluer par rapport à drupal6 vue les divers changement.Tout compte fait c'était normal qu'un thème drupal6 ne fonctionnait pas avec drupal7 et vice-versa.
On peut dire que les instructions dans le template du Drupal 7 évolue par rapport a ses versions antérieur. Il y a plusieurs façons de migrer Drupal 6 vers 7 puis que les lignes des codes ( nom des sélecteurs CSS, variables PHP, paramètres des fonctions ) pour accéder aux nodes, blocks, régions, ... sont changés. Dans notre cas on a commencé la migration par l'édition du thème ZEN qui est un thème basique et recommander par les développeurs du thème Drupal pour créer un thème sous Drupal 7. J'ai pu constaté que dans Drupal 7 les instructions pour accédé au l'interface d'administration (back-end du site ) est totalement isolé de la ligne des codes pour l'interface du coté client. Il y aussi quelques changements au niveau hiérarchique du fichiers dans Drupal 7 a cité l'existence des nouveaux fichiers comme :
template.php, theme-settings.php, region.tpl.php,...
On a commencé la migration de notre thème de D6 à D7 aujourd'hui, on a pu le finir malgré les 52 étapes qu'il faut revoir pour que le thème de D6 soit compatible avec D7. Mais, la première étape est la modification du fichier .info (version = "7.8" et core = 7.x) pour que le core de D7 reconnaisse le thème. C'est après qu'on fait la modification des fichiers .tpl.php tel que : le changement des ID du css (block-blog-0 => block-blog-recent, ...), changement des liens Primaires et Secondaires en Menu Principal et Secondaire ... ainsi, on a une longue liste de modification à faire mais on a été bien aidé par ce tutoriel sur "http://kolossaldrupal.org/docs/conv..." et sur le site http://drupal.org/update/themes/6/7... il propose même 62 étapes pour migrer les thèmes. On a combiné un peut les solutions et c'est ainsi qu'on a pu finir le migration.
Aujourd'hui ,on a apporté quelques styles avec du css au contenu et aux éléments de la region sidebar-left et content ,pour un simple utilisateur d'abord et pour le compte d'administrateur ensuite,on a même restylisé les css id de drupal pour notre thème ,j'ai su qu'on peut personnaliser le thème pour la zone d'administration qui peut être différent de celui uitilisé poup le compte administrateur .Pour la migration ,il faudrait modifier dans le fichier .tpl.php les print en print render les primary et secondary links en primary and secondary menu ect ... Dans le fichier .info ,on doit redéfinir les variables qui n'existaient pas ou qu'on a remplacé dans drupal 6 comme regions [help],regions highlighted.Pour mercurial un nouveau problème est réapparu mais ce qui est bizarre c'est qu'on a quand même réussi à pusher alors que le dossier image porte l'icone ? au lieu de l'icone ok et même après le push et le commit l'icon reste inchangé Mystère ou..?
Aujourd'hui, nous avons quitté la version 6 du Drupal. En effet, nous avons fait une migration de notre template du Drupal 6 vers Drupal 7. Le thème conçu pour Drupal 6 est vraiment incompatible avec Drupal 7. Il y a donc beaucoup de changement à faire pour y arriver. D'abord, la première chose à faire est d’éditer le fichier ".info" et de modifier la valeur de la variable version 6.x en version 7.x pour qu'il soit pris en compte par le Drupal 7. Et ensuite, nous suivrons le tutoriel pour pouvoir remplacer tous les variables ou les fonctions qui sont les sources d'incompatibilité. Enfin, nous arrivons à migrer notre thème grâce à la documentation. Maintenant donc, je connais bien comment migrer le thème du Drupal venant de la version antérieur vers la version récente?
Convertir un thème vers une version plus récente plus précisément de Drupal 6 vers Drupal 7. Il faut tout d’abord comprendre la structure du thème sous Drupal 7 qui est un très amélioré par rapport à la version antérieur ; j’ai constaté que dans Drupal 7, il n'existe plus que des zones : l'administrateur du site peut les déplacer à tout moment comme il le veut; le thémeur ou concepteur leur attribue des tailles, des polices et des teintes. On a rajouté à notre thème le fichier « html.tpl.php » et le fichier « template.php ».
on dirait que notre theme est maintenant presque pret à utilisé en drupal 6; aujourd'huit on a apporté quelques modifications de style css de notre nouveau theme, la feuille de style doit toujours nommé style.css; jai pu comprendre qu'il existe certains style qu'on ne peut pas modifié via le css du theme; ils s’agit des styles prédefinits du core de drupal. cela pu enrichir en meme temps mes connaissances sur theme drupal et css. jai pu apris qulques notions de migration du theme drupal6 en drupal 7, il est basé sur le changement du nom de variables globals, de l'affectation et de quelques fonctions de base.
Hier, on a fait la migration de thèmes Drupal 6 vers Drupal 7. Il y a beaucoup de choses qui a changé pour les templates Druapl 7 par rapport aux templates Drupal 6. Déjà le nombre des gabarits a augmenté et puis les noms des variables drupal, les id des CSS, les regions ... ont aussi changé. D'après ce qu'on a pu constaté, je dirai que plus de 60% de la structure des templates ont changé dans Drupal 7. Il y a plus de cinquante étapes à suivre pour qu'un thème Drupal 6 devient compatible avec la nouvelle version. La création de thème est très souple dans Drupal, en effet on peut attribuer de nouveaux CSS pour chaque région que l'on veut modifié. Notons que Drupal 7 supporte html5 et css3 donc il bénéficie des nouveaux effets visuels et animations offerts par ces technologies afin de créer un excellent thème
Aujourd'hui, on a juste apporté quelques modifications mineurs à notre thème et on a commencé à lire et suivre quelques tutoriels Jelix 1.3. (^_^)
finalisation de notre thème drupal 7 avec quelques modifications.Initiation à l'élaboration d'un module drupal 7. Avant de développer un module, il faut d'abord comprendre le concept de "hook" qui est une sorte d'api ou interface pour se communiquer avec le "core" de drupal. Ce n'est qu'après qu'on se lance dans le développement de module. Pour drupal, un module est composé d'un fichier .info (contenant les informations sur le module), d'un fichier .module (contenant le code PHP du module), d' un fichier .install (au cas où on utilise une base de donnée et ce fichier contient l'installateur), d'un fichier .inc (qui est un fichier de configuration).Il faut alors suivre ces structures pour que drupal reconnait le module développer!
Pour aujourd'hui, on a continué l'optimisation de la création du thème pour Drupal 7. On a essayé de comprendre les structures des fichiers *.tpl.php tel que le fichier page-front.tpl.php permet de personnaliser la page d'accueil. A part la pratique sur Drupal, on a aussi su ce que c'est qu'un "wiki confluence", comme simple définition, il s'agit d' "échange et de partage" car confluence est un outil collaboratif, qui permet de réaliser un site web dont les pages sont modifiables par les visiteurs afin de permettre l'écriture et l'illustration collaboratives des documents numériques qu'il contient (un wiki)...
Pour la journée du 17 Novembre, j’ai appris que pour personnaliser la page d’accueil d’un site Drupal, il faut copier le fichier page.tpl.php et renommer ce fichier en page-front.tpl.php ; Mais aussi j’ai découvert qu’il est possible d'obtenir un thème personnalisé en quelques clics depuis l'interface d'administration de Drupal sans toucher aux CSS. On a commencé de développer un petit module qui permet d’afficher des articles sur un block en utilisant le «Hook ». Un Hook est un prototype de fonction dédié à une tâche spécifique, comme pour obtenir la liste des blocs disponibles et le contenu de chacun d'entre eux.
A titre de connaissances général je sais maintenant la définition d’un «Wiki » et ses principes de fonctionnement.
Aujourd'hui avec la migration de Drupal6 à Drupal7,mis à part des renommages de classe j'ai constaté que Drupal7 nous offre plus de souplesse pour l'affichage ou non d'un élément avec hide() et render appelé dans les gabarits, la nouvelle classe element-invisible et élement hidden (équivalent dehide()de JQuery) .Il ne faut surtout pas oublier de modifier les fonctions dans template.php phptemplate-function en nom_theme-function.Une idée pour tous les upgrade de drupal ,c 'est qu'il est mieux d'effectuer les changements en activant le mode maintenance du site ,pour éviter tout erreur
Pendant ces semaines de formation, j'ai découvert beaucoup de chose sur le sujet de développement web en PHP. Par exemple, commencé par le plus simple mais ne sous-estime pas: le HTML, le DOM, le JavaScript. Nous connaissons que le HTML est la base du développement web mais beaucoup de développeur ne suit pas la sémantique du code or la sémantique est très importante entant que développeur. Ensuite, j'ai approfondi aussi le Framework jQuery qui est la bibliothèque de JavaScript. Et je connais aussi la manipulation de logiciel de gestion de version appelé: "TortoiseHG" pour pouvoir partager notre code source en "travail en équipe". Et puis pendant cette semaine, nous avons étudié le CMS Drupal, et nous avons arrivé jusqu'à la création du thème de Drupal. Et maintenant, nous avons effectué quelque amélioration sur la migration de notre thème de Drupal 6 en Drupal 7 en modifiant quelques fichiers de gabarits "*.tpl.php".
On a finalisé notre migration de thème Druapl 6 vers 7 en apportant quelques modification mineur comme le positionnement d'un élément HTML. Et ensuite on a continué notre formation sur la création d'un module Drupal 7 en comparant les changement apportés par rapport a la version 6. J'ai découvert que pour créé un module dans Drupal 7, il faut les fichiers gabarit suivantes: fichier "nom_module.info" permet a Drupal de reconnaitre l'information du module,"nom_module.module" contenant l’implémentation du hook Drupal ( listes API Drupal sur http://api.drupal.org/ ) , fichier portant l'extension .inc contient les instructions de configurations du module et enfin un fichier portant d'extension ".install" qui est exécuté lors de l'installation ou désinstallation du module. Cette dernier fichier contient généralement les lignes de code pour l'initialisation et suppression du table qui correspond au module créé et on peut aussi ajouter d'autres fichiers portant l'extension quelconque (.test recommandé pour le développeur du module Drupal 7 ) en indiquant dans le fichier .info le chemin du fichier ajouté.
j'ai pu rentrer dans le detail sur la migration du theme drupal6 en theme drupal7,ici l'objectif est de rendre un theme drupal6 en theme compatible sous drupal7. alors pour y arriver, on a donc besoin de quelques modifications sur notre theme D6 en vu d'atteindre les normes exigés en D7 dont : la fonction "print" du D6 et devient "print render" en D7 pour l'affichage de contenu; certains variables ont changés du nom (ex: $left devient $sidebar_first,..), l'argument "$variable" devient accepté par toutes les fonctions, ajout du fonction hide() et invisible() pour cacher un contenu aux utilisateurs. en enpuiyant sur un tutoriel j'ai pu immigré le theme gsf de D6 en D7.