TP 6 Installation et configuration d une site internet avec un CMS Illustration avec Wordpress Présentation du TP...1 I Installation du site localement...2 1 Base de données...2 2 Fichiers...2 3 Paramétrages de base...2 II Concepts et paramétrages de base...3 1 Zone publique et zone d administration...3 2 Paramétrage des éléments de base du site...3 2.1 Les différents menus...3 2.2 SYNTHESE...5 3 Les éléments de contenus...6 3.1 Les articles...6 3.2 Les pages...7 III Installer un site en ligne...9 1 Base de données...9 2 Logiciel de transfert de fichier - FTP...9 3 Paramétrages de base...10 Présentation du TP Le but de ce TP est d'apprendre à installer, paramétrer et gérér un site avec un CMS. Content Management System (CMS) : Vous pourrez utiliser ce type de site pour des besoins très variés : - pour des petites et moyennes entreprises : de simples sites vitrines à des sites de vente en ligne, - des sites communautaires, associatifs, - Notre allons essayer de l adapter à notre projet Lexicol. Les TP 3, 4 et 5 vous ont appris l essentiel. Un site Internet dynamique est composé : - de fichiers (ou scripts) qui gèrent la présentation et le fonctionnement. - d'une base de données qui gère le contenu dynamique. Nous verrons dans ce TP : - comment installer un CMS : localement puis sur un hébergement distant. - comment configurer un site wordpress. TSIG 2013-2014 TP6 Un site avec Wordpress Page 1
I Installation du site localement 1 BASE DE DONNEES Dans phpmyadmin, créer une base de données en utf8 et nommez là : wordpresspn où p est l initiale de votre prenom et n de votre nom. 2 FICHIERS Créez le dossier wordpresspn dans le dossier C:\...\wamp\www\SIG. Copier dans ce dossier le contenu du dossier wordpress38 que vous trouverez dans mes ressources dans le dossier programmes ou sur internet sur le site de wordpress : http://fr.wordpress.org/wordpress-3.8-fr_fr.zip Editer le fichier wp-config-sample.php, saisir les paramètres de la base de données et enregistrer le fichiers comme wp-config.php.!! bien renseigner la ligne $table_prefix = 'wppn_'; 3 PARAMETRAGES DE BASE Accéder au site avec un navigateur : http://127.0.0.1/sig/wordpresspn Donner les renseignements demandés : utiliser admin/admin pour le nom d utilisateur et le mot de passe. Choisir d installer Wordpress. L installation est terminée! Vous pouvez vous connecter. Observez la base de données et le contenu de certaines tables. TSIG 2013-2014 TP6 Un site avec Wordpress Page 2
II Concepts et paramétrages de base 1 ZONE PUBLIQUE ET ZONE D ADMINISTRATION Après votre première connexion observer la page qui s affiche : c est la partie administration du site. Accès au site public Utilisateur connecté Types de contenu Paramétrage du site Observer la partie publique du site. Barre d administration Utilisateur connecté 2 PARAMETRAGE DES ELEMENTS DE BASE DU SITE 2.1 Les différents menus Menu réglages Modifier le titre du site et son slogan. Dans permaliens, choisir «nom de l article». Qu est-ce que ça change? TSIG 2013-2014 TP6 Un site avec Wordpress Page 3
Menu Apparence Tester d autres thèmes pour votre site mais conserver le thème initial. Personnaliser votre thème : choisir des couleurs personnalisées et une image pour l entête. Menu Utilisateurs Modifiez votre profil et créer un utilisateur avec les paramètres suivants o Nom d utilisateur : eleve o Mot de passe : eleve o Email : eleve@gmai.com o Rôle : abonné Avec un navigateur différent, connectez-vous comme «eleve» : que pouvez-vous faire dans la partie administration? Qu est-il impossible de faire par exemple? Modifier le rôle de «eleve» avec le premier navigateur et observer les changements sur le second. Menu Extensions Supprimez les 2 extensions présentes par défaut. Installer puis activez l extension «tinymce Advanced». Dans Réglages > TinyMCE Advanced paramétrez l éditeur selon ce modèle : TSIG 2013-2014 TP6 Un site avec Wordpress Page 4
2.2 SYNTHESE TAF 1 Allez sur si24.org, connectez-vous et allez dans la catégorie Tutos-Wordpress de l Espace SIG. Vous pouvez aussi suivre ce lien : http://si24.org/vocabulaire-de-wordpress/. Choisir de modifier l article et complétez les définitions suivantes et les sauvegardant au préalable dans votre cours. A RETENIR (vocabulaire de Wordpress transposable à la plupart des CMS) Thème : Widget : Rôle : Extension : Q1. Que se passe-t-il si vous êtes plusieurs à vouloir modifier la page en même temps? Q2. Comparer avec les outils de google? Les rôles dans Wordpress TSIG 2013-2014 TP6 Un site avec Wordpress Page 5
3 LES ELEMENTS DE CONTENUS 3.1 Les articles Un article est le contenu de base dans un CMS de ce type : ils correspondent aux «posts» dans les systèmes simples de blog. Le menu article permet de : - lister les articles - ajouter des articles - définir des catégories et des mots clefs Commencez par ajoutez la catégorie «bac à sable» avec les paramètres suivants : Choisir de créer un article. Commencez par modifier les «options de l écran» pour afficher le résumé (extrait) et les paramètres de discussion. TSIG 2013-2014 TP6 Un site avec Wordpress Page 6
Définir votre premier article en remarquant les différents types de renseignements qu il est possible d indiquer. Votre thème permet de mettre certains articles en avant sur la page d accueil. Résumé de l article. Autoriser les commentaires. Affecter une catégorie. Rajouter le mot clef autoformation. Choisir une image. Validez et observer votre page d accueil. 3.2 Les pages Créer la page «Ma première page» comme pour un article et observer les changements sur la page d accueil. Q1. Quelle est la différence entre une page et un article? TSIG 2013-2014 TP6 Un site avec Wordpress Page 7
TAF 2 Complétez l article sur si24.org avec les définitions suivantes. A RETENIR (vocabulaire de Wordpress transposable à la plupart des CMS) Article : Page : TSIG 2013-2014 TP6 Un site avec Wordpress Page 8
III Installer un site en ligne Installer un site localement peut être utile pour avoir une version de test ou pour évaluer différents systèmes. Cependant, l objectif d un site internet est, le plus souvent, d être accessible depuis internet. Pour cela le plus simple est d acheter un espace chez un hébergeur de site. L hébergeur vous fournit : - un espace pour déposer les fichiers du site - une ou plusieurs base de données auxquelles vous pourrez accéder avec leur version de phpmyadmin. Nous allons reproduire les manipulations de la 1 ère partie mais sur un hébergement distant. Pour simplifier nous partirons d une version neuve de wordpress mais nous aurions pu exporter la configuration faite dans les parties 1 et 2. Je loue un espace chez OVH associé au nom de domaine si24.org. Vous allez disposer pour vos test ou pour vos projets d une base de données et d un espace dans lequel vous pourrez installer vos sites. 1 BASE DE DONNEES Aller sur la page : https://phpmyadmin.ovh.net/ Accéder à votre base chez OVH avec les paramètres suivants : Serveur : ****************** Utilisateur : **************** Nom de la base : *************** Mot de passe : **************** Vous n avez pas besoin de créer la base mais vous pourrez voir les tables créées par wordpress. 2 LOGICIEL DE TRANSFERT DE FICHIER - FTP Les fichiers du site ne seront plus sur votre poste. Il faut donc pouvoir accéder à l espace dans lequel vous copierez ces fichiers. Pour cela vous allez utiliser un logiciel de FTP (File Transfert Protocole). Un des plus connu est FileZilla. Il est très facilement installable. Ouvrir FileZilla présent sur vos postes. Créer un nouveau site : Fichier > Gestionnaire de Sites > Nouveau site Donner un nom à ce site : si24sig et saisir les paramètres FTP : TSIG 2013-2014 TP6 Un site avec Wordpress Page 9
Cliquer sur Connexion et observer l interface de Filezilla. Disque dur local Espace chez l hébergeur Créez un dossier wordpresspn au même niveau que le dossier lexicol. Copier dans ce dossier le contenu du dossier wordpress38 en vous dépalçant dans le répertoire dans la partie gauche de FileZilla. Il faut sélectionner les fichiers à copier et les déplacer vers la droite avec la souris. Modification d un fichier distant Vous devez editer le fichier wp-config-sample.php et saisir les nouveaux paramètres de la base de données puis l enregistrer sous le nom wp-config.php. Vous avez oublié de le faire au préalable. Suivez les étapes suivantes : 1. Selectionner dans la partie gauche le répertoire où vous allez mettre le fichier à modifier. 2. Rechercher dans la partie droite le fichier wp-config-sample.php. 3. Déplacez le dans le dossier de gauche. Le fichier est maintenant modifiable localement. 4. Saisir les informations sur la base de données sans oublier de définir le préfixe pour les tables!! C est vital ici car vous utilisez la même base de données : vos tables vont se distinguer par leur préfixe. 5. Déplacer le fichier modifié dans la partie droite de FileZilla à son emplacement d origine : vous confirmez le remplacement du fichier. 3 PARAMETRAGES DE BASE Accéder au site avec un navigateur : http://si24.org/stmg/wordpresspn Donner les renseignements demandés : utiliser admin/admin pour le nom d utilisateur et le mot de passe. Choisir d installer Wordpress. L installation est terminée! Vous pouvez vous connecter. Observez la base de données et le contenu de certaines tables. TSIG 2013-2014 TP6 Un site avec Wordpress Page 10
IV Paramétrage avancé du site Le vrai travail commence maintenant lorsque l on travaille avec un CMS. Il va consister à : Trouver une mise en forme qui vous convient : Il faut choisir un thème pour votre site. Il faut parfois modifier à la main certains fichiers du thème. Nous verrons ça plus tard dans l année. Définir et installer les fonctionnalités du site : Par défaut vous pouvez créer des articles/pages et gérer les commentaires. Nous voulons créer un site collaboratif, vous allez commencer par installer un Forum avec l extension bbpress. Nous voudrions aussi créer un lexique ou glossaire (glossary en anglais) : vous devez trouver des extensions, les tester et en choisir une. Pour réaliser ces différents travaux, vous travaillerez par groupe de 2/3 personnes et vous allez créer : un site accessible à l adresse : si24.org/stmg/nom_votre_site un document/rapport qui fera apparaître : les différentes étapes de création du site (vous pouvez reprendre des passages de ce TP), la procédure d installation/paramétrage de bbpress, une étude comparative des extensions permettant de créer un glossaire, la procédure d installation de cette extension. Ce document sera réalisé sur Google Drive. Vous me mettrez en partage dès sa création. C est surtout un document de travail qui vous permettra de ne pas oublier ce que vous avez fait. Pour réaliser ce travail vous pourrez utiliser sans modération : ce TP, internet, le forum sur le site si24.org, la liste de diffusion de la classe. TSIG 2013-2014 TP6 Un site avec Wordpress Page 11