Cours Wordpress 11 12
description
Transcript of Cours Wordpress 11 12
-
Utiliser un CMS: Wordpress
Annie Danzart
-
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