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

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-enregistrement-

utilisateurs-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

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