Wordpress et exercices

Par :
Patrick Tremblay

CFP Alma
Table des matières
Qu’est-ce qu’un CMS ? .................................................................................................................... 2
Installation de Wordpress ............................................................................................................... 3
Wordpress en local .......................................................................................................................... 4
IntantWP.......................................................................................................................................... 5
Firefox .......................................................................................................................................... 5
Installation ................................................................................................................................... 6
Changer la langue .......................................................................................................................... 10
Titre et slogan ................................................................................................................................ 11
Page d’accueil ................................................................................................................................ 12
Apparence ..................................................................................................................................... 12
Thèmes ...................................................................................................................................... 12
Personnaliser ............................................................................................................................. 12
Articles ........................................................................................................................................... 13
Pages.............................................................................................................................................. 15
Menu ............................................................................................................................................. 16
Tester un nouveau thème ............................................................................................................. 18
Extensions...................................................................................................................................... 20
Remettre le travail ......................................................................................................................... 22

1
Qu’est-ce qu’un CMS ?
Wordpress est un système de gestion de contenu gratuit et open source, comme le décrit le site
kinsta.com :

Un système de gestion de contenu, souvent abrégé en CMS (Content Management System), est
un logiciel qui aide les utilisateurs à créer, gérer et modifier du contenu sur un site Web sans
avoir besoin de connaissances techniques spécialisées.

Dans un langage plus simple, un système de gestion de contenu est un outil qui vous aide à
construire un site Web sans avoir besoin d’écrire tout le code à partir de zéro (ou même de savoir
comment coder du tout).

Au lieu de construire votre propre système pour créer des pages Web, stocker des images et
d’autres fonctions, le système de gestion de contenu s’occupe de tout ce qui concerne
l’infrastructure de base pour vous afin que vous puissiez vous concentrer sur des parties plus
orientées vers l’avenir de votre site.

En mai 2020, les chiffres de W3techs.com, démontrent qu’à lui seul, Wordpress détient 43.6 %
des parts de marché des CMS contre 4 % pour Joomla, son plus proche compétiteur. C’est
pourquoi il sera question ici de Wordpress et non de Shopify, Joomla, Drupal, Wix ou un autre.

2
Installation de Wordpress

En temps normal, Wordpress peut-être fourni directement par l’hébergeur Web, donc il arrive
préinstallé dans votre hébergement. Sinon, il faudra alors avoir le nom de votre base de
données SQL fournie par votre hébergeur ainsi que l’utilisateur et mot de passe. Vous pourrez
alors envoyer tous les fichiers Wordpress directement à la racine de votre hébergeur et vous
rendre sur votre site afin de lancer l’installateur automatiquement :

3
Wordpress en local

Il existe plusieurs méthodes afin d’utiliser Wordpress de façon locale (directement sur votre
ordinateur). Vous pouvez utiliser la suite de logiciel EasyPHP pour faire de votre ordinateur un
hébergeur Web local. Ou encore, créez un ordinateur virtuel LAMP (Linux, Apache, MySQL et
PHP).

Une autre méthode consiste à utiliser une suite déjà toute prête comme InstantWP. Le fait
d’utiliser Wordpress en local permet de préparer son site avant de le déposer sur un hébergeur
et le mettre en ligne. Pour ce faire il faut alors utiliser un duplicateur de site Wordpress tel que
Duplicator.

4
IntantWP

Firefox

Afin de pouvoir utiliser InstantWP, vous devrez avoir Firefox comme navigateur par défaut.

Vous devrez également ouvrir le port 10080 :

Écrire l’adresse : about :config

Accepter :

Dans la barre de recherche écrire : network.security.ports.banned.override

Cliquez alors sur Chaine, puis le plus pour en ajouter une nouvelle qui sera 10080 :

Vous pourrez ensuite fermer cette page et continuer.

5
Installation
Dans ce guide, nous utiliserons InstantWP qui peut se trouver à partir de l’adresse :
https://instantwp.com/downloads/

Cliquez sur le lien pour télécharger la version Windows :

Décompressez par la suite le dossier téléchargé :

Vous pouvez renommer ce dossier au nom de votre site, mais attention ! Dû à certaines
restrictions, le nom du dossier ne doit pas contenir d’espace ni être trop long.

Vous pouvez maintenant ouvrir InstantWP en double-cliquant sur :

Il faudra alors patienter :

Le temps peut-être assez long, surtout à la première ouverture.

6
Ensuite, il faut faire « close » pour fermer le tutoriel :

7
 Ouvrir la page d’accueil de votre site

Ouvrir la page de gestion de Wordpress

8
Ouvrez donc la page de gestion de Wordpress :

Il faudra être patient :

Vous voici maintenant à la page de connexion, comme indiqué, l’utilisateur c’est « admin » et le
mot de passe c’est « password » :

9
Changer la langue

Maintenant, vous pourrez aller mettre votre Wordpress en français. Pour ce faire, allez dans
« Settings » et « General » :

Choisissez la langue « français du Canada » et « Saves Changes » :

10
Titre et slogan

Dans « réglages généraux » du site, vous pouvez changer le titre et le slogan :

Ceci changera le titre du site dans l’onglet sur Firefox, ainsi que sur la page d’accueil.

11
Page d’accueil

Pour visionner votre page d’accueil, vous pouvez cliquer sur le nom de votre site en haut à
gauche :

Et pour revenir à la configuration de Wordpress, appuyez sur le nom de votre site à nouveau :

Apparence

Thèmes
L’apparence d’un site Wordpress dépend entièrement du Thème installé. Ils sont accessibles par
l’option « Thèmes » dans « Apparence ». Par défaut, le thème est « Speculate », pour cet
exercice nous garderons celui-là.

Personnaliser
C’est ici que nous pourrons changer l’apparence générale du site. Les sections peuvent changer
selon le thème actif :

Je laisse ici libre cours à votre imagination…

12
Articles
Les Articles sont ce qui apparait sur la page d’accueil. Il ne faut pas oublier que par défaut,
Wordpress est un blogue, donc un site avec des articles dessus. Il y a par défaut 2 articles créer :

Que nous voyons apparaitre sur la page d’accueil :

Il faudra donc supprimer ces articles et en créer de nouveaux.

Créer d’abord un article expliquant comment télécharger Kaspersky avec un hyperlien vers le
site de Kaspersky.

Pour créer un hyperlien, vous devez sélectionner le mot et cliquer sur puis sur la roue
dentelée :

13
Faites ensuite un autre article sur votre activité préférée en y insérant au moins une image. Pour
ce faire cliquez sur

Ensuite sur

Puis

Et finalement

14
Pages

En plus de la page d’accueil, selon le thème choisi, il se peut que plusieurs autres pages soient
déjà créées. Il est également possible de créer vos propres pages web. Pour ce faire, allez dans
pages et cliquez sur ajouter.

Nom de la page

Contenu de la page

Par défaut, l’éditeur de texte de Wordpress est actif, vous n’avez donc pas à faire du code HTML.
Il suffit simplement décrire le texte et vous servir de la barre d’options au-dessus pour choisir les
titres (au lieu de paragraphe) et les options (Gras, italique, puces, liens hypertextes,etc.).

L’avantage est que si par la suite, vous changer de thème ou les options du site (couleurs,
polices par défaut, etc.) la page va suivre les changements.

Vous pouvez enregistrer la page comme brouillon sans qu’elle apparaisse sur le site ou encore
afficher un aperçu :

Vous pouvez également publier la page, ce qui l’enregistre et la rend disponible sur le site :

15
Vous devrez créer ici trois nouvelles pages :

• Une page « contacts » qui contient tous les renseignements pour rejoindre une
entreprise fictive;
• Une page « présentation » qui contient un texte de présentation (vous pouvez
utiliser du « lorem ipsum »;
• Une page « Termes » qui contiendra les termes d’utilisation du site, vous pouvez
utiliser du « lorem ipsum ».

Menu

Le menu d’un site web apparait sur chaque page du site. Wordpress permet de créer et gérer
ces menus facilement dans l’option « Apparence » et « menu » :

Vous devez créer un nouveau menu appeler « Principal », pour ce faire écrivez le nom dans
l’endroit indiqué et appuyez sur « Créer le menu » :

16
Cochez ensuite les trois pages créées précédemment et les ajouter au menu :

Ensuite, vous pouvez changer l’ordre en les glissant avec la souris. Assurez-vous de cocher
« Primary Menu » en dessous pour que le menu soit accessible dans le thème :

17
Vous pourrez maintenant voir votre menu sur la page d’accueil du site :

Tester un nouveau thème

Il arrive parfois que l’on ait envie de voir notre site sous un nouvel angle, mais nous ne voulons
pas nécessairement tout modifier. Wordpress offre la possibilité de tester les thèmes installés.

Rendez-vous dans l’option « apparence » et dans « thèmes » :

Nous voyons ici les thèmes installés et la possibilité d’en ajouter.

Nous allons voir un aperçu de notre site avec le thème « Twenty Seventeen » :

Placer votre souris sur le thème « Twenty Seventeen » pour voir apparaitre le
bouton « prévisualisation en direct » :

cliquez sur la prévisualisation, Wordpress vous amène à la page de configuration du thème avec
un aperçu à droite.

18
Si vous descendez dans la page, vous remarquerez que notre menu n’apparait pas. Il faudra le
configurer dans l’option « Menus » et « Emplacement du menu » :

Dans le menu déroulant « Top Menu » choisissez notre menu « Principal » :

Wordpress appliquera les changements à l’aperçu :

À parti d’ici deux choix s’offrent à nous, soit nous appliquons le changement de thème au site
avec le bouton « Enregistrer & activer » ou nous annulons le changement en cliquant sur le « X »
à côté. Pour cet exercice, faites le « X ».

19
Extensions

Wordpress, en plus d’avoir des thèmes, peut également être muni d’une panoplie d’extensions.
Il existe des extensions qui ajoute du contenu, qui ajoute des fonctionnalités, pour la sécurité,
pour … à peu près tout et n’importe quoi !

Pour cet exercice, nous allons ajouter l’extension « duplicator ». Il s’agit d’une extension qui
permet de faire une sauvegarde de notre site web pour pouvoir ensuite le déployer chez un
hébergeur. Allez dans l’option « extension » et ensuite « ajouter » :

Nous allons rechercher le nom « duplicator » parmi toutes les extensions existantes en écrivant
le nom dans la case de recherche :

Vous verrez alors apparaitre toutes les applications contenant ce nom, nous allons installer la
première de la liste en cliquant sur « installer » :

20
Il faut patienter le temps de l’installation, elle sera terminée quand le bouton « activer »
apparaitra, cliquez donc sur « activer » pour mettre en fonction l’extension sur le site :

Vous remarquerez alors une nouvelle option dans le menu, cliquez dessus :

Vous pourrez maintenant créer un package ainsi qu’un fichier « installer.php ». Si vous les
téléchargez et les envoyez chez un hébergeur, il suffira d’allez sur le site de
l’hébergeur/installer.php (Ex. : http://www.monsite.com/installer.php) afin de déployer votre
site à cet endroit. Chose que l’on ne fera pas dans cet exercice.

21
Remettre le travail

Quand tout est terminé, il faut fermer InstantWP

Compresser le dossier d’origine et le déposer sur moodle à l’endroit prévu à cet effet.

22