Utiliser un CMS: Wordpress

Annie Danzart

Annie.Danzart@telecom-paristech.fr

Wordpress

Concevoir un site web statique

Concevoir un site web dynamique
Choisir un hbergement
Choix du CMS
Wordpress: installation
Wordpress : le front office
WordPress: le back office, les thmes, les widgets, les utilisateurs
Le blog : les articles
Le CMS : les pages statiques, sous-pages, modles, structuration
Intgration 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 gnrateurs

Boutons, choix de couleurs, mise en page CSS, menus

partir de modles
Opensource webdesign, open web design

Mise en ligne (hbergement, ftp, via lditeur local)

Concevoir un site web dynamique

Hberg ou hberger soi-mme

Blog
Wordpress, Typepad, Dotclear, Blogger

Wiki
Mediawiki, wikini

Sites
Google sites, sitekreator

CMS
Spip, joomla, Typo3,

Hbergement dun site

Hbergeur:
particulier ou professionnel: serveur web connect en
permanence

Contraintes
Stockage dau moins 100Mo, accs ftp, base de donnes, php

Nom de domaine
En rapport avec la ligne ditoriale, disponibilit

Hbergeurs:
1and1.fr, ovh.com
Gratuits: free.fr, orilla.net

Choix dun CMS

Y-a-t-il un numro 1 ?
(http://www.webdesignerdepot.com/2009/01/how-to-choose-the-right-cms/)

Comparatif (http://cmsmatrix.org)
Un CMS (Content Management System)
Base de donnes
Scripts ct serveur
Authoring
Droits
Multimdia
Publication

Wordpress: installation Tlcom-ParisTech

Sur votre compte unix

Tlcharger wordpress dans votre rpertoire public_html
Linstaller avec vos paramtres:
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 donnes: wp11en
Login: MMn
Mot de passe: median

Se connecter au programme wordpress:

http://www.infres.enst.fr/~login/wordpress/

Wordpress: installation Tlcom-ParisTech

Changer les droits

Lancer le programme putty
Se dplacer dans le rpertoire public_html
cd public_html

Changer les droits des fichiers et rpertoires

chmod R 755 wordpress
chmod R 644 wordpress/*.*

Wordpress: fin de linstallation

Installation de wordpress
Connexion aprs installation (admin, mot de passe)
Modifier les informations pour admin
nom, prnom, pseudo, nouveau mot de passe

Mettre jour le profil

Nom affich publiquement

Retour sur le site: page par dfaut

Remarque:
on peut aussi mettre tous les fichiers la racine du
site si cest sa seule vocation

Wordpress: le frontoffice

Le blog:
Espace de publication personnel permettant de diffuser du
contenu sur un espace rserv
Espace de communication: information + commentaires
Ligne ditoriale en fonction du lectorat cibl
Systme de publication de post: le dernier article publi
apparat en premier

Le CMS
Mise en place de pages fixes

Dans les deux cas:

Moteur de recherche, Archives, Commentaires, Mots-cls

Wordpress: le backoffice

Wp-admin: le tableau de bord

Login, mot de passe
Gestion des articles: modification, publi, date de publication,
mots-cls, catgorie, extrait, auteur
Gestion des pages: modification, modle, hirarchie
Apparence
Notation, commentaires
Vidos, mdias
Zone de recherche
Gestion des langues
Affichage des visites, rfrencement

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 grer. Peut aussi soccuper de la gestion des
commentaires dposs sur ses propres articles

Editeur:
peut en plus grer tous les articles et tous les commentaires du site ainsi que la blogoliste
(liens vers vos amis)

Administrateur:
peut tout faire: grer la base de donnes, les thmes, les pluggins,

Backoffice : gestion des utilisateurs

Liste des utilisateurs avec leurs login, nom, prnom, rle

Ajouter un nouvel utilisateur
Tous les types dutilisateur peuvent accder leur profil personnel et le
changer

Le tableau de bord se prsente diffremment selon le rle

On peut proposer aux utilisateurs de senregistrer eux-mmes
Apparition dun bouton dinscription sur la page didentification
Dpt de commentaire uniquement aux abonns
Rglage, discussion :
un utilisateur doit tre enregistr et connect pour publier ses commentaires

Backoffice : les thmes

Prsentation personnalise

Des dizaines de thmes disponibles sur internet

Wordpress.org
Niss.fr
Exemples: videonoob.fr, fran6art.com
Tlchargement dans wordpress/wp-content/themes/
Vrifier et modifier ventuellement les droits de ce rpertoire

Freeminders.org
Installer un thme, mise en service: Apparence
Modifier un thme
Crer des sous-thmes
Les widgets

Backoffice : les widgets

Les widgets sont des fonctions quon peut placer dans les
composants de la page
En gnral, elles apparaissent dans les barres verticales
Plusieurs sont prsentes par dfaut:
Rechercher
Nuage de mots-cls
Recherche dans les billets par catgories

Ajouter une widget

Tableau de bord apparence, widgets

Choisir celle quon veut ajouter
La faire glisser dans la zone souhaite
Valider
Cest tout

Dautres widgets sont disponibles

Backoffice : Le blog, rdiger un billet

Press minute
Nouvel article, modification, suppression
Titre
Contenu: diteur wysiwyg
Taper du texte
Le slectionner
Choisir dans les boutons le mode de reprsentation (liste, couleur, ancre, )

Catgorie (articles)
Mots-cls
Commentaires ?
autoriser les commentaires par dfaut

Aperu avant publication

Par dfaut, les articles seront enregistrs comme brouillons
En attente de lecture
publier

Backoffice : Le CMS, rdiger une page

Nouvelle page, modification, suppression, pages statiques

Titre
Contenu: diteur wysiwyg

Taper du texte
Le slectionner
Choisir dans les boutons le mode de reprsentation (liste, couleur, ancre, )
Ajouter un lien
Ajouter une image, un media

Mots-cls
Commentaires ?
autoriser les commentaires par dfaut

Aperu avant publication

Par dfaut, les articles seront enregistrs comme brouillons
publier

Backoffice : Le CMS, rdiger une page

Ajouter une image

Crer un rpertoire dimages dans le site de wordpress

Copier localement les images afficher
Leur donner les bons droits
Dans linterface de cration/modification dune page:

Choisir linsertion dune image

Slectionner le fichier dimage
Lui donner les caractristiques daffichage
valider

Backoffice : Le CMS, personnaliser les pages

Cration dun template

Le fichier page.php
Crer un fichier page2.php copie modifie de page.php et y ajouter
<?php
/*
Template Name: nouveau modele
*/
?>

Modifier ce template
Crer une nouvelle page statique dans linterface de gestion
Un menu de choix de template apparat
Choisir le nouveau

Backoffice : crer un espace rserv aux membres

Installation dun pluggin de gestion des droits

http://wordpress.org/extend/plugins/wpnamedusers/
Ajouter lextension
Grer les pages avec les droits (utilisateurs, groupes)

Installation dun pluggin de connexion

http://www.geekeries.fr/wordpress/page-connexion-enregistrementutilisateurs-14897
Ajouter lextension
Ajouter un widget pour le formulaire de connexion dans la barre latrale
[wppb-login]

Backoffice : Le CMS, structurer les pages

Hirarchie par liens internes

On peut faire des rfrences des pages du site en se rfrant leur
permalink

Cration de la hirarchie
Crer une nouvelle page statique dans linterface de gestion
Choisir une page parente
Dans la plupart des thmes, les sous-pages apparaissent dans des menus
droulants.

Wordpress, php et mysql

Les pages sont des scripts php

Leur structure dfinit la prsentation des informations afficher
Il est possible dintgrer des scripts personnels
Et de faire appel mysql, afficher le rsultat de la requte:

Placer le fichier de connexion dans le dossier du thme

Crer une page supplmentaire page3.php
Mettre en entte de cette page linformation de template
Dans cette page, choisir o linformation afficher doit apparatre
Placer cet endroit les scripts insrer

Dans le tableau de bord

Ajouter une nouvelle page statique
Lui donner comme template la page quon vient de dfinir
On peut aussi lui donner une page parente pour quelle 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 thme
Tlcharger Pranav (http://free-wp-themes.techblissonline.com/)
Le placer dans les thmes de votre site wordpress
Lactiver

Le blog
Publier des articles en prcisant leurs mot-cls (au moins 10)
Les articles ne doivent contenir aucun faux texte.
Placer des images dans ces articles, utiliser lditeur wysiwyg pour modifier lapparence
du texte.
Dfinir au moins 3 catgories et classer les articles dans ces catgories

Le CMS
Dfinir 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 dfinition de la barre verticale de droite (r_sidebar.php)
Supprimer la partie daffichage des catgories
Dans le tableau de bord
diter les widgets
Ajouter la widget daffichage des catgories en prcisant avec menu
droulant dans la barre verticale de gauche

Installer un nouveau widget:

Tlcharger le fichier
http://wordpress-tuto.fr/comment-installer-des-widgets-dans-wordpress-3

Php
Introduire la date dans lentte de page dans le format de votre choix
Ajouter dans le pied de page un texte qui sera diffrent selon le jour de la
semaine (lhumeur du jour)
Ceux qui veulent pourront choisir que ce texte sera choisi alatoirement
dans un tableau prvu cet effet (fonction php rand()).

Wordpress: travail demand - 3

Mysql
Crer une sous-page dans votre thme qui affiche la liste des images dun
dossier dimages de votre site qui sont rfrences dans votre base de
donnes
Copier la page page.php dans page2.php
La sauvegarder comme nouveau template
En incluant
<?php
/*
Template Name : nouveau
*/
?>

Copier le script daffichage des images (avec accs mysql) dans la partie content de
cette page (cela remplace le contenu de la div )
Recopier le script de connexion dans le thme (connexion-inc.php)

Dans le tableau de bord de wordpress:

Crer une nouvelle page
Dfinir son modle comme le template dfini prcdemment
Dfinir la page parent de cette page