Blog Web & Design

Les 4 étapes essentielles à la conception d’un site WordPress

Les étapes de création d'un site Wordpress

Les pré-requis

Que ce soit pour un site WordPress ou pour n’importe quel projet web, il est essentiel de réunir un maximum de ressources.

Les ressources dont il faut disposer sont tous les contenus textes, les photos, …

Portés par l’envie créer trop de designers (et moi le premier) ont tendance à vouloir se lancer dans la conception d’un design sans avoir assez d’éléments textuels ou graphiques.

Biensur il existe la possibilité d’utiliser du faux texte (« lorem ipsum » ou aussi appelé « bolo bolo ») et pour les visuels des images de placement (placeholder images), mais d’expérience je peux vous assurer qu’avoir du vrai texte, même non-definitif, fait une grande différence.


1. Les maquettes graphiques

Maquettes Graphiques
Création de maquettes graphiques

Bien avant de se lancer dans le codage de thème il est important de réfléchir le design de son site en fonction du contenu et non l’inverse.

Le designer doit fournir une maquette par gabarit de pages. En effet, pas besoin de fournir une maquette par page, mais plutot une maquette par type de pages.

Les gabarits les plus couramment réalisés et indipensables sont : La page d’accueil (la « home »), une page intérieure, une page de contact.

Pour les projets incluant un blog, vous devez disposer d’une maquette pour la liste des articles et un autre pour le détail d’un article

Attention aux formulaires qui nécessitent de prévoir des messages d’erreurs, et aux pages de type « mon compte » qui sont bien souvent vides lorsque l’utilisateur d’inscrira la première fois sur votre site.

Pour résumer ce point : Préparer l’ensemble des gabarits graphiques permet de vérifier que tout à bien été pensé en amont, et qu’il n’y aura pas d’oublis pendant le développement.


2. Intégration HTML des maquettes

Intgération HTML des maquettes
Intgération HTML des maquettes

L’intégration c’est tout ce qui comprend la création de code le HTML pour le balisage de la page, le CSS pour la mise en forme graphique, le Javascript pour l’interactivité au niveau navigateur web.

L’intégration est l’étape durant laquelle les maquettes graphiques sont converties en code dans un format cliquable. L’intégrateur prévoit les styles et intéractions graphiques qui seront accessibles à l’utilisateur, comme les menus de navigation, les effets de survol (rollovers), les fenêtres modales, etc…

C’est aussi l’étape durant laquelle les textes sont mis en forme, avec une taille est une couleur spécifique pour chaque titre et paragraphe. Ces règles de présentation sont définies dans le fichier .CSS du thème WordPress.

L’intégration HTML permet également l’intégration de premiers textes mais surtout des images.


3. Création du thème WordPress

Développeur Création Thème WordPress
Développeur Création Thème WordPress

Une fois les maquettes HTML intégrées, nous pouvons passer à l’étape de développement WordPress !

a. Installation de WordPress

Un des pré-requis pour cette étape est de disposer d’un serveur Web avec une base de donnée.

WordPress dans sa version open-source est un outil de création de site web téléchargeable gratuitement. Pour installer WordPress il faut télécharger les fichiers sur le site officiel et les envoyer sur votre serveur web, le plus souvent par un logiciel FTP. Une fois les fichiers en ligne, une interface d’installation vous guidera pas à pas.

b. Développement du theme

Seuls quelques fichiers sont indispensables pour la création d’un thème WordPress, un thème de base peut être composé de seulement un fichier index.php et d’un fichier style.css

Dans les faits, un thème wordpress est composé de plusieurs fichiers et dossiers nécessaires à la mise en place des fonctionnalités WordPress. (exemple: le fichier functions.php).

L’objectif du developpement de thème WordPress est de rendre les éléments HTML précédemment créés modifiables par la partie administration (aussi appelé Back Office). Une fois le thème développé, l’utilisateur, selon son role, sera capable de créer ou de modifier des pages, modifier les menus de navigation, changer les images, … Beaucoup de possibilités de personnalisation sont envisageables si elles ont été pensées en amont, lors de la phase de maquettage par exemple.

Pour en savoir plus sur la personnalisation de site WordPress.

Durant l’étape de création du thème, le contenu peu encore être non-definitif.

c. Installation des plugins

Hormis le thème, une autre composante essentielle de WordPress est le système d’extensions (ou plug-ins) permettant de rendre cet outil de création de site web extensible en y ajoutant des fonctionnalités très variées. Un professionnel aguerri saura vous guider dans cette jungle et vous proposer les extensions utiles de WordPress ou celles qui sont juste indispensables à votre projet.

A noter aussi que suivant les besoins d’un projet, il est possible de créer soit même des extensions. C’est d’ailleurs ce que je recommande dans le cas où une fonctionnalité particulière devrait continuer à fonctionner même en changeant de thème par la suite.


4. Finalisation & Insertion des contenus definitifs

Insertion de contenus
Insertion de contenus

Voilà, le graphisme du thème est créé, le code à été testé et est fonctionnel.

Il ne reste plus qu’a insérer les contenus définitifs, les textes validés et les photos sans trademark.


Conclusion

Alors évidemment ce n’est qu’un rapide aperçu, presque chaque étape pourraient être décomposé en de multitudes d’autres, mais ce qu’il faut retenir c’est que les 4 étapes qui sont selon moi immuables à la création d’un site Worpress sont la maquette, l’intégration HTML, le developpement WordPress et pour finir les tests et l’ajout des contenus définitifs.

Image d’illutration Pixabay – StockSnap

Dernière mise à jour le Auteur : Thomas Dufranne

Repondre

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.