View
111
Download
1
Category
Preview:
Citation preview
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é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
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 brouillonspublier
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 l’extension
– Ajouter un widget pour le formulaire de connexion dans la barre latérale
– [wppb-login]
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 templateEn 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
Recommended