Passer de Dreamweaver à WordPress

- 1 - Avant de démarrer
- 2 - L’installation
- 3 - Problèmes à l’installation
- 4 - Les premiers pas
- 5 - Passer de Dreamweaver à WordPress
Passer de la réalisation d’un site statique via l’éditeur wysiwig de Dreamweaver à un site sous WordPress implique de totalement changer ses habitudes, et de comprendre la logique de son nouvel outil. Pas toujours simple, surtout pour les webmasters autodidactes, … et une question récurrente sur les forums et les réseaux sociaux. Voici donc “pourquoi” et “comment” passer d’un outil à l’autre.
NB 1 : je parle bien sûr là de l’utilisation de Dreamweaver pour faire des sites statiques purement HTML et CSS. Je gère tous mes sites, WordPress, Prestashop, faits maison, avec Dreamweaver, mais pas en mode wysiwig
NB 2 : ce n’est pas non plus l’objectif de discuter pour savoir si Dreamweaver est LE bon outil ou pas. C’est un outil professionnel comme un autre, quand on l’utilise réellement. Le mode Wysiwig est une “horreur” pour ceux qui savent coder, mais c’est aussi une porte d’entrée pour les réfractaires à la logique binaire du code.
Faire un site statique avec Dreamweaver
La méthode la plus simple : on crée un “nouveau fichier”, en html, on l’ouvre en mode wysiwig et on le modifie, onl’envoie sur le serveur.
Et quand on veut faire une deuxième page, on “enregistre sous” la première page, et on modifie ce qu’on veut, en gardant les parties communes (le menu par exemple, le header avec les appels à la feuille de style).
Bon…. quand on a fait cinquante pages, et qu’on souhaite modifier le menu, pour y mettre justement ces cinquante pages dans l’arborescence, c’est un peu longuet… et à la cinquante-et-unième rebelote, ça devient carrément usant.
Alors Dreamweaver propose des “templates” , et si vous les avez déjà utilisés, vous êtes mûrs pour passer sur un site dynamique avec PHP et MySQL, si, si !
Le principe du template, c’est un fichier de modèle, comme dans Word, Excel ou autre, mais avec une particularité :
- des parties du fichiers sont “éditables”, c’est celles qu’on pourra modifier directement dans chaque page HTML créée à partir de ce modèle (typiquement le “vrai contenu”)
- des parties de fichiers sont “non éditables”, elles ne peuvent être modifiées que dans le modèle.
Car, à la différence de Word ou Excel, quand on modifie une zone “non éditable” du template… la modification se propage dans tous les fichiers créés à partir de ce template.
Une possibilité supplémentaire : ce qu’on appelle les “éléments de bibliothèques” : ce sont des sortes de sous-templates, des fragments de code qu’on peut ensuite insérer dans une page HTML “normale” ou dans un modèle. En effet, si vous avez quatre “modèles” différents pour votre site et que vous voulez mettre le menu dans les quatre, vous vous retrouvez avec la même difficulté : nécessité d’éditer quatre fichiers pour propager les modifications.
Donc on a “dans Dreamweaver” des fichiers modèles (.dwt) qui sont utilisés pour créer des pages html, qui ont des zones modifiables (le contenu) et des zones non modifiables, et qui peuvent inclure des éléments de bibliothèque (.lbi)
Le gros inconvénient de cette procédure, c’est qu’il y a autant de fichiers que de pages : modifier cinq cent ou mille page pour “un petit élement”, cela prend du temps, à la fois dans DreamWeaver, et puis à recharger les fichiers sur le serveur.
L’autre inconvénient vient quand on a des modèles complexes : il devient un peu difficile de modifier les divers éléments, surtout pour les parties qui ne se voient que “en code” (comme la balise title, la meta description, les mots clés). Et on aurait bien envie de pouvoir faire comme dans Word, une “fusion” avec une liste des contenus de chaque page, et chaque élément qui se met à la bonne place.
Faire un site dynamique avec php et MySql
En réalité, le principe est quasiment le même qu’avec Dreamweaver, mais beaucoup plus rapide, et beaucoup plus facile à gérer.
php est un langage de programmation qui permet de
- créer des modèles (les .dwt de Dreamweaver)
- inclure des fichiers dans d’autres (les .lbi de Dreamweaver)
- gérer le contenu propre à chaque page de façon plus agréable que dans DreamWeaver, dans une base de données, et afficher ce contenu dans les bonnes zones de chaque template.
Enormes avantages :
- quand le template est modifié, la “propagation” est immédiate : plus besoin, comme dans un site statique, de recharger tous les fichiers html sur le serveur, c’est php qui se charge de “créer” le fichier en question quand l’internaute clique sur une url
- plus besoin de saisir des codes complexes à répétition, une fois que le modèle est défini, on peut se concentrer sur le contenu
- possibilités de faire des choses complexes, qu’on ne peut pas faire “dans Dreamweaver”, avec des conditions “si cet internaute vient de Google et que l’article parle de fromage, alors affiche une souris”…
Inconvénient :
- il faut maitriser un nouveau langage, php, et la conception des modèles est plus abstraite : on écrit des bouts de code HTML et des fonctions php, par exemple
<p class="contenu"><?php echo $contenu ; ?></p>
mais pour voir le rendu il faut avoir son site en ligne (ou avec un serveur local) et quand on débute, ce n’est pas toujours simple.
Les systèmes de gestion de contenu (CMS) et WordPress
C’est là que vient l’outil supplémentaire : un CMS, et en particulier WordPress, c’est en ensemble de fichiers .php tout prêts, se chargent de :
- la création, la modification et le stockage de tous les éléments de contenus dans la base de données (via la partie “admin” de WordPress)
- toutes les fonctions nécessaires pour afficher ces contenus, les commenter, les partager, etc… (y compris avec des extensions, qui rajoutent des fonctions supplémentaires)
- toute la partie affichage, avec des jeux de “templates” tout prêt, qui permettent d’afficher votre site d’une façon ou d’une autre, et qu’on appelle les thèmes.
La plupart de ces thèmes sont prêts à l’utilisation. Mais pour en modifier l’apparence, il est facile de faire un thème enfant et de modifier :
- les différents styles via le css
- ce qui est affiché, en rajoutant ou en modifiant les codes php et html
Pour modifier le php, là un peu de connaissance de base est nécessaire. Il y a un excellent tuto sur openclassrooms.com (l’ex site du zéro) sur la création d’un site avec php qui vous prend vraiment par la main pour comprendre le fonctionnement de base.
Et surtout, avec WordPress, on bénéficie de nombreuses fonctions déjà écrites, qui permettent d’aller vite. Leur noms sont assez faciles à comprendre aussi. Pour reprendre mon exemple d’affichage du contenu, en “php pur”, il faudrait :
- se connecter à la base de données
- faire une requête pour trouver le bon contenu
- vérifier qu’il existe et qu’il correspond bien à ce qu’on attend
- le stocker dans une variable $contenu
- enfin faire l’affichage avec la ligne de code que je vous ai indiquée plus haut.
Avec WordPress, il existe une simple fonction qui fait tout ça : the_content()
Il y a sur le site de WordPress une énorme documentation, qu’on appelle le Codex. On y trouve des explications générales, comme
- le modèle de la base de données (où sont stockées quelles informations)
- la hiérarchie des templates (comment on utilise quel modèle de quelle façon)
- mais aussi des explications sur chaque fonction et une présentation de l’ensemble des fonctions qu’on peut utiliser dans les templates, et qu’on appelle, en français, les marqueurs de modèle.
En conclusion : on peut bien entendu faire toutes les modifications de templates WordPress avec Dreamweaver… mais en mode code !
Très bonne explication, pour ma part, je me sert de notepad++ et de pas mal de ressource sur le web comme le très bon site openclassrooms.com. Dommage qu’il n’y ai pas de tuto sur wordpress.
C’est dans l’air du temps pour moi qui vient d’une formation Dream, puis de site avec Imageready, Iweb, dernièrement yeswiki et maintenant des débuts en WordPress. J’apprécie bien vos liens vers le Codex : si on était au premier de l’an, je prendrais la résolution d’étudier méthodiquement cette bible. Bon, comme on est au printemps, va falloir que j’élague ce qui pousse à tout va :)
Mais c’est le côté anglophone de la littérature wordpress qui me contraint le plus. Déjà qu’en français, je trouve que les terminologies sont différentes suivants les Fai et les Cms, en anglais c’est un calvaire, ou de l’à peu près.
Cet article me rassure, je grattais un peu du html il y a bien longtemps via dreamweaver mais avec le mode wysiwig puis peu à peu j’avais appris à lire le html en modifiant des choses, regardant ce que ça faisait… bref c’était il y a longtemps je me sens dépassée par tout ça maintenant…
Ça revient vite :)