{"id":384,"date":"2009-04-07T12:36:54","date_gmt":"2009-04-07T11:36:54","guid":{"rendered":"http:\/\/flaven.fr\/?p=384"},"modified":"2013-09-28T05:20:20","modified_gmt":"2013-09-28T03:20:20","slug":"comprendre-en-5-minutes-les-principes-du-theme-drupal","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2009\/04\/comprendre-en-5-minutes-les-principes-du-theme-drupal\/","title":{"rendered":"Comprendre en 5 minutes les principes du th\u00e8me drupal"},"content":{"rendered":"<p><!-- Comprendre en 5 minutes les principes du th\u00e8me drupal--><br \/>\nPour comprendre en 5 minutes les principes du th\u00e8me drupal, il vous faudra comprendre quelques notions de CSS dans la philosophie d&#8217;un David Shea  et localiser les fichiers<\/p>\n<p>Il faut aussi installer Drupal sur un environnement de d\u00e9v sur PC ou sur Mac ou bien vous pouvez faire votre installation sur votre serveur si vous en poss\u00e9dez un ! Dans cette exemple, nous allons travailler sur un th\u00e8me disponible dans une version de Drupal 5.14 et non la version 6. <!--more--><\/p>\n<h4>Quelques mots sur Drupal&#8230;<\/h4>\n<p>Drupal est un CMS extr\u00eamement puissant qui peut faire \u00e9norm\u00e9ment de choses y compris certaines ou d\u2019autres CMS sont \u00e0 n&#8217;en pas douter plus performants, faire un blog avec WordPress par exemple. C\u2019est vrai qu\u2019\u00e0 la lecture &laquo; Is Drupal the right tool for the job? &raquo;  qui dresse un comparatif en fonction des besoins que vous pourriez avoir en t\u00eate pour votre futur projet web, l\u2019accent est mis sur la sacro-sainte &laquo; scalability &laquo; qu\u2019on pourrait traduire spirituellement par \u00e9volutivit\u00e9 et souplesse. Cf Voir l&#8217;article intitul\u00e9 &laquo; Is Drupal the right tool for the job? &raquo; ci-dessous. <\/p>\n<p>Quant au webdesign, c\u2019est vrai que les sites Drupal tirent toujours un peu la m\u00eame t\u00eate comme souvent avec un CMS mais c\u2019est en train de changer. Force est de constater que de nombreux webdesigners, qui s\u2019\u00e9taient sp\u00e9cialis\u00e9s dans les templates Joomla ou WordPress sont en train de d\u00e9placer le curseur de leurs comp\u00e9tences.<\/p>\n<p>C\u2019est la raison pour laquelle, on se devait de publier un article pour survoler rapidement les principes de cr\u00e9ation d&#8217;un th\u00e8me pour Drupal<\/p>\n<h4>J&#8217;ai chang\u00e9 le petit pull &#8220;bluemarine&#8221;<\/h4>\n<p>Pour commencer facilement, il vous suffit de copier tout b\u00eatement le r\u00e9pertoire d&#8217;un th\u00e8me ainsi que les fichiers composant le th\u00e8me &#8220;bluemarine&#8221; qui nous servira de mod\u00e8le et j&#8217;ai ensuite renomm\u00e9 le r\u00e9pertoire en &#8220;mojo&#8221;. mojo sera donc le nom de mon th\u00e8me et il appara\u00eetra comme tel dans  les menus d\u00e9roulants de s\u00e9lection de th\u00e8me.<\/p>\n<p>Pour se livrer sereinement \u00e0 ce type de contorsion, je vous invite \u00e0 installer votre propre environnement de d\u00e9veloppement. Sur &laquo; comment installer un environnement de d\u00e9veloppement sur PC ou Mac &laquo; , consultez les articles suivants: <\/p>\n<ul>\n<li><a href=\"http:\/\/social.hecube.net\/blog\/2009\/03\/14\/installer-facilement-php-mysql-sur-un-pc-avec-easyphp\/\">Installer un environnement php-mysql sur PC<\/a><\/li>\n<li><a href=\"http:\/\/social.hecube.net\/bruno\/2009\/04\/04\/installer-un-environnement-php-mysql-sur-mac\/\">Installer un environnement php-mysql sur MAC<\/a><\/li>\n<\/ul>\n<h4>La marche \u00e0 suivre au compte-goutte*.<\/h4>\n<p>Bien souvent, dans un oc\u00e9an de conseils, on oublie l&#8217;essentiel lorsque l&#8217;on d\u00e9bute. On veut voir des r\u00e9sultats et le plus souvent le plus rapidement possible. Une sorte de version du pauvre d\u2019une preuve de concept ou POC (en anglais : Proof of concept) sinon on abandonne rapidement le CMS pour en choisir un autre.<\/p>\n<h4>Listing de fichiers qui composent le template<\/h4>\n<p>Ce th\u00e8me se compose d&#8217;un tr\u00e8s petit nombre de fichiers, les ing\u00e9dients principaux sont pour la partie webdesign :<br \/>\n<strong>logo.png, c&#8217;est le fichier image de votre logo. Il apparait dans le header.<\/strong><br \/>\n<strong>screenshot.png, c&#8217;est le fichier image d&#8217;illustration de votre template.<\/strong><br \/>\n<strong>style.css, c&#8217;est le feuille de style qui d\u00e9termine le look and feel de votre theme<\/strong><\/p>\n<p>Il n&#8217;existe ensuite que des fichiers php. Ces derniers mentionnent leur qualit\u00e9 de &#8220;template&#8221; par l\u2019abr\u00e9viation &#8220;tpl&#8221; avant l&#8217;extension &#8220;.php&#8221;.<br \/>\n<code><br \/>\nblock.tpl.php<br \/>\nbox.tpl.php<br \/>\ncomment.tpl.php<br \/>\nnode.tpl.php<br \/>\npage.tpl.php<br \/>\n<\/code><\/p>\n<p><strong>L\u2019arborescente compl\u00e8te de drupal via la console<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/04\/build_template_drupal_2.jpg\" width=\"500\" height=\"265\" class=\"aligncenter\"><\/p>\n<p><strong>L\u2019arborescente compl\u00e8te de drupal via le finder<\/strong><br \/>\nL&#8217;installation a \u00e9t\u00e9 faite sous MAMP sur un MAC.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/04\/build_template_drupal_3.jpg\" width=\"500\" height=\"265\" class=\"aligncenter\"><\/p>\n<p><strong>L\u2019arborescente du r\u00e9pertoire <code>themes<\/code> contenant le repertoire du th\u00e8me <code>mojo<\/code><\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/04\/build_template_drupal_4.jpg\" width=\"500\" height=\"265\" class=\"aligncenter\"><\/p>\n<p><strong>L\u2019arborescente du th\u00e8me <code>mojo<\/code><\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/04\/build_template_drupal_1.jpg\" width=\"500\" height=\"265\" class=\"aligncenter\"><\/p>\n<p><strong>La s\u00e9lection du template mojo pour le backend<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/04\/build_template_drupal_5.jpg\" width=\"500\" height=\"265\" class=\"aligncenter\"><\/p>\n<p><strong>La s\u00e9lection du template mojo pour le frontend<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/04\/build_template_drupal_6.jpg\" width=\"500\" height=\"265\" class=\"aligncenter\"><\/p>\n<p><em>*du hollandais druppel<\/em><\/p>\n<h2>Is Drupal the right tool for the job?<\/h2>\n<p>La r\u00e9ponse diligent\u00e9 par le site de Drupal lui-m\u00eame pour savoir si oui ou non votre projet est \u00e9ligible pour Drupal.<\/p>\n<blockquote><p>\nAlthough Drupal offers a very powerful and flexible framework which is used to build virtually any kind of website, it is not necessarily the best solution for every situation.<\/p>\n<p>There are several cases where Drupal may not be the best choice:<\/p>\n<p>    * If your only requirement is to write a personal blog, you may also want to evaluate one of the more specialized blogging platforms like WordPress or one of the hosted blogging solutions. Although Drupal does provide an excellent blogging platform out-of-the-box, you will probably find that blog-specific software typically has a simpler administration interface.<br \/>\n    * Similarly, if your only requirement is to create a wiki, you should probably consider using dedicated wiki software like Wikimedia or a hosted wiki solution. You can certainly configure Drupal as a wiki (with the help of several contributed modules), but it may be simpler to use a more specialized solution.<br \/>\n    * With every release, Drupal is becoming easier to use; but like most powerful tools, it will always have a learning curve. If you or your organization are not prepared to spend some time learning the basics of how Drupal works (or if you are not able to hire Drupal expertise), it may not be your best option.<\/p>\n<p>Having said that, Drupal is an excellent choice for any of the following situations:<\/p>\n<p>    * You need a site that is flexible enough to evolve in any direction. For example, you might start with a blog but want the option of adding other features like a wiki, electronic commerce, forums etc.<br \/>\n    * You need a site that can easily be configured to interact with other sites or with other technologies.<br \/>\n    * You need a site that can easily handle complex forms and workflows.<br \/>\n    * You need the ability to create your own content types. For example, you need to add a custom field to a page.<br \/>\n    * You need the ability to quickly organize and display lists of information.<br \/>\n    * One or more of the many contributed Drupal modules addresses your needs.<br \/>\n    * You need to quickly develop custom functionality.<\/p>\n<p><code>URL: http:\/\/drupal.org\/node\/346217<\/code><\/p>\n<\/blockquote>\n<h4>La cons\u00e9cration pour Drupal :  recovery.gov<\/h4>\n<p>L\u2019auteur du projet Drupal n\u2019en perd pas une miette dans un article sans ambig\u00fcit\u00e9s &laquo;  Obama using Drupal &laquo; &#8230; Il est vrai que voir son CMS adoub\u00e9 par BO est une cons\u00e9cration en soit. Bien que S\u00e9gol\u00e8ne Royal, qui se targue pourtant d\u2019\u00eatre une des sources d\u2019inspiration de BO, et a choisi elle aussi Drupal pour son site desirsdavenir.org, elle n&#8217;a pas eu droit \u00e0 un article de son cr\u00e9ateur .<br \/>\nInd\u00e9pendamment du fond, la forme y est, le &#8220;theme&#8221; drupal est d\u00e9j\u00e0 une r\u00e9ussite, s\u00e9rieux, le genre m\u00e9dical qui va soigner le capitalisme mondial.<\/p>\n<p><code>URL: <a href=\"http:\/\/buytaert.net\/obama-using-drupal\">http:\/\/buytaert.net\/obama-using-drupal<\/a><\/code><br \/>\n<code>URL: <a href=\"http:\/\/www.recovery.gov\/\">http:\/\/www.recovery.gov\/<\/a><\/code><\/p>\n<h2>Pour aller plus loin<\/h2>\n<p>Deux bonnes adresses de David Shea pour comprendre les principes d&#8217;une CSS.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.mezzoblue.com\/\" target=\"_blank\">www.mezzoblue.com<\/a><\/li>\n<li><a href=\"http:\/\/www.csszengarden.com\/\" target=\"_blank\">www.csszengarden.com<\/a><\/li>\n<\/ul>\n<p>Trois tutoriaux sur la cr\u00e9ation de th\u00e8me sur Drupal.<\/p>\n<ul>\n<li><a href=\"http:\/\/nicksergeant.com\/blog\/drupal\/html-mockup-full-drupal-site-tutorial-part-iii-template-theming-integration-and-finishing-touches\" target=\"_blank\">http:\/\/nicksergeant.com\/blog\/drupal\/html-mockup-full-drupal-site-tutorial-part-iii-template-theming-integration-and-finishing-touches<\/a><\/li>\n<li><a href=\"http:\/\/tips.webdesign10.com\/how-to-make-a-drupal-theme\" target=\"_blank\">http:\/\/tips.webdesign10.com\/how-to-make-a-drupal-theme<\/a><\/li>\n<li><a href=\"http:\/\/www.davidlanier.com\/blog\/2008\/8\/minimal-drupal-6-theme-creation\" target=\"_blank\">http:\/\/www.davidlanier.com\/blog\/2008\/8\/minimal-drupal-6-theme-creation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Pour comprendre en 5 minutes les principes du th\u00e8me drupal, il vous faudra comprendre quelques notions de CSS dans la philosophie d&#8217;un David Shea et&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2009\/04\/comprendre-en-5-minutes-les-principes-du-theme-drupal\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Comprendre en 5 minutes les principes du th\u00e8me drupal<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9473,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Les principes du th\u00e8me Drupal s'expliquent en 5 minutes. Ma\u00eetrisez CSS, localisez fichiers et installez Drupal sur PC, Mac ou serveur.","bf_ai_og_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3444,3449,3451,3435,3452],"tags":[2225,2211,20,126],"class_list":["post-384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-databases","category-tutorials-how-to","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-drupal","tag-mysql","tag-php","tag-theme"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-6c","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/02\/drupal_generic_g_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=384"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/384\/revisions"}],"predecessor-version":[{"id":9581,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/384\/revisions\/9581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9473"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}