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 

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. 

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). 

 

 

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.  

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  

6 

 

 

L’installation est finie ! 

 

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. 

 

  

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 

 

 

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. 

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 : 

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,

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

  

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.   

  

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.  

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 : 

 

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. 

 

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.  

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 ». 

 

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.