Prérequis

Etre à l'aise sur un ordinateur windows ou un mac.

L'auteur

image formatrice audrey arrot

Audrey ARROT

Graphiste Freelance

COURS 1 : Découverte de Wordpress en local


en tete wordpress cours 1

 

 

LES OBJECTIFS :
Savoir installer WordPress en local, naviguer dans le tableau de bord de WordPress, savoir personnaliser un thème simple, savoir changer les paramètres du site, comprendre les extensions / plugins sur WordPress

PUBLIC VISE : Tout utilisateurs qui souhaitent se former sur Wordpress

 

 

PROGRAMME

 

1.1 Introduction Wordpress

Aujourd’hui les CMS sont les plus utilisés dans le domaine du web. 70% des sites dans le monde utilisent WordPress. Ce cours d’initiation va vous permettre de mieux comprendre le fonctionnement de ce fameux CMS. Une fois ce cours assimilé vous pourrez créer votre site internet en local en utilisant un thème et en configurant les paramètre sous WordPress. Ce cours vous montre comment utiliser WordPress sur un serveur local, l’interface est la même que sur un serveur en ligne cependant la manipulation pour mettre un site WordPress en ligne ne sera pas expliquée dans cette initiation.

Exemple d'utilisation wordpress'

Etapes d'installation de Wordpress en local


Installation visuel wordpress'

Installation du serveur en local

Pour que WordPress puisse fonctionner vous devez tout d’abord installer un serveur local sur votre ordinateur. Il en existe plusieurs, par exemple sur Windows vous avez ( easy PHP, wamp, Uwamp, Caddy…) sur mac ( mamp ).
Ici nous allons installer un WordPress sur un système Windows cependant il y aura des indications pour Apple. Vous verrez que l’installation est pratiquement la même pour les deux systèmes.

Pour PC Windows

Commençons par télécharger Easy PHP ici :

Télécharger easy php

Suivez les instructions pour l’installation. Il s’agit d’une installation simple et basique n’ayez crainte.
Le dossier qui va nous intéresser dans la dernière version d’Easy PHP est web Project c’est la que nous allons copier le dossier WordPress.

Noter que sur les autres serveurs type Wamp, le dossier important est le www. Maintenant lancer les serveurs et vérifier que Easy PHP est opérationnel comme ci dessous :

Easy php fonctionnement

Pour Mac Apple

Commençons par installer Mamp Ici

Suivez les instructions pour l’installation. Il s’agit d’une installation simple et basique n’ayez crainte.
Le dossier qui va nous intéresser dans Mamp est htdocs c’est la que nous allons copier le dossier WordPress.

Maintenant lancer les serveurs et vérifier que Mamp est opérationnel comme ci dessous :

mamp fonctionnement mac

Copie du dossier WordPress sur le serveur local
Une fois votre serveur local installé rendez vous sur le site

et cliquez sur le bouton bouton installation wordpress

Une fois le téléchargement de votre fichier .zip terminé , dézipper le et copier le dossier Wordpress ( et non le dossier wordpress 4.8.2) dans le dossier
Pour PC Windows => web project ou www

Pour Mac Apple => htdocs

1.1 Lancer l’installation

Ouvrez ensuite une page web et taper dans l’url : localhost
Vous devriez avoir cet écran (ci-dessous) cliquez alors sur wordpress
localhost dossier wordpress

1.3 Lancer l’installation Ouvrez ensuite une page web et taper dans l’url : localhost Vous devriez avoir cet écran (ci-dessous) cliquez alors sur wordpress

Vous allez ensuite suivre l’installation de wordpress , commencez par cliquez sur : c’est parti !
etape 1 installation wordpress

Nous arrivons maintenant à la première étape ci dessous ou wordpress nous demande le nom de la base de donnée :

etape 1 installation wordpress

1.1 Création de la base de données pour wordpress

Pour l’instant nous n’avons pas créer de base de données nous allons donc la créer. Pour cela nous allons utiliser phpmyadmin

Sur windows :

Ouvrez un onglet et taper dans l’url : http://127.0.0.1:8888/home

Cliquez ensuite sur php my admin 3.3.9

php my admin windows

Sur mac apple :

Ouvrez mamp et cliquez sur : ouvrir la page web start

web start mamp interface mac

Cliquez ensuite sur le lien en bleu : phpmyadmin

Que ce soit sur windows ou mac vous allez arrivez sur cette interface de phpmyadmin :

php my admin mamp interface mac

Cliquez ensuite sur le lien en bleu : phpmyadmin
Que ce soit sur windows ou mac vous allez arrivez sur cette interface de phpmyadmin :

php my admin interface

Vous allez ensuite cliquez sur : nouvelles base de données dans la colonne à gauche
Et vous allez remplir le nom de la base de données par exemple nous allons mettre : test-wordpress
Et ensuite vous choississez l’encodage de votre base de données par défault régler sur interclassement , vous pouvez laisser comme ça ou changer, le plus courant est l’encodage utf general ci Une fois que s’est fait cliquez sur créer et vous pouvez voir votre base de donnée sur la colonne gauche

php my admin interface base de données

1.1 Revenons à l’installation

Nous pouvons maintenant continuer l’installation :
etape 3 installation wordpress

Nom de la base de donnée : mettez le nom que vous venez de mettre sur phpmyadmin nous se sera : wordpress-test

Identifiant : en local se sera généralement root, mettez root
Mot de passe : sur windows il n’y en aura pas, sur mac mettez root
Adresse de la BDD : laissez localhost
Et le préfixe des tables laissez wp_
Cliquez sur envoyer

etape 4 installation wordpress

A vous de remplir les informations nécessaires, titre du site, identifiant, mot de passe, mail…

etape 5 installation wordpress

Bravo l’installation a réussi !

Vous n’avez plus qu’a vous connecter :

etape 6 installation wordpress

1.1 Installer un Template simple et le personnaliser sur WordPress

Le but de cet exercice est de personnaliser un thème simple sur wordpress. Nous allons prendre le cas d’une agence de voyage : Tropical voyage. Télécharger les ressources images pour ce tutoriel.
Tout d’abord voici un aperçu du tableau de bord de wordpress :

tableau de bord wordpress

I A : nom du site, aperçu du site I B : Tableau de bord I C : outils de gestion de wordpress I D : dernière mises à jours à effectuer I E : Nom d’utilisateur, paramètres de compte

Installation du thème

Pour commencer, nous allons commencer par installer le thème Responsive Boat pour cela allez dans l’onglet apparence => thème

 apparence thème wordpress

Et cliquez sur ajouter en haut ou sur le bouton en bas ajouter un thème
 ajouter un thème wordpress

Ecrivez dans le barre de recherche : responsive boat

Choisissez le premier résultat ( avec l’image des buildings)
 ajouter le thème responsive boat wordpress

Cliquez sur le bouton Installer :  ajouter un thème bouton installer wordpress

Vous pouvez si le désirer avoir un aperçu du thème avant de l’installer en cliquant sur aperçu
Une fois le thème installé cliquer sur activer pour le mettre en service  bouton activer un thème wordpress

Votre thème est maintenant activé. Nous allons poursuivre en créant les différentes pages de notre site internet, elles vont ensuite se retrouver en onglets pour notre menu.

Création des pages

Pour cela rendez vous dans la palette d’outil à gauche (zone C ) et cliquez sur pages => ajouter

 ajouter une page wordpress

Commencer par créer la page : Galerie
 ajouter une page galerie sur wordpress

Indiquez Galerie pour le titre, vous pouvez ensuite si vous le souhaitez changer l’adresse de votre permalien, il s’agit de votre futur URL pour votre page. Vous pouvez ensuite ajouter du texte et des images dans la zone blanche en dessous. Pour ajouter des images il faudra cliquez sur ajouter un média. Dans l’encadré à droite vous avez différentes informations comme l’état (si votre page est actuellement publié ou non) la visibilité...
Pour publier votre page il faudra cliquez sur le bouton bleu Publier.
Quand vous viendrez modifiez votre page par la suite le bouton s’intitulera Mettre à jour.

Répétez l’opération pour une page Hôtels et une page Séjours.

Création du menu

Sur wordpress les pages sont liées au menu. Nous allons donc nous occuper du menu. Pour cela aller dans l’onglet apparence => menus

 les menus sur wordpress

Sur l’encadré de gauche vous allez retrouvez vos pages

 les menus sur wordpress

Pour les ajouter au menu, sélectionner tout et cliquez sur le bouton ajouter au menu

Nous allons aussi rajouter un onglet menu pour pouvoir accéder à la page d’accueil facilement. Au lieu de créer une page en plus nous allons créer un lien personnalisé.

Allez dans liens personnalisés :

 les menus liens personnalisés sur wordpress

Dans l’adresse web tapez l’URL de votre page d’accueil et cliquez sur ajouter au menu.
Vous vous retrouvez ensuite avec votre menu ainsi :

 les menus sur wordpress

Vous pouvez réorganiser les onglets à votre convenance et sachez que vous pouvez faire des menus déroulant en déplaçant les onglets vers la droite comme ci après :

 les menus déroulant sur wordpress

Mais dans notre cas il n’y aura pas de menu déroulant.
Votre menu est opérationnel, cliquez sur enregistrer le menu.

Installation des extensions / pluggins

Sur wordpress certains thèmes ont besoins d’extensions / pluggins pour fonctionner correctement. Les extensions / pluggins sont des modules tierces qui viennent se greffer à votre thème WordPress et qui apportent des améliorations diverses et variées.

Pour notre thème Responsive boat il faut installer l’extension Orbit Fox Companion

Pour cela allez dans l’onglet extension => ajouter

 ajouter une extension / un pluggin wordpress

Entrez dans la zone de recherche : Orbit fox companion et cliquer sur installer

 plugin orbit fox companion sur wordpress

Retournez ensuite dans l’onglet extension => extensions installées

 extensions installées sur wordpress

et activez votre extension

 activer des extensions  sur wordpress

L’extension est activée nous pouvons commencer à personnaliser notre thème.

Personnaliser le thème

Nous allons commencer à modifier l’apparence de notre site. Avant ça ouvrez un second onglet dans votre navigateur avec le site pour cela allez dans le lien tropical voyage avec la maison en haut à gauche de l’écran et cliquez sur aller sur le site :

 voir mon site sur wordpress

Allez dans l’onglet apparence => personnaliser

 personnaliser mon site sur wordpress

Vous arrivez sur cette interface. A gauche vous avez tous les onglets que vous pouvez modifier et à droite un aperçu de votre site.

Vous pouvez cliquez sur les petits pictogrammes en forme de crayon pour modifier directement et facilement.

Vous pouvez tester le responsive de votre site grâces aux icones ( ordinateur, tablette et smartphone) en bas de la colonne de gauche. Chaque thème à sa propre manière de fonctionner.

Penser a cliquer souvent sur :
 enregistrer et publier sur wordpress

Page d’accueil statique

Pour s’assurer que la page d’accueil s’affiche comme le Template (avec les animations et parallaxe) et non comme le modèle standard de page d’accueil, nous allons allez dans l’onglet page d’accueil statique et cocher les derniers articles.

 afficher derniers articles sur wordpress

Identité du site

Nous allons commencer par configurer l’identité du site. Cliquez sur l’onglet identité du site. Vous pouvez ajouter votre logo, modifier le titre du site, ajouter un slogan et changer l’icône de site que vous allez trouver à côté de votre onglet.

 identité du site sur wordpress

 identité du site sur wordpress

Vérification du menu

Nous allons vérifier si le menu qu’on as préalablement réglé fonctionne bien avec le thème. Pour cela aller dans l’onglet menu et vérifier que le menu est bien réglé sur menu principal sinon modifier.  menus sur wordpress

Section de la page d’accueil

Nous allons maintenant modifier l’arrière plan ,créer un effet parallaxe et modifier le gros titre. Pour cela aller dans l’onglet section de la page d’accueil => section de gros titres => contenu principal on va modifier les informations du header

 effet parallaxe wordpress

 effet parallaxe wordpress

On s’occupe maintenant de l’effet parallaxe en allant dans section de la page d’accueil => section de gros titres => effet parallaxe

Ajouter l’arrière plan avec les palmiers en image 1 et la fille en image 2

 effet parallaxe wordpress

Pour l’instant notre site ressemble à ça avec nos modifications :

 aperçu responsive boat modifié wordpress

Section objectifs

Nous allons continuer nos modifications sur la page d’accueil avec la section objectifs, vous la trouverez dans section de la page d’accueil => section nos objectifs ou bien cliquez sur les crayons.

On peut voir que notre extension orbit fox companion à généré 4 widgets :

 section objectifs responsive boat wordpress

« Un widget WordPress est un élément que vous pouvez glisser/déposer au sein de zones prédéfinies dans votre template de site. Vous disposez de nombreux widgets (calendriers, derniers articles…). Certains apparaissent parmi la liste une fois que vous avez activé une extension WordPress (plugin) ici grâce à orbit fox companion. Un widget est donc un peu comparable à une application que vous ajoutez sur votre smartphone. » source : https://creersonsite.net/vocabulaire-internet/definition-widget/

Mettez-en titre : Nos services
En sous titre : Tropical Voyage vous propose différentes prestations

Changer l’image en mettant les pictogrammes fournis, et mettez les titres suivants auw widgets :

Widget 1 : Rôle conseil
Widget 2 : Organisateurs
Widget 3 : Activités
Widget 4 : Hôtels

Vous devriez avoir ce résultat :

 section objectifs responsive boat wordpress

Rubans

Nous allons maintenant nous occuper des rubans du template, pour les trouvez allez dans : Sections de la page d’accueil => sections ruban

Bouton bas du ruban :

Mettez en texte : nous rencontrer
Label bouton : Entrez en contact
Bouton droit du ruban :

Mettez en texte : Voir nos offres
Label bouton : Voir les séjours
Pour les deux rubans entrer les liens que vous voulez.

Nous allons ajouter un fond tropical en arrière plan pour cela allez dans : options avancées => image d’arrière plan et ajouter le fond tropical

Vous devriez avoir ce résultat pour le premier ruban avec un effet parallaxe :
 ruban 1 responsive boat wordpress

Et voici le résultat pour le deuxième ruban :
 ruabn 2 responsive boat wordpress

Section à propos de vous

Nous allons maintenant nous occuper de la section à propos de vous, on suit l’ordre du template tout simplement.
Aller sur l’onglet section à propos de vous .
Remplissez :

Titre : à propos de nous
Sous titre : Une agence de voyage basée sur Annecy
Texte : laisser le lorem ipsum
Ajouter la photo fournie
Vous pouvez aussi modifier les logos des partenaires avec les crayons si vous le souhaitez :

 logo a propos responsive boat wordpress

Et vous devriez avoir ce résultat :

  a propos responsive boat wordpress

Section Notre équipe

Nous allons passer à la description de notre équipe pour cela aller dans section de page d’accueil => section notre équipe

Mettez en titre : Notre équipe
Sous titre : Nous vous présentons notre équipe

Vous constatez que grâce à notre extension orbit fox companion nous avons 4 widgets :

Widget 1 : Audrey Viret
Community manager Tropical Voyage
Description : laisser le lorem ipsum

Widget 2 : Lucas Weiss
Blogueur Tropical Voyage
Description : laisser le lorem ipsum

Widget 3 : Mélodie Dilard
Conseillère Tropical Voyage
Description : laisser le lorum ipsum

Widget 4 : Nathan Carp
Commercial Tropical Voyage
Description : laisser le lorem ipsum

Sachez que vous pouvez aussi modifier les liens sur les réseaux sociaux.

Vous devriez avoir ce résultat :

  equipe responsive boat wordpress

Section Témoignage

Nous allons passer à la section témoignage clients, pour cela aller dans section de la page d’accueil => section témoignage. Ici aussi notre extension Orbit fox companion à mis des widgets. Mettez en titre : Témoignages et amusez vous à modifier les contenus des widgets.

  section témoignage responsive boat wordpress

Section Nouveauté

Nous passer à la section nouveauté et nous allons la compléter grâces à des articles.
Vous allez enregistrer et quitter la personnalisation du template pour revenir sur le tableau de bord de wordpress. Aller ensuite dans articles => ajouter

  ajouter un article wordpress

Article 1 :

Titre : Hôtel Bokayu le luxe à votre portée
Description : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. Mauris vel nunc at ipsum fermentum pellentesque quis ut massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas non adipiscing massa. Sed ut fringilla sapien. Cras sollicitudin, lectus sed tincidunt cursus, magna lectus vehicula augue, a lobortis dui orci et est.

  ajouter un article wordpress

Pensez bien à mettre une image mise en avant pour que votre article s’affiche bien dans la section nouveauté avec un visuel.
Maintenant à vous de jouer, voici le résultat que vous pourriez obtenir :

  ajouter un article wordpress

 section nouveauté wordpress

Footer du site

Nous finir la personnalisation de la page d’accueil du template avec les zones de pied de page (footer).
Pour cela aller dans l’onglet option du pied => contenu du pied

Copyright de pied de page : Tropical Voyage 2017
Adresse : 24 rue parmentier 74000 ANNECY
Adresse de contact : contact@tropicalvoyage.com
Tel : 06 00 00 00 00
Vous pouvez aussi modifier les réseaux sociaux si vous le souhaitez.

Voici le résultat :

  footer wordpress

Les shortcodes

Dernière précision, sur wordpress vous avez la possibilité d’utiliser des shortcodes, il s’agit d’un code allégé à mettre dans la description de vos pages ou de vos articles et une action se produit. Par exemple vous avez installer une extension pour gérer une galerie, vous avez fait cette galerie et un shortcode vous ai donné. Vous n’avez plus qu’a aller sur votre page Galerie et à copier le shortcode dans la description pour que votre galerie s’affiche. Les shortcodes sont généralement entouré par des crochets par exemple : [findphoto travel]

Page d’accueil finie

Nous avons fini la personnalisation de notre page d’accueil. Evidemment nous n’avons pas tout utilisé les onglets dans la personnalisation, vous avez vu ici les bases pour créer une jolie page d’accueil à vous de fouiller dans les paramètres de personnalisation ! Il faut être curieux sur wordpress ! A savoir : Généralement dans un template la page d’accueil possède des animations , un visuel sympa et même parfois un effet parallaxe cependant lorsque vous allez dans les pages de votre menu la disposition change complétement, en effet wordpress à un modèle de page prédéfinis si vous voulez le modifier il faudra entrer dans le code HTML CSS.

1.7 Cas pratique

Pour voir si vous avez bien compris les différentes possibilités sous wordpress vous allez devoir :
Sur la page Galerie
- Installer une extension qui permet de mettre en place une galerie de ce genre :

  pluggin galerie wordpress

et vous allez devoir créer cette galerie en utilisant un shortcode dans votre page galerie

Sur la page Hôtels

- Mettre en avant les hôtels que la compagnie de voyage propose avec le lien des sites des hôtels voici le contenu à intégrer dans votre page hôtels :

- Tropical Voyage vous propose désormais ses hôtels
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est

NOUVEAUTE : HOTEL TWIKII **
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est
SITE DE L’HOTEL

  hotel bokayu wordpress

NOUVEAUTE : HOTEL BOKAYU *****

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est
SITE DE L’HOTEL

  hotel bokayu wordpress

Sur la page Séjours

- Mettre en avant les différents séjours que Tropical voyage propose voici le titre des séjours à vous de trouver une description et une image :
• Khai Nok en thailande
• Bora Bora à thaiti
• Les seychelles
• Ile de la réunion en France

Si vous voulez vous entraîner seul sur une page d’accueil avec le template responsive boat
- Créer le site de l’hôtel ***** Bokayu
- Créer le site de l’hôtel Twikii **

 

RESSOURCES TUTO

Télécharger les images pour le tuto

Je télécharge les images exercice

Contact

SARL AAT's

N° SIREN : 822580056 - N° TVA intracommunautaire : FR40822580056