La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Utiliser un CMS: Wordpress Annie Danzart

Présentations similaires


Présentation au sujet: "Utiliser un CMS: Wordpress Annie Danzart"— Transcription de la présentation:

1 Utiliser un CMS: Wordpress Annie Danzart

2 Wordpress Concevoir un site web statique Concevoir un site web dynamique Choisir un hébergement Choix du CMS Wordpress: installation Wordpress : le front office WordPress: le back office, les thèmes, les widgets, les utilisateurs Le blog : les articles Le CMS : les pages statiques, sous-pages, modèles, structuration Intégration de php et mysql Travail demandé

3 Concevoir un site web statique À partir de rien –Page web (html, navigation, survols, composants) –Avec un éditeur wysiwyg (dreamweaver, frontpage, Komposer) –Aide interactive (http://htmlplayground.com/)http://htmlplayground.com/) … mais avec des générateurs –Boutons, choix de couleurs, mise en page CSS, menusBoutonsmenus À partir de modèles –Opensource webdesign, open web designOpensource webdesignopen web design Mise en ligne (hébergement, ftp, via léditeur local)

4 Concevoir un site web dynamique Hébergé ou à héberger soi-même Blog –Wordpress, Typepad, Dotclear, BloggerBlogger Wiki –Mediawiki, wikini Sites –Google sites, sitekreatorGoogle sitessitekreator CMS –Spip, joomla, Typo3, …

5 Hébergement dun site Hébergeur: –particulier ou professionnel: serveur web connecté en permanence Contraintes –Stockage dau moins 100Mo, accès ftp, base de données, php Nom de domaine –En rapport avec la ligne éditoriale, disponibilité Hébergeurs: –1and1.fr, ovh.com1and1.frovh.com –Gratuits: free.fr, orilla.netfree.frorilla.net

6 Choix dun CMS Y-a-t-il un numéro 1 ? (http://www.webdesignerdepot.com/2009/01/how-to-choose-the-right-cms/) Comparatif (http://cmsmatrix.org)Comparatif (http://cmsmatrix.org) Un CMS (Content Management System) –Base de données –Scripts côté serveur –Authoring –Droits –Multimédia –Publication

7 Wordpress: installation à Télécom-ParisTech Sur votre compte unix –Télécharger wordpress dans votre répertoire public_html –Linstaller avec vos paramètres: Dupliquer le fichier wp-config-sample.php Appeler cette copie wp-config.php Editer ce fichier et le modifier comme suit: –Serveur mysql: mysql.infres.enst.fr:3307 –Base de données: carten° –Login: MMn° –Mot de passe: median° –Se connecter au programme wordpress:

8 Wordpress: Sites des projets Sur votre compte unix –Télécharger wordpress dans votre répertoire public_html sous un répertoire dédié :projet –Y installer wordpress avec vos paramètres: Dupliquer le fichier wp-config-sample.php Appeler cette copie wp-config.php Editer ce fichier et le modifier comme suit: –Serveur mysql: mysql.tp.enst.fr:3307 –Base de données: projetn° (de 1 à 4 selon votre groupe) –Login: groupen° (de 1 à 4) –Mot de passe: median° (de 1 à 4) –Se connecter au programme wordpress:

9 Wordpress: installation à Télécom-ParisTech Changer les droits –Lancer le programme putty –Se déplacer dans le répertoire public_html cd public_html –Changer les droits des fichiers et répertoires chmod –R 755 wordpress chmod –R 644 wordpress/*.*

10 Wordpress: fin de linstallation Installation de wordpress –Connexion après installation (admin, mot de passe) –Modifier les informations pour admin nom, prénom, pseudo, nouveau mot de passe –Mettre à jour le profil Nom affiché publiquement –Retour sur le site: page par défaut Remarque: –on peut aussi mettre tous les fichiers à la racine du site si cest sa seule vocation

11 Wordpress: le frontoffice Le blog: –Espace de publication personnel permettant de diffuser du contenu sur un espace réservé –Espace de communication: information + commentaires –Ligne éditoriale en fonction du lectorat ciblé –Système de publication de post: le dernier article publié apparaît en premier Le CMS –Mise en place de pages fixesMise en place de pages fixes Dans les deux cas: –Moteur de recherche, Archives, Commentaires, Mots-clés

12 Wordpress: le backoffice Wp-admin: le tableau de bordle tableau de bord –Login, mot de passe –Gestion des articles: modification, publié, date de publication, mots-clés, catégorie, extrait, auteur –Gestion des pages: modification, modèle, hiérarchie –Apparence –Notation, commentaires –Vidéos, médias –Zone de recherche –Gestion des langues –Affichage des visites, référencement

13 Wordpress: le backoffice Le tableau de bord –Gestion des articles, des pages Gestion des utilisateurs: –Abonné: peut laisser des commentaires –Contributeur: peut en plus soumettre un article à la publication –Auteur: peut en plus publier ses articles et les gérer. Peut aussi soccuper de la gestion des commentaires déposés sur ses propres articles –Editeur: peut en plus gérer tous les articles et tous les commentaires du site ainsi que la blogoliste (liens vers vos amis) –Administrateur: peut tout faire: gérer la base de données, les thèmes, les pluggins, …

14 Backoffice : gestion des utilisateurs Liste des utilisateurs avec leurs login, nom, prénom, rôle Ajouter un nouvel utilisateur –Tous les types dutilisateur peuvent accéder à leur profil personnel et le changer Le tableau de bord se présente différemment selon le rôle On peut proposer aux utilisateurs de senregistrer eux-mêmes –Apparition dun bouton dinscription sur la page didentification –Dépôt de commentaire uniquement aux abonnés –Réglage, discussion : « un utilisateur doit être enregistré et connecté pour publier ses commentaires »

15 Backoffice : les thèmes Présentation personnalisée –Des dizaines de thèmes disponibles sur internet –Wordpress.orgWordpress.org –Niss.frNiss.fr –Exemples: videonoob.fr, fran6art.comvideonoob.frfran6art.com –Téléchargement dans wordpress/wp-content/themes/ –Vérifier et modifier éventuellement les droits de ce répertoire Freeminders.org Installer un thème, mise en service: Apparence Modifier un thème Créer des sous-thèmes Les widgets

16 Backoffice : les widgets Les widgets sont des fonctions quon peut placer dans les composants de la page En général, elles apparaissent dans les barres verticales Plusieurs sont présentes par défaut: –Rechercher –Nuage de mots-clés –Recherche dans les billets par catégories Ajouter une widget –Tableau de bord « apparence », « widgets » –Choisir celle quon veut ajouter –La faire glisser dans la zone souhaitée –Valider –Cest tout Dautres widgets sont disponibles

17 Backoffice : Le blog, rédiger un billet Press minute Nouvel article, modification, suppression –Titre –Contenu: éditeur wysiwyg Taper du texte Le sélectionner Choisir dans les boutons le mode de représentation (liste, couleur, ancre, …) –Catégorie (articles) –Mots-clés –Commentaires ? « autoriser les commentaires » par défaut –Aperçu avant publication –Par défaut, les articles seront enregistrés comme brouillons En attente de lecture publier

18 Backoffice : Le CMS, rédiger une page Nouvelle page, modification, suppression, pages statiques –Titre –Contenu: éditeur wysiwyg Taper du texte Le sélectionner Choisir dans les boutons le mode de représentation (liste, couleur, ancre, …) Ajouter un lien Ajouter une image, un media –Mots-clés –Commentaires ? « autoriser les commentaires » par défaut –Aperçu avant publication –Par défaut, les articles seront enregistrés comme brouillons publier

19 Backoffice : Le CMS, rédiger une page Ajouter une image –Créer un répertoire dimages dans le site de wordpress –Copier localement les images à afficher –Leur donner les bons droits –Dans linterface de création/modification dune page: Choisir linsertion dune image Sélectionner le fichier dimage Lui donner les caractéristiques daffichage valider

20 Backoffice : Le CMS, personnaliser les pages Création dun template –Le fichier page.php –Créer un fichier page2.php copie modifiée de page.php et y ajouter –Modifier ce template –Créer une nouvelle page statique dans linterface de gestion –Un menu de choix de template apparaît –Choisir le nouveau

21 Backoffice : Le CMS, structurer les pages Hiérarchie par liens internes –On peut faire des références à des pages du site en se référant à leur « permalink » Création de la hiérarchie –Créer une nouvelle page statique dans linterface de gestion –Choisir une page « parente » –Dans la plupart des thèmes, les sous-pages apparaissent dans des menus déroulants.

22 Backoffice: créer un espace réservé aux membres Installation dun pluggin de gestion des droits –http://wordpress.org/extend/plugins/wpnamedusers/http://wordpress.org/extend/plugins/wpnamedusers/ –Ajouter lextension –Gérer les pages avec les droits (utilisateurs, groupes) Installation dun pluggin de connexion –http://www.geekeries.fr/wordpress/page-connexion-enregistrement- utilisateurs-14897http://www.geekeries.fr/wordpress/page-connexion-enregistrement- utilisateurs –Ajouter lextension –Ajouter un widget pour le formulaire de connexion dans la barre latérale –[wppb-login]

23 Wordpress, php et mysql Les pages sont des scripts php Leur structure définit la présentation des informations à afficher Il est possible dintégrer des scripts personnels Et de faire appel à mysql, afficher le résultat de la requête: –Placer le fichier de connexion dans le dossier du thème –Créer une page supplémentaire « page3.php » –Mettre en entête de cette page linformation de template –Dans cette page, choisir où linformation à afficher doit apparaître –Placer à cet endroit les scripts à insérer Dans le tableau de bord –Ajouter une nouvelle page statique –Lui donner comme template la page quon vient de définir –On peut aussi lui donner une page parente pour quelle apparaisse dans un sous-menu

24 Wordpress: travail demandé - 1 Vous devez mettre en place un site personnalisé en utilisant Wordpress. Ce site devra avoir un sens –Choix du thème Télécharger Pranav (http://free-wp-themes.techblissonline.com/)http://free-wp-themes.techblissonline.com/ Le placer dans les thèmes de votre site wordpress Lactiver –Le blog Publier des articles en précisant leurs mot-clés (au moins 10) Les articles ne doivent contenir aucun faux texte. Placer des images dans ces articles, utiliser léditeur wysiwyg pour modifier lapparence du texte. Définir au moins 3 catégories et classer les articles dans ces catégories –Le CMS Définir des pages statiques avec des sous-pages Introduire des images, des liens internes, des liens externes –Apparence Modifier la feuille de style du site en mettant une image au fond

25 Wordpress: travail demandé - 2 Widgets –Éditer la page de définition de la barre verticale de droite ( r_sidebar.php) –Supprimer la partie daffichage des catégories –Dans le tableau de bord Éditer les widgets Ajouter la widget daffichage des catégories en précisant « avec menu déroulant » dans la barre verticale de gauche –Installer un nouveau widget: Télécharger le fichier Php –Introduire la date dans lentête de page dans le format de votre choix –Ajouter dans le pied de page un texte qui sera différent selon le jour de la semaine (lhumeur du jour) –Ceux qui veulent pourront choisir que ce texte sera choisi aléatoirement dans un tableau prévu à cet effet (fonction php rand() ).

26 Wordpress: travail demandé - 3 Mysql –Créer une sous-page dans votre thème qui affiche la liste des images dun dossier dimages de votre site qui sont référencées dans votre base de données Copier la page page.php dans page2.php La sauvegarder comme nouveau template En incluant Copier le script daffichage des images (avec accès à mysql) dans la partie « content » de cette page (cela remplace le contenu de la div ) Recopier le script de connexion dans le thème (« connexion-inc.php ») –Dans le tableau de bord de wordpress: Créer une nouvelle page –Définir son modèle comme le template défini précédemment –Définir la page « parent » de cette page


Télécharger ppt "Utiliser un CMS: Wordpress Annie Danzart"

Présentations similaires


Annonces Google