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

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é

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)

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, …

Hébergeurs: Hébergeur: Contraintes Nom de domaine 1and1.fr, ovh.com 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

Comparatif (http://cmsmatrix.org) Un CMS (Content Management System) 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

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/

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/

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

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

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

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

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, …

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 »

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

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

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

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

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

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

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.

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 un widget pour le formulaire de connexion dans la barre latérale [wppb-login]

Les pages sont des scripts php 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

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

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()).

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