RÉUSSIR SON SITE A L’AIDE DE WORDPRESS

4 avril 2013

ORDRE DU JOURINTRODUCTION ÉTUDES DE CAS UTILISATION DE WORDPRESSINSTALLATION DE L'ENVIRONNEMENT- ATELIER PRATIQUE -

LUNCH

MODIFICATIONS D’UN THÈME CRÉATION D’UN THÈME PERSONNALISÉ- ATELIER PRATIQUE -MEILLEURES PRATIQUESDEBRIEF

INTRODUCTION

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

L’HISTORIQUE DE WORDPRESS

2003 CRÉATION DU LOGICIEL

2005 CRÉATION D’AUTOMATTIC

2008 VIRAGE CMS

2010 LANCEMENT DE WORDPRESS 3

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

OPEN SOURCEPar 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

LE MODÈLE AUTOMATTIC

CMSDEF: 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ÉESÉPARATION ENTRE CONTENU ET PRÉSENTATION

BLOGUE SITE CORPORATIFPORTFOLIO

HÉBERGEMENT

FILE TRANSFER PROTOCOLHTTP://FILEZILLA-PROJECT.ORG/

COMMENT CHOISIR SON HÉBERGEURHÉBERGEMENTHTTP://CA.GODADDY.COM/ À PARTIR DE 2.99$ / MOISHTTP://WWW.ARVIXE.COM À PARTIR DE 4$ / MOISHTTP://FUNIO.COM/WEB-HOSTING À PARTIR DE 6$ / MOIS

PRÉREQUIS DE WORDPRESSPHP 5.2.4 OR GREATERMYSQL 5.0 OR GREATER

ACHAT DE NOM DE DOMAINEHTTP://CA.GODADDY.COM/HTTPS://WWW.DOMAINSATCOST.CA/

CPANEL

CLOUD COMPUTING

SERVEUR À LA DEMANDE

175$ / an

POURQUOI WORDPRESS

Source : http://trends.builtwith.com/cms

ÉTUDES DE CAS

HOTELHTTP://WWW.BEDFORD-HOTEL.CO.UK/

SITE D’INFORMATIONHTTP://WWW.GIORNALEDIBARGANEWS.COM/

BLOGUEHTTP://WWW.MIXEUR.TV/

AGENCE CRÉATIVEHTTP://WWW.TORNOBAMBINO.COM/

UTILISATION DE WORDPRESS

INTERFACE D’ADMINISTRATION

PAGE VS POSTPOSTUTILISER POUR DU CONTENU DYNAMIQUEDE NATURE CHRONOLOGIQUE

PAGESUTILISER POUR LE CONTENU STATIQUEDE NATURE HIÉRARCHIQUE

CRÉATION D’UN NOUVEL ARTICLE

CATÉGORIES ET MOTS-CLÉS

GESTION DES COMMENTAIRES

GESTION DES PAGES

ÉDITEUR DE TEXTE

POUR COPIER DU TEXTE À PARTIR DE WORDUTILISER LA FONCTION « PASTE AS PLAIN TEXT »

AJOUT D’UN LIEN

AJOUT D’UNE IMAGE

BIBLIOTHÈQUE DE MÉDIAS

PRÉFÉRENCE DE LA BIBLIOTHÈQUE

CRÉATION D’UNE GALERIE D’IMAGES

AJOUT D’UN VIDEO YOUTUBEBIG BUCK BUNNYHTTP://VIMEO.COM/1084537

CRÉATION DE MENUS PERSONNALISÉS

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

GESTION DE L’APPARENCE

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.

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/

CHOISIR SON THEME

PAGE TEMPLATES

LA PAGE D’ACCUEILSETTINGS >> READING

LES EXTENSIONSATTENTION : UTILISER AVEC DISCERNEMENT

PLAYER VIDÉO

UTILISATION DES WIDGETS

GESTION DES UTILISATEURS

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

SCREENS OPTIONS

LES RÉGLAGESPERMALINK

INSTALLATION Environnement de développement

WAMP SERVERVOUS DEVEZ AVOIR PRÉALABLEMENT INSTALLÉ

DÉMARRER WAPSERVER

STOP

REBOOT

START

MAMP SERVER

INSTALLATION MYSQLALLER DANS LA CONSOLE MYSQLCHANGER LE MOT DE PASSE

UPDATE MYSQL.USER SET PASSWORD=PASSWORD('QSMIU1AROVZ5EC05NDTD')WHERE USER='ROOT';

FLUSH PRIVILEGES;

CRÉATION DU FICHIER « TEST.TXT »C:\WAMP\WWW

CONFIGURATION PHPMYADMIN

C:\WAMP >> APPS >> PHPMYADMIN3.5.1

PHPMYADMINCONFIG

/* 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;

PHPMYADMINHTTP://LOCALHOST/PHPMYADMIN/

CRÉER UNE NOUVELLE BASE DE DONNÉECAMPUSWP

COPIER LES FICHIERS DE WORDPRESS

MODIFICATION WP-CONFIGRENOMMER 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');

INSTALLATION DE WORDPRESSHTTP://LOCALHOST/WP-ADMIN/INSTALL.PHP

ATELIER PRATIQUEPersonnalisation d’une installation

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

MODIFICATIONS D’UN THÈME

LES OUTILSFIREBUG (MAC & PC)HTTPS://ADDONS.MOZILLA.ORG/FR/FIREFOX/ADDON/FIREBUG/

SUBLIME TEXT (MAC & PC)HTTP://WWW.SUBLIMETEXT.COM/2

HTML

CSS

CONTENU STATIQUE VS DYNAMIQUE

FONCTIONNEMENT D’UN SITE DYNAMIQUECOUCHE DONNÉES COUCHE LOGIQUE COUCHE PRÉSENTATION

OBLIGATOIREI N D E X . P H P S T Y L E . C S S

OPTIONNELSS I D E B A R . P H PC O M M E N T S . P H P

LE SQUELETTE DE WORDPRESS

EXPLORER LA STRUCTURE D’UNE PAGE

ÉDITEUR DE WORDPRESSAPPEARANCE >> EDITOR

CHANGER LA COULEUR DU BACKGROUND

CRÉATION D’UN THEMEPERSONALISÉ

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

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

ACTIVER VOTRE THEME

CHANGER L’IMAGE HEADER

É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);}

MODIFICATION DES FONTS

GOOGLE FONTSHTTP://WWW.GOOGLE.COM/WEBFONTS

CRÉER UN FORMULAIREHTTP://WORDPRESS.ORG/EXTEND/PLUGINS/CONTACT-FORM-7/

AJOUT D’UN FAVICONHTTP://WWW.XICONEDITOR.COM/

HEADER.PHP

<LINK REL="SHORTCUT ICON" HREF="<?PHP ECHOGET_STYLESHEET_DIRECTORY_URI(); ?>/FAVICON.ICO" />

CONFIGURATION DE L’ENVIRONNEMENT LIVEVIA 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 »

ATELIER PRATIQUECréation d’un theme personnalisé

ATELIER PRATIQUECRÉATION ET PERSONNALISATION DE VOTRE THEME- CRÉER UN CHILD THEME- MODIFICATIONS DES COULEURS

- AJOUT DE NOUVELLES FONTS- CRÉATION D’UN FORMULAIRE-

MEILLEURES PRATIQUES

RESPONSIVE DESIGNHTTP://MEDIAQUERI.ES/

OPTIMISÉ POUR LE MOBILEHTTP://WWW.BRAVENEWCODE.COM/PRODUCT/WPTOUCH-PRO

LES EXTENSIONS

ANTI-SPAMHTTP://WORDPRESS.ORG/EXTEND/PLUGINS/AKISMET/

UTILITAIRE HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/JETPACK/

FORMULAIRES

HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/CONTACT-FORM-7/

ATTENTION : UTILISER AVEC DISCERNEMENT

SEOHTTP://WORDPRESS.ORG/EXTEND/PLUGINS/WORDPRESS-SEO/

GOOGLE WEBMASTER TOOLS

GOOGLE SITE MAPINDEX-FOLLOWPERMALINK (TITRE DE LA PAGE)BREADCRUMB

OPTIMISATION DES PAGES

FACEBOOKHTTPS://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>

OUTIL DE PARTAGEHTTP://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>

E-COMMERCEHTTP://WWW.SHOPIFY.COM/

ANALYTICSHTTPS://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>

ÉVITER LES VIRUS

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 !

HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/TAC/

CHOISIR SON MOT DE PASSEHTTP://KEEPASS.INFO/DOWNLOAD.HTML

MISES À JOURS

- 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 !!!

LES RÈGLES À RESPECTER

Mises à jours

WordpressLes themesLes plugins

ENCRYPTIONHTTPS://API.WORDPRESS.ORG/SECRET-KEY/1.1/SALT

Modifier le fichier > wp-config.php

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;

QUELQUES RESSOURCESHTTP://WORDPRESSE.TVHTTP://CODEX.WORDPRESS.ORG/

HTTP://WP.TUTSPLUS.COM/HTTP://WWW.PRESSCODERS.COM

MERCI

Mes coordonnées

Frédéric Caron

Frederic.caron@infopresse.com

Twitter : @fred_caron

Linkedin : ca.linkedin.com/in/caronf