Si vous réfléchissez à l’option WordPress, je la recommande. C’est un outil facile à prendre en main, et extrêmement puissant. Dans ce portail, nous allons voir en détails comment faire un site WordPress. Je vous conseille de le lire en plusieurs fois, parce que même si c’est facile, ça reste long !
Nous arrivons ici dans ce qui va sans doute intéresser le plus de personnes parmi vous : le portail pour faire un site WordPress. Autant être clair tout de suite, si c’est plutôt facile sur le principe, ça reste beaucoup de travail. J’organise donc ce portail en plusieurs parties.
Introduction. Comment c’est fait, un site WordPress ?
À la base de WordPress, on retrouve, comme dans n’importe quel site web, du HTML (qui définit le contenu d’une page web) et du CSS (qui met cette page en forme). Mais vous vous doutez que ce n’est pas la seule chose que vous allez y trouver.
Je l’avais déjà évoqué dans la page Faut-il faire son site web soi-même ? La particularité de WordPress, c’est que l’utilisateur peut en modifier le contenu sans toucher au code (y compris à des niveaux très avancés).
Cela implique une organisation des fichiers complètement différente de ce que vous auriez avec un site statique en HTML/CSS. Sur celui-ci, vous auriez des fichiers HTML (un pour chaque page), avec le contenu de la page en mode texte. Mais vous allez voir que les fichiers de votre site WordPress contiennent tout autre chose.
Les fichiers
Sur l’index d’un site WordPress, vous n’allez donc pas trouver le contenu d’une page en mode texte, mais un programme générant ce contenu. Il est codé en PHP, un des langages de programmation les plus répandus dans le web, bien qu’il y en ait d’autres (comme le Java ou le Python).
Si vous cherchez parmi les fichiers de votre site, vous verrez qu’à part les images (ou d’autres fichiers multimédia), vous ne trouverez aucun contenu. Si la connexion vers votre site affiche bien un article, celui-ci n’est pas stocké sous la forme d’un fichier.
C’est pour cette raison que dès son installation initiale, alors qu’il n’affiche que 5 pages différentes, vous allez trouver plusieurs milliers de fichiers dans un site WordPress. Au début, vous n’allez guère voir plus que :
- L’aide à l’installation du site ;
- l’administration du site ;
- la page d’accueil par défaut ;
- un article provisoire.
Tous ces fichiers juste pour ça ? Ça paraît complètement disproportionné. Mais rappelez-vous que votre site WordPress n’a pas vocation à rester tel quel.
Vous allez modifier son apparence, son contenu, créer de nouvelles pages, de nouveaux articles, mais le nombre de fichiers, lui, va rester sensiblement le même. Sauf bien sûr, si vous ajoutez des images (et vous allez en ajouter !). Tout votre site WordPress est paramétré pour que vous puissiez créer de nouveaux articles, de nouvelles pages, virtuellement à l’infini, sans changer l’architecture de base de votre site.
Et surtout, tout est organisé pour vous éviter de toucher au code de votre site. L’opération étant potentiellement dangereuse, vous pouvez construire et faire vivre votre site WordPress sans jamais saisir, ou même voir la moindre ligne de code.
Si sur un site statique, vous verriez le contenu de votre page sur un fichier HTML, ici, vous le retrouverez sur un fichier à part.
La base de données
Pour faire court, une base de données, c’est un ensemble de tableaux. Il faut vous imaginer un tableur, dans lequel vous auriez entre autres :
- le contenu de chaque article ;
- son titre ;
- son auteur ;
- sa date de publication ;
- les commentaires ;
- …
Cette liste est très ( très ! ) loin d’être exhaustive. Jugez plutôt : une base de données, à l’installation de votre site WordPress, compte pas moins de 12 tables ! Et chacune d’elles compte de nombreuses informations. Autrement dit, dès la mise en service de votre site, et avant même que vous ayez apporté la moindre modification, c’est une composante qui brasse beaucoup, beaucoup de données.
Et le plus drôle, c’est qu’en Mo, une base de données prend assez peu de place. Pour vous donner un ordre d’idées, à l’heure où j’écris ces lignes, celle de ce site ne fait que 12,9 Mo.
Avec les seules images que vous stockez sur votre site, vous êtes déjà bien en-dessus. Et même le site à l’installation est plus gros. Le seul fichier d’installation de la version française, disponible sur le site français de WordPress, fait 55 Mo et le site installé, près de 100 Mo. Enfin, au fur et à mesure que vous allez alimenter votre site, il va devenir plus gros, beaucoup plus gros ( jusqu’à plusieurs Go ).
Si ce n’est pas un gros fichier, la base de données est pourtant un organe vital de votre site. Sans elle, il n’y a pas de contenu, ni même d’information sur la façon dont il doit être organisé.
Qu’est-ce que ça vous apporte de le savoir ? Pendant la maintenance de votre site web, il faudra faire la différence entre les mises à jour logicielles, et les mises à jour de contenu.
Dans un cas, vous modifiez les fichiers, et dans l’autre, vous modifiez la base de données. Ce sera bon à savoir quand vous ferez des sauvegardes de votre site.
2. Installation de WordPress
Nous avons vu, sur le principe, comment fonctionne un site WordPress. Voyons maintenant comment l’installer.
Si le fichier de départ est le même, vous allez voir, néanmoins, qu’il existe des tas de façons d’installer un site WordPress. Aussi, je vous propose de les classer par ordre de difficulté.
L’hébergement mutualisé
L’hébergement mutualisé est sans doute la méthode la plus simple. Mais ça ne veut pas dire qu’il ne faut pas savoir un minimum ce qu’on fait.
Comme je l’avais évoqué dans l’article « Faut-il faire son site soi-même ? », donner accès à un site web, en soi, ce n’est pas très compliqué. Mais il y aura d’autres choses à vérifier.
Aujourd’hui, la plupart des hébergements mutualisés vous proposent des fichiers d’installation de WordPress. Si vous avez déjà installé un fichier .exe sous Windows, c’est à peine plus compliqué.
Néanmoins, il vous restera à rattacher votre nom de domaine à votre site. Si vous l’avez acheté séparément de votre hébergement, cela peut être un peu technique. Si vous débutez, je vous conseille plutôt de prendre une offre d’hébergement avec nom de domaine.
Votre site web fonctionne, mais vous avez un message vous indiquant que votre connexion n’est pas sécurisée ? Si vous regardez en détails votre adresse URL, vous allez sans doute remarquer qu’elle commence par http://.
Je ne vous apprends pas que la sécurité en ligne est une question sensible. Alors vous me demanderez peut-être si je pense vraiment que quelqu’un va s’en prendre à un site à quelques dizaines de connexions par jour. Et malheureusement, oui, c’est tout à fait possible.
La bonne nouvelle, c’est que ce n’est pas aussi difficile à contrer que ce que vous pensez. Dans cette partie, vous retrouverez plusieurs tutoriels pour installer votre site sur un hébergement mutualisé.
Le Serveur dédié
Un hébergement mutualisé signifie qu’on partage les ressources d’un même serveur pour héberger plusieurs sites, bien cloisonnés les uns par rapport aux autres. Sur un serveur dédié, votre hébergeur met à disposition une machine complète pour votre site.
Alors soyons honnêtes, si vous êtes en train de développer une plateforme, un réseau social, ou même un forum de discussion, ça peut éventuellement se justifier. Mais si vous faites un site vitrine d’un ou deux Go maximum, c’est disproportionné.
Et surtout, gérer un site web avec un serveur dédié implique d’installer au préalable :
- un serveur web (Apache ou NginX, par exemple);
- PHP pour que votre serveur puisse lire le code de votre site WordPress,
- MySQL pour la prise en charge de votre base de données.
Et je vous passe tous les réglages qu’il faut encore faire si vous voulez avoir les coudées franches pour personnaliser votre site WordPress. En gros, c’est le même principe qu’installer un serveur sur votre ordinateur. Mais là, vous le faites à distance.
Mais à ce stade, vous n’avez pas encore réglé la question de la sécurité de votre site. Or celle-ci est essentielle.
Conclusion : s’il vous faut juste un site vitrine, je ne vous conseille pas cette option. Elle est difficile et disproportionnée par rapport à vos besoins. Si vous êtes curieux, je vous montrerai comment je mets en place un site web sur un serveur dédié. Mais je tiens à vous avertir, n’étant pas administrateur système, que ce que vous verrez ne vous permettra pas d’avoir un site opérationnel et sécurisé.
Installer votre site WordPress en local
Avant de mettre votre site en ligne, faites-le en local.
Je m’explique : quand vous apportez une modification à votre site, vous ne savez pas si celle-ci ne va pas le casser. Aussi, il est plus prudent de commencer par faire des essais en local.
Quand votre site sera opérationnel sur sa version locale, vous pourrez le mettre en ligne.
Vous vous en doutez, il y a plusieurs façons d’installer localement un site WordPress. La méthode « historique » consiste à installer la pile WAMP, pour « Windows Apache MySQL PHP ». Si vous êtes sous MacOS, il y a aussi MAMP et si vous êtes sous Linux, il y a la pile LAMP. J’aurai l’occasion de vous présenter différentes méthodes.
Mais je vous en recommande une en particulier, qui va vous gagner un temps précieux : un logiciel d’installation automatique.
À ce jour, j’en connais deux. Il y a d’un côté Local by Flywheel et DevKinsta. Suivez cette page et abonnez-vous à la newsletter. Prochainement, vous aurez des tutoriels pour apprendre à vous en servir.
Nous aborderons aussi les différentes méthodes pour mettre votre site en ligne quand il sera opérationnel.
3. Personnalisation :
Nous arrivons à l’étape la plus satisfaisante du processus de création de votre site web. Il existe, il est opérationnel. Mais quand vous allez sur la page d’accueil, c’est un peu la douche froide. Vous tombez sur une coquille vide.
De plus, les visuels ne sont généralement pas du tout ce que vous imaginiez. Et pour cause. le logiciel ne peut pas deviner quels visuels vous souhaitez. Il va donc falloir commencer à le personnaliser.
Autant être clair tout de suite, à cette étape, beaucoup de gens préfèrent Wix, Google Sites ou Webflow. En effet, pour personnaliser votre site comme vous le souhaitez, il faut commencer à penser comme un professionnel du web.
Qu’est-ce que ça veut dire ? Cela implique plusieurs choses. Dans un premier temps, il faut penser votre site comme un ensemble cohérent. Autrement dit, vous n’allez pas créer toutes vos pages indépendamment les unes des autres. Elles auront une structure et des styles communs, que vous pourrez éventuellement personnaliser.
Je fais une ouverture vers la rubrique webdesign. À ce stade, il est important de bien comprendre que les contraintes de WordPress vous donnent un cadre. Si vous en saisissez la logique, vous vivrez mieux ces contraintes.
L’interface par défaut d’un site WordPress
En arrivant sur l’administration de WordPress, vous allez trouver un menu à partir duquel vous pourrez réaliser les premiers réglages. La première chose que je vous recommande de faire, c’est de cliquer sur la ligne « Apparences » dans le menu. Vous allez voir un sous-menu avec, au choix :
- Thèmes
- Personnaliser
- Menus
- Widgets
Si vous décidez de garder le thème par défaut (ce n’est pas interdit), vous pouvez cliquer directement sur « Personnaliser ». Vous devriez tomber sur quelque chose qui ressemble à ça :
Dans l’identité du site, il y aura principalement votre logo, ainsi que la favicon (la miniature que vous voyez sur l’onglet de votre page). La ligne « Colors & Dark Mode » s’appelle ainsi dans le thème TwentyTwenty-One ». Vous noterez d’ailleurs que la traduction de certains menus laisse parfois à désirer. Dans la configuration par défaut, vous n’aurez pas le choix de la police de caractère. Par contre, vous pourrez changer la couleur de fond, et les caractères changeront en fonction du contraste nécessaire.
Si vous voulez une personnalisation plus poussée, vous pouvez passer par l’option « CSS additionnel ». Mais même si vous avez des notions en HTML/CSS, ce n’est pas la meilleure méthode.
On atteint vite les limites de ce que nous permet le thème par défaut. Ce qui nous amène à l’option la plus évidente : choisir un thème plus personnalisable.
Les thèmes : faire un site WordPress qui vous ressemble
Avant de personnaliser, je vous conseille donc de choisir un autre thème. Si vous ne savez pas sur quels critères le choisir, j’y viens ici.
Avant, quand on choisissait un thème, le critère qui était déterminant, c’était surtout l’aspect esthétique, et dans une moindre mesure, les fonctions spécifiques à un type de site ou un cœur de métier.
Certains thèmes, par exemple, étaient pensés pour des photographes, des agences immobilières, et comportaient des fonctionnalités spécifiques.
Mais ça, c’était avant. Aujourd’hui, ce qui marche bien, ce sont les thèmes ultra-personnalisables. Vous lez reconnaîtrez facilement. En général, vous allez avoir un aperçu qui va vous faire baver d’envie, mais une fois installé, vous allez vous apercevoir que ça n’a rien à voir.
Peut-être même que vous aurez l’impression de vous être fait rouler, mais rassurez-vous, ce n’est pas le cas. S’il vous paraît vide, au contraire, c’est plutôt une bonne nouvelle. En général, ça veut dire qu’il est facile à s’approprier.
Et surtout, ça veut dire qu’il est compatible avec un constructeur de pages (Elementor, ou Beaver Builder, par exemple). J’y reviendrai.
Je vous conseille donc de choisir le thème le plus neutre possible. De toutes façons, vous allez le modifier. Personnellement, mon site fonctionne avec le thème Astra. Mais OceanWP est aussi une bonne option. Ci-dessous, vous retrouverez prochainement des tests de différents thèmes.
Les extensions : des fonctionnalités supplémentaires pour faire de votre site un objet unique
Venons-en maintenant à ce qui est sans doute le plus grand point fort de WordPress : les extensions.
Comme vous le savez, la principale force d’un site WordPress, c’est qu’on peut le personnaliser, même sans connaissances en programmation. C’est un environnement étudié, et documenté, pour qu’on puisse facilement y apporter des modifications.
Cela passe par des extensions. On en trouve plusieurs dizaines de milliers dans des versions premium, et probablement autant, voire plus, en accès payant. Un développeur avec les connaissances nécessaires pourrait même se lancer à faire une extension WordPress, et la rajouter à l’existant.
Quand on construit un site WordPress, il faut regarder en détails le cahier des charges, et ensuite chercher dans la liste des extensions. Car il y a de fortes chances pour que ce que vous cherchez existe déjà parmi les extensions disponibles.
Je peux vous donner des exemples. Vous cherchez des fonctionnalités supplémentaires pour votre page d’accueil ? Elementor ou Beaver Builder devraient faire l’affaire. Vous voulez des blocs supplémentaires pour votre éditeur de texte ? Essayez Kadence Blocks. Il vous faut des boutons de partage pour les réseaux sociaux ? Social Warfare, par exemple, peut faire l’affaire. Enfin, si vous avez besoin d’un formulaire de contact, Ninja Forms ou Caldera Forms vous permettront d’avoir ce que vous souhaitez.
Les extensions vous proposent bien d’autres choses, comme nous le verrons dans la suite de ce portail (et dans les rubriques suivantes). Pour la personnalisation, je vous invite à vous abonner. De nouvelles extensions seront régulièrement ci-dessous.
4. Optimisez votre site WordPress
Votre site est beau. C’est très bien. Mais il reste un problème, de taille. C’est le cas de le dire. Car votre site est gros, très gros, trop gros. Jugez plutôt, si on évalue ses performances, on voit que la page fait plusieurs Mo, et qu’elle met plus de 4 secondes à charger.
Ça ne paraît pas grand-chose, 4 secondes, mais sur le web, c’est énorme. Il faut à peu près ce temps à un internaute pour décider s’il reste sur votre site, ou s’il le quitte. Vous n’avez donc pas intérêt à le faire attendre à cause d’un site trop lent à charger.
Pour ça, il va y avoir un travail d’optimisation à faire. Celui-ci intervient à plusieurs étapes du processus.
À la conception de votre site web : privilégier le texte et le style plutôt que les images.
Attention, truisme : moins vous en mettez sur votre page web, plus elle charge vite !
En d’autres termes, si je vous ai parlé des constructeurs comme Elementor ou Beaver Builder, rappelez-vous que ce système alourdit les pages web. Celles-ci deviennent donc plus lentes à charger. Le problème, c ‘est qu’en général, on s’en sert pour la page d’accueil du site. Autrement dit, on alourdit une page stratégique.
C’est la principale raison pour laquelle je ne suis pas un grand amateur des sites « one-page ». Leur politique, c’est de tout avoir sur une page web.
Sur le papier, ça peut paraître une bonne idée. On donne accès à toutes les informations importantes sur une seule et unique page. Mais dans les faits, ça a ses limites.
Un constructeur de pages vous permet d’ajouter des éléments de style qui n’existent pas dans votre thème natif, voire d’écraser complètement celui-ci sur certaines pages. Le problème c’est qu’en réalité, le thème natif est toujours là, avec son code, et que des éléments supplémentaires (ceux du constructeur de pages) viennent s’y ajouter. Autrement dit, cela fait beaucoup de code supplémentaire, où tout n’est pas utile.
Mais si l’essentiel de ce qu’on voit sur votre page, c’est du texte, à la limite, ce n’est pas très grave.
Là où ça se complique, c’est quand on ajoute des images. Et soyons clairs, je vous conseille d’en mettre un peu quand même. Votre site web est d’abord et avant tout un objet publicitaire. Il doit contenir du visuel, quelque chose qui valorise votre activité.
Gérez vos médias avec des extensions et privilégiez les vidéos et audios hébergés par des tiers.
À ce stade, je dois vous avoir perdu(e). Vous vous demandez sûrement si vous devez mettre des images ou non. Vous devrez faire un arbitrage entre le message que votre site doit porter et les contraintes techniques.
Toutefois, même en gardant toutes vos images, vous avez une marge de progression. En effet, il existe des extensions vous permettant de réduire la taille de vos images. Cela peut se traduire par une baisse significative de la taille de votre page web, ainsi qu’un temps de chargement plus court.
Il existe des extensions, telles qu’Imagify (qui est installée sur ce site), qui vous permettent d’optimiser vos images pour réduire leur temps de chargement.
Maintenant, il faut aussi que nous parlions d’un autre élément qui est de très loin le plus lourd : la vidéo.
C’est quelque chose d’assez problématique, puisque la vidéo représente une part croissante du trafic mondial. Si vous cherchez à héberger votre vidéo vous-même, sur le principe, c’est possible. En pratique, je vous déconseille de le faire. Une vidéo consomme énormément de bande passante. Et si vous devez gérer un trop grand nombre de connexions, cela risque de vite saturer votre serveur.
La solution la plus simple, c’est de fonctionner avec des hébergeurs tiers, et de les intégrer à vos pages. Si c’est de la vidéo en accès public, YouTube fonctionne très bien. La célèbre plateforme vous propose aussi des solutions pour un accès restreint.
Si vous jugez que les conditions de YouTube sont trop restrictives, vous pouvez aussi héberger du contenu sur Viméo, qui a une offre assez complète pour les professionnels. Enfin, si les GAFAM vous posent un problème d’éthique, vous pouvez utiliser un serveur PeerTube.
Le cache et les requêtes HTTP, une marge de manœuvre supplémentaire
Comme je vous l’ai déjà expliqué, un site WordPress n’est pas composé de pages web, mais de programmes qui génèrent ces pages. Cela rend leur chargement plus long que des pages statiques. Mais vous avez un moyen de pallier ce problème.
Imaginez un instant qu’au lieu de générer une page en HTML à chaque fois, votre site la mémorise, et la recharge à l’identique. Je viens de vous décrire le principe du cache. La page a déjà été générée une fois, et votre serveur l’a gardée en mémoire. Il économise donc de la ressource quand vous la lui redemandez.
Cette solution permet à la fois d’avoir un site plus performant et d’économiser de la ressource serveur. Et cerise sur le gâteau, vu la consommation d’électricité considérable des serveurs, c’est aussi bénéfique pour l’environnement.
Ceci étant dit, vous verrez aussi qu’un nombre trop important de requêtes HTTP sur votre page web peut aussi l’alourdir. Et même si votre page est de petite taille, un trop grand nombre de requêtes peut lui être dommageable.
Quelles sont ces requêtes, me demanderez-vous ? Il s’agit généralement de scripts (des lignes de code en JavaScript, intégrées à votre page web), appelant des contenus extérieurs à votre page.
Typiquement, ce sera un extrait du dernier article de votre blog, par exemple.
Parmi ces requêtes, toutes ne sont pas nécessaires, et là encore, vous pouvez vous débarrasser d’éléments superflus. Et cela n’entraînera aucun changement dans l’apparence de votre page. Il existe plusieurs extensions WordPress vous permettant de faire du ménage là-dedans.
Pour les plus geek d’entre vous, optimiser le code
Alors, ne fuyez pas encore ! Vous n’avez pas nécessairement besoin de coder pour savoir comment améliorer le code. Comprendre comment il est fait, et ce qu’il fait peut tout-à-fait suffire.
Une démonstration par l’absurde, en vous donnant des exemples de ce qu’il ne faut pas faire, sera sans doute plus parlante.
Vous avez sans doute déjà vu ces sites web de chaînes de télévision, où la vidéo s’allume automatiquement. Nous sommes d’accord, c’est insupportable ! Personnellement, mon premier réflexe, c’est de couper la vidéo. Mais en désactivant le démarrage automatique, on économiserait de la ressource.
Globalement, c’est très déplaisant quand un site vous impose ce genre de chose. Mais au-delà de ça, c’est très vorace en ressources serveur. Si vous optez pour des scripts désactivés par défaut, vous allez charger plus vite, et surtout, vous allez laisser le choix à l’utilisateur de ce qu’il veut voir ou non.
La sécurité de votre site WordPress
Vous avez un site obscur et vous pensez que ça vous met à l’abri d’une cyber-attaque ? Désolé de vous décevoir.
Si vous aviez cette image du hacker qui menait une attaque ciblée contre un réseau précis d’ordinateurs, vous pouvez oublier. Aujourd’hui, ce sont des programmes qui attaquent de façon massive, qui des ordinateurs, qui des sites web, qui des clients de messagerie…
Quelques éléments pour que vous mesuriez l’ampleur de la chose : à peu près tous, nous avons été victimes de spam à un moment ou un autre. Mais il y a pire, encore. Il y aurait entre 1/6 et 1/4 de l’ensemble des ordinateurs en service dans le monde qui seraient zombies.
On qualifie de zombie une machine dont un programme aurait pris le contrôle (en général de façon discrète) pour des tâches exécutées à l’insu de son propriétaire. En gros, un hacker exploite une partie des ressources de votre machine pour autre chose.
Je ne vous dis pas que votre site WordPress court ce genre de danger. Je vous mets simplement en garde : le fait que personne ne connaisse votre site ne veut pas dire qu’on ne peut pas le prendre pour cible.
Il existe donc quelques mesures de sécurité que vous devez mettre en place pour votre site. Et en premier lieu, vous devrez donner à son adresse un certificat SSL (pour Secure Socket Layer). Mais vous devrez aussi mettre un antispam (si vous ne voulez pas que l’adresse mail du site soit saturée de spam). Et d’une manière générale, il faudra aussi faire des sauvegardes régulières de votre contenu. Malgré toutes les précautions que vous prendrez, il est possible que vous cassiez votre site, ou que votre serveur soit inaccessible. Vous devrez donc avoir un plan B.
Dans cette partie je vous présenterai quelques ressources pour la sécurité de votre site.