Download - CIM4A13C Communication numérique
![Page 1: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/1.jpg)
Définition, conception et réalisation d’un site web à l’aide du CMS Wordpress
© Gaël Vilpoix - 2014
1
![Page 2: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/2.jpg)
Maîtriser la chaîne technique de la création de sites avec un CMS
• I. Présentation du portail « Semiolearn »
• Hébergement des sites
• Ressources
• Planning
© Gaël Vilpoix - 2014 2
![Page 3: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/3.jpg)
Maîtriser la chaîne technique de la création de sites avec un CMS
• II. Installation & Configuration d’un serveur Wordpress
• Installation WAMP (« Windows Apache Mysql Php »)
• Installation de PhpMyAdmin
• Création de la base de données
• Installation de Wordpress
• Configuration du site
© Gaël Vilpoix - 2014 3
![Page 4: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/4.jpg)
Maîtriser la chaîne technique de la création de sites avec un CMS
• II. Installation & Configuration d’un serveur Wordpress
• Installation WAMP (« Windows Apache Mysql Php »)
• http://www.wampserver.com/
• Autre Packages : - LAMP : Linux Apache MySQL PHPMAMP : Macintosh Apache MySQL PHP
© Gaël Vilpoix - 2014 4
![Page 5: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/5.jpg)
Installation WampServer
WampServer est une plate-forme de
développement Web sous Windows
pour des applications Web
dynamiques à l’aide du serveur
Apache2, du langage de scripts PHP
et d’une base de données MySQL. Il
possède également PHPMyAdmin pour
gérer plus facilement vos bases de
données.
© Gaël Vilpoix - 2014 5
![Page 6: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/6.jpg)
© Gaël Vilpoix - 2014 6
![Page 7: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/7.jpg)
Choisir le lieu de destination de
l’installation du serveur WAMP
(Par défaut c:\wamp)
© Gaël Vilpoix - 2014 7
![Page 8: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/8.jpg)
© Gaël Vilpoix - 2014 8
![Page 9: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/9.jpg)
© Gaël Vilpoix - 2014 9
![Page 10: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/10.jpg)
Choisir le navigateur par défaut qui
sera utilisé par WAMP.
© Gaël Vilpoix - 2014 10
![Page 11: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/11.jpg)
Ce message survient si vous
réinstaller wamp, répondre « oui »
par défaut.
© Gaël Vilpoix - 2014 11
![Page 12: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/12.jpg)
A remplir seulement si vous allez
utiliser une fonction mail() lors d’un
développement.
© Gaël Vilpoix - 2014 12
![Page 13: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/13.jpg)
L’installation de wamp est terminée !
© Gaël Vilpoix - 2014 13
![Page 14: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/14.jpg)
Vérification de l’installation et des
services :
Icône Wamp : Rouge – Erreur
Jaune – Offline
Vert - Online
Test Port 80
© Gaël Vilpoix - 2014 14
![Page 15: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/15.jpg)
© Gaël Vilpoix - 2014 15
![Page 16: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/16.jpg)
Saisir « Localhost » sur un navigateur.
Apparaît l’accueil de votre serveur.
Absence de « Projets » .
© Gaël Vilpoix - 2014 16
![Page 17: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/17.jpg)
Copier le dossier « Wordpress »
préalablement téléchargé sur le site
dans le dossier www de votre
installation wamp.
Le renommer avec le nom de votre
site .
© Gaël Vilpoix - 2014 17
![Page 18: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/18.jpg)
Création de la base de données
http://localhost/phpmyadmin
localhost/phpmyadmin
© Gaël Vilpoix - 2014 18
![Page 19: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/19.jpg)
Saisir le nom de la base.
Créer.
© Gaël Vilpoix - 2014 19
![Page 20: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/20.jpg)
Installation de Wordpress
© Gaël Vilpoix - 2014 20
![Page 21: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/21.jpg)
Saisir le nom de la base que vous
avez préalablement créée dans
Phpmyadmin.
Saisir le login et le mot de passe de
l’utilisateur MySQL pour valider la
connexion.
© Gaël Vilpoix - 2014 21
![Page 22: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/22.jpg)
© Gaël Vilpoix - 2014 22
![Page 23: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/23.jpg)
Création du site et de
l’utilisateur Wordpress
(différent de l’utilisateur
Phpmyadmin)
© Gaël Vilpoix - 2014 23
![Page 24: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/24.jpg)
© Gaël Vilpoix - 2014 24
![Page 25: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/25.jpg)
© Gaël Vilpoix - 2014 25
![Page 26: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/26.jpg)
A modifier si vous avez changer
le nom du dossier dans
c:\wamp\www
© Gaël Vilpoix - 2014 26
![Page 27: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/27.jpg)
Changement des permaliens
A définir selon l’utilisation de votre
site.
© Gaël Vilpoix - 2014 27
![Page 28: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/28.jpg)
Maîtriser la chaîne technique de la création de sites avec un CMS
• III. Installation d’un Modèle (« Template »)
• Recherche du Template
• Installation du Template
• En Local
• En Ligne
© Gaël Vilpoix - 2014 28
![Page 29: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/29.jpg)
Cliquer sur « Ajouter » à partir du
CMS pour télécharger un template
directement de Wordpress.com
© Gaël Vilpoix - 2014 29
![Page 30: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/30.jpg)
Installation par FTP (FileZilla)
Saisir le nom de l’Hôte, l’identifiant
et le mot de passe.
© Gaël Vilpoix - 2014 30
![Page 31: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/31.jpg)
En cas d’erreurs, vérifier les
permissions d’écriture du dossier
c:/wamp/www/site/wp-content
© Gaël Vilpoix - 2014 31
![Page 32: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/32.jpg)
Vous pouvez désormais activer le
nouveau thème installé.
© Gaël Vilpoix - 2014 32
![Page 33: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/33.jpg)
Installation d’un thème personnalisé
© Gaël Vilpoix - 2014 33
![Page 34: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/34.jpg)
Copier le dossier téléchargé dans :
C:/wamp/www/site/wp-
content/themes
© Gaël Vilpoix - 2014 34
![Page 35: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/35.jpg)
Le Template apparaît.
© Gaël Vilpoix - 2014 35
![Page 36: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/36.jpg)
Maîtriser la chaîne technique de la création de sites avec un CMS
• IV. Utilisation des extensions (« plugins »)
• Contenu multimédia (images, vidéos, …)
• e-commerce (boutique en ligne, bannières publicitaires…)
• Réseaux sociaux
• Search engine optimization : SEO
• Sites multilingues
• Participation communautaire (forums, votes, tchat, …)
• Statistiques (fréquentation, pages « vues »…)
• Fonctionnalités Intranet (Calendrier…)
• Diffusion d’une newsletter, d’un catalogue
• Création et gestion d’annuaires
© Gaël Vilpoix - 2014 36
![Page 37: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/37.jpg)
Maîtriser la chaîne technique de la création de sites avec un CMS
• V. Migration & Hébergement
• Comment récupérer son site
• Les données
• Utilisation de FileZilla
• La base de données
• Exporter sa base
• Importer sa base
• Comment corriger les liens rompus
© Gaël Vilpoix - 2014 37
![Page 38: CIM4A13C Communication numérique](https://reader033.vdocuments.site/reader033/viewer/2022052906/5589365ed8b42a3e398b4731/html5/thumbnails/38.jpg)
Maîtriser la chaîne technique de la création de sites avec un CMS
• VI. Ressources
• Portail : http://semiolearn.msh-paris.fr/
• Liens utiles :
• Site Officiel : https://fr.wordpress.org/
• Thèmes : http://themeforest.net/category/wordpress
• Thèmes : https://wordpress.org/themes/
• Plugins : https://wordpress.org/plugins/
• Cours en ligne : http://fr.openclassrooms.com/
© Gaël Vilpoix - 2014 38