Personnaliser un thème sous Wordpress

WORKSHOP

organiser et promouvoir les métiers du design numérique

Personnaliser un thèmesous WordPressDans les coulisses de la refonte des sitesdesignersinteractifs.org et flashxpress.net

Personnaliser un thème sous WordPressWORKSHOP

À propos des intervenants

webdesigner / intégrateur HTML

responsable technique du site de l’association

1er projet sous WordPress :-)

GB NG

Nicolas Gansformateur chez regart.net formation

Guillaume Brachonsecrétaire général de *designers interactifs*

webdesigner / développeur ActionScript

formateur Flash/ActionScript

pareil ;-)


Contexte

GB

créé en novembre 2006 pour accompagner le lancement de l’association

développé sous Dotclear

associé à plusieurs services en ligne

...mais trop limité (contenu réduit à de « l’actu »)

Le site existant1ère expérience de personnalisation


Contexte

GB

Les attentesDisposer d’un relais de communication efficace et complet

mieux valoriser les missions et les actions de l’association

développer les contenus

intégrer les services

faciliter la mise à jour du site (CMS, multi-utilisateurs, etc.)

lancement septembre 2008


Contexte

GB

Le choix de WordPressUne alternative valable à la solution du « sur-mesure »

moteur de blog populaire et plébiscité (communauté active)

richesse des fonctionnalités et potentiel d’évolution (plugin)

personnalisation simple (principe appliqué au 1er site)

adapté au modèle économique de l’association


Contexte

NG

Le site existantPortail de ressources pour la création et les technologies du web

créé en 1998

sept (!) versions : texte > html > flash > php maison > Mambo > Joomla

site type “portail” avec contenu diversifié : actu, ressources, wiki, webTV en flash, magazine, tchat, forums


Contexte

NG

Un peu d’archéologie...2000


Contexte

NG

Un peu d’archéologie...2002


Contexte

NG

Un peu d’archéologie...2006 (essai charte)


Contexte

NG

Le site existantProblèmes liés à Joomla

soucis n° 1 : la sécurité Architecture défaillante = MAJ impossible = hack du serveur !

admin peu intuitive

« usine à gaz », code source difficile à modifier, manque de souplesse


Contexte

NG

Les attentesPérenniser le site et lui donner une nouvelle jeunesse

upgrade facile par soucis de sécurité

customisation aisée : esthétique et fonctionnelle

CMS convivial en utilisation partagée

recherche d’un “standard” pérenne


Contexte

NG

Le choix de WordPressUn moteur de blog simple, puissant et facilement adaptable

mise à jour fréquente (sécurité !)

communauté énorme, socle de ressources inégalé

simplicité et convivialité des outils d’admin

bonne architecture : logique et graphisme bien cloisonnés > évolution et pérennité


Conception et production

GB

Le mode de développementOn n’est jamais mieux servi que par soi-même

comprendre le principe de fonctionnement d’un thème et en créer un nouveau en partant de « zéro » (ou presque)

compléter les fonctionnalités manquantes avec des plugins



GB

La conception et le design d’interfaceFaire un portail à partir d’un blog

benchmark des possibilités offertes par WordPress et ses plugins

définition de l’arborescence et des différents gabarits en les optimisant pour WordPress

durée totale : 27 jours/homme



GB

Le développement sous WordPressS’approprier l’outil et pousser très loin la customisation

création des catégories pour traduire l’arborescence

gestion des pages de catégorie et des pages d’article grâce aux marqueurs conditionnels

personnalisation par l’utilisation de champs personnalisés

durée totale : 45 jours/homme



NG

Le mode de développementAller vite et bien

peu de temps et pas d’expertise css/xhtml + WordPress

idée de partir d’un template gratuit et de le customiser

gratuits pas satisfaisants > achat d’un template, puis customisation

deadline : sortie CS4



NG

Le développement sous WordPressAdapter la logique de WP à celle d’un portail

création des catégories pour traduire l’ancienne arborescence

décision de réduire le nombre de sous-catégories au profit des tags

favoriser une navigation transversale par tags et extensions type “similar posts”



GB

Les ressources et outilsQuelques bons liens, du temps et de la curiosité !

WebDesignerWall (http://www.webdesignerwall.com)

Fran6art (http://www.fran6art.com)

css4design (http://www.css4design.com)

...et bien sûr Google, notamment pour trouver des plugins

les indispensables

le Codex (http://codex.wordpress.org)

les forums de WordPress Francophone (http://www.wordpress-fr.net)

ceux qui m’ont bien dépanné :-)

http://www.webdesignerwall.com

http://www.webdesignerwall.com

http://www.fran6art.com

http://www.fran6art.com

http://www.css4design.com

http://www.css4design.com

http://codex.wordpress.org

http://codex.wordpress.org

http://www.wordpress-fr.net

http://www.wordpress-fr.net


Dans le détail

la plupart du temps, on fera appel à de simples fonctions php au nom plus ou moins explicite, qui fonctionnent comme des raccourcis

grosso modo, API divisée en 3 grandes catégories principales :

- Template Tags : pour créer un thème, elles vont générer du html dans vos pages

- les “core functions” : pour gérer de la logique, créer des requêtes personnalisées, faire du traitement de données...

- Plugin API : pour créer ses propres extensions

La plupart des fonctions prennent des paramètres, qui décuplent leur puissance

L’API de WordPress“Deux ou trois choses que je sais d’elle”


Dans le détail

noms intuitifs : the_title(), the_author(), the_excerpt()...Permettent d’écrire du html, équivalents d’un “echo” en php

la plupart du temps s’utilisent au sein de “la Boucle” ou “the Loop”

exemple : archive.php

Templates tagsVos meilleurs amis


Dans le détail

permet de parcourir tous les posts récupérés dans une requête et de leur appliquer le traitement voulu

ZE LoopSimple et puissant

exemple : static.php


Dans le détail

permettent d'intégrer des fichiers du thèmes dans une page, équivalents à un copier/coller

Sous forme de fonctions :

Include tagsIndispensables pour l’optimisation

exemple : archive.php

ou personnalisés :

intérêt : modularité du thème, réutilisation d'éléments redondants, centralisation de code ou d'éléments graphiques, MAJ


Dans le détail

permettent d'effectuer des tests dans des structures conditionnelles de type if ... elseif … else

renvoient true ou false

exemple : is_home() > si je suis sur la home alors, j'affiche tel module avec un include

Conditional tagsIndispensables pour introduire de la variété

exemple : header.php


Dans le détail

conflit entre extensions utilisant librairies AJAX (JQuery, Scriptaculous...) > problèmes de versioning ou d'incompatibilité entre librairies rendent inutilisables certaines extensions

personnalisation des urls > soucis pour ajouter ses propres variables d'url, urlrewriting de WP un peu contraignant

exemple : nécessité de pouvoir passer une id au swf du module webTV pour l’ouvrir sur une émission donnée+ the_permalink() pas customisable

solution trouvée (un peu boiteuse) : une fonction custom_permalink(pId) qui va récupérer un champ personnalisé archiveId

autre piste : overrider la fonction the_permalink() de WP ...

Quelques problèmes...Tout n’est pas rose au royaume de WordPress (hélas !)


Dans le détail

L’architecture du site

recomposition de l’arborescence du site à l’aide des catégories

chaque rubrique du site correspond à une catégorie mère

chaque sous-partie d’une rubrique correspond à une sous-catégorie

utilisation de gabarits personnalisés grâce au marqueur de modèle in_category

4 variantes de category.php, 6 variantes de archive.php et 20 variantes de single.php

cat. 7 cat. 8 cat. 5 cat. 4 cat. 6 cat. 3 cat. 9

7 sous-cat. 5 sous-cat. 7 sous-cat. 4 sous-cat. 5 sous-cat. 3 sous-cat.7 sous-cat.


Dans le détail

La rubrique « L’emploi »

4 sous-parties

redirection par défaut vers la sous-partie « Toutes les offres » qui liste les dernières offres d’emploi (grâce à la Boucle)

chaque offre d’emploi est taguée pour permettre une navigation alternative par métier (nuage de mots-clés)

détail d’une offre d’emploi = un exemple concret d’une utilisation poussée des champs personnalisés

originalité : chaque étape du process de dépôt d’une offre d’emploi correspond à un article d’une même catégorie


Dans le détail

category-4.php

cat. 4

cat. 17 cat. 15 cat. 50 cat. 53

category-17.php

redirection automatique

archive-15.php archive-50.php archive-53.php

single-15.php

redirectionautomatique

single-50.php

Architecture de la rubrique « L’emploi »


single-53.php


archive-17.php

navigationpar tags

Liste des dernières offres

Offrespar métiers

Formulairedépôt offre

Détail charte emploi

Détail NetworkingInteractif

single-17.php Détail d’uneoffre d’emploi

accèsdirect


Dans le détail

L’article « Offre d’emploi »

besoin d’une mise forme très spécifique, très différente d’un article classique

utilisation d’une variante de single.php

la plupart des informations sont associées à des champs personnalisés (14 champs)

avantages = grande souplesse d’utilisation de l’information dans la page + possibilité de réutiliser une petite partie (très ciblée) de l’information ailleurs dans le site

inconvénients = le corps de l’article est vide (problématique pour le moteur de recherche) + saisie fastidieuse de chaque nouvelle offre d’emploi


Dans le détail

Le formulaire de dépôt d’une offre d’emploi

chaque étape du formulaire est un article de la sous-catégorie (5 articles)

Partie communeau gabarit

Partie gérée parchamp personnalisé

un champ personnalisé est utilisé pour insérer le code HTML propre à chaque étape


Dans le détail

La page d’accueil

index.php

utilisation de la fonction WP_Query pour récupérer les derniers articles (modules « À la Une », « Emploi », « Membres et partenaires », « Actualité », « Publications »)

boucle incrémentée pour trier les articles (module « Actualité »)

utilisation des champs personnalisés pour faire remonter les infos les plus pertinentes (et permettre une mise en forme spécifique)


Dans le détail

En vrac !

navigationle menu et le sous menu ne sont pas généré dynamiquement mais leur apparence (couleur, graisse) est géré grâce à des marqueurs conditionnels

construction des URLs

Préfixe des catégoriesRépertoire hébergement

CSSen plus des CSS de base, chaque rubrique du site possède sa propre CSS qui appelée grâce à un marqueur conditionnel (permet de ne charger que les styles des rubriques que l’on visite)


C’est fini !

GB NG

organiser et promouvoir les métiers du design numérique

Merci !

Technology

Personnaliser un thème sous Wordpress