Création d'un site web avec wordpress
Ma deuxième mission consiste à créer un site vitrine pour mon tuteur afin qu’il puisse y exposer ses activités.
Un site web qui sera effectué à partir d’un WordPress installé au préalable, et qui est hébergé chez Hostinger. Le site est sélever.com.
Pour ce début de mission, j’ai commencé par analyser le WordPress et ce qu’il y avait dessus. Mon tuteur avait déjà commencé à faire un site avec une template, installé des plug-ins, et paramétrer le WordPress. Il a essayé ce qu’il pouvait faire avec ce qu’il voyait et donc il manquait beaucoup d’éléments. Puis il avait abandonné le site, qui était à moitié fait.
Une template est un modèle pour créer un site web ou un logiciel.
Un plug-in est un composant logiciel qui va permettre d’ajouter une fonctionnalité à un logiciel.
J’ai donc tout recommencé, j’ai d’abord installé les plug-ins, ceux qui me seront utiles pour faire le site web. J’ai paramétré mes plug-ins avec l’aide de Youtube afin que tout soit correct.
Voici la liste des plug-ins que j’ai utilisé pour le site web :
Une fois mes extensions installées, j’ai supprimé l’ancien site que mon tuteur a fait, et j’ai commencé ma page d’accueil. Grâce à Elementor, j’ai créé ma page d’accueil plutôt facilement car l’interface et ses outils sont simples d’utilisation.
Pour faire le site web, mon tuteur a fait une charte informatique afin que j’ai les bases qu’il souhaite avoir. J’ai commencé le site à partir de ce document, en ajoutant ce qui rendait bien sur le site. Je me suis documenté sur Youtube principalement pour m’aider dans mon travail.
Mon tuteur m’a donné le lien d’un site brouillon qu’il a fait de côté, je me suis basé sur ce site afin de créer celui-ci. J’avais comme base les couleurs, le thème du site, les polices d’écritures.
J’ai donc fait la page d’accueil en suivant les instructions qu’il m’a donné, j’ai fait plusieurs blocs avec le slogan du site, les fondamentaux, les activités ainsi qu’une partie qui présente qui sont-ils.
Ensuite, j’ai analysé les sites web qui correspondent à chacune des activités pour pouvoir en faire une petite synthèse que j’ai intégrée dans les activités afin de les présenter brièvement. J’ai aussi repris le logo de chacun des sites pour les inclure dans les activités.
Lors de mes recherches sur internet pour trouver les logos de certains sites, j’ai découvert brandfetch.com. Ce site permet de récupérer le logo, l’icône, ainsi que les couleurs d’un site web. Grâce à ce site, j’ai pu récupérer les logos et couleurs de tous les sites pour les intégrer sur sélever.com.
Par exemple, pour récupérer les logos et les couleurs principales du site jaimemonbien.com, j’obtiens ceci sur le site bandfetch.com :
Pour m’aider à mettre en avant les activités, je me suis inspiré de quelques vidéos Youtube de @Jeremy | WordPress. Ses vidéos sont sur la base de WordPress et de ses extensions, il les présente et montre comment les utiliser. Ces vidéos m’ont donc permis de faire les rectangles arrondis, la mise en page de chacun des rectangles :
Sur la page principale manquait une partie qui présente qui sont-ils, hormis cela, tout était fini donc mon tuteur m’a donné rendez-vous afin de discuter de la suite du travail. On a parlé de comment présenter les pages des activités, quels contenus mettre et comment l’organiser. On a travaillé sur les couleurs et la police, ce qui pourrait être le mieux.
Pour l’activité J’aime mon Bien, avec Laurent LADAME, qui en est le fondateur, nous avons travaillé sur l’aspect mise en page. Il m’avait déjà envoyé le contenu de cette page donc je l’avais déjà mis en place. On a travaillé sur le logo et les différents blocs de cette page.
Voici un aperçu du résultat de cette page :
Pour l’activité Reconnaissance de Soi, j’ai travaillé avec Valérie EHRHART, la fondatrice de cette activité. Elle sa son propre site qui est https://www.valerie-ehrhart.com. Nous avons travaillé sur la présentation de son activité, car il fallait bien définir tous les aspects de sa profession. Je lui ai proposé d’avoir un logo afin de rendre la présentation meilleure et pouvoir intégrer ce logo à la page d’accueil, ce qui pourrait mettre en avant son site. Par ailleurs, nous avons travaillé sur les couleurs et la mise en page.
On obtient cela :
Mais ce qu’on voit au dessus n’est que la version finale, car juste avant, il y avait plusieurs blocs de descriptions afin de présenter correctement son site. Valérie EHRHART a finalement changé d’avis et voulait plusieurs pages pour définir les termes en gras.
Pour faire un lien vers une autre page interne du site, j’ai préféré le faire en ligne de code. Par exemple pour le mot HAUTE MÉTAPHYSIQUE j’ai codé ceci :
L’élément <a> avec son attribut href permet de pointer vers un URL. Les éléments HTML ont des attributs, ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement. Dans cette balise <a> j’ai rajouté » class= »a1″ » en référence à la partie style que j’ai écrit plus bas. Ce a1 permet d’appliquer le CSS plus bas, c’est un raccourci que j’ai codé afin de pouvoir le réutiliser pour tous les mots en noir.
L’élément <style>, permet de donner un effet au texte dans la balise. Je l’ai écrit ici mais il était possible que je le mette dans la balise style tout en bas. Ici, cet élément me permet de donner une couleur au texte sélectionné. (#303030 = couleur noire)
L’élément <title> permet de donner comme son nom l’indique, un titre au lien. Dans mon cas, j’ai juste repris l’URL.
L’attribut <href> permet de pointer vers un lien.
Pour la balise style qui définit le CSS, j’ai codé ceci que j’ai réutilisé comme cité au dessus :
J’ouvre la balise <style> et dedans j’y insère ce que je souhaite pour donner un effet à mes mots pointant vers d’autres pages. Donc j’ai commencé par un font-weight qui permet de définir l’épaisseur de l’écriture, donc fin ou épais (en gras), suivi d’un background-color qui permet de définir un fond de couleur (effet surligner) avec un # couleur (code couleur en Hexadécimal, exemple : #FFFFFF qui est la couleur blanche).
Ces effets donnent cela quand on passe le curseur sur le mot écrit en noir :
Pour l’activité Haute Métaphysique, je me suis basé sur le site https://www.ufm-metaphysique.com. J’ai repris les idées de ce site pour l’intégrer dans la partie « Nos Activités » sur la page d’accueil. Puis pour la page qui est dédiée à cette activité, mon tuteur m’a envoyé le contenu à intégrer.
Pour l’activité Numérologie vibratoire, tout le contenu m’a été envoyé par mon tuteur et je l’ai retranscrit pour en faire une page qui lui est dédiée.
Pour ce qui est du menu, dans un premier temps j’ai tenté de le faire grâce à une fonctionnalité directement liée à Elementor. J’avais préparé un menu qui correspondait correctement au thème. Malheureusement, le menu ne voulait pas s’afficher sur les pages.
De ce fait, j’ai testé une autre façon de créer les menus, grâce à un plug-in lié à Elementor, une méthode qui n’est pas pareil que la première. J’ai réussi à refaire le même menu, mais là encore, impossible de l’introduire sur les pages du site.
J’ai essayé de reprendre la méthode que j’ai utilisé pour faire mon menu sur mon WordPress, j’ai donc installé le plug-in OceanWP qui fournit un thème, et c’est ce thème qui permet de créer le menu. C’est avec ceci que j’ai pu faire mon menu sur mon site, j’ai donc essayé de le faire sur le site selever.fr mais encore une fois, impossible de faire apparaître le menu, il était bloqué.
Voici à quoi ressemblait le premier menu, avec le logo qui devait apparaître à gauche :
J’ai cherché une nouvelle fois comment je pourrai faire le menu, puis j’ai trouvé une solution à partir d’un thème qui se nomme Astra. J’ai pu recréer un menu, qui n’est pas le premier que j’avais créé car entre-temps les couleurs du site ont changé. Voici le menu final :
Le menu mis en place était bon, j’ai donc fait le pied de page avec la même solution précédente, donc le thème Astra. J’ai fait un pied de page assez simple avec le plan du site et les informations de contact.
Par la suite, j’ai fait la page contact avec un formulaire afin que les utilisateurs puissent envoyer un message en cas de question. Le formulaire a été fait grâce ) WPForms qui est un plug-in qui était déjà mis en place. J’ai juste créé un formulaire avec la template qu’il proposait. Voici le rendu :
Ce formulaire est directement relié à l’adresse mail du site, une fonctionnalité qui se fait dans les réglages de WPForms.
Il reste la page « Qui sommes-nous » que je n’ai pas terminé. Il manque encore du contenu et une mise en page. Voici un aperçu de ce qu’il y a actuellement :
Durant ma mission, mon tuteur a rencontré un souci avec l’email relié au nom de domaine selever.com car “selever” contenait un accent dans l’adresse mail. Sauf que l’hébergeur a transformé cette adresse mail avec un mélange de lettres en raison de l’accent. Ce qui rendait l’email très suspect pour des utilisateurs qui auraient été amenés à les contacter.
Il a donc décidé de changer de nom de domaine, il a réservé selever.fr sur Hostinger directement. Cette fois-ci pas d’accent pour éviter le même souci. Il m’a demandé si c’était possible de transférer selever.com vers selever.fr. Je lui ai donné une réponse positive en précisant que j’allais faire mon possible et que ce n’était pas totalement sûr que j’arrive à tout transférer.
Tout d’abord, j’ai essayé de transférer le site grâce à un outil d’exportation directement intégré sur WordPress. Cet outil permet d’exporter le site en entier, ou seulement quelques parties. Voici les exportations possibles :
Il est possible d’exporter seulement les pages, ou les articles, ou les modèles, etc..
Dans ma situation j’ai décidé d’exporter tout le contenu pour ne pas avoir à tout recréer selever.fr. Un fichier s’est automatiquement téléchargé, il contenait toutes les données du site selever.com.
Donc sur selever.fr, je suis allé dans Outils > Importer et j’ai mis le fichier téléchargé auparavant dans la partie importation. Une fois l’importation finie, je suis allé voir le site si tout était remis en place.
Malheureusement, les extensions ne se sont pas installées. Elles n’étaient pas présentes dans le fichier d’exportation. J’ai supprimé le site, je l’ai recréé et j’ai d’abord installé les plug-ins. Puis j’ai importé une nouvelle fois le fichier d’exportation. Mais cette fois encore, le site n’apparaissait pas.
J’ai cherché une autre solution pour importer le site sans avoir à le refaire. J’ai trouvé un autre outil qui était déjà présent sur WordPress. C’est une extension qui est certainement installée automatiquement sur les WordPress.
Grâce à cette extension, j’ai pu exporter selever.com et l’importer sur selever.fr.
