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 :

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

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

Ecrivez dans le barre de recherche :
responsive boat
Choisissez le premier résultat ( avec l’image des buildings)

Cliquez sur le bouton Installer :

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

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

Commencer par créer la page : Galerie

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

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

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 :

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 :

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 :

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

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

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

et activez votre extension

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 :

Allez dans l’onglet
apparence => personnaliser

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 :
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.
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.
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.
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

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

Pour l’instant notre site ressemble à ça avec nos modifications :
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 :

« 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 :
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 :

Et voici le résultat pour le deuxième ruban :
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 :

Et vous devriez avoir ce résultat :
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 :
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 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

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.

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 :
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 :
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 :

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

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

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 **