- Maîtriser chaque aspect de la conception d’un site web - Connaître toutes les meilleures pratiques liées à l’utilisation de WordPress - Optimiser la performance de son site

1. RÉUSSIR SON SITE A L’AIDE DE WORDPRESS
4 avril 2013

2. ORDRE DU JOUR
INTRODUCTION
ÉTUDES DE CAS
UTILISATION DE WORDPRESS
INSTALLATION DE L'ENVIRONNEMENT
- ATELIER PRATIQUE -
LUNCH
MODIFICATIONS D’UN THÈME
CRÉATION D’UN THÈME PERSONNALISÉ
- ATELIER PRATIQUE -
MEILLEURES PRATIQUES
DEBRIEF

3. INTRODUCTION

5. EST-CE QU’IL FAUT
FAIRE DE LA
PROGRAMMATION ?

6. L’HISTORIQUE DE WORDPRESS
2003 CRÉATION DU LOGICIEL
2005 CRÉATION D’AUTOMATTIC
2008 VIRAGE CMS
2010 LANCEMENT DE WORDPRESS 3

7. 2 VERSIONS DE WORDPRESS
• Vous êtes responsable de l’hébergement
• Vous êtes responsable des mises a jours
• Vous êtes propriétaire des données
• Aucune restriction de mise en page
• Possibilité d’ajouter des fonctionnalités
• Plus difficile a utiliser
• Hébergé sur le Cloud
• Mises à jour automatiques
• Vos données détenues par Automattic
• Choix limité de mise en page
• Fonctionnalitées prédéfinies
• Très facile d’utilisation

8. OPEN SOURCE
Par définition « opensource » c’est la capacité de changer le code source. Or, le
code source c’est la « recette » qui permet au logiciel de fonctionner et 99% du
temps il n’est pas nécessaire et même préférable de ne pas altéré le code source du
logiciel.
OPEN SOURCE COMMERCIALE
Code source Ouvert Fermé
Coût Gratuit Payant
Support Non Inclus Inclus
Évolution / Vision Pas Claire Claire

9. LE MODÈLE AUTOMATTIC

10. CMS
DEF: UN SYSTÈME DE GESTION DE CONTENU PERMET DE GÉRER LES OPÉRATIONS DE
GESTION À PARTIR D'INTERFACE WEB CONÇU A CET EFFET.
UTILISATION D'INTERFACE WEB
ÉDITION DE PAGE SIMPLIFIÉE
SÉPARATION ENTRE CONTENU ET PRÉSENTATION
BLOGUE
SITE CORPORATIF
PORTFOLIO

11. HÉBERGEMENT

12. FILE TRANSFER PROTOCOL
HTTP://FILEZILLA-PROJECT.ORG/

13. COMMENT CHOISIR SON HÉBERGEUR
HÉBERGEMENT
HTTP://CA.GODADDY.COM/ À PARTIR DE 2.99$ / MOIS
HTTP://WWW.ARVIXE.COM À PARTIR DE 4$ / MOIS
HTTP://FUNIO.COM/WEB-HOSTING À PARTIR DE 6$ / MOIS
PRÉREQUIS DE WORDPRESS
PHP 5.2.4 OR GREATER
MYSQL 5.0 OR GREATER
ACHAT DE NOM DE DOMAINE
HTTP://CA.GODADDY.COM/
HTTPS://WWW.DOMAINSATCOST.CA/

14. CPANEL

15. CLOUD COMPUTING

16. SERVEUR À LA DEMANDE
175$ / an

17. POURQUOI WORDPRESS
Source : http://trends.builtwith.com/cms

18. ÉTUDES DE CAS

19. HOTEL
HTTP://WWW.BEDFORD-HOTEL.CO.UK/

20. SITE D’INFORMATION
HTTP://WWW.GIORNALEDIBARGANEWS.COM/

21. BLOGUE
HTTP://WWW.MIXEUR.TV/

22. AGENCE CRÉATIVE
HTTP://WWW.TORNOBAMBINO.COM/

23. UTILISATION DE WORDPRESS

24. INTERFACE D’ADMINISTRATION

25. PAGE VS POST
POST
UTILISER POUR DU CONTENU DYNAMIQUE
DE NATURE CHRONOLOGIQUE
PAGES
UTILISER POUR LE CONTENU STATIQUE
DE NATURE HIÉRARCHIQUE

26. CRÉATION D’UN NOUVEL ARTICLE

27. CATÉGORIES ET MOTS-CLÉS

28. GESTION DES COMMENTAIRES

29. GESTION DES PAGES

30. ÉDITEUR DE TEXTE
POUR COPIER DU TEXTE À PARTIR DE WORD
UTILISER LA FONCTION « PASTE AS PLAIN TEXT »

31. AJOUT D’UN LIEN

32. AJOUT D’UNE IMAGE

33. BIBLIOTHÈQUE DE MÉDIAS
PRÉFÉRENCE DE LA BIBLIOTHÈQUE

34. CRÉATION D’UNE GALERIE D’IMAGES

35. AJOUT D’UN VIDEO YOUTUBE
BIG BUCK BUNNY
HTTP://VIMEO.COM/1084537

36. CRÉATION DE MENUS PERSONNALISÉS

37. HIÉRARCHIE DES PAGES
POUR CRÉER DES PAGES AVEC UNE HIÉRACHIE
IL EST IMPORTANT DE RESPECTER L’ORDRE DE CRÉATION
PARENT
- ENFANT

38. GESTION DE L’APPARENCE

39. THEME PAYANT VS GRATUIT
- FONCTIONNALITÉS
- FLEXIBILITÉ
- SÉCURITÉ
- SUPPORT
- QUALITÉ DU DESIGN
MALHEUREUSEMENT, LE SIMPLE FAIT DE PAYER SON THÈME N'EST ABSOLUMENT
PAS GARANT D'AUCUN DE CES POINTS.

40. RECHERCHE DE THEMES
IL EST RECOMMANDÉ D’UTILISER UN THEME DE BASE ET DE LE MODIFIER PLUTÔT
QUE DE TÉLÉCHARGER UN THEME PROVENANT D’UNE SOURCE INCONNUE.
HTTP://WORDPRESS.ORG/EXTEND/THEMES/
HTTP://WPSHOWER.COM/
HTTP://WWW.FABTHEMES.COM/

41. CHOISIR SON THEME

42. PAGE TEMPLATES

43. LA PAGE D’ACCUEIL
SETTINGS >> READING

44. LES EXTENSIONS
ATTENTION : UTILISER AVEC DISCERNEMENT

45. PLAYER VIDÉO

46. UTILISATION DES WIDGETS

47. GESTION DES UTILISATEURS

48. DIFFÉRENTS RÔLES
Fonctionalité Admin Editeur Auteur Contributeur Subscriber
Géré les plugins x
Géré les theme x
Géré commentaires x x
Créer des pages x x
Publier une page x x
Effacer une page x x
Créer un post x x x
Publier un post x x x
Effacer un post x x x
Éditer un post x x x x
Lecture x x x x x

49. SCREENS OPTIONS

50. LES RÉGLAGES
PERMALINK

51. INSTALLATION
Environnement de développement

52. WAMP SERVER
VOUS DEVEZ AVOIR PRÉALABLEMENT INSTALLÉ
DÉMARRER WAPSERVER
STOP
REBOOT
START
MAMP SERVER

53. INSTALLATION MYSQL
ALLER DANS LA CONSOLE MYSQL
CHANGER LE MOT DE PASSE
UPDATE MYSQL.USER SET PASSWORD=PASSWORD('QSMIU1AROVZ5EC05NDTD')
WHERE USER='ROOT';
FLUSH PRIVILEGES;

54. CRÉATION DU FICHIER « TEST.TXT »
C:WAMPWWW

55. CONFIGURATION PHPMYADMIN
C:WAMP >> APPS >> PHPMYADMIN3.5.1

56. PHPMYADMIN
CONFIG
/* SERVER: LOCALHOST [1] */
$I++;
$CFG['SERVERS'][$I]['VERBOSE'] = 'LOCALHOST';
$CFG['SERVERS'][$I]['HOST'] = 'LOCALHOST';
$CFG['SERVERS'][$I]['PORT'] = '';
$CFG['SERVERS'][$I]['SOCKET'] = '';
$CFG['SERVERS'][$I]['CONNECT_TYPE'] = 'TCP';
$CFG['SERVERS'][$I]['EXTENSION'] = 'MYSQLI';
$CFG['SERVERS'][$I]['AUTH_TYPE'] = 'CONFIG';
$CFG['SERVERS'][$I]['USER'] = 'ROOT';
$CFG['SERVERS'][$I]['PASSWORD'] = 'QSMIU1AROVZ5EC05NDTD';
$CFG['SERVERS'][$I]['ALLOWNOPASSWORD'] = TRUE;

57. PHPMYADMIN
HTTP://LOCALHOST/PHPMYADMIN/

58. CRÉER UNE NOUVELLE BASE DE DONNÉE
CAMPUSWP

59. COPIER LES FICHIERS DE WORDPRESS

60. MODIFICATION WP-CONFIG
RENOMMER WP-CONFIG-SAMPE.PHP >> WP-CONFIG.PHP
DEFINE('DB_NAME', 'CAMPUSWP');
/** MYSQL DATABASE USERNAME */
DEFINE('DB_USER', 'ROOT');
/** MYSQL DATABASE PASSWORD */
DEFINE('DB_PASSWORD', 'QSMIU1AROVZ5EC05NDTD');
/** MYSQL HOSTNAME */
DEFINE('DB_HOST', 'LOCALHOST');
/** DATABASE CHARSET TO USE IN CREATING DATABASE TABLES. */
DEFINE('DB_CHARSET', 'UTF8');

61. INSTALLATION DE WORDPRESS
HTTP://LOCALHOST/WP-ADMIN/INSTALL.PHP

62. ATELIER PRATIQUE
Personnalisation d’une installation

63. ATELIER PRATIQUE
- MODIFICATION DU TITRE
- MODIFICATION DE LA STRUCTURE D’URL
- CRÉATION DE PLUSIEURS PAGES (ACCUEIL, A PROPOS, RÉALISATIONS, ETC..)
- RETIRER LA POSSIBILITÉ DE LAISSER DES COMMENTAIRES SUR LES PAGES.
- CRÉER UN MENU
- AJOUTER AU MENU LE BLOGUE
- MODIFICATION DE LA COULEUR DE FOND

64. MODIFICATIONS D’UN THÈME

65. LES OUTILS
FIREBUG (MAC & PC)
HTTPS://ADDONS.MOZILLA.ORG/FR/FIREFOX/ADDON/FIREBUG/
SUBLIME TEXT (MAC & PC)
HTTP://WWW.SUBLIMETEXT.COM/2

66. HTML

67. CSS

68. CONTENU STATIQUE VS DYNAMIQUE

69. FONCTIONNEMENT D’UN SITE DYNAMIQUE
COUCHE DONNÉES COUCHE LOGIQUE COUCHE PRÉSENTATION

70. LE SQUELETTE DE WORDPRESS
OBLIGATOIRE
I N D E X . P H P
S T Y L E . C S S
OPTIONNELS
S I D E B A R . P H P
C O M M E N T S . P H P

71. EXPLORER LA STRUCTURE D’UNE PAGE

72. ÉDITEUR DE WORDPRESS
APPEARANCE >> EDITOR

73. CHANGER LA COULEUR DU BACKGROUND

74. CRÉATION D’UN THEME
PERSONALISÉ

75. QU’EST-CE QU’UN « CHILD THEME »

76. CREATION D’UN « CHILD THEME »
CRÉER UN DOSSIER SOUS « WP-CONTENT/THEMES »
CRÉER UN FICHIER CSS
FAIRE RÉFÉRENCE AU THEME PARENT

77. ACTIVER VOTRE THEME

78. CHANGER L’IMAGE HEADER

79. ÉCRASER LES STYLES EXISTANTS
.ENTRY-CONTENT IMG, .COMMENT-CONTENT IMG, .WIDGET IMG, IMG.HEADER-IMAGE,
.AUTHOR-AVATAR IMG, IMG.WP-POST-IMAGE {
BORDER-RADIUS: 10PX;
BOX-SHADOW: 0 1PX 4PX RGBA(0, 0, 0, 0.2);
}

80. MODIFICATION DES FONTS

81. GOOGLE FONTS
HTTP://WWW.GOOGLE.COM/WEBFONTS

82. CRÉER UN FORMULAIRE
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/CONTACT-FORM-7/

83. AJOUT D’UN FAVICON
HTTP://WWW.XICONEDITOR.COM/
HEADER.PHP
<LINK REL="SHORTCUT ICON" HREF="<?PHP ECHO
GET_STYLESHEET_DIRECTORY_URI(); ?>/FAVICON.ICO" />

84. CONFIGURATION DE L’ENVIRONNEMENT LIVE
VIA VOTRE CONSOLE D’ADMIN
1- PHPMYADMIN
2- CRÉATION DE LA BASE DE DONNÉES
3- COPIE DE VOS FICHIERS
4- MODIFICATION DU FICHIER « WP-CONFIG »

85. ATELIER PRATIQUE
Création d’un theme personnalisé

86. ATELIER PRATIQUE
CRÉATION ET PERSONNALISATION DE VOTRE THEME
- CRÉER UN CHILD THEME
- MODIFICATIONS DES COULEURS
- AJOUT DE NOUVELLES FONTS
- CRÉATION D’UN FORMULAIRE
-

87. MEILLEURES PRATIQUES

88. RESPONSIVE DESIGN
HTTP://MEDIAQUERI.ES/

89. OPTIMISÉ POUR LE MOBILE
HTTP://WWW.BRAVENEWCODE.COM/PRODUCT/WPTOUCH-PRO

90. LES EXTENSIONS
ATTENTION : UTILISER AVEC DISCERNEMENT
ANTI-SPAM
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/AKISMET/
UTILITAIRE
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/JETPACK/
FORMULAIRES
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/CONTACT-FORM-7/

91. SEO
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/WORDPRESS-SEO/
GOOGLE WEBMASTER TOOLS
GOOGLE SITE MAP
INDEX-FOLLOW
PERMALINK (TITRE DE LA PAGE)
BREADCRUMB

92. OPTIMISATION DES PAGES

93. FACEBOOK
HTTPS://DEVELOPERS.FACEBOOK.COM/DOCS/REFERENCE/PLUGINS/FACEPILE/
<DIV ID="FB-ROOT"></DIV>
<SCRIPT>(FUNCTION(D, S, ID) {
VAR JS, FJS = D.GETELEMENTSBYTAGNAME(S)[0];
IF (D.GETELEMENTBYID(ID)) RETURN;
JS = D.CREATEELEMENT(S); JS.ID = ID;
JS.SRC = "//CONNECT.FACEBOOK.NET/EN_US/ALL.JS#XFBML=1&APPID=130002137024824";
FJS.PARENTNODE.INSERTBEFORE(JS, FJS);
}(DOCUMENT, 'SCRIPT', 'FACEBOOK-JSSDK'));</SCRIPT>
<DIV CLASS="FB-LIKE-BOX" DATA-HREF="HTTPS://WWW.FACEBOOK.COM/INFOPRESSE" DATA-WIDTH="
250" DATA-SHOW-FACES="TRUE" DATA-BORDER-COLOR="#FFFFFF" DATA-STREAM="FALSE"
DATA-HEADER="FALSE"></DIV>

94. OUTIL DE PARTAGE
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/ADDTHIS/
<SPAN CLASS='ST_FACEBOOK_HCOUNT' DISPLAYTEXT='FACEBOOK'></SPAN>
<SPAN CLASS='ST_TWITTER_HCOUNT' DISPLAYTEXT='TWEET'></SPAN>
<SPAN CLASS='ST_LINKEDIN_HCOUNT' DISPLAYTEXT='LINKEDIN'></SPAN>
<SPAN CLASS='ST_EMAIL_HCOUNT' DISPLAYTEXT='EMAIL'></SPAN>
<SCRIPT TYPE="TEXT/JAVASCRIPT">VAR SWITCHTO5X=TRUE;</SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="HTTP://W.SHARETHIS.COM/BUTTON/BUTTONS.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">STLIGHT.OPTIONS({PUBLISHER: "F2BF913C-AF1D-4791-
915B-E6D9644E70E7", DONOTHASH: FALSE, DONOTCOPY: FALSE, HASHADDRESSBAR:
TRUE});</SCRIPT>

95. E-COMMERCE
HTTP://WWW.SHOPIFY.COM/

96. ANALYTICS
HTTPS://WWW.GOOGLE.COM/ANALYTICS/
<SCRIPT TYPE="TEXT/JAVASCRIPT">
VAR _GAQ = _GAQ || [];
_GAQ.PUSH(['_SETACCOUNT', 'UA-39364082-1']);
_GAQ.PUSH(['_TRACKPAGEVIEW']);
(FUNCTION() {
VAR GA = DOCUMENT.CREATEELEMENT('SCRIPT'); GA.TYPE = 'TEXT/JAVASCRIPT'; GA.ASYNC = TRUE;
GA.SRC = ('HTTPS:' == DOCUMENT.LOCATION.PROTOCOL ? 'HTTPS://SSL' : 'HTTP://WWW') + '.GOOGLE-ANALYTICS.
COM/GA.JS';
VAR S = DOCUMENT.GETELEMENTSBYTAGNAME('SCRIPT')[0]; S.PARENTNODE.INSERTBEFORE(GA, S);
})();
</SCRIPT>

97. ÉVITER LES VIRUS
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/TAC/
CERTAINS THEMES TROUVÉ SUR LE NET PEUVENT CONTENIR UNE FONCTIONS BASE64() QUI INJECTENT DU CODE
DANS VOTRE SITE. CE CODE N’EST PAS TOUJOURS DANGEREUX, IL EST SOUVENT AJOUTER POUR FAIRE LA
PROMOTION DE LEURS SERVICES.
C’EST UNE FAILLE DE SÉCURITÉ IMPORTANTE !

98. CHOISIR SON MOT DE PASSE
HTTP://KEEPASS.INFO/DOWNLOAD.HTML

99. MISES À JOURS
LES RÈGLES À RESPECTER
- NE JAMAIS MODIFIER LE « CORE » DE WORDPRESS
- LIMITER L’UTILISATION DE PLUG-IN
- CHOISIR JUDICIEUSEMENT SES PLUG-IN
- NE JAMAIS TESTER EN LIGNE
- UTILISER LES « CHILD THEME »
- TOUJOURS FAIRE LES MISES A JOURS !!!
Mises à jours
Wordpress
Les themes
Les plugins

100. ENCRYPTION
HTTPS://API.WORDPRESS.ORG/SECRET-KEY/1.1/SALT
Modifier le fichier > wp-config.php

101. DEBRIEF
UTILISER WORDPRESS UNIQUEMENT S’IL RÉPOND BIEN À VOS BESOINS;
PRENEZ SOIN DE BIEN CHOISIR VOTRE THEME;
LIMITER L’UTILISATION DES EXTENSIONS;
GARDEZ TOUJOURS VOTRE INSTALLATION À JOUR;

102. QUELQUES RESSOURCES
HTTP://WORDPRESSE.TV
HTTP://CODEX.WORDPRESS.ORG/
HTTP://WP.TUTSPLUS.COM/
HTTP://WWW.PRESSCODERS.COM

103. Mes coordonnées
Frédéric Caron
Frederic.caron@infopresse.com
Twitter : @fred_caron
Linkedin : ca.linkedin.com/in/caronf
MERCI