Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr

1. Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr

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/) • … mais avec des générateurs • Boutons, choix de couleurs, mise en page CSS, menus • À partir de modèles • Opensource webdesign, open 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, Blogger • Wiki • Mediawiki, wikini • Sites • Google sites, sitekreator • CMS • Spip, joomla, Typo3, …

5. Hébergement d’un site • Hébergeur: • particulier ou professionnel: serveur web connecté en permanence • Contraintes • Stockage d’au 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.com • Gratuits: free.fr, orilla.net

6. Choix d’un 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) • 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 • L’installer 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: carte’n°’ • Login: MM’n°’ • Mot de passe: media’n°’ • Se connecter au programme wordpress: • http://www.infres.enst.fr/~login/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: projet’n°’ (de 1 à 4 selon votre groupe) • Login: groupe’n°’ (de 1 à 4) • Mot de passe: media’n°’ (de 1 à 4) • Se connecter au programme wordpress: • http://www.infres.enst.fr/~login/projet/

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 l’installation • 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 c’est 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 fixes • Dans les deux cas: • Moteur de recherche, Archives, Commentaires, Mots-clés

12. Wordpress: le backoffice • Wp-admin: le 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 s’occuper 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 d’utilisateur 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 s’enregistrer eux-mêmes • Apparition d’un bouton d’inscription sur la page d’identification • 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.org • Niss.fr • Exemples: videonoob.fr, fran6art.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 qu’on 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 qu’on veut ajouter • La faire glisser dans la zone souhaitée • Valider • C’est tout • D’autres 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 d’images dans le site de wordpress • Copier localement les images à afficher • Leur donner les bons droits • Dans l’interface de création/modification d’une page: • Choisir l’insertion d’une image • Sélectionner le fichier d’image • Lui donner les caractéristiques d’affichage • valider

20. Backoffice : Le CMS, personnaliser les pages • Création d’un template • Le fichier page.php • Créer un fichier page2.php copie modifiée de page.php et y ajouter <?php /* Template Name: nouveau modele */ ?> • Modifier ce template • Créer une nouvelle page statique dans l’interface 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 l’interface 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 d’un pluggin de gestion des droits • http://wordpress.org/extend/plugins/wpnamedusers/ • Ajouter l’extension • Gérer les pages avec les droits (utilisateurs, groupes) • Installation d’un pluggin de connexion • http://www.geekeries.fr/wordpress/page-connexion-enregistrement-utilisateurs-14897 • Ajouter l’extension • 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 d’inté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 l’information de template • Dans cette page, choisir où l’information à 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 qu’on vient de définir • On peut aussi lui donner une page parente pour qu’elle 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/) • Le placer dans les thèmes de votre site wordpress • L’activer • 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 l’apparence 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 d’affichage des catégories • Dans le tableau de bord • Éditer les widgets • Ajouter la widget d’affichage 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 http://wordpress-tuto.fr/comment-installer-des-widgets-dans-wordpress-3 • Php • Introduire la date dans l’entê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 (l’humeur 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 d’un dossier d’images 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 <?php /* Template Name : nouveau */ ?> • Copier le script d’affichage 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