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

6.
L’installation est finie !
6

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