Parler d’anatomie pour un site WordPress a un certain sens. Il y a des conditions à réunir pour qu’un site fonctionne, comme un organisme vivant.
Précédemment, j’avais évoqué la façon la plus simple d’installer un site WordPress. Mais j’aurais aussi pu poser une autre question :
Qu’est-ce qu’un site WordPress, au fait ?
Certes, on pourrait choisir de ne pas s’en soucier. Après tout, quelle importance, du moment qu’il fonctionne ?
Et c’est là qu’on se trompe. L’éducation à la santé ne concerne pas que les médecins. De même, comprendre le fonctionnement d’un site web ne concerne pas que les webmasters ou les développeurs.
L’incendie d’OVH, d’ailleurs, nous en apporte la démonstration. Les clients qui auront perdu le moins de données sont ceux qui ont pris le plus de précautions. Mais encore faut-il savoir quelles précautions prendre.
Pour ça, il faut déjà comprendre ce qu’est un site web. Étant spécialisé dans les sites WordPress, je vais rester sur ce que je connais le mieux. Cependant, ce que je dis là s’applique à la plupart des sites actuels. Pour filer la métaphore, voyons donc l’anatomie d’un site WordPress.
L’anatomie apparente : du HTML et du CSS
Je précise que cette présentation s’applique à la plupart des sites actuels, parce qu’ils n’ont pas toujours fonctionné ainsi.
Si nous en revenons aux fondamentaux, une page web se construit à partir de deux éléments. Un fichier HTML d’une part et une (ou plusieurs) feuille de style (au format CSS) d’autre part.
Le HTML, squelette du site web
Créé en 1989 par Tim Berners-Lee, chercheur britannique au CERN, le web, ou World Wide Web, c’est d’abord et avant tout des pages en HTML (pour « HyperText Markup Language »). Pour qu’un site web existe, cela implique a minima, des fichiers à ce format.
Ces fichiers se présentent comme l’image ci-dessous.
En principe, cela suffit pour faire un site web. Voyez plutôt :
D’ailleurs, les premiers sites ne se composaient de guère plus.
Vous trouvez ça dépouillé ? Vous avez tout à fait raison. Et pourtant, sous ce format, on peut déjà intégrer des images. Un fichier HTML va les « appeler » pour qu’elles s’affichent à un emplacement précis.
Mais à ce stade, nous n’avons pas vraiment de choix dans les couleurs, les polices de caractères, ou même l’agencement général de la page. Un fichier HTML constitue vraiment un squelette. Si vous voulez personnaliser votre site, il faudra en passer par un élément supplémentaire : les styles.
Le CSS, l’anatomie apparente
Comme je l’évoquais précédemment, les premières pages web, c’était à peu près uniquement du HTML, et quelques images.
Mais très vite, un habillage est venu égayer ces « squelettes » de sites. Apparu en 1996, le CSS (pour « Cascading Style Sheet ») code l’esthétique d’un site. Il définit par exemple les polices de caractères, leur taille selon le type de texte, leur couleur, la couleur de fond, l’agencement des différents blocs, etc.
Elle se présente ainsi :
On la rattache à notre page web et on obtient le résultat suivant. Attention les yeux :
Bien sûr, on peut faire beaucoup plus (et surtout plus beau !) que ce que vous voyez ici. Il s’agit simplement d’un exemple de ce que vous pouvez faire avec du CSS.
Derrière l’esthétique de mon site, on trouve le même genre de fichier (mais en beaucoup plus étoffé, quand même).
Le HTML et le CSS nous donne donc les éléments qui nous permettent de faire des sites dits « statiques ». Cela signifie que le visiteur ne peut rien faire d’autre que le consulter. Il ne peut y apporter de contenu, comme il le ferai sur un réseau social, par exemple.
Or aujourd’hui, on ne peut plus se satisfaire d’un système aussi minimal. On le peut d’autant moins que les réseaux sociaux ont généralisé le « User Generated Content » (ou contenu généré par l’utilisateur).
Mais cet appel à interagir, à commenter, avait déjà commencé avant. Les enfants des années 80-90, ceux qui ont été adolescents ou même jeunes adultes dans les années 2000, se souviennent de l’expression : « Lâche tes comm’s ».
Un site WordPress ne se résume pas à du HTML/CSS
C’est qu’avant les réseaux sociaux, il y a eu les blogs, comme je l’évoquais dans mon article sur l’intérêt d’un site WordPress. Et justement, à la base, WordPress était un moteur pour créer des blogs.
Vous vous demandez ce que ça change par rapport aux anciens sites ? C’est simple, sur un site statique, vous aviez deux options. Soit vous étiez webmaster, soit vous étiez visiteur.
Les interactions passaient plutôt par d’autres canaux, tels que les newsgroups ou les mails.
Le développement des blogs a complexifié les choses, puisqu’ils ont donné lieu à des statuts intermédiaires. Aujourd’hui, sur WordPress, vous avez plusieurs statuts d’utilisateurs, avec des niveaux de permission différents. Mais la plupart d’entre eux, vous vous en doutez, n’impliquent pas de savoir coder.
Aujourd’hui, créer un blog, ou un site WordPress simple est devenu beaucoup plus facile. Il n’est plus nécessaire d’écrire soi-même du HTML ou du CSS.
Mais pour que vous ou moi, nous ayons la possibilité de faire facilement des pages web, d’autres ont codé à des niveaux bien plus complexes que du HTML et du CSS.
Si vous regardez la page web que je vous ai présentée, vous voyez juste deux fichiers. Cependant, un site WordPress, même simple, en compte infiniment plus. Rien qu’à l’installation, avant que vous ayez installé la moindre extension, vous pouvez déjà compter près de 2500 fichiers.
Un site WordPress est pensé pour que vous puissiez l’administrer vous-même. Votre prestataire ne sait pas combien de pages ou d’articles vous allez faire. L’éditeur du logiciel le sait encore moins. La communauté WordPress a donc mis en place un système capable de les générer selon vos préférences.
Et c’est ainsi qu’on arrive à faire un site dynamique, où vous pouvez créer du contenu sans jamais toucher au code.
Comment s’organise donc l’anatomie d’un site WordPress
Si on se contente de HTML et de CSS, nous sommes face à un site qui est là, mais qui ne changera pas si personne ne lui demande. En d’autres termes, nous dirons que c’est un élément passif.
Or l’anatomie d’un site WordPress nous montre qu’il n’est pas constitué de fichiers HTML, mais de fichiers PHP. Il s’agit d’un langage de programmation, très répandu dans le web, d’ailleurs, et c’est dans celui-ci que WordPress a été développé.
Ça n’a l’air de rien, mais ça change tout. Un fichier HTML, c’est une page web en mode texte, un élément passif, donc. En revanche, un fichier PHP est un programme qui génère un fichier HTML, autrement dit, un élément actif.
Dans un cas, le HTML écrit par un être humain restera tel qu’il est, jusqu’à ce qu’on décide de le changer. Dans le cas d’un fichier PHP, si le rendu final reste en HTML, il peut largement évoluer sans intervention humaine.
En somme, c’est un peu comme si le site était doté d’un cerveau, en plus d’un squelette et d’une apparence extérieure. Mais ce cerveau, comme le vôtre, est aussi susceptible de largement évoluer en fonction de ce que vous y ajouterez.
Les fichiers, l’anatomie au sens strict
En plus des programmes, un site WordPress a une anatomie constituée de fichiers en général. Certains sont des images, des vidéos, des sons… Et comme sur un site statique, il y a un dossier où votre page web va les chercher.
Le rôle des programmes est donc d’appeler ces différents contenus en fonction de vos demandes. Et cela va parfois beaucoup plus loin que vous pourriez le croire.
Comme un cerveau dont la plastique évolue en fonction des apprentissages, le code de WordPress évolue en fonction des extensions que vous lui demandez d’installer.
Et parmi ces fichiers, il en existe un, un seul, dont le rôle est pourtant d’une importance critique.
La base de données, la mémoire du site WordPress
Si vous essayez de déplacer votre site web de votre ordinateur vers votre hébergeur, vous allez déplacer deux choses.
Il y aura les fichiers d’une part, et la base de données d’autre part.
Pour comprendre cette séparation, il faut se rappeler que les pages de votre site n’existent pas réellement. Vous ne les retrouverez pas dans un fichier. Vous ne trouverez qu’un programme définissant la façon dont vos contenus doivent s’afficher.
Ces contenus sont eux-mêmes stockés dans la base de données.
Ce système permet de stocker de gros volumes de données. Les listes font partie des usages les plus évidents d’une base de données. Cela peut être une liste de fiches produits sur un site e-commerce. Mais parmi des données plus complexes, on retrouve aussi des listes d’articles.
D’où le nom, entre autres, du site imdb.com, pour Internet Movie DataBase (une banque de données dédiée au cinéma). Ce site n’est pas vraiment une base de données, mais il en utilise une. La liste est très longue, et pourtant, une seule base de données suffit.
En effet, il n’y a pas de limite théorique de taille. Et même si le format d’une table dans une base de données ressemble à s’y méprendre à un tableur Excel, il n’y a pas non plus de limite théorique à la quantité de texte que vous pourriez mettre dans une cellule.
Mais le plus impressionnant dans une base de données, c’est qu’on fait tout ça avec… du texte.
Ces tableaux, et tout le texte qu’ils contiennent, sont la mémoire de votre site web. Sans eux, c’est une coquille vide.
Conclusion
Il faut donc retenir que votre site dépend d’un binôme. Il y a d’un côté les fichiers, de l’autre la base de données. À l’heure où le web encourage de plus en plus le multimédia, avec de la photo ou de la vidéo, cela remet les pendules à l’heure.
Cela nous rappelle que le principal contenu d’un site, ce qui l’organise, c’est du texte, d’abord et avant tout.
Maintenant que nous en savons un peu plus sur la façon dont est faite un site WordPress, nous pourrons aussi aborder la bonne façon de le protéger.
Je ferai donc un Cas d’École prochainement, sur les sauvegardes.