SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
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 

 
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 

 
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 

 
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 

 
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 

 
 

L’installation est finie ! 




                                        




                              6 

 
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 

 
 

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 

 
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 

 
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 à l'administration 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 

 
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 

 
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 

 
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 dans
le 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 

 
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 et
ré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 11
septembre, 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ébut
d’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 de
cosmé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 

 
 ‐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 

 
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 

 
 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 

 
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 

 
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 

 

Contenu connexe

Tendances

Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
Khadim Mbacké
 

Tendances (20)

Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Tp3 - Application SOA avec BPEL
Tp3 - Application SOA avec BPELTp3 - Application SOA avec BPEL
Tp3 - Application SOA avec BPEL
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
 
Les collections en Java
Les collections en JavaLes collections en Java
Les collections en Java
 
Conception et Réalisation d’une application de Gestion SCOLAIRE
Conception et Réalisation d’une application de Gestion SCOLAIREConception et Réalisation d’une application de Gestion SCOLAIRE
Conception et Réalisation d’une application de Gestion SCOLAIRE
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
La plateforme JEE
La plateforme JEELa plateforme JEE
La plateforme JEE
 
Android-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsAndroid-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intents
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
 
Arbre et algorithme de recherche
Arbre et algorithme de rechercheArbre et algorithme de recherche
Arbre et algorithme de recherche
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Introduction aux bases de données
Introduction aux bases de donnéesIntroduction aux bases de données
Introduction aux bases de données
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Développement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EEDéveloppement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EE
 
Prise en main de votre PC - Windows 10
Prise en main de votre PC - Windows 10Prise en main de votre PC - Windows 10
Prise en main de votre PC - Windows 10
 
Reporting avec JasperServer & iReport
Reporting avec JasperServer & iReportReporting avec JasperServer & iReport
Reporting avec JasperServer & iReport
 
Introduction JavaEE
Introduction JavaEEIntroduction JavaEE
Introduction JavaEE
 

Similaire à Tp1 wp etud

Tutoriel Site Internet
Tutoriel Site InternetTutoriel Site Internet
Tutoriel Site Internet
tank98camera
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Chi Nacim
 
présentation wordpress
présentation wordpressprésentation wordpress
présentation wordpress
monsieurpixel
 
Sécuriser un site Wordpress
Sécuriser un site WordpressSécuriser un site Wordpress
Sécuriser un site Wordpress
bestyuna
 

Similaire à Tp1 wp etud (20)

Installer word press en local, automatique, simplement
Installer word press en local, automatique, simplementInstaller word press en local, automatique, simplement
Installer word press en local, automatique, simplement
 
WordPress
WordPressWordPress
WordPress
 
mise en place de wordpresss sous Ubuntu 22.04
mise en place de wordpresss sous Ubuntu 22.04mise en place de wordpresss sous Ubuntu 22.04
mise en place de wordpresss sous Ubuntu 22.04
 
2. Prestashop - Installation
2. Prestashop - Installation2. Prestashop - Installation
2. Prestashop - Installation
 
WordPress
WordPressWordPress
WordPress
 
Exemple demarrage wp_v01
Exemple demarrage wp_v01Exemple demarrage wp_v01
Exemple demarrage wp_v01
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Tutoriel Site Internet
Tutoriel Site InternetTutoriel Site Internet
Tutoriel Site Internet
 
Les 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressLes 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPress
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Atelier 5
Atelier 5Atelier 5
Atelier 5
 
Sécurité wordpress
Sécurité wordpressSécurité wordpress
Sécurité wordpress
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Optimiser WordPress – Checklist après installation
Optimiser WordPress – Checklist après installationOptimiser WordPress – Checklist après installation
Optimiser WordPress – Checklist après installation
 
Formation wp contenu - livret
Formation wp   contenu - livretFormation wp   contenu - livret
Formation wp contenu - livret
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 
Sécuriser son site wordpress
Sécuriser son site wordpressSécuriser son site wordpress
Sécuriser son site wordpress
 
présentation wordpress
présentation wordpressprésentation wordpress
présentation wordpress
 
Sécuriser un site Wordpress
Sécuriser un site WordpressSécuriser un site Wordpress
Sécuriser un site Wordpress
 

Tp1 wp etud

  • 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. 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. 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. 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. 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   
  • 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.   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. 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. 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 à l'administration 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. 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. 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. 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 dans le 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. 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 et ré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 11 septembre, 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ébut d’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 de cosmé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.  ‐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. 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.  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. 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. 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