Utiliser un CMS: Wordpress
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Utiliser un CMS: Wordpress Annie Danzart [email protected] PowerPoint PPT Presentation


  • 45 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Utiliser un CMS: Wordpress Annie Danzart [email protected]

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Utiliser un cms wordpress annie danzart annie danzart telecom paristech fr

Utiliser un CMS: Wordpress

Annie Danzart

[email protected]


Wordpress

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

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

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

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

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

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 paristech1

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

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

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

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 backoffice1

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

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

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

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

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

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 brouillons

      publier


Backoffice le cms r diger une page1

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

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

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

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

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

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

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

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

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


  • Login