Architecture de l'information pour WordPress
-
Upload
benjamin-lupu -
Category
Software
-
view
3.765 -
download
0
Transcript of Architecture de l'information pour WordPress
![Page 1: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/1.jpg)
![Page 2: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/2.jpg)
Architecturede l’information
pour
![Page 3: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/3.jpg)
2
L'architecture de l'information(AI) est l'art d'exprimer unmodèle ou un conceptd'information utilisé dans desactivités exigeant des détailsexplicites dans des systèmescomplexes.
![Page 4: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/4.jpg)
3
Mark A Coleman
![Page 5: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/5.jpg)
4
Organiser vos contenus
![Page 6: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/6.jpg)
5
Organiser vos contenuspour que l’utilisateur trouve cequ’il cherche
![Page 7: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/7.jpg)
6
Organiser vos contenuspour que l’utilisateur trouve ceque voudriez qu’il trouve
![Page 8: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/8.jpg)
7
Organiser vos contenuspour que vous puissiez créer etclasser vos contenusefficacement
![Page 9: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/9.jpg)
8
Organiser vos contenuspour que vos contenus soientpérennes et évolutifs
![Page 10: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/10.jpg)
9
Les symptômessouvent on se lance rapidement dans :• une arborescence• la définition des onglets de navigation,
du fil d’Ariane…
Tout est simple… au début
![Page 11: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/11.jpg)
![Page 12: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/12.jpg)
![Page 13: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/13.jpg)
12
Et puis…
• On découvre des défauts de conceptionau moment de la saisie
• On a du mal à choisir les modes denavigation ou ils ne fonctionnent pas
• On est bloqué au moment d’ajouterune rubrique
![Page 14: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/14.jpg)
13
WordPress offre un cadre riche etefficace à l’architecture del’information.
L’idée est d’en tirer le maximum.
![Page 15: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/15.jpg)
14
Systèmes de navigation
Classer les contenus
Structurer les contenus
![Page 16: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/16.jpg)
15
Systèmes de navigation
Classer les contenus
Structurer les contenus
![Page 17: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/17.jpg)
Structurer voscontenus
16
![Page 18: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/18.jpg)
17
Le plus souvent, le format estdéfini par les champs quidécrivent le contenu
• Titre• Extrait• Texte• Auteur• Image à la une
Je suis un article
![Page 19: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/19.jpg)
18
Le plus souvent, le format estdéfini par les champs quidécrivent le contenu
• Titre• Extrait• Texte• Auteur• Image à la une
Champs par défaut
![Page 20: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/20.jpg)
19
? ?
?
Image à la une
Texte
Titre
Extrait
![Page 21: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/21.jpg)
20
?
?
Image à la une
• La taille peut êtreintégrée au texte
• Elle peut être dansun champ à part
• Elle peut être dans2 champs(longueur etlargeur)
![Page 22: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/22.jpg)
21
?
?
Image à la une
En créant 2 champs,on se donne lapossibilité de laisserl’utilisateur affichertoutes les tablesd’une certainelargeur (parexemple).
![Page 23: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/23.jpg)
22
Dans WordPress, on utilise leschamps personnalisés pourajouter des champs à un typecontenu
![Page 24: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/24.jpg)
23
On peut ajouter des champspersonnalisés :• à la main• avec une extension maison• en utilisant des extensions spécialisées
comme Advanced Custom Fields
![Page 25: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/25.jpg)
24
CléValeur
![Page 26: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/26.jpg)
25
Advanced Custom Fields
![Page 27: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/27.jpg)
26
![Page 28: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/28.jpg)
27
{Bonus} N’ajoutez pas vos champspersonnalisés avec un thème.
Vos contenus doivent êtreindépendants de l’apparence dusite. Vous me remercierez à laprochaine refonte ;-)
![Page 29: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/29.jpg)
28
{Bonus} N’abusez pas des champspersonnalisés, ils alourdissent lasaisie. Si c’est juste une questiond’affichage, basez-vous sur uncode HTML bien structuré etéventuellement des shortcodes.
![Page 30: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/30.jpg)
Identifier voscontenus
29
![Page 31: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/31.jpg)
30
Faire la liste de chaque type decontenu• Article d’actualité• Fiche métier• Fiche beauté• Recette de cuisine• 10 conseils santé• Tutoriel• Biographie auteur• Conférence• Offre d’emploi
![Page 32: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/32.jpg)
31
{Bonus} contenu = article.
Une offre d’emploi est uncontenu. C’est aussi le cas desfiches produits, de la bio d’unconférencier…
![Page 33: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/33.jpg)
32
Bien identifier un type decontenu
• Article d’actualité politique• Article d’actualité culturelle• Article d’actualité économique
Un type de contenu sedistingue par son format
![Page 34: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/34.jpg)
33
Par défaut, WordPress met àdisposition 2 types de contenus :les articles et les pages.
Les articles s’empilent par ordre depublication.
![Page 35: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/35.jpg)
34
Par défaut, WordPress met àdisposition 2 types de contenus :les articles et les pages.
Les pages sont liées les unes aux autres etforment une arborescence.
![Page 36: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/36.jpg)
35
Les articles et les pages sont unhéritage des débuts deWordPress.
Articles de blog et pages statiquescomme la page à propos.
![Page 37: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/37.jpg)
36
Les articles et les pages sont unhéritage des débuts deWordPress.
Aucun problème pour les utiliser telsquels. Mais vous pouvez aussi décider deles détourner.
![Page 38: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/38.jpg)
37
Les articles et les pages peuventêtre étendus avec des champspersonnalisés.
![Page 39: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/39.jpg)
38
On peut ajouter d’autres types decontenus
Les types de contenupersonnalisés.
![Page 40: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/40.jpg)
39
Les types de contenupersonnalisés peuvent eux aussiêtre étendus avec des champspersonnalisés.
On peut donc avoir un format de contenupour chaque type de contenupersonnalisé.
![Page 41: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/41.jpg)
40
Ex. de type de contenu personnalisé
![Page 42: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/42.jpg)
41
![Page 43: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/43.jpg)
42
{Bonus} Lorsque vous ajoutez untype de contenu personnalisé,WordPress crée tous les écransd’administration nécessairesautomatiquement \o/.
![Page 44: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/44.jpg)
43
Comment faire ?
• Une liste de tous les types de contenuprécisant comment le réaliser dansWordPress
• Pour chaque type de contenu, la listede ses champs (avec éventuellementses contraintes)
![Page 45: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/45.jpg)
44
Comment faire ?
• Une ou plusieurs extensions en charged’ajouter les types de contenuspersonnalisés et les champspersonnalisés
![Page 46: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/46.jpg)
Classer vos contenus
45
![Page 47: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/47.jpg)
46
On utilise des taxonomies
![Page 48: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/48.jpg)
47
Mark A Coleman
![Page 49: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/49.jpg)
48
On utilise des taxonomies desplans de classement.
Par défaut, WordPress fournit lestaxonomies Catégories et Étiquettes pourles articles.
![Page 50: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/50.jpg)
49
On utilise des taxonomies desplans de classement.
Les Catégories forment une arborescenceet les Étiquettes sont des mots-clés.
![Page 51: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/51.jpg)
50
Les taxonomies par défautde WordPress
![Page 52: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/52.jpg)
51
L’écran d’administrationdes catégories
![Page 53: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/53.jpg)
52
A l’origine,
Catégories = navigation principale
Étiquettes = navigation secondaireaccessible depuis les articles
![Page 54: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/54.jpg)
53
{Bonus} Taxonomie = navigation
Un système de navigation peutcombiner plusieurs taxonomies.
![Page 55: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/55.jpg)
54
Systèmes de navigation
Taxonomies
Types de contenu
![Page 56: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/56.jpg)
55
C’est à vous de décider du rôleque jouera chaque taxonomie.
![Page 57: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/57.jpg)
56
Pour chaque élément d’unetaxonomie, vous pouvez afficherles contenus qui lui sontrattachés.
Ex. Afficher les contenus de la CatégorieActualité.
![Page 58: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/58.jpg)
57
On peut ajouter des taxonomiespersonnalisées• Métiers• Pays• Matériaux• Familles d’animaux• Âges• Villes• Peintures• Types de cuisine• Tailles de bateaux
![Page 59: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/59.jpg)
58
Ex. de taxonomie personnalisée
![Page 60: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/60.jpg)
59
Les taxonomies peuvent êtrepartagées entre plusieurs typesde contenu.
Ex. les Catégories peuvent être partagéesentre les Articles et les Événements.
![Page 61: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/61.jpg)
60
Partager une taxonomie
![Page 62: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/62.jpg)
61
Les taxonomies sont desformidables outils pourregrouper les contenus quel quesoient leur types.
![Page 63: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/63.jpg)
62
Ça permet d’avoir des listesmélangeant plusieurs types decontenu.
Ex. On pourra afficher les Articles et lesÉvénements pour une Catégorie donnée.
![Page 64: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/64.jpg)
63
{Bonus} Lorsque vous ajoutez unetaxonomie personnalisée,WordPress crée tous les écransd’administration nécessairesautomatiquement \o/.
![Page 65: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/65.jpg)
64
Comment faire ?
• Listez les taxonomies disponibles pourchaque type de contenu
• Définissez comment chaque système denavigation exploite vos taxonomies etvos types de contenu.
![Page 66: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/66.jpg)
Quelques pièges
65
![Page 67: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/67.jpg)
66
• Évitez les recouvrements entre leschamps personnalisés, les types decontenu et les taxonomies.
![Page 68: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/68.jpg)
67
• Ne confondez pas taxonomie etnavigation.
Une navigation peut exploiter plusieurstaxonomies et avoir des libellésdifférents.
![Page 69: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/69.jpg)
68
• Ne confondez pas taxonomie etnavigation.
Les navigations sont destinées auxutilisateurs. Les taxonomies servent àorganiser vos contenus de manièrepérenne.
![Page 70: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/70.jpg)
69
• Prenez l’habitude d’avoir unetaxonomie principale sans multi-indexation – pratique pour l’analyticsnotamment.
![Page 71: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/71.jpg)
70
• Chaque élément d’une taxonomie doitêtre utile.
Évitez les redondances et les élémentsauxquels aucun contenu n’est rattaché –essentiel pour le SEO !
![Page 72: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/72.jpg)
71
Il est courant que certainesparties de contenu soientpartagées par plusieurscontenus.
Ex. la définition d’un mot, l’étape d’unerecette de cuisine…
![Page 73: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/73.jpg)
72
• Évitez de répéter un même contenu àplusieurs endroits
Vous pouvez imbriquer vos contenus oules lier les uns aux autres (ex. en utilisantun shortcode).
![Page 74: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/74.jpg)
Aller plus loin
73
![Page 75: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/75.jpg)
74
Les évolutions de WordPress
• Ex. Depuis WordPress 4.4 on peutajouter des champs personnalisés pourles taxonomies \o/.
>>> 16:30 Taxonomy Term Meta par Matt Perry
![Page 76: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/76.jpg)
75
Les méthodes pour :
• créer des systèmes de navigationefficaces
• hiérarchiser ces moyens de navigation
• trouver les termes que vontcomprendre vos utilisateurs
![Page 77: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/77.jpg)
76
![Page 78: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/78.jpg)
77
Le suivi statistique de l’audienceet de la production de contenupour vérifier :
• que l’organisation des contenus est bienexploitée
• que les systèmes de navigationremplissent leur rôle
![Page 79: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/79.jpg)
78
Benjamin LUPUDirecteur digital Jeune Afrique
@benjaminlupu
Mobile (WP-AppKit)AnalyticsUXDéveloppementUXMarketingProjets
![Page 80: Architecture de l'information pour WordPress](https://reader031.fdocument.pub/reader031/viewer/2022020203/587e1c501a28abbc2e8b6407/html5/thumbnails/80.jpg)
79
Mark A ColemanMerci