COURS 1 : Découverte de Wordpress en local

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.

Etapes d'installation de Wordpress en local




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 :



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 :



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

et cliquez sur le bouton

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


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 !


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



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



Sur mac apple :

Ouvrez mamp et cliquez sur : ouvrir la page web start



Cliquez ensuite sur le lien en bleu : phpmyadmin

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



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



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



1.1 Revenons à l’installation

Nous pouvons maintenant continuer l’installation :


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



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



Bravo l’installation a réussi !

Vous n’avez plus qu’a vous connecter :

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