WPIA#3 
Un site de collectivité 
sur WordPress ? 
retours d'XP 
Jean-Baptiste Audras, développeur web à l'Atelier 111 
@AudrasJb | @atelier111
Développeur web utilisant WordPress depuis «Ella» (v2.1, 2007) 
Gestion technique de projet, développeur front et back-end 
Grenoblois depuis pendant 8 bonnes années 
Manufacture éditoriale et graphique depuis 2008 
Un pôle création graphique (Chambéry/Grenoble) 
& un pôle développement web (Valence) ; 4 associés
On fait pas mal 
de sites publics 
(mais pas que !)
La question qui 
tue
WordPress est il 
soluble dans le 
secteur public ? 
Oui!
Les spécificités 
du secteur public
Les marchés publics et 
consultations 
complexité administrative des dossiers 
(faut apprendre à les faire efficacement) 
délais d'envoi des dossiers souvent très courts 
(mais secteur privé idem) 
pour bcp d'agences, l'impression que les dés sont pipés 
(c'est finalement rare !) 
périodes pré-électorales : plus rien 
(mais après, çaÿ la fête !) 
des maquettes non rémunérées à réaliser en avant-projet 
(hèlas oui !)
Une tendance à la 
professionnalisation des 
personnels 
de + en + de cursus en com' = le baratin marche moins bien =D 
des cahiers des charges (=CCTP) de + en + détaillés et fournis 
une envie d'autonomie vis à vis des presta à moyen/long terme 
de bonnes connaissances de l'offre technique à disposition 
souvent une bonne culture du web ; parfois un vrai benchmarking
et des questions légales 
accessibilité numérique : respect du RGAA obligatoire = expertise 
CNIL : de + en + important ; de + en + contraignant 
Les prestataires doivent être opés sur ces questions 
Côté WordPress, aucune contre-indication
Last but not least 
Plus envie de se retrouver pieds 
et poings liés !! 
L'open source est demandé dans 95% des cas 
(estimation pifomètre institute©) 
L'open source devient une norme
Un bon contexte pour WP 
CMS le plus utilisé au monde… force de la communauté 
de + en + de prestataires, y compris historiques 
open source et dév spéc. forcément GPL 
en pointe niveau accessibilité 
>> https://make.wordpress.org/accessibility/ 
un backoffice efficace et facile à prendre en main 
une maintenance rythmée par les MAJ WP 
un référencement naturel efficace
Les risques 
«WordPress, c'est pour les blogs» 
à désarmorcer ! 
WordPress est surtout en concurrence avec les autres CMS libres
De plus en plus de concurrents 
utilisant WP 
Et c'est tant mieux ! 
Bref… je me lance et participe à un appel d'offres public…
Quelques conseils 
Argumenter autour d'une solution utilisant WP, fonctionnalité par 
fonctionnalité 
Faire des maquettes fonctionnelles, pas graphiques ! 
Attention à la tentation du low-cost 
2 jours 1 semaine 20 jours plus tard, le verdict tombe…
On a le marché !
Et maintenant ? Les étapes classiques 
1. Conception 
2. DA / création graphique 
3. Intégration 
4. Développement WP 
5. Pré-prod / tests 
6. Recette / tests de charge / débug 
7. Intégration du contenu / formation 
8. Mise en prod puis mise en ligne 
9. Maintenance préventive et corrective / suivi 
WP intervient sur plusieurs étapes
Conception 
1. Le plan de conception 
où l'on va articuler l'arborescence, les PAGES WP, les CPT, les templates 
nécessaires, les éléments contextuels de chaque template
Conception 
2. Le maquettage fonctionnel 
où l'on représente graphiquement les fonctionnalités du CdC
DA/création graphique 
Là, tout dépend. 
Sur thème existant ou framework : design forcément contraint 
Sur-mesure : no soucy, le créa peut sortir la boîte à idées ! 
Dans tous les cas : validation 
(ps : chez nous, on ne fait que du sur-mesure, systématiquement)
Intégration HTML/CSS/JS 
dév front-end 
Sur thème existant ou framework : retouches du thème 
Sur-mesure : définir les classes WP obligatoires, le balisage des 
modules spécifiques (API, formulaires, etc.) : le dév WP doit 
accompagner l'intégrateur
Développement WP 
Installation WP + environnement de la solution 
Quelques extensions : 
Contact Form 7 
ACF (si possible sans plugin en prod) 
MailJet (+ API) 
BackWPup (sauvegardes auto) 
Plugin de vue de l'arborescence (+ drag&drop) 
Google XML Sitemaps 
Accès restreint (?)
Développement WP 
Installation WP + environnement de la solution 
Les types de contenus classiques : 
Actualités 
Agenda 
Fiches élus 
Annuaire 
Diaporamas 
+ CPT spécifiques : équipements (carto), documents extranet 
privés, travaux en cours, flash infos, etc.
Développement WP 
Développement des templates 
Les templates de contenus 
Classiques : front-page.php, index.php, page.php, 404.php, 
search.php, category.php, single.php 
Pages spécifiques de l'arbo : page-contact.php, page-actualites.php, 
etc. 
CPT : single-montypdecontenu.php, taxonomy-rubrique.php, etc. 
Les templates contextuels 
Classiques : header.php, footer.php, sidebar.php 
Spécifiques : sidebar-newsletter.php, sidebar-agenda.php, sidebar-actus. 
php, header-home.php, etc. 
C'est là que se situe le gros du boulot de dév !
Pré-prod / tests 
Utiliser un serveur dédié spécifique avec une install pérénne. 
Objectifs : 
Pousser les développements successifs sur un environnement 
reproduisant le serveur prod 
Faire les tests de montée en charge avec des contenus factices 
Faire le débuggage de la phase de dév 
Faire valider la solution et le fonctionnement du site 
Disposer après la mise en ligne d'une version de test détachée du site 
en prod
Bascule sur le serveur de prod 
(valable pour tout projet WP) 
Bonne pratique : placer WP dans un répertoire /prod 
JAMAIS de modifications en direct (local > pré-prod > prod) 
Interdire l'accès aux listing des dossiers et aux fichiers sensibles 
Ne pas héberger PHPMyAdmin sur le serveur, déplacer wp-config.php 
dans un autre répertoire 
(quelques tips ici et sur secupress 
) 
Enfin : mise en place du socle de base de contenus du site
Formation des administrateurs 
et des contributeurs 
EASY! 
Chez nous, rarement >1j sauf spécificités ou grand nombre de 
contributeurs 
Facilité à produire de la doc réutilisable = gain de temps 
Attention, screenshots de votre doc vite hasbeen !
La mise en ligne 
Les contenus sont ok ? les admins et contributeurs fin prêts ? 
Les tickets de bugs sont tous fermés ? 
Alors c'est parti !
Penser à l'essentiel 
Nettoyer WP de ses contenus factices (+uploads) 
déplacer WP sur le domaine principal 
juste déplacer index.php puis ajouter /prod dans la ligne suivante : 
require( dirname( __FILE__ ) . '/prod/wp-blog-header.php' ); 
Pour en savoir +, RTFM 
) 
Autoriser les bots d'indexation 
Générer les fichiers sitemap.xml 
Lancer une sauvegarde de l'ensemble de l'install 
Récupérer cette sauvegarde pour mettre à jour le serveur de pré-prod 
: une redondance indispensable
YAY! On y est ! 
THE BIG UGLY WEBSITE 
FUGLY UGLY 
(for when plain ugly websites aren't enough) 
Wednesday October 22, 2014 
HI AMBER! 
how are your Grams? 
TWITTER UGLY
Et enfin… 
Prestation de référencement/communication spécifique : il est temps 
de se retrousser les manches 
Souscrire aux services web classiques de suivi : Webmaster Tools, etc. 
Livrer le certificat de conformité RGAA 
Implémenter le suivi des statistiques : Google Analytics 
PIWIK ! (open source + CNIL-compatible + super plugin WP ici 
) 
Suivi de la maintenance : chez nous, 12 mois compris. 
Puis le client renouvelle par tranche
Et voilà ! 
Merci et à bientôt 
(présentation disponible sur atelier-111.fr/wpia3) 
Réalisé avec reveal.js 
Contact : jeanbaptisteaudras@atelier-111.fr // @AudrasJb

Un site de collectivité sur WordPress ? Méthodes et retours d'XP

  • 1.
    WPIA#3 Un sitede collectivité sur WordPress ? retours d'XP Jean-Baptiste Audras, développeur web à l'Atelier 111 @AudrasJb | @atelier111
  • 2.
    Développeur web utilisantWordPress depuis «Ella» (v2.1, 2007) Gestion technique de projet, développeur front et back-end Grenoblois depuis pendant 8 bonnes années Manufacture éditoriale et graphique depuis 2008 Un pôle création graphique (Chambéry/Grenoble) & un pôle développement web (Valence) ; 4 associés
  • 3.
    On fait pasmal de sites publics (mais pas que !)
  • 4.
  • 5.
    WordPress est il soluble dans le secteur public ? Oui!
  • 6.
    Les spécificités dusecteur public
  • 7.
    Les marchés publicset consultations complexité administrative des dossiers (faut apprendre à les faire efficacement) délais d'envoi des dossiers souvent très courts (mais secteur privé idem) pour bcp d'agences, l'impression que les dés sont pipés (c'est finalement rare !) périodes pré-électorales : plus rien (mais après, çaÿ la fête !) des maquettes non rémunérées à réaliser en avant-projet (hèlas oui !)
  • 8.
    Une tendance àla professionnalisation des personnels de + en + de cursus en com' = le baratin marche moins bien =D des cahiers des charges (=CCTP) de + en + détaillés et fournis une envie d'autonomie vis à vis des presta à moyen/long terme de bonnes connaissances de l'offre technique à disposition souvent une bonne culture du web ; parfois un vrai benchmarking
  • 9.
    et des questionslégales accessibilité numérique : respect du RGAA obligatoire = expertise CNIL : de + en + important ; de + en + contraignant Les prestataires doivent être opés sur ces questions Côté WordPress, aucune contre-indication
  • 10.
    Last but notleast Plus envie de se retrouver pieds et poings liés !! L'open source est demandé dans 95% des cas (estimation pifomètre institute©) L'open source devient une norme
  • 11.
    Un bon contextepour WP CMS le plus utilisé au monde… force de la communauté de + en + de prestataires, y compris historiques open source et dév spéc. forcément GPL en pointe niveau accessibilité >> https://make.wordpress.org/accessibility/ un backoffice efficace et facile à prendre en main une maintenance rythmée par les MAJ WP un référencement naturel efficace
  • 12.
    Les risques «WordPress,c'est pour les blogs» à désarmorcer ! WordPress est surtout en concurrence avec les autres CMS libres
  • 13.
    De plus enplus de concurrents utilisant WP Et c'est tant mieux ! Bref… je me lance et participe à un appel d'offres public…
  • 14.
    Quelques conseils Argumenterautour d'une solution utilisant WP, fonctionnalité par fonctionnalité Faire des maquettes fonctionnelles, pas graphiques ! Attention à la tentation du low-cost 2 jours 1 semaine 20 jours plus tard, le verdict tombe…
  • 15.
    On a lemarché !
  • 16.
    Et maintenant ?Les étapes classiques 1. Conception 2. DA / création graphique 3. Intégration 4. Développement WP 5. Pré-prod / tests 6. Recette / tests de charge / débug 7. Intégration du contenu / formation 8. Mise en prod puis mise en ligne 9. Maintenance préventive et corrective / suivi WP intervient sur plusieurs étapes
  • 17.
    Conception 1. Leplan de conception où l'on va articuler l'arborescence, les PAGES WP, les CPT, les templates nécessaires, les éléments contextuels de chaque template
  • 18.
    Conception 2. Lemaquettage fonctionnel où l'on représente graphiquement les fonctionnalités du CdC
  • 19.
    DA/création graphique Là,tout dépend. Sur thème existant ou framework : design forcément contraint Sur-mesure : no soucy, le créa peut sortir la boîte à idées ! Dans tous les cas : validation (ps : chez nous, on ne fait que du sur-mesure, systématiquement)
  • 20.
    Intégration HTML/CSS/JS dévfront-end Sur thème existant ou framework : retouches du thème Sur-mesure : définir les classes WP obligatoires, le balisage des modules spécifiques (API, formulaires, etc.) : le dév WP doit accompagner l'intégrateur
  • 21.
    Développement WP InstallationWP + environnement de la solution Quelques extensions : Contact Form 7 ACF (si possible sans plugin en prod) MailJet (+ API) BackWPup (sauvegardes auto) Plugin de vue de l'arborescence (+ drag&drop) Google XML Sitemaps Accès restreint (?)
  • 22.
    Développement WP InstallationWP + environnement de la solution Les types de contenus classiques : Actualités Agenda Fiches élus Annuaire Diaporamas + CPT spécifiques : équipements (carto), documents extranet privés, travaux en cours, flash infos, etc.
  • 23.
    Développement WP Développementdes templates Les templates de contenus Classiques : front-page.php, index.php, page.php, 404.php, search.php, category.php, single.php Pages spécifiques de l'arbo : page-contact.php, page-actualites.php, etc. CPT : single-montypdecontenu.php, taxonomy-rubrique.php, etc. Les templates contextuels Classiques : header.php, footer.php, sidebar.php Spécifiques : sidebar-newsletter.php, sidebar-agenda.php, sidebar-actus. php, header-home.php, etc. C'est là que se situe le gros du boulot de dév !
  • 24.
    Pré-prod / tests Utiliser un serveur dédié spécifique avec une install pérénne. Objectifs : Pousser les développements successifs sur un environnement reproduisant le serveur prod Faire les tests de montée en charge avec des contenus factices Faire le débuggage de la phase de dév Faire valider la solution et le fonctionnement du site Disposer après la mise en ligne d'une version de test détachée du site en prod
  • 25.
    Bascule sur leserveur de prod (valable pour tout projet WP) Bonne pratique : placer WP dans un répertoire /prod JAMAIS de modifications en direct (local > pré-prod > prod) Interdire l'accès aux listing des dossiers et aux fichiers sensibles Ne pas héberger PHPMyAdmin sur le serveur, déplacer wp-config.php dans un autre répertoire (quelques tips ici et sur secupress ) Enfin : mise en place du socle de base de contenus du site
  • 26.
    Formation des administrateurs et des contributeurs EASY! Chez nous, rarement >1j sauf spécificités ou grand nombre de contributeurs Facilité à produire de la doc réutilisable = gain de temps Attention, screenshots de votre doc vite hasbeen !
  • 27.
    La mise enligne Les contenus sont ok ? les admins et contributeurs fin prêts ? Les tickets de bugs sont tous fermés ? Alors c'est parti !
  • 28.
    Penser à l'essentiel Nettoyer WP de ses contenus factices (+uploads) déplacer WP sur le domaine principal juste déplacer index.php puis ajouter /prod dans la ligne suivante : require( dirname( __FILE__ ) . '/prod/wp-blog-header.php' ); Pour en savoir +, RTFM ) Autoriser les bots d'indexation Générer les fichiers sitemap.xml Lancer une sauvegarde de l'ensemble de l'install Récupérer cette sauvegarde pour mettre à jour le serveur de pré-prod : une redondance indispensable
  • 29.
    YAY! On yest ! THE BIG UGLY WEBSITE FUGLY UGLY (for when plain ugly websites aren't enough) Wednesday October 22, 2014 HI AMBER! how are your Grams? TWITTER UGLY
  • 30.
    Et enfin… Prestationde référencement/communication spécifique : il est temps de se retrousser les manches Souscrire aux services web classiques de suivi : Webmaster Tools, etc. Livrer le certificat de conformité RGAA Implémenter le suivi des statistiques : Google Analytics PIWIK ! (open source + CNIL-compatible + super plugin WP ici ) Suivi de la maintenance : chez nous, 12 mois compris. Puis le client renouvelle par tranche
  • 31.
    Et voilà ! Merci et à bientôt (présentation disponible sur atelier-111.fr/wpia3) Réalisé avec reveal.js Contact : jeanbaptisteaudras@atelier-111.fr // @AudrasJb