Tp1 wp etud

686 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
686
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Tp1 wp etud

  1. 1. TP 1 : CMS – WordPress  Thèmes, extensions et widgets   Objectif : Nous  verrons  à  travers  ce  premier  TP  les  principes  fondamentaux  de  WordPress,  ainsi  que  les notions essentielles que sont :  ‐  thèmes,   ‐ extensions,   ‐ plugin,   ‐ widget,   ‐ articles,   ‐ pages,   ‐ catégories. A récupérer sur le réseau :  Récupérer les documents utiles sur T:/Cours/SRC/ gros‐desormeaux/ SRC2/ S4_WordPress. PLAN :  Introduction                   page 2   Les cms     Le cms WordPress   Des adresses utiles ‐ Trouver de l’aide sur WordPress 1. Installation de WordPress              page4       2. Présentation du front‐end et du back‐end de WordPress     page6 3. Exercice 1 –   Appréhender l’environnement WP      page9  1. Présentation du projet : réalisation d’un blog  2. Choisir un thème WordPress pour son site  3. Rédiger et publier des articles  4. Rédiger et publier des pages de contenus  5. Installer des extensions – Créer la page « Me contacter »  6. Faire apparaître des widgets dans la sidebar  7. Modifier des paramètres du thème 4. Exercice 2 – Appliquer               page18 5. Exercice 3 – réalisation d’un site classique        page19  1  
  2. 2. Introduction Les cms   Les CMS (Content Management System) ou SGC (en français Systèmes de gestion de contenu) sont des logiciels de conception et de mise à jour dynamique de sites Internet. Il existe des CMS livre open source (WordPress, Joomla, Drupal, …) et des CMs propriétaires ( Sharepoint de Microsoft, …).  Le cms WordPress WordPress  est  un  CMS  (Content  Management  System)  permettant  de  déployer  des  sites administrables de manière simple. Il fait partie depuis peu des CMS les plus utilisés sur le marché :     Licence d’utilisation (http://www.wordpress‐fr.net/telechargements/)  WordPress est un logiciel libre, disponible sous licence open‐source, en l’occurrence la GPL  (GNU Public License).  Cela signifie que vous pouvez utiliser WordPress n’importe quel usage, que ce soit un blog  personnel ou un site commercial avec panier d’achat et/ou publicités, ce sans devoir payer  jamais à personne de frais d’utilisation. Cette licence est irrévocable : WordPress sera toujours  gratuit et libre d’usage.  Cette œuvre est un logiciel libre ; vous pouvez la redistribuer et/ou la modifier suivant les termes de la  Licence publique générale GNU telle que publiée par la Free Software Foundation, soit la version 2 de  cette  Licence,  soit  une  version  ultérieure.  Cette  œuvre  est  distribuée  dans  l’espoir  qu’elle  sera  utile,  mais  SANS  AUCUNE  GARANTIE,  pas  même  la  garantie  implicite  de  COMMERCIALISABILITÉ  ni  celle  d’ADÉQUATION À UN BESOIN PARTICULIER. Consultez la GNU General Public License originale pour plus  de détails.  WordPress a été créé par et pour une communauté d’utilisateurs, qui comprend des milliers  d’utilisateurs et de développeurs.  2  
  3. 3. Des adresses utiles ‐ Trouver de l’aide sur WordPress   ‐ Forum wordpress‐fr.net  (Communauté de blogueurs)    ‐ Wordpress‐fr.net (pour les sites auto‐hébergés)    ‐ Wordpress.org pour télécharger des thèmes    ‐ http://codex.wordpress.org/ : manuel de WorPress, en anglais !    WordPress.org  <> WordPress.com  WordPress.org : site de logiciel gratuit en open source (à télécharger et installer soi‐même)  WordPress.com : site de la société AUTOMATTIC (qui a créé le CMS WordPress) qui héberge  des  blogs  clés  en  main  gratuits  basés  sur  WordPress  (dans  ce  cas,  paramètres  limités    par  rapport au WordPress d’origine, par contre certaines fonctions sont rajoutées pour faciliter la  vie des clients).    3  
  4. 4. I. Installation de WordPress  Nous  procèderons  aux  installations  de  WordPress  sur  vos  clés  USB.  Nous  installerons  la  version 3.5, la dernière.   1) Créez l’arborescence suivante WordPress/TP1 sur votre clé USB.   2) Copiez  le  dossier  T: cours/gros-desormeaux/SRC2/Wordpress  sur  votre  clé  USB, dans le dossier WordPress/TP1.  Pour fonctionner WordPress a besoin d’un environnement serveur Web.   La version 3.5  requiert au minimum un serveur web pouvant supporter  PHP 5.2.4 ou plus et  MySQL 5.0 ou plus. Le serveur conseillé  (et le plus robuste) pour WordPress est Apache.  ATTENTION : N’oubliez pas de vérifier ces éléments lors d’une souscription chez un hébergeur.  1) Télécharger  puis  installer    UWAMP,  par  exemple  à  l’adresse  suivante :  http://www.uwamp.com  WAMPP 1.8.1 est un package regroupant :   ‐  le serveur web Apache 2.4.3  ‐  le serveur de base de données  MySQL 5.5.27  ‐  l’interpréteur  PHP 5.4.7  ‐  l’interface d’administration phpMyAdmin 3.5.2.2  Wampp intègre également un serveur FTP, non indispensable pour installer WordPress, mais  utile pour les échanges de fichiers entre poste local et hébergeur.  Wampp existe pour Windows, Mac et Linux.   Pour vérifier que le serveur Apache est démarré : tapez localhost dans la barre d’adresse de votre navigateur. Si tout s’est bien passé la page index du serveur apparaît.      2) Créer une base de données vide pour WordPress  a. Ouvrez  phpMyadmin  dans  un  second  onglet.  La  page  http://localhost/phpmyadmin/ doit apparaître correctement si le serveur est actif.     b. Wordpress nécessite une base de données. Créez‐la donc sur le serveur web, grâce  à phpMyAdmin, avant d’installer WordPress. Appelez‐la maBD_TP1.  3) Transférer les fichiers de Wordpress sur le serveur  Nous installerons la dernière version de WordPress. Wordpress est tout simplement un ensemble de fichiers PHP à placer sur le serveur web.   4  
  5. 5. c. Décompressez  l’archive  wordpress-3.5.1-fr_FR.zip    sur  votre  clé  (n’importe où) USB.  d. Copiez ce fichier à la racine de votre serveur local, càd dans Wampp/WWW  e. Renommez le dossier WordPress en monsite_TP1. Ce sera le nom de votre site !       WordPress   peut  être    téléchargé  en  français  à  l’adresse  http://www.wordpress‐ fr.net/telechargements/ .     Votre site est maintenant accessible  à l’adresse : http://localhost/monsiteTP1    avec  monsiteTP1 le nom du site   4) Créer le fichier wp‐config.php   f. Tapez  l’adresse  de  votre  site,  http://localhost/monsiteTP1,  vous  obtenez  ceci,  cliquez sur le bouton « créer le fichier de configuration » :        5) Faire le lien avec la base de données      6) Il reste quelques paramètres à saisir avant l’installation de wordPress   5  
  6. 6.  L’installation est finie !    6  
  7. 7. II. Présentation du front‐end et du back‐ end de WordPress  Par défaut, une fois l’installation finie, vous arrivez sur le back‐office, appelé également  tableau de bord sous WordPress.  Le tableau de bord de WordPress (ou back‐office)      Le front‐office par défaut de WordPress    7) Ouvrez  également  le  front‐office  dans  un  autre  onglet.  Le  front‐office  est  également  accessible depuis le back‐office dans la barre de menu du haut, en cliquant sur la rubrique qui  porte le titre de votre site (donné précédemment). Ici cosmetologue.   Voilà le front‐office par défaut proposé par WordPress, présenté sous forme de zoning.       7  
  8. 8.  A RETENIR Pour accéder au front‐office et au back‐office :  Le front‐office est accessible  à l’adresse : http://localhost/monsiteTP1  avec  monsiteTP1 le nom du site et le back‐office est accessible  à l’adresse  http://localhost/monsite_TP1/wp‐admin/  avec  monsiteTP1 le nom du site    8  
  9. 9. Exercice 1 –   Appréhender l’environnement WP  I. Présentation du projet : réalisation d’un blog Nous  allons  réaliser  un  site  simple,  un  blog,  pour  appréhender  l’environnement  de  WordPress. C’est  un  blog  d’un  pharmacien  passionné  de  cosmétologie.  Voici  l’arborescence  qui  nous intéresse :           ACCUEIL   blog d’articles  avec des widgets                  dans la sidebar  Qui suis‐je ?                Me contacter Page de contenu textuel            Formulaire de contact           II. Choisir un thème WordPress pour son site La création d’un blog, d’un site passe obligatoirement par le choix d’un thème. A savoir sur les thèmes :  Qu’est‐ce qu’un thème ? ‐ Un thème graphique spécifie l’apparence du site, son habillage (mise en forme, mise en page :  nombre de colonnes, tailles des titres et des textes, couleurs, …) mais est également défini par  les paramètres modifiables (chaque thème propose ses propres paramètres modifiables, il peut  y avoir plus ou moins de paramètres en fonction du thème choisi).  De l’importance du thème  ‐ Le  choix  du  thème  est  très  important  en  fonction  des  caractéristiques  du  site  à  créer.  Vous  pouvez  en  changer  à  tout  moment.  Cependant,  il  est  conseillé  d’en  choisir  un  adapté  à  vos  besoins  dès  le  début  de  la  création  du  site :  chaque  thème  à  ses  spécificités  d’affichage,  des  paramètres qu’il est possible ou non de modifier.   Comment choisir/activer un thème depuis le tableau de bord ? Tableau de bord  Barre de menu latérale  Apparence  Thèmes double‐cliquer sur  le  thème  qui  vous  intéresse  OU cliquer sur son lien Activer bouton « Enregister & activer »WordPress  est  livré  avec  des  thèmes  gratuits  déjà  installés,  directement  accessibles  depuis  le tableau de bord.  1) Regardez les thèmes installés, proposés par WordPress.  9  
  10. 10. 2) Choisissez/activez le thème « Twenty Eleven ».  3) Actualisez le front‐office pour voir apparaître les modifications.    III. Rédiger et publier des articles Nous allons créer le blog de la page d’accueil (on ne s’occupe pas de la sidebar pour l’instant).  A savoir sur la rédaction des articles :  ‐ Pour voir les modifications avant qu’elles ne soient prises en compte sur le site publié : utiliser le bouton Prévisualiser les modifications ‐ Pour créer un nouvel article :  Article  Ajouter  ‐ L’éditeur d’articles Il est wysiwyg. L’onglet « text » à droite permet de basculer vers un éditeur HTML.   ‐ Les catégories d’articles Il  est  possible  de  catégoriser  les  articles  d’un  blog.  Ce  n’est  pas  indispensable  mais  cela  aide l’internaute à trouver l’information plus facilement lorsque le blog est conséquent. Une catégorie permet en effet de trier les articles suivant des thèmes principaux. On  peut  les  créer  avant  la  création  des  articles  =>  Article  Catégories ou  lors  de  la création d’un article => Article  Ajouter  Sidebar  Categories  ‐ Créer un lien « lire la suite » dans un article Par  défaut  l’intégralité  de  l’article  sera  en  page  d’accueil.  L’insertion  de  la  balise  « more » permettra  d’insérer  un  lien  « lire  la  suite »  pour  accéder  à  l’article  complet.  Attention :  pour visualiser le changement, il faut publier l’article et se rendre sur la page d’accueil du site, l’aperçu de l’article ne suffit pas.  ‐ Pour gérer les  images des articles Les images peuvent provenir de la bibliothèque de Wordpress ou être téléchargées directement depuis Internet.   ‐ La bibliothèque Wordpress WordPress intègre une bibliothèque à ladministration du blog. Elle peut être utilisée pour ajouter de  nouveaux  documents  (photos,  vidéo,  sons,  PDF,  etc.)  qui  seront    par  la  suite  attachés  et intégrés à tout article ou page de votre blog. Il est possible d’enrichir la bibliothèque avant de créer l’article (Menu latéral gauche Media bibliothèque  bouton « Ajouter ») ou  lors  de  la  création  de  l’article  (bouton« ajouter Media »  « Envoyer media »)Tous les médias sont stockés dans le répertoire wp‐content/uploads  ‐ Les permaliens Les  permaliens  sont  des  URL  affichées  qui  serviront  de  référence  à  un  article,  ils  sont  plus explicites que l’URL par défaut. Utiliser les permaliens permet d’améliorer le référencement. Pour modifier un permalien :  10  
  11. 11. Lors de la rédaction de l’article  « modifier le permalien » 1) Créer 2 articles sans modification de mise en forme. Voilà les informations à saisir pour les  2  articles :     a. Article  1 :  ‐ Les informations sur l’article sont les suivantes :  o Titre :   Faut-il choisir ses cosmétiques en fonction du prix (partie 2) ? Etude de 60 millions de consommateurs. o Corps de l’article :   Cher lecteur, continuons si vous le voulez bien, notre discussion avec cette 2ème partie sur le prix des cosmétiques dans laquelle nous allons aborder l’étude de 60 millions de consommateurs. On va se faire une petite pause macaron Pierre Hermé en vous attendant. (Probablement pour moi les meilleurs macarons de la terre à ce jour..) Avant d’aborder cette étude de 60 millions de consommateurs sur les antirides, je vous expliquais donc précédemment que ce soit parmi les marques de luxe, les marques de moyenne gamme et les marques en grande surface, qu’elle que soit la gamme de prix, vous pouvez trouver le meilleur comme le pire car toutes les combinaisons des critères précédents sont possibles : il y en a pour tous les goûts et forcément toutes les bourses… Selon moi, la distinction n’est pas « cher ou pas cher », mais de savoir si la marque a privilégié la formulation, si le prix que vous payez est bien, en majorité, consacré à la formulation. L’étude de 60 millions de consommateurs sur les antirides Quand on parle de prix, on me cite donc régulièrement l’étude de 60 millions de consommateurs de 2010 (oui, je sais ça fait déjà 2 ans, mes références datent un peu… mais cette étude est une bonne base de discussion); pour celles qui ne la connaissent pas, voici un petit résumé. … o Catégorie : Conseil de peau    ‐ Mettre un lien « lire la suite » après le premier paragraphe.    ‐ Ajouter une image à l’article  o Image : img1Blog.png. Mettez le texte alternatif de l’image, correspond au texte de  la balise alt : « etude 60 millions de consommateurs ».  L’image devra apparaître dès le début de l’article, à côté du texte, à sagauche.      b. Les permaliens :  ‐ Faire apparaître l’article dans le front office. Regarder la structure de l’URL.   ‐ Modifier  le  permalien  de  l’article  en  choisissant  l’option  « faire  apparaître  le  nom  de  l’article »  ‐ Regarder l’URL de la page affichée dans le front‐office . C’est mieux !      c. Article 2 :  ‐ Les informations sur l’article sont les suivantes :  o Titre :   Faut-il choisir ses cosmétiques en fonction du prix (partie 3) ? L’efficacité des cosmétiques bio. o Corps de l’article :   Cher lecteur, 11  
  12. 12. Toujours dans nos cosmétiques et le prix, nous abordons ainsi la 3ème partie de notre long et tortueux périple dans les méandres des étiquettes de prix en cosmétique, et en parlant d’étiquette, je dois bien reconnaître que le prix est un sujet qui, en la matière, a son lot de préjugés et d’étiquettes collés à la superglue, que tout consommateur éclairé se doit d’éviter de prendre pour argent comptant, tellement il est tentant de se laisser bercer par des discours simplistes. Choisir un cosmétique sur la seule base du prix, c’est comme manger une tarte aux fraises sans les fraises. Quelle frustration !!! Si vous n’avez pas lu la 1ère partie, c’est ici et si vous n’avez pas lu la 2ème partie, c’est sur cette page, je vous conseille de lire ces 2 parties avant d’envisager la suite de cet article, sinon vous risquez de ne pas tout suivre… Pour parler du prix en cosmétique, nous avions donc discuté de l’étude de 60 millions de consommateurs, et avant de poursuivre, il serait intéressant de se pencher un peu plus sur les produits bio qui ont été testés dans cette étude, car si l’on juge les cosmétiques bio uniquement sur la base de cette seule étude, on serait tenté de conclure que les cosmétiques BIO ne valent pas un kopeck ou ne sont pas efficaces. … o Catégorie : Conseil de peau    ‐ Mettre un lien « lire la suite » après le mot « superglue » du premier paragraphe.     ‐ Ajouter une image à l’article  o Image : img2Blog.png .  Mettez le texte alternatif de l’image,  correspond au texte  de la balise alt : « note minimale pour les cosmetiques bio ».  L’image devra apparaître dès le début de l’article, aligné à gauche.    ‐ Modifier le permalien de l’article   2) Créer un lien de l’article 2 (partie3) vers l’article 1 (partie2).  Le lien est repérable dans le corps de de l’article 2(partie3), car écrit en gras et souligné.     12  
  13. 13. IV. Rédiger et publier des pages de contenus A savoir sur les pages WordPress!  IMPORTANT : Une page au sens WordPress n’est pas = à une page internet  ‐ Quelles différences entre une page et un article ? ‐ Les pages et les articles sont 2 moyens de publications différents.  ‐  Les  pages  sont  des  données  dites  par  WordPress  « statiques »  dans  votre  blog.  Qu’est‐ce  qu’il faut  comprendre  par  données  « statique » ?  Contrairement  aux  articles,  les  pages  sont indépendants du temps et de la chronologie de création. Une page peut contenir des informations « statiques »  telles  que  votre  CV,  une  page  de  contact,  votre  portfolio,  ou  tout  simplement  une présentation de votre blog et de vous. Les  articles,  (objectif  même  du  blog)  vous  permettent  de  publier  des  actualités,  celles‐ci  sont affichées par date de publication. => tout article est lié au temps, à la chronologie.    =>  Une  page  restera  toujours  à  la  même  place  (contrairement  à  un  article  qui  peut  changer  de place  lors  de  l’affichage  du  blog),  et  s’affichera  dans  le  menu  de  navigation  de  votre  site  (en fonction de votre thème)  => Le titre d’un article s’affichera automatiquement sur la page d’accueil d’un blog, pas celui d’une page. =>Les pages sont indépendantes des articles et des catégories. Vous pouvez associer des catégories et des mots‐clés à chaque article pour que vos visiteurs s’y retrouvent / ce n’est pas possible pour les pages : une page ne peut être catégorisée, ni associée à des mots‐clés de façon standard. => Par contre les pages peuvent créer une arborescence, page mère, enfant, …  ‐ Comment créer/modifier une page ?  Menu Pages  Ajouter   ‐ L’éditeur de pages  Identique à celui des articles (sauf balise « more » qui n’aura aucun effet dans une page). Il est possible d’inclure des shortcodes (codes d’intégration des extensions) et autres code PHP dansle contenu de la page pour qu’il soit interprété.‐ Gérer la hiérarchie des pages  Pour que la page apparaisse directement comme une rubrique du menu principal, sélectionner « pas de parent ».  Contrairement aux articles, les pages peuvent être hiérarchisées avec une page‐mère (celle qui apparaîtra dans le bandeau de menu) et des pages‐filles, elles même pouvant à leur tour servir de pages‐mères pour d’autres pages‐filles. Le contrôle du rang d’une page est à définir dans le menu déroulant Parent, dans la section attribut de la page dans la colonne de droite.      13  
  14. 14. 1) Créer la page « Qui suis-je ? » en modifiant la page exemple. Voilà le contenu : Docteur en pharmacie et formulateur cosmétique, spécialisé en compléments alimentaires et cosmétiques antiage, je décrypte les cosmétiques etréponds à toutes vos questions. Rassurez-vous, il n’y a pas de questions idiotes, j’en pose tous les jours….Que trouverez-vous dans ce blog ?  Des conseils anti‐âge pour embellir au fil du temps et surtout avoir une belle peau quel que soit votre âge…..   Des astuces beauté pour un résultant bluffant.   Des tests cosmétiques complets, des comparatifs pour mieux faire votre choix et trouver les cosmétiques adaptés à votre profil   Des explications claires et simples sans prise de tête.   Des interviews beauté pour découvrir les coulisses de la beauté vue de l’intérieur   Des découvertes cosmétiques inédites   Et encore pleins de surprises que vous aurez le loisir de découvrir….. Bref, le blog d’un pharmacien cosmétologue, formulateur cosmétique, sans langue de bois pour sublimer votre beauté !!!Qu’est-ce qui justifie ce blog ?J’ai soutenu ma thèse pour l’obtention de mon doctorat de pharmacie, option cosmétologie à la faculté de pharmacie René Descartes Paris 5, un 11septembre, certes plusieurs années après le terrible 11 septembre, mais j’y ai toujours vu un signe, celui qui marque la fin d’une époque et le débutd’une nouvelle vie…J’ai rapidement démarré une activité de formulation cosmétique sur mesure pour une clientèle privée qui m’a encouragé à lancer ma propre marque decosmétiques.Effectivement, après plusieurs années de formulation en freelance, de réflexions, de prises de bec en tout genre avec des équipes marketing prêts àvendre n’importe quoi…, il était temps pour moi de réaliser un de mes rêves, créer ma propre marque de cosmétiques, qui pourra, je l’espère, enfinêtre officiellement lancée dans quelques mois.2) Dans  le  menu  de  la  création  d’une  page,  modifiez le  modèle  de  page  afin  de  voir  les  conséquences.  V. Installer des extensions – Créer la page « Me contacter »  A savoir sur les extensions/plug‐in :    ‐ Qu’est‐ce qu’une extension ?  Les  extensions  (plugins)  sont  des  petits  programmes  qui  vont  permettre  de  modifier  ou  ajouter des fonctionnalités à WordPress, d’enrichir les options de base de WordPress. Il existe  des extensions, par exemple, pour, créer des  galeries photos, pour gérer le cache, pour  aider  au référencement, pour les  réseaux sociaux…    ‐ Où en trouver ?  Des milliers d’extensions sont disponibles actuellement dans la galerie officielle de WordPress,  http://wordpress.org/extend/plugins/    ‐ Précaution à prendre avant d’installer une extension  Avant  d’installer  un  plugin,  vérifier  sa  compatibilité  avec  la  version  de  WordPress  (dans  le  tableau de bord, cliquer sur le lien détail, lors du listing des plugins).    ‐ Comment installer une extension ?  Deux méthodes d’installation :  ‐ méthode manuelle   ‐Télécharger le plugin.    ‐Décompacter l’archive.    ‐Placer le dossier/fichier décompressé dans le dossier wp‐content/plugins.   14  
  15. 15.  ‐Depuis le tableau de bord, faire une recherche des plugings installés.   ‐Il ne reste plus qu’à activer le plugin.    ‐ méthode automatique  Il  est  possible  de  chercher  et  d’installer  directement  des  plugins  à  partir  de  l’interface  d’administration de WordPress.  Pour cela, dans le tableau de bord, dans le menu latéral, option  Extensions  Ajouter  taper  les  mots‐clefs  (de  préférence  en  anglais)  chercher parmi les extensions Si des résultats sont disponibles, une liste apparaît affichant les noms de plugins accompagnés  d’informations (version, description).  Pour installer un plugin, cliquer sur Installer maintenant WordPress  va  télécharger  et  automatiquement  placer  le  plugin  dans  le  dossier wp- content/plugins  Il faut maintenant activer le plugin.  Cette méthode ne marche pas chez certains hébergeurs.    ‐ Comment activer/désactiver un plugin ?  Dans la liste des plugins installés, pour chaque plugin, au‐dessous du nom du plugin, apparaît  un lien « activer » ou un lien « désactiver ». Cliquez dessus.    ‐ Extensions gratuites ou payantes ?  Les  extensions  peuvent  être  gratuits  ou  payants  (premium).  Pour  choisir  l’extension,  il  faut  avoir  bien  ciblé  vos  besoins. Par  exemple  dans  le  cas  du  formulaire  de  contact,  un  classique  formulaire peut faire amplement l’affaire, mais il se peut aussi que vous ayez des besoins plus  évolués (par exemple une newsletter). Vérifier que le plugin le permette. Chaque  extension  possède  sa  propre  philosophie.  Dans  l’idéal,  il  faut  tester  le  plugin  (l’installer, voir comment il réagit, comment il s’intègre dans le site, quels sont ses atouts, ses  faiblesses)  avant  de  l’adopter.  Mais  cela  n’est  valable  que  pour  les  plugins  gratuits.  Pour  les  premium,    vous  jugerez  si  ça  vaut  le  coup  de  prendre  un    risque  ou  pas  en  fonction  prix  du  plugin.  Nous allons créer la page « Me contacter » qui intègrera un formulaire  qui se présentera ainsi :    15  
  16. 16. Pour créer un formulaire de contact nous avons besoin d’installer une extension, WordPress étant « livré » sans formulaire de contact. 1) Créer la page « Me contacter » en suivant les étapes suivantes  a. Téléchargez  le  plugin  « Contact  form  7 »  à  l’adresse  suivante  http://www.wordpress‐ fr.net/2012/04/05/quel‐formulaire‐pour‐mon‐wordpress/     b. Procéder à l’installation manuelle du plugin (Attention : déposez le sous‐dossier « Contact  form 7 » de l’archive au bon endroit)   c. Une  fois  installée  et  activée,  une  option  nommée  « Contact »  apparaît  dans  le  menu  latéral du tableau de bord.   d. Créer  le  formulaire.  Ajouter  le  shortcode  délivré  lors  de  la  création  du  formulaire  dans  une page.     VI. Faire apparaître des widgets dans la sidebar  A savoir sur les widget    ‐ Qu’est‐ce qu’un widget ?  Le  mot  « widget »  est  un  peu  un  mot  barbare  en  informatique,  c’est    l’association  de  « window »  et  « gadget ».  Les  widgets  sont  …  Un  widget  a  une  seule  fonctionnalité,  c’est  un  module  qui  s’affiche  dans  la  sidebar.  Concrètement,  un  Widget  est  un  bloc  de  code  indépendant :  ‐un calendrier  ‐une liste d’archives mensuelles  ‐les derniers Posts  ‐les derniers commentaires  ‐un bloc de texte  ‐une blogoliste  ‐un formulaire de recherche  ‐une liste des Pages    ‐ Comment ajouter  un widget ?  http://www.wp‐facile.com/comment‐ajouter‐widget‐sidebar‐wordpress/    1) Faire  apparaître,  dans  la  sidebar,  le  module  social  facbook  –  utilisation  d’extension  facebook.    16  
  17. 17.  Récupérer  et  installer  le  module  « like box »  de  facebook    à  l’adresse  suivante http://developers.facebook.com/docs/reference/plugins/like‐box/    ‐‐> Dans le formulaire, paramétrer le module : saisissez l’adresse de la page  facebook  (facebook  page  URL)  suivante   http://www.facebook.com/lecosmetologue afin d’avoir votre module à jour  automatiquement.     ‐‐> Demander la génération du code en cliquant sur le bouton « Get code ».  Prenez  le  code  correspondant  à  la  création  d’IFRAME    et  non  le  code  Html5.  Faîtes  apparaître  le  widget  dans  la  sidebar  de  la  page  d’accueil  en  faisant  glisser  le  widget  de  type  « texte » dans  la  « colonne principale », au‐dessous de la liste déroulante «  Méta ». VII. Modifier des paramètres du thème Pour modifier des paramètres du thème   ‐  Barre latéral Menu «Apparence»  Onglet  «gérer les thèmes»    cliquer sur le lien « personnaliser» du thème en question  ‐  Barre  latérale  de  menu  Menu « Apparence»,  choisir  les  différentes  autres  options  en fonction des besoins   1) Modifier le header : mettre l’image « header.jpg » fournie.  2) Supprimer la mention « Un site utilisant WordPress » du header. 3) Attribuer des couleurs, images de fond au site. 4) Modifier la mention « Fièrement propulsé par WordPress » du footer en indiquant votre nom et  prénom.   17  
  18. 18. Exercice 2 – Appliquer  Nous  continuerons  à  travailler  ici  sur  le  site  précédent.  Quelques  applications des notions vues précédemment :  1) Intégrez une vidéo Youtube dans un des articles précédemment rédigés. 2) Est‐ce possible d’intégrer une vidéo dans le sidebar ? Si oui, comment ? 3) On  souhaiterait,  dans  la  page  « qui  suis‐je ? »,  afficher  une  galerie  de  photos/images.  Proposer deux solutions pour la création de cette galerie :    Créez la galerie en utilisant l’option de création de  galerie native de WordPress (voir  insertion de médias),    Créez la galerie en proposer une autre solution.   Comparez les solutions. 4) Faire apparaître le texte de présentation suivant, en début de la sidebar. Mettre le lien « en  savoir plus sur moi ».    18  
  19. 19. Exercice 3 – réalisation d’un site classique  I. Présentation du projet  Ce projet est différent du précédent car il permet de créer un site classique (ici type portfolio). Le projet précédent s’appuyait sur la création d’un blog. Vous devrez réaliser un portfolio pour une « professionnelle ». Cette travailleuse indépendante a 2 activités :  une  activité  « artistique »,    la  création  de  dessins  au  pastel  et  une  activité  « print » correspondant à la création de logos, flyers, plaquettes…  L’arborescence souhaitée pour le portfolio est la suivante :         ACCUEIL : Qui suis‐je ? Présentation de l’artiste sous forme de texte, image  Dessins au pastel      Graphisme          Me contacter Présentation des dessins      Présentation de réalisations « print»              Coordonnées (tel – mail) ‐ Une description accompagne     les réalisations sont accompagnées    chaque dessin        d’une description ‐ Une description générale de           cette rubrique introduit les dessins  Mentions légales : accessible par lien dans le pied de page.  Remarques :   ‐ la  professionnelle  doit  pouvoir  rajouter  de  nouveaux  dessins  sur  la  page.  Les  plus  récents apparaitront en premier.  ‐ Il en est de même pour les réalisations print.  1) Indiquez  sur  l’arborescence,  comment  vous  procèderez  pour  chaque  élément  (page  au  sens  internet  de l’arborescence : créerez‐vous des articles WP ou des pages WP ? 2) En vous inspirant de http://aliasromy.com, créez les pages internet du portfolio.  Remarques :   ‐ Vous  utiliserez  un  des  2  thèmes  installés  dans  WordPress  « twenty  twelve »  ou   « twenty eleven ».  ‐ Votre page d’accueil est une page statique (au sens Wordpress et non un blog), il vous  faudra donc l’indiquer grâce au menu du tableau de bord, après avoir cliqué sur le lien  « personnalisé » du thème.   ‐ Vous  devrez  utiliser  ici  la  création  d’un  menu  personnalisé  (voir  apparence  menu)  (http://www.wp‐facile.com/comment‐creer‐menu‐personnalise‐wordpress‐3‐3‐1/)  ‐ Pour mettre le lien vers la page mention légale, utilisez l’éditeur de la page footer.php  (page  qui  indique  le  contenu  du  pied  de  page).  Pour  le  thème  twenty  eleven,  la  procédure est la suivante : Apparence  Editeur, puis dans la colonne de droite, choisir  « pied de page » et modifier le lien.   19  

×