portfolio

Planty

Personnalisation d'un thème WordPress pour une startup avec HTML, CSS et PHP

Photo Planty

Projet:

En tant qu’intégrateur WordPress, j’ai la charge de développer le site vitrine de Planty, une jeune marque de boissons énergisantes à base de plantes.

Le site doit être conçu afin de répondre au besoin de Planty qui est de présenter son activité ainsi que d’obtenir les premières précommandes. Leur objectif à terme est d’avoir un site e-commerce, mais ce n’est pas pour tout de suite.

En étroite collaboration avec Sara La CTO de l’entreprise et Loïc l’UI Designer, je suis missionné de développer avec du code HTML et CSS, l’interface du site en me basant à la fois sur la maquette réalisée par Loïc et les consignes qui regroupe les spécifications et contraintes techniques à respecter.

la mission est de réaliser le site conformément a la maquette et spécification fonctionnelles selon les points suivant:

  1. Une page d’Accueil statique présentant l’activité de planty avec un bouton qui renvoie à la page commander et des avis publicitaires.
  2. Une page « Nous rencontrer » présentant l’équipe de planty avec un formulaire de contact, qui doit être configuré pour la réception et l’émission de mails à la base de l’adresse « planty.drinks@gmail.com »
  3. Une page de commande avec un design en couleur de font de page diffèrent des autres et un formulaire de commande à configurer de la même façon que celui de la page de contact.
  4. Un header avec le logo planty ainsi qu’un menu de navigation des page contact et commander. L’Admin doit apparaitre dans le menu a la connexion du client au site.
  5. Un Footer avec un menu de navigation qui renvoi sur la page des mentions légales.
Réalisation dans le projet:

Après analyse de la maquette et prise en compte de toutes les spécifications fonctionnelles du site, je me suis mis à son développement selon les étapes suivantes :

  1. Installation de WordPress en local et du thème « Océan WP »
  2. J’ai installé les bases d’un thème enfant, ou j’ai créé un header et Footer personnalisés.
  3. J’ai introduit le code du Hook permettant l’affichage du menu Admin dans le header lors de la connexion de l’administrateur.
  4. Création des page et leurs contenus en utilisant l’extension Elementor.
  5. Réalisation du style du site dans le fichier CSS du thème.
Les liens externes: