Utiliser un CMS: Wordpress - Annie Danzart
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Utiliser un CMS: Wordpress
Annie Danzart
Annie.Danzart@telecom-paristech.frWordpress • 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.netChoix 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
– PublicationWordpress: 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.tp.enst.fr:3307
– Base de données: wp11e’n°’
– Login: MM’n°’
– Mot de passe: media’n°’
– Se connecter au programme wordpress:
• http://www.infres.enst.fr/~login/wordpress/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 vocationWordpress: 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ésWordpress: 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érencementWordpress: 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 widgetsBackoffice : 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
• publierBackoffice : 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
publierBackoffice : 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
• validerBackoffice : 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
– Modifier ce template
– Créer une nouvelle page statique dans l’interface de gestion
– Un menu de choix de template apparaît
– Choisir le nouveauBackoffice : 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]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.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-menuWordpress: 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 fondWordpress: 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
• 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 pageVous pouvez aussi lire
