Utiliser un CMS: Wordpress Annie Danzart [email protected].

Utiliser un CMS: Wordpress

Annie Danzart

[email protected]

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