Vous êtes sur la page 1sur 53

Page |2

SOMMAIRE

SOMMAIRE ............................................................................................................................................ 2
PREFACE ................................................................................................................................................ 3
A PROPOS .............................................................................................................................................. 4
PARTIE 1 : CONTEXTUALISATION .................................................................................................... 4
• Un site web, c’est quoi ?............................................................................................................. 4
• Hébergement et nom de domaine ............................................................................................ 5
• A quoi sert un site web .............................................................................................................. 5
• C’est quoi WordPress alors ?..................................................................................................... 6
• Que peut faire WordPress alors ? ............................................................................................. 7
PARTE 2 : INSTALLATION DE WORPRESS EN LOCAL .................................................................... 8
DE LA CONFIGURATION DES ENVIRONNEMENTS (WAMP ET XAMPP) A L’INSTALLATION DE
WORDPRESS ...................................................................................................................................... 9
ETAPE 1 : Installer Wamp/Xampp ........................................................................................... 9
ETAPE 2 : Préparation des fichiers WordPress ..................................................................... 9
ETAPE 3 : Démarrer xamp/wamp ............................................................................................ 9
ETAPE 4 : Démarrer .................................................................................................................. 10
ETAPE 5 : installer WordPress ................................................................................................ 12
DE LA CREATION D’UN NOM DE DOMAINE A L’INSTALLATION DE WORDPRESS ................... 15
Étape 1 : Créer un compte dans 'profreehost ' ..................................................................... 16
Étape 2 : Obtenez votre domaine gratuit .............................................................................. 18
Étape 3 : Installez WordPress sur votre domaine ............................................................... 20
PARTIE 03 : LE TABLEAU DE BORD DE WORDPRESS ................................................................. 23
PRATIQUE ........................................................................................................................................... 36
Création d’un site Vitrine ................................................................................................................ 36
Fonctionnalités :............................................................................................................................... 36
Installation de thème ....................................................................................................................... 36
Configuration du thème .................................................................................................................. 37
Edition des pages du thème ............................................................................................................ 40
Elementor ......................................................................................................................................... 42
Formulaire de contact ..................................................................................................................... 47
Étape 1 – Installation de Contact Form 7 .............................................................................. 47
Etape 2 : Créer votre 1er formulaire avec Contact Form 7 ................................................ 48
Page |3

PREFACE
S’il y a une chose que j’ai comprise au cours de ma vie, c’est qu’il ne faut
jamais se dire que quelque chose est impossible. Je ne sais comment
l’expliquer, mais si je puisse dire quelque chose c’est que ce livre vous
apprendra tellement que vous ne pourrez l’imaginer. Savez-vous pourquoi ?
Parce que le but de l’auteur n’est nécessairement basé sur l’argent. Il l’a écrit
l’a fait par amour et un profond sens du partage. Non il l’a fait parce que cela
lui plaisait. Il a regardé son passé, il s’est rappelé de comment il a souffert
pour avoir les connaissances qu’il a aujourd’hui et a décidé d’aider les autres
à ne pas souffrir au tant. Il écrit ce livre avec joie en y donnant du cœur et
surtout en souriant par ce que pour lui ce n’est pas une corvée, ce n’est pas
un travail. C’est juste du donner et du recevoir.
Ce livre s’adresse aux débutants mais aussi aux personnes qui sont déjà
du domaine et qui voudrai jeter un coup d’œil de temps en temps histoire de
piocher quelque deux ou trois bricoles.
Aujourd’hui apprendre à créer un site web ne devrait plus être un
problème pour quelqu’un qui a un peu du temps à y consacré. Et vous avez
du temps par ce que vous êtes étudiant ou vous exercer une activité qui vous
en laisse du temps, alors ce livre est fait pour vous. Apprenez grâce à ce livre
à créer un site web WordPress et faites-vous plaisir en apprenant car l’écrire
a été une partie de plaisir pour mon partenaire, collaborateur, ami et frère
IDRISSOU A. Matinou

Fawaz SALIFOU
Page |4

A PROPOS
Salut chers amis,
Si vous lisez ce livre c’est que vous avez soit envie d’apprendre à
concevoir un site web avec WordPress ou soit vous voulez approfondir
certains de vos connaissances sur WordPress. Si tel est le cas laissez-moi
vous dire que vous ne vous êtes pas trompés de livre. C’est bien le livre qu’il
vous faut en matière de conception de site web avec WordPress.
La plupart des livres qui existent sont souvent théoriques… A mes
débuts j’ai cherché des livres sur internet qui parle de la conception de site
web avec WordPress mais je n’ai pas pu trouver celui qui répondait vraiment
à mes besoins. Et mes besoins étaient que je voulais un livre claire explicite
pratique avec des captures d’écran à l’appui pour me permettre de maitriser
la création de site web avec WordPress.
Alors voici ici le tome1 (sur 6) qui vous donne les connaissances dont
vous avez besoin pour concevoir un site web vitrine avec WordPress. Partant
de la base qui est de savoir ce qu’un site web, ce livre vous permettra d’être
en mesure de développer comme un pro.

PARTIE 1 : CONTEXTUALISATION
Avant de me mettre à déverser toutes les notions dont vous avez
besoins pour concevoir un site web, il est tout à fait évident de savoir ce qu’un
site web, je crois ! Oui je sais que la plupart des personnes qui auront à
acheter ce livre savent probablement ce que c’est qu’un site web mais laissez
au moins les nymphomanes aussi en profiter.
Ok on se lance.

• Un site web, c’est quoi ?

Tout d’abord définissons le mot Web. Le Web est le terme communément


employé pour parler du World Wide Web, ou WWW, traduit en français par la
toile d'araignée mondiale. Par abus de langage, le Web désigne de façon plus
large tout ce qui se rapproche à cet univers internet.
Un site web, est alors un groupe de pages web
reliées entre elles par des liens accessibles
depuis un navigateur Internet. Ces liens
permettent de naviguer dans le site et de passer
d'une page à l'autre.
Page |5

Oui je sais ce que vous-vous dites « Mes définitions sont complexes ».


Ne vous inquiétez pas. Vous allez comprendre avec l’exemple ci-dessous
Imaginez un livre. Tout le monde sait ce qu’on
appelle ‘’un livre ‘’. Un livre = plusieurs pages +
reluire. Chaque page est soutenue par la reluire…
De même pour un site web en français facile, c’est
plusieurs pages web soutenues par des liens qui
représentent la reluire dans le cas de livre.
Pour qu’un site soit à la portée de tous, il faut que celui-ci soit hébergé, et ait
un nom de domaine.

• Hébergement et nom de domaine

Hum ! Voilà encore des mots techniques qui embrouillent. Non non encore
une fois. Laissez-moi vous donnez un exemple avec lequel vous pouvez
comprendre.
Pour consulter un livre, il faut se rendre à la
bibliothèque. La bibliothèque représente ici
internet… Chaque livre(site) est catalogué dans des
couloirs sur des étagères (hébergeur). Et enfin on
recherche le livre que nous voulons lire à l’aide du
nom du livre (nom de domaine).
Bon voilà j’espère avoir été clair

• A quoi sert un site web

Une question à laquelle tout développeur doit avoir de réponse est


ceux à quoi sert un site web… j’espère que vous avez une réponse sinon voilà
de manière simple la réponse à la question :
Un site web est un outil de communication qu'il ne faut pas négliger. En
effet, il permet de communiquer auprès d'un large public à moindre coût et
offre une multitude de possibilités pour atteindre vos objectifs. Il permettra,
entre autres de :

• Véhiculer votre image,


• Asseoir votre notoriété,
• Gagner en visibilité et crédibilité,
Page |6

• Présenter votre entreprise,


• Diffuser vos services et produits,
• Vendre des services et des produits
• Mettre en avant votre savoir-faire,
• Vous différenciez de la concurrence.
Comme le livre l’intitule « …AVEC WORDPRESS… », il est tout à fait normal
de définir ce que c’est que WordPress.

• C’est quoi WordPress alors ?

WordPress est un système de gestion de contenus (CMS) permettant


de concevoir un site web assez facilement.
WordPress est extrêmement simple d’utilisation. Il peut être très
rapidement configuré et son ergonomie est particulièrement intuitive. La
gestion des pages, thèmes, liens, médias et plugins se fait quant à elle de façon
très fluide et simplifiée. Il n’est pas nécessaire d’avoir des notions en langage
html ou en création de sites ni d’avoir un don particulier pour l’informatique
ou le graphisme.
L’interface vous invite simplement à ajouter textes, images, menus et
autres gadgets en seulement quelques clics. Elle classe les contenus en
rubriques, sous-rubriques et permet de gérer facilement les droits des
différents utilisateurs.
Lorsque l’on constate l’accroissement fulgurant de l’utilisation des
téléphones portables et des tablettes pour la navigation internet, il est
évident que les sites qui ne s’y adaptent pas perdront beaucoup en trafic et
en efficacité. Elle utilise le “Jquery” qui facilite les interactions mais aussi
l’exploitation sur les appareils mobiles.
De plus en plus de thèmes WordPress, même gratuits, intègrent par ailleurs
une technologie totalement responsive, c’est-à-dire parfaitement adaptée à
tous types de récepteurs : ordinateurs, smartphones et tablettes. Le
responsive design permet en réalité un affichage et une ergonomie différents
selon la taille de l’écran utilisé. Il ne rebute donc aucun utilisateur et facilite
la navigation sur le site.
Je sais qu’il y a trop de mots techniques pour les nymphomanies. J’en reviendrai
sur cela
Page |7

• A quels fin peut-on utiliser WordPress ?

Utiliser WordPress pour faire quoi ?


A l’origine on l’utilisait principalement pour concevoir des blogs, il faut
reconnaître qu’aujourd’hui ses possibilités lui donnent une tout autre
dimension. Petite liste en vrac de ce que vous pouvez faire avec :
👉 Un Blog, un Site vitrine, un e-Commerce

👉 Un Forum, un site de Petites Annonces

👉 Un Magazine en ligne

👉 Une Plate-forme d’échange

👉 Un Annuaire, un WiKi

👉 Un Réseau social, un Intranet


👉 Etc.
Alors quel que soit votre projet de site web, étudiez bien WordPress, il se
pourrait qu’il vous corresponde…
Bon voilà l’initiation a été faite… Passons à la pratique.
Il y a deux manières de faire pour concevoir un site web avec
WordPress. Soit on conçoit le site en local c’est-à-dire depuis notre machine
(PC) soit on conçoit le site directement en ligne (en ayant déjà un
hébergement et un nom de domaine).
Pour le cadre de cette formation je montrerai les deux méthodes. La
différence principale se trouve lors de l’installation de WordPress.
Page |8

PARTIE 2 : INSTALLATION DE WORDPRESS EN LOCAL


La particularité de cette méthode est que votre site sera uniquement
présent dans votre machine (Votre ordinateur devient un hébergeur/votre
serveur) et ne peut pas être consulté en ligne. La magie c’est que vous pouvez
répliquer exactement l’environnement web sur votre propre PC et
développer votre site web à votre rythme. Cependant, tester une idée,
apprendre à développer un site web, réduire les dépenses dans les phases
préliminaires d’un projet, sont toutes des raisons valables de vouloir installer
WordPress en local.
Pour installer WordPress en local vous avez besoin de trois choses
fondamentales :
👉 Un navigateur (Chrome ; Mozilla Firefox, Opera, internet explorer, …).
Pour commencer, il va falloir que vous ayez un navigateur. Un navigateur est
ce logiciel qui permet de consulter des sites et de visiter des sites sur internet.
Personnellement je préfère plus chrome (www.google.com/intl/fr/chrome/).
👉 Un logiciel qui jouera le rôle de server en local (XAMPP, WampServer,
EasyPHP, Lamp (pour Linux),…)
Afin de jouer le rôle de serveur en local, vous avez besoin
essentiellement d’un logiciel. Parmi ces logiciels qui ne sont pas en quelque
sorte des logiciels mais des environnements de simulation, deux sont plus ou
moins populaires : XAMPP et WAMPSERVER. Parmi ces deux
environnements, j’utilise XAMPP. C‘est optionnel, vous avez le choix. (Lien
téléchargement : https://www.apachefriends.org/fr/download.html ).
Pour ceux qui préfèrent WampServer : (
https://www.wampserver.com/download.php )
👉 Un dossier WordPress.
Enfin ! pour finir vous aurez besoin de télécharger sur
(https://fr.wordpress.org/download/ un fichier compressé WordPress.
Page |9

DE LA CONFIGURATION DES ENVIRONNEMENTS (WAMP ET XAMPP) A


L’INSTALLATION DE WORDPRESS

ETAPE 1 : Installer Wamp/Xampp


Pour commencer il faut installer XAMPP ou WAMP sur votre
ordinateur. Il suffit juste de vous rendre sur les liens ci-dessus énumérés, et
de télécharger la version qui convient à votre système d’exploitation.
Une fois téléchargé, installez votre logiciel, et suivez les instructions jusqu’à
la fin de l’installation.
Avertissement : il n’est techniquement pas bien d’installer les deux
environnements dans une même machine. Donc faites un choix entre XAMPP
et WAMPserver
ETAPE 2 : Préparation des fichiers WordPress

• Rendez-vous sur le lien de téléchargement fourni ci-dessus () et


télécharger la dernière version du CMS ;
• Décompressez le fichier .zip téléchargé ;
• Ouvrez le dossier WordPress décompressé ;
• Sélectionnez le dossier décompressé et copiez-le ;
• Ouvrez le dossier \xampp\htdocs (pour le cas de XAMPP) ou
\wamp\www situé à la racine de votre disque principal ;
• Collez le dossier et renommer selon le nom de votre projet (Ex :
masterclass) et ça devient \xampp\htdocs\masterclass ou \wamp\www\maste…;

ETAPE 3 : Démarrer xamp/wamp

• Recherchez sur votre PC l'emplacement de l'application XAMPP


Control Panel (ou WampServer si WAMP installé) et exécutez. Vous
pouvez également la trouver via le menu
Démarrer/Programmes/XAMPP Control Panel (ou wampServer) ;
• Pour le cas de de XAMPP l'application s'ouvre et affiche différents
modules avec des boutons en face de chacun d'entre eux ;

Cliquez sur le bouton Start situé en face des modules Apache et MySQL. Le
nom de chaque module doit être surligné en vert après quelques secondes ;
P a g e | 10

• Pour le cas de WAMP Une fois lancé, vous aurez l’icône de WampServer
dans votre barre de tâche. Cette icône doit
avoir la couleur verte pour pouvoir l’utiliser
NB : Si la couleur est différente c’est qu’il y a un problème.
ETAPE 4 : Démarrer
• Création de la base de données de votre site web (cas de XAMPP)
Il est essentiel de créer la base de données destinée à l’utilisation de votre
site. Pour créer une base de données, il faut lancer phpMyadmin en
cliquant sur le bouton Admin comme le montre la figure suivante :
P a g e | 11

• Pour le cas de WAMP


Cliquez sur l’icône de WampServer dans la barre de tâche, puis cliquez
dessus avec le bouton gauche de votre souris et cliquez enfin sur la
commande « phpMyAdmin »

• Si une page d’authentification s’affiche alors saisissez le mot « root »


dans la zone « Utilisateur »
P a g e | 12

• Sinon vous êtes redirigés vers cette page ou vous cliquez sur base de
données

• Choisissez le nom de votre base de données, puis sélectionner «


utf8_bin » pour l’interclassement, puis cliquez sur Créer et le tour est
joué ! Exemple de nom de la base de données : formation, site,
db_masterclass. Le nom est pris au hasard mais jamais d’espace.
Remplacer les espaces par les ‘_’ comme ‘base_de_donnee’

ETAPE 5 : installer WordPress


• Pour installer WordPress en local, saisissez dans la barre d’adresse de
votre navigateur : localhost/ suivi du nom de votre site, c.à.d le nom
du dossier précédemment créé, dans mon cas ça sera :
localhost/masterclass/. Vous serez redirigé vers cette page.
P a g e | 13

• En cliquant, sur le bouton « C’est parti ! », l’installation de WordPress


commence. Elle ne dure pas plus de cinq minutes.
• Dans l’interface suivante, vous devez spécifier le nom de la base de
données (celle créée précédemment) dans le champ « Base de
données ». Et comme identifiant mettez (root), et laissez les champs
du mot de passe vide.
P a g e | 14

• Puis complétez les informations nécessaires concernant votre site ou


votre blog :
– Titre du site
– Identifiant (évitez les identifiant de type admin)
– Mot de passe (Il faut choisir un mot de passe sécurisé)
– Votre adresse de messagerie
et ne cochez surtout pas la case (Visibilité pour les moteurs de
recherche), sinon votre site ne sera pas indexé sur les moteurs de
recherche. Puis cliquez sur « Installer WordPress »
Note : En fonction de la version de WordPress vous pouvez retrouver des
cases supplémentaires. Ignorez les justes !
Bravo, vous avez installé WordPress avec succès, tout ce qui vous reste
est de vous connecter à votre espace d’administration en cliquant sur le
bouton « Se connecter ».

ou en se connectant sur l’adresse suivante et en tapant votre identifiant et


votre mot de passe : localhost/nom_de_votre_dossier_wordpress/wp-admin
ce qui donne pour moi : localhost/masterclass/wp-admin (ci-dessous)
P a g e | 15

• Pour visiter votre site, vous pouvez le faire via l’adresse :


localhost/masterclass.
Bien-sûr en remplaçant « masterclass » par le nom de votre dossier.

• Maintenant que vous avez installé WordPress en local, vous pouvez créer
votre site en hors ligne et à tête reposée ; une fois votre site est prêt
réservez un espace d’hébergement et hébergez-le, afin de le publier et le
partager avec le monde.
UN PLUS : Installer WordPress en local n’est pas compliqué quand on suit
la bonne procédure. Vous pouvez bien le faire en seulement cinq minutes
et en quelques clics.
Bien bien en parlant d’hébergement et si nous allons directement installer
WordPress depuis un hébergement…
Alors ne perdons plus le temps :

DE LA CREATION D’UN NOM DE DOMAINE A L’INSTALLATION DE


WORDPRESS

Dans cette partie, nous allons d'abord configurer notre compte auprès du
fournisseur d'hébergement, puis installer Wordpress sur le domaine. Nous
allons donc procéder en 3 étapes,

1. Créer un compte dans 'profreehost'


P a g e | 16

2. Obtenez votre domaine gratuit


3. Installez WordPress sur votre domaine
Étape 1 : Créer un compte dans 'profreehost '
Profreehost est le fournisseur d'hébergement qui va nous aider à
créer un site Web gratuit sur WordPress. Donc, pour créer un compte,
rendez-vous sur profreehost.com .
Dans la page d'accueil, cliquez sur "S'inscrire maintenant".

Vous serez maintenant redirigé vers une page où vous pourrez vous inscrire
pour un nouveau compte.

Ici, entrez l'adresse e-mail et le mot de passe pour créer un compte. Ensuite,
cliquez sur le bouton avec une coche.
P a g e | 17

Vous devriez recevoir la notification suivante après avoir rempli vos


coordonnées. Cela signifie que vous devez activer votre compte. Le lien
pour activer votre compte profreehost vous sera envoyé par e-mail.

Vérifiez votre e-mail pour un message de Free Host avec un lien d'activation.

Cliquez sur le bouton Activer le compte pour activer votre compte.


P a g e | 18

Après avoir cliqué sur Activer le compte, vous serez redirigé vers votre
compte sur Profreehost comme indiqué ci-dessous.

Étape 2 : Obtenez votre domaine gratuit


Un domaine est le nom de votre site Web. Il s'agit du nom qu'un visiteur entre
dans le navigateur pour visiter votre site Web.
Alors pour obtenir votre nom de domaine, Cliquez sur "Créer un nouveau
compte"

Vous devez maintenant choisir un nom pour votre site Web. Nous avons
choisi "techyleaf". Ce sera le nom de domaine de votre site Web dont vos
visiteurs auront besoin pour accéder à votre site Web.
• Entrez maintenant le nom de domaine choisi pour vérifier s'il est
disponible ou non.
• Vous pouvez voir que le domaine que nous avons choisi est disponible
(en vert) et peut être utilisé pour créer un site Web gratuit sur
WordPress.
P a g e | 19

• Vous pouvez également modifier la dernière partie de votre domaine


en unaux.com, comme indiqué ci-dessous.

• Maintenant, pour obtenir ce domaine, cliquez sur le bouton avec la


coche dessus pour continuer.

• Vous devriez maintenant recevoir un message de confirmation comme


indiqué ci-dessous.
Comme il est dit, "Succès!". Nous avons notre domaine gratuit.

« Parfois, à la création on peut voir un cercle en vert qui tourne en boucle. Çà


veut dire tout simplement que le domaine est en cours d’acquisition. Çà
P a g e | 20

prends entre 5 et 20min. Sinon soyez entrain d’actualiser la page jusqu’à voir
l’icone de succès en vert. »
Étape 3 : Installez WordPress sur votre domaine
Maintenant que nous avons notre domaine gratuit, il est temps de créer
un site Web gratuit. Ainsi, une fois que nous aurons installé WordPress,
notre site Web sera en direct sur Internet.
Pour installer WordPress, cliquez sur le bouton 'Manage' .

Une fois que vous avez cliqué sur Manage, cela vous amènera à cette page ci-
dessous
Cliquez maintenant sur "Control Panel".

Après plusieurs contrôles, vous êtes redirigé vers le panneau de


configuration et sous l'onglet logiciel (SOFTWARE) cliquez sur «
Softaculous app installer ».
P a g e | 21

Il vous amènera à la page avec divers logiciels qui peuvent être installés sur
un site Web. Ici, sélectionnez WordPress et cliquez sur "Install".

• Vous allez maintenant accéder à cette page et accéder au compte


administrateur.
• Ici, vous devrez entrer un nom d’utilisateur et un mot de passe pour
votre installation WordPress.
Il sera utilisé pour se connecter ultérieurement à votre site Web.
Une fois que vous avez saisi ces informations, cliquez sur Install
P a g e | 22

Comme vous pouvez le voir, WordPress est installé avec succès.


Vous pouvez maintenant cliquer sur le lien qui redirige vers votre site Web
comme indiqué dans l'image ci-dessous et votre site Web devrait être en
ligne sur Internet.
Avertissement : Toujours dans le même contexte, la mise en ligne de votre
site peut prendre un certain temps (entre 01 minute à 01 journée ☺).

Succès! Votre tout nouveau site Web est en ligne.

Maintenant que vous avez tous configuré, il est temps de commencer à savoir
utiliser WordPress, n’est-ce pas ! ? Il est temps de savoir manier WordPress
sans souci, de personnaliser et de créer le site Web de vos rêves.
Passons donc à l’étape de « Création de site web ».
P a g e | 23

PARTIE 03 : LE TABLEAU DE BORD DE WORDPRESS

Pour accéder à l’interface du tableau de bord WordPress, il


faut au préalable s’authentifier
• Si vous êtes en local, il faut Ecrire au niveau de votre barre de
recherche localhost/nom_dossier_wordpress/wp-admin
Pour ceux qui étaient attentif, j’avais dit au niveau de l’installation de
wordpress de décompresser le fichier et de le renommer selon le nom
de votre choix. C’est en fait ce nom qu’il faut remplacer ici par
nom_dossier_wordpress.
Et si par exemple j’avais nommé le dossier masterclass alors pour
accéder à l’interface du tableau de bord de WordPress, je taperai
localhost/masterclass/wp-admin sur mon navigateur.
Par contre si WordPress était déjà installer depuis mon site en ligne
alors là je tape simplement le nom de mon domaine suivit de /wp-
admin/
Vous serez redirigé vers la page d’authentification ci-dessous

- Au niveau de 1, renseignez votre identifiant ou votre email.


- Au niveau de 2, votre mot de passe et validez.
• Vous êtes ensuite redirigé vers l’interface de WordPress proprement
dites
P a g e | 24

• Sur l’angle en haut à gauche (Zone encadré) faites un clic droit et


cliquez sur nouvelle onglet.
L’avantage de cela
est qu’il vous permet
juste de voir les
modifications qu’on
apporte
directement ; juste
en passant d’un
onglet à un autre.

• La première section ne sert pratiquement presque à rien sinon pour


voir l’état de santé de notre site, les mises à jour etc. On passera.

• Ah oui, j’oubliais de vous montrer qu’après avoir ouvert sur un nouvel


onglet, voici l’apparence de mon site.
C’est en fait un thème par défaut que
WordPress a installé afin que le site ne
soit pas totalement vide… A l’heure
actuelle le thème est en version bêta ;
c’est-à-dire qu’il est toujours en
construction. « Je vous montrerai
pourquoi ».
P a g e | 25

Afin que tout se passe, nous allons essayer de changer de thème.


- On revient au niveau de notre tableau de bord.
- On survole la section apparence et on clique sur thème.

- On survole le thème Twenty Twenty One (C’est un choix


parmi les thèmes que j’ai fait afin que notre expérience se
passe bien). Je vous expliquerai ce que c’est qu’un thème
plus tard.
- On active le thème (cliquez sur le bouton activer)

- Bon voilà, après avoir actualiser mon site, elle a cette


apparence (image ci-contre). Pour le moment c’est moche
et très moche mais je vous
montrerai comment lui donner un
autre design. Content n’est-ce
pas ☺ ?
P a g e | 26

• La section article nous permet d’ajouter, modifier, supprimer et


structurer (taguer, catégoriser, mettre en avant, etc.) des articles.
Les articles sont un peu comme des publications que l’on fait sur
Facebook avec des fonctionnalités de partage, like et qui informe sur un
sujet spécifique.
• Dans la partie tous les articles, on verra la liste de nos articles qu’on a
publié ou en attente de publication.
• On aperçoit
un article déjà
publié dont on voit
le titre (zone en
noir).
• Les zones
vertes contiennent
un bouton ‘ajouter’
qui nous
permettent comme
son nom l’indique
d’ajouter des
articles

• En survolant chaque article, vous pouvez voir une autre zone


apparaître.
1. Vous pouvez modifier l’article
2. Vous permet de modifier rapidement de petit truc comme le titre, le slug et bien
d’autre élément en rapport avec l’article spécifié (cliquez et amusez-vous)
3. Met l’article en corbeille (suppression partielle de l’article).
4. Permet d’afficher le rendu de l’article.
P a g e | 27

• Toujours au niveau de la section articles, nous les catégories.

Les catégories permettent la catégorisation des articles ☺. Un peu


comme classé des articles selon une thématique donné. Comme par
exemple en voulant rédiger des articles sur la beauté, le rédacteur peut
créer plusieurs catégories comme pédicure, manicure, vestimentaires.
Vous voyez ! et là un internaute qui visite le site n’a pas forcément
besoin de tout voir. Il peut en même temps se rediriger vers les articles
qui l’intéressent le plus en fonction de la catégorie en lui évitant de
perdre son temps.
• En cliquant sur ajouter vous tomberez sur cette page

1- Saisissez le titre de votre page


2- Saisissez le contenu de vos articles
3- Détails supplémentaires pour votre articles (Catégorie pour catégoriser l’article,
étiquette pour taguer l’articles, image mise en avant pour mettre une image
d’aperçu à l’article, etc.)
4- Accès aux outils d’éditions de WordPress. Si vous avez besoin de liste, cliquez sur
liste. Si vous avez besoin d’écrire un titre, cliquez sur titre (Voir image ci-
dessous).
P a g e | 28

• Après avoir finir de rédiger l’article, vous cliquez sur publier. Vous
aurez le choix entre publiez immédiatement ou prévoir une date
ultérieure de publication (Voir zone encerclée).

• La section suivante media est notre galerie. C’est l’endroit qui


contiendra l’ensemble des images, vidéos, audios, fichiers à utiliser sur
notre site. Autrement dit l’ensemble de nos médias transiteront
d’abord par la médiathèque avant d’être exploiter sur le site. Si l’on
voudrait insérer une image dans notre site on doit d’abord l’ajouter à
notre médiathèque.
Pour l’ajouter, on
clique sur Ajouter.
P a g e | 29

• Puis on clique sur téléverser des fichiers, on choisit l’image qu’on


veut insérer et on valide.

• La section page liste les pages créées. Pour ajouter une nouvelle page,
cliquez sur Ajouter

• Vous êtes redirigé vers l’espace d’édition de la page


Vous donnez un nom à votre page. Dans mon cas, ma page sera
nommée accueil. Vous pouvez saisir du contenu un peu comme je vous
l’avais montré dans la section création d’articles. Puis vous cliquez
Publier.

Petit rappel : Cliquez sur l’icône W pour revenir au niveau de votre tableau de bord.
P a g e | 30

• La section commentaire permet de gérer les commentaires faites sur


vos articles par les internautes. Lisez par vous-même.

• La section apparence est importante.

Et dans cette section, deux éléments vont nous intéresser pour le moment :
Thème et Menu. On en reviendra sur le reste plus tard.
C’est quoi Un Thème ?
Un thème dans WordPress définit la beauté, le design de notre site. Enfaite
même, c’est le thème même qui fait le site.
Pour être beaucoup plus explicite je vous donne un exemple.
Je suppose que votre hébergement est votre terrain (Votre parcelle comme on
le dit). Après avoir acheté votre terrain vous allez y construire une maison (le
site web). Mais au lieu de construire la maison de bout en bout, vous allez
acheter une maison (un thème) que vous venez déposer sur votre terrain ☺. (En
vrai on ne vend pas de maison à déplacer sur un terrain hein ☺)
C’est en cela il existe des thèmes gratuits et payant (avec plus de
fonctionnalités)
P a g e | 31

• Chez moi ici j’ai trois thèmes. Parmi les trois il y est mis Activé ; Ce qui
veut signifier que c’est le thème-là qui est actuellement utilisé. Voyez
le format, la texture, le design ; vous remarquerai que ça ressemble à
la texture de notre site.

- Essayer d’activer un autre thème et allez y actualiser votre


site ; vous verrez que la texture va changer
- Maintenant réactualisez le thème initial ☺.
• Après avoir cliquez sur Ajouter, je suis redirigé ici (ci-dessous)
- La en fait, vous pouvez voir de milliers de thème (Vous
avez une multitude de choix)
- Vous pouvez rechercher des thèmes spécifique (zone
encerclée en vert.
- Ou vous pouvez importer un thème déjà télécharger (Zone
encerclée en rouge (On y reviendra).
-

• Revenons s’en à la section suivante (Le Menu)


J’espère que vous savez ce qu’on appel un menu. Il nous permet tout
simplement de naviguer de page en page.
P a g e | 32

Et pour faire afficher un menu, c’est très simple !


- Zone1 : Donnez un nom au menu. Ex : Menu Principal
- Zone2 : Cliquez sur créer menu
- Zone3 : Cliquez sur voir toutes les pages (ça affichera la
liste des pages que vous avez eu à créer).
- Zone4 : Cochez les cases que vous voulez faire afficher
dans votre menu du site.
- Zone5 : Cliquez sur ajouter au menu.
- Zone6 : Vous pouvez ajouter des liens personnalisés ou
liens des articles dans votre menu aussi
- Et enfin en bas cliquez sur Enregistrer le menu
• Gestion du positionnement du menu

Dans mon cas j’ai ajouté trois pages. Et comme vous le voyez, j’ai mis des
flèches directions haut et bas. Cela signifie que vous pouvez intervertir
l’ordre.
Comment ? : Vous maintenez enfoncer la page à déplacer à l’aide de la clique
gauche de votre souris et vous le déplacer à l’endroit convenu et vous
relâcher. C’est tout.
P a g e | 33

Si vous remarquez des décalages d’espacements, c’est que vous créez là des
sous-menus.
Vous pouvez aussi modifier le nom des menus en cliquant simplement sur ce
dernier et mettez le nom qui vous convient.
• Voici mon menu affiché

• La section suivante concerne les extensions


Les extensions sont très capitales dans la construction d’un site idéal
WordPress. Il permet de donner des fonctionnalités supplémentaires
au site.
Ex : Si notre site a besoin de formulaire cherchera à ajouter une
extension qui gère les formulaires. On en parlera plus d’avantage lors
de la section création de site

• La section compte nous permet d’afficher tous ceux qui ont accès à la
modification de notre site. Dans ce cas je suis le seul avec un rôle
administrateur.
P a g e | 34

• Vous pouvez ajouter d’autre personne pour la modification de votre


site avec des rôles spécifiques
Pour ajouter quelqu’un vous demandez son emailet son nom. Vous

remplissez tous les champs de la page Ajouter compte. Arrivé tout en


bas, vous l’attribuez un rôle. N’oubliez pas d’enrrgister.

• La section Réglage Générale nous permet d’apporter quelque


modification générale à notre site. Vous pouvez visiter voir.
P a g e | 35

• Voici encore cette page dans la section Réglage qu’il ne faut pas
négliger

Elle nous permet de définir la page d’accueil (Donc la première page


que les visiteurs verront en accédant à votre site web) et la page blog
(cette page sera configurer de telle sorte à créer l’architecture d’une
page blog).
Donc ce qu’il convient de faire est de cocher page statique et de
sélectionner la page qui sera votre l’accueil et la page sui sera la page
des articles. Vous enregistrez enfin les modifications en bas

Voilà que tout est dit, nous pouvons maintenant passer à la pratique.
Pour le cadre cette pratique, nous allons nous amuser à créer un site
vitrine, un blog, et vous initier à la configuration d’un site e-commerce
P a g e | 36

PRATIQUE

Création d’un site Vitrine

Rappel : Un site vitrine est un site Web qui présente en ligne les produits ou
les services d'une organisation, d’une entreprise, dans le but d'attirer
simplement l'attention et d'éveiller l'intérêt des internautes de passage, le
plus souvent sans permettre d'acheter directement le produit ou le service
proposé

Fonctionnalités :
- Une page d’Accueil
- Une page A propos
- Une page Nos services
- Une page Blog
- Une page Contact
Comme vous l’avez remarqué j’ai intégré en même temp Le Blog. Donc pour
cette pratique on ne créera plus de site blog à part. Tout compte la
méthodologie reste la même si l’on veut créer un site Blog
On attaque !!!!!!

Installation de thème

Pour y arriver nous allons aller à la chasse des thèmes, choisir, installer et
activer le thème qui nous convient.
Nous allons alors nous rendre dans la section thème-→Ajoute→Et on fait le
choix du thème. Pour ce cadre moi j’ai choisi Colibri WP. Vous pouvez faire
une recherche rapide (1). Ensuite cliquer sur installer.
P a g e | 37

Après l’installation activez le thème(ci-dessous).

Configuration du thème
Après avoir activé le thème, on est redirigé vers une page de configuration

Là ! ça nous propose de choisir trois modèles. Vous avez le choix entre le


modèle A B ou C. Moi je vais me contenter du modèle A. Ensuite je clique le
« 1 ». L’installation du démo (Le démo est en fait la mise en place du thème
sur notre site). Elle prend entre 02 à 20min. ça dépend du thème.

Bon ! voilà, la démo est installée. Pour commencer la modification on clique


sur 01 et sur 02 pour voir le site.
P a g e | 38

Et si on allait voir comment le site se présente cette fois.


AVANT APRES


Vous remarquez déjà que notre site commence par prendre forme. Content
n’est-ce pas ☺ ?. Bien tout ce qui nous reste à faire, c’est de modifier le menu,
les images les textes et d’ajouter les fonctionnalités manquantes.
Avant qu’on ne continue, je vous arrête un instant. ☺ Je vois que vous êtes
pressé de finir votre (peut-être) premier site mais il faut que je vous notifie
ceci d’abord : La page qui vient après activation d’un thème dépends d’un
thème à un autre. Alors ne soyez pas étonné de tomber sur thème avec des
configuration différentes. Parfois la configuration peut-être plus complexe.
Donc pour cela, il faut faire référence à la documentation. Si vous voulez
vraiment faire carrière en développement WordPress, il faut développer un
esprit intuitif.

Bien ! si tout est compris, allons modifier notre site.


Pour ce cadre je vous montrerai comment les modifications se font, et
débutera la modification du template avec. Cependant je compte sur votre
grande intelligence pour finir la modification complète.
Essayons de travailler de manière optimale :
- Nous allons d’abord ajouter les pages manquantes
- Ajuster le menu
- Editer les pages.
P a g e | 39

1- Ajouter les pages manquantes

Conformément à ce qui a été prévu on avait besoin de 05 pages. Déjà ici nous
voyons trois pages. Nous pouvons déjà prendre la page Front-page comme
Accueil, la page Blog comme Blog. Il nous reste la page A propos, Service
et Contact.
Pour les ajouter, on se rendra dans la section page →Ajouter

Vous mettez le titre et un petit


paragraphe en bas puis publiez.
Vous faites de même pour les autres pages (Service et Contact) pour le
moment.
A la fin j’obtiens çà après
avoir actualiser mon site
(figure ci-dessous)
P a g e | 40

Il est temps de faire le ménage du menu (ordonner le menu comme


convenue et supprimer les inutiles). Pour cela, on va se rendre dans la
section menu.
Référez-vous vers la notion de création d’un menu pour faire de même.
A la fin çà donne ceci chez moi(ci-dessous). Surtout n’oubliez pas
d’enregistrer après chaque modification.

Bien ! Nous allons passer à la modification des contenus page par page. Pour
ce cas comme je vous l’avais annoncé « Je vous montrerai comment vous
pouvez modifier les premières sections. Le reste c’est à vous de vraiment le
faire ».

Edition des pages du thème

Page d’accueil
Il y a plusieurs manières de modifier le contenu d’un thème dans WordPress.
Comment ça ? Au fait, ce qu’il faut comprendre c’est que la conception d’un
thème WordPress dépends d’un développeur à un autre d’où l’intérêt de
l’esprit intuitif pour modifier un contenu. Tout compte fait, la première idée
de là où on doit se rendre pour modifier un contenu est au niveau de la
personnalisation. Tentons le coups ☺
P a g e | 41

Après avoir cliqué je suis redirigé vers une page

La partie 1 est ce qu’on appelle la section des blocs. C’est cette partie selon
mes analyses qui permettent l’édition des contenus de toute la page juste en
cliquant sur l’icône de paramètre. (Bonne nouvelle ☺).
La partie 2 présente comme vous le site mais cette fois avec des bloc qui
apparaissent au survole d’un élément comme le 3.
En parlant du trois, au survole on y voit deux icônes de crayons et trois autres
icones englobées en un. On cliquera sur l’icône en orange et on clique sur le
texte. Nous nous apercevons que nous pouvons modifier directement du
texte depuis le bloc 3. Essayez !!!
Pour changer le design des boutons, on survole le bouton et on clique sur le
crayon en orange.
Comme vous le
voyez, on peut
modifier le texte du
bouton dans la
section 1 là où c’est
mis Text. De même
pour l’arrière-plan
du bouton en
cliquant sur STYLE
P a g e | 42

Et l’image de l’arrière-plan alors je ne me retrouve pas ?


Ok du calme. Pour y arriver survole simple l’image et vois si une icône
apparaitra.


Comme vous le voyez tout est simple et intuitif… Vous finissez vous cliquez
sur le bouton Publier qui se trouve en haut.
Je compte sur vous pour finir l’édition de la page d’accueil
A propos
Comme vous avez su le remarquer la page A propos, service et contact sont
des pages que nous avons-nous même ajouter. Ce qui veut dire qu’on doit
nous même les construire.
Comment faire ?
Normalement on peut continuer l’édition dans la zone réserver pour. Mais
nous allons plutôt utiliser une extension appeler elementor.

Elementor

ELEMENTOR est une extension qui nous permet de créer très rapidement
des templates de page. Elle nous propose plusieurs outils d’édition de page
Pour ce faire, nous allons télécharger l’extension dans la section Ajouter
extension.
P a g e | 43

Puis on recherche, installe et active elementor. (ci- dessous).

Après activation, vous serez redirigés vers un site externe où l’on vous
demandera de créer un compte. Bien vous n’êtes pas obligé de créer un
compte à l’immédiat.
Essayez donc de revenir à votre tableau de bord en faisant simplement un
retour en arrière.
Une fois revenir à l’accueil, vous verrez apparaître
elementor. Ce qui veut dire que elementor est bien
installé et activé (Voir ci-contre).
Ce qui nous concerne ici maintenant c’est de
designer notre page A propos. Et pour ce faire, nous
allons nous rendre, dans la section page.
On verra la liste de nos pages. On commence par la
page A propos en cliquant sur le nom de la page ou en cliquant sur modifier
la page qui s’affiche lorsque survole la page.
P a g e | 44

1- On supprime le
petit paragraphe
2- On met à jours la
page
3- Et on clique sur
Modifier avec
elementor

Nous serons redirigés vers une page d’éditions (voir ci-dessous)

Il est temps de me suivre attentivement.


• La zone en 1 représente la section des outils d’éditions. C’est là on
trouvera les outils comme les listes, les paragraphes, les titres, les
boutons, les images, etc.
• La zone 2 est notre espace de travail sinon c’est notre page tout
simplement. Là, vous voyez à part l’entête que c’est vide non.
• L’ajout de contenu se fait par bloc superposé. Et pour ajouter des blocs
on cliquera simplement sur le bouton + (3).
• Elementor nous permet d’avoir des modèles de page préconstruit.
C’est là qu’il est nécessaire de se connecter à leur page web (4)
• Et enfin, on enregistre (5) puis on va réactualiser notre page A propos.
Je vous montre rapidement comment faire :
On va essayer de faire quelque chose de simple et je compterais toujours sur
votre intelligence pour faire le reste.
P a g e | 45

Voici une maquette de ce qu’on fera


A Propos de nous

Nous sommes une agence


digitale. Nous fournissons des
services et donnons des
formations dans les métiers du
digitale ………………
……………………………………………
…………………………………………..
Tout d’abord nous allons décomposer notre maquette.
- Un premier bloc qui contient un titre en rouge
- Un deuxième bloc avec deux sections. Une section qui
contient une image avec le bord arrondi et une seconde
section avec long texte.
Cela dit, on se lance :
En se référant à l’image précédente, on clique sur le bouton + (3). Après
avoir cliqué sur le bouton nous voyons l’apparition de plusieurs blocs avec
différentes sections.

Pour le titre on a besoin que du bloc avec une seule section. Donc vous
savez déjà là où il faut cliquer(A). Ensuite on cherche l’outil titre (B).
Pour Ecrire le texte du titre, On maintient enfoncer simplement l’outil et on
le déplace dans le bloc. Simple comme bonjour ☺. Je vous montre
P a g e | 46

Si vous ne voyez plus les outils


d’éditions, cliquez simplement sur la
zone encerclée en haut à gauche.
Après avoir atteint la zone du bloc, on
lâche la clique et là on peut mettre
notre titre simple

Comme vous le voyez sur la figure ci-dessous ; J’ai écrit mon texte dans la
zone en 1, puis j’ai centré çà (2). Enfin pour la couleur j’ai cliqué sur le style
(3) pour lui donner la couleur rouge. Tout est intuitif. Alors n’hésitez pas à
expérimenter. Cliquez-deplacer-supprimer-cliquer-deplacer-ainsi-de-suite.
C’est comme çà on apprend ; en faisant des erreurs.

On passe au second bloc. Nous allons cette fois-ci encore cliquez sur le + et
choisir le bloc avec deux sections. Puis on clique sur l’outil image et on
déplace sur la première section du bloc et de même pour notre texte on
clique sur l’outil éditeur de textes pour notre texte.
P a g e | 47

Ça donne çà (ci-dessous). Pour changer l’image cliquez simplement là où


c’est fléché et allez choisir votre image

Vous pouvez choisir le type de bordure en 1. Si vous voulez appliquer le


même rayon de bord sur chaque côté laissez intact le boutons (2). Et enfin
en survolant l’intérieur des cases vous verrez des boutons augmenter et
diminuer. Faites vous-même le test. Et surtout n’oubliez pas d’enregistrer
Ce la dit, je crois que vous pouvez être en mesure de poursuivre le reste. Çà
sera de même pour la page service.
Page contact
La page contact fera une exception dans sa conception puisqu’il doit y
contenir un formulaire de contact.

Formulaire de contact

La façon la plus simple de créer un formulaire est d’utiliser un plugin (une


extension) WordPress – actuellement, il y en a beaucoup. Dans ce cas, nous
utiliserons Contact Form 7. Lançons-nous
Étape 1 – Installation de Contact Form 7
Recherchez Contact Form 7 et sélectionnez Installer. Une fois installé,
sélectionnez Activer pour activer le plugin sur votre site.
P a g e | 48

Etape 2 : Créer votre 1er formulaire avec Contact Form 7


Cliquez sur la partie « Créer un formulaire ». Vous êtes renvoyé directement
vers le formulaire avec les éléments de Base.
Dans un premier temps, définissez le titre de votre formulaire et
sauvegardez. Dans l’exemple ci-dessous, j’ai décidé d’appeler mon formulaire
« Contact ».

Avant de s’attaquer au formulaire, nous allons définir :


1. Qui recevra une notification de nouveau message et comment
personnaliser celui-ci ?
2. Le type de message envoyé à l’utilisateur en fonction d’un événement
spécifique (par exemple « si l’internaute ne remplit pas un champ
obligatoire »)
3. Les réglages additionnels qu’il est possible de faire. (Rendez-vous sur
https://contactform7.com/additional-settings/ pour plus d’info)
P a g e | 49

1. Qui recevra une notification de nouveau message et comment


personnaliser celui-ci ?
Rendons-nous dans le sous-onglet « Email »

Voyons ensemble la correspondance de chacun de ces champs ci-dessus :

« Pour » : définit l’adresse email qui recevra la demande de contact


(normalement il s’agit de la vôtre ou de celle de votre client)
« De » : définit l’adresse email de l’internaute qui vous contacte. Ce champ
utilise le marqueur [your name] mais vous pourriez utiliser aussi [your-
email] pour avoir l’email de l’internaute qui s’affiche en tant qu’émetteur.
Dans ce cas c’est mis à la fin wordpress@monsite.com. Pensez à changer ce
domaine par le lien de votre site
« Sujet » : définit l’objet de l’email que vous allez recevoir. Ici, j’ai indiqué «
Contact »
« En-tête additionnels » : Ils permettent de mettre un ou plusieurs de vos
collaborateurs en copie de l’email que vous recevrez. Vous pouvez également
définir un email automatisé pour envoyer une copie de son message à
l’internaute.
« Corps du message » : cette partie vous donne un aperçu de l’email qui vous
sera envoyé en fonction des paramètres que vous aurez défini plus haut. Vous
pouvez également modifier le corps de ce message directement dans cette
fenêtre pour le personnaliser davantage. A titre d’exemple, vous pourriez
simplement indiquer [your-message] puisque les informations du contact
seront déjà dans les champs prédéfinis.
P a g e | 50

« Exclure les lignes dont la balise d’email est vide » : permet d’exclure les
lignes qui ne seraient pas remplies par l’expéditeur de l’email que vous
recevrez.
« Envoyer cet email au format HTML » : comme son nom l’indique, ce
champ permet de recevoir le message sous format HTML. A priori, vous n’en
aurez pas besoin.
« Pièce jointes » : si vous avez demandé à votre internaute d’envoyer un
fichier, alors celui-ci sera joint à l’email que vous recevrez. Il vous faudra
ajouter le marqueur du champ de téléchargement du fichier présent sur
votre formulaire.
« Email (2) » : il permet de configurer un mail automatisé à destination de
vos collaborateurs ou de votre internaute. Vous pourrez le personnaliser en
indiquant sous combien de temps sa demande sera traitée et lui rappeler
l’objet de son message. Par exemple :

2. Le type de message envoyé à l’utilisateur en fonction d’un événement


spécifique
Nous allons maintenant définir les messages qui s’afficheront en fonction
d’événements spécifiques. Par exemple, un email mal renseigné, une url
incohérente, le non-remplissage de champs obligatoires…
P a g e | 51

Rendez-vous sur l’onglet « message » :

Personnaliser Contact Form 7


Nous allons maintenant revenir à la rubrique « formulaire » pour commencer
à créer le nôtre.

• Vous pouvez ajouter et supprimer des éléments, selon vos besoins.


Pour vous aider à démarrer, essayez avec ces boutons ci-dessous.

• L’étoile * indique qu’un champ est obligatoire.


• Lorsque vous êtes prêt, vous pouvez enregistrer vos modifications en
cliquant sur Sauvegarder dans le panneau de droite.
P a g e | 52

• Une fois que le formulaire est sauvegardé, un code court (en anglais on
parle de shortcode) sera affiché en haut. Il est surligné en bleu, et il
ressemble à ceci :

• Pour publier votre formulaire :


- Sélectionnez le shortcode et copiez-le
- Collez le shortcode dans la page, la publication ou le widget
où vous souhaitez que votre formulaire soit affiché.
Dans mon cas voilà :
P a g e | 53

Voici un peu ce que j’ai comme formulaire.

Donc comme je l’avais dis la configuration d’un thème diffèrent d’un thème à
un autre. De même il en a des thèmes d’une complexité de configuration que
d’autres. C’est pas pour vous faire peur mais juste pour vous avertir.
On ne fini jamais d’apprendre mes chers. Au jours le jours il faut se document,
le monde de l’informatique est en perpétuelle évolution.
Voilà, nous sommes déjà à la fin de notre cours sur Conception de site vitrine
avec WordPress. Pour ce cas typique, nous avons utiliser un thème typique
parmi tant d’autre.
Je suis parfais conscient que je ne vous ai pas tout montré dans le cas typique
de ce tome1 (Création de site vitrine). Une chose sur laquelle je sur sûr est
que j’essayerai dans les éditons suivante d’ajouter encore plus de notion en
ce qui concerne la création de site vitrine.

Vous aimerez peut-être aussi